Search completed in 1.17 seconds.
<center>: The Centered Text element (obsolete) - HTML: Hypertext Markup Language
the obsolete html c
enter element (<c
enter>) is a block-level element that displays its block-level or inline contents c
entered horizontally within its containing element. the container is usually, but isn't required to be, <body>. this tag has been deprecated in html 4 (and xhtml 1) in favor of the css text-align property, which can be applied to the <div> element or to an individual <p>. for c
entering blocks, use other css properties like margin-left and margin-right and set them to auto (or set margin to 0 auto). dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. example 1 <c
enter>this text will be c
entered. ...
...>. for c
entering blocks, use other css properties like margin-left and margin-right and set them to auto (or set margin to 0 auto). dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. example 1 <c
enter>this text will be c
entered. <p>so will this paragraph.</p></c
enter> example 2 (css alternative) <div style="text-align:c
enter">this text will be c
entered. <p>so will this paragraph.</p></div> example 3 (css alternative) <p style="text-align:c
enter">this line will be c
entered.<br> and so will this line.</p> note applying text-align:c
enter to a <div> or <p> element c
enters the contents of those elements while leaving their overall dimensions unchanged. ...
Element: mouseenter event - Web APIs
here 4 events are sent to the four elements of the hierarchy when the pointer reaches the text. ...
...here 4 events are sent to the four elements of the hierarchy when the pointer reaches the text. ...
...here 4 events are sent to the four elements of the hierarchy when the pointer reaches the text. ...
...And 9 more matches
Document: pointerenter event - Web APIs
the pointer
enter event fires when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown). ...
... the pointer
enter event fires when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown). ...
...e is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown). ...
...And 4 more matches
GlobalEventHandlers.ondragenter - Web APIs
a global event handler for the drag
enter event. syntax var drag
enterhandler = targetelement.ondrag
enter; return value drag
enterhandler the drag
enter event handler for element targetelement. example this example demonstrates using the ondrag
enter attribute handler to set an element's drag
enter event handler. <!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget...
...on dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function drag
enter_handler(ev) { console.log("drag
enter"); // change the source element's background color for
enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target el...
...nge the target element's background color to visually indicate // the drag ended. ...
...And 4 more matches
HTMLElement: pointerenter event - Web APIs
the pointer
enter event fires when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown). ...
... the pointer
enter event fires when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown). ...
... of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown). ...
...And 3 more matches
JS_EnterLocalRootScope
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. description scoped local root management allows native functions, getter/setters, etc. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. description scoped local root management allows native functions, getter/setters, etc. ...
.../setters, etc. to avoid calling js_addroot and js_removeroot to manage global roots temporarily. js_addroot roots a variable, ensuring that whatever the variable points to at any given moment is protected from gc. by contrast, local root scopes protect newly-created objects, doubles, and strings. there is no need to tell the js engine about each variable that may point to such a value. ...
...And 2 more matches
JS_EnterCompartment
this article covers features introduced in spidermonkey 24 note: the preferred way of changing a context's current compartment is using jsautocompartment.
enter a different compartment on the given context, so that objects in that compartment can be accessed. syntax jscompartment * js_
entercompartment(jscontext *cx, jsobject *target); name type description cx jscontext * the context on which a cross-compartment call is needed. target jsobject * the object in a different compartment to be accessed. ...
...so that objects in that compartment can be accessed. syntax jscompartment * js_
entercompartment(jscontext *cx, jsobject *target); name type description cx jscontext * the context on which a cross-compartment call is needed. target jsobject * the object in a different compartment to be accessed. this implicitly identifies the compartment to be
entered. description every jscontext has a current compartment. any access to an object in a different compartment must be bracketed by calling js_
entercompartment and js_leavecompartment. on success, js_
entercompartment returns a pointer to the previously
entered compartment. ...
...mplicitly identifies the compartment to be
entered. description every jscontext has a current compartment. any access to an object in a different compartment must be bracketed by calling js_
entercompartment and js_leavecompartment. on success, js_
entercompartment returns a pointer to the previously
entered compartment. to return to that compartment, pass it to js_leavecompartment. js_
entercompartment is infallible, so a null return value doesn't indicate failure. ...
...nt. any access to an object in a different compartment must be bracketed by calling js_
entercompartment and js_leavecompartment. on success, js_
entercompartment returns a pointer to the previously
entered compartment. to return to that compartment, pass it to js_leavecompartment. js_
entercompartment is infallible, so a null return value doesn't indicate failure. ...
PR_CEnterMonitor
enters the lock associated with a cached monitor. syntax #include <prcmon.h> prmonitor* pr_c
entermonitor(void *address); parameter the function has the following parameter: address a reference to the data that is to be protected by the monitor. this reference must remain valid as long as there are monitoring operations being performed. returns the function returns one of the following values: if successful, the function returns a pointer to the prmonitor associated with the value specified in the address parameter. if unsuccessful (the monitor cache needs to be expanded and the system is out of memory), the function returns null. ...
... remain valid as long as there are monitoring operations being performed. returns the function returns one of the following values: if successful, the function returns a pointer to the prmonitor associated with the value specified in the address parameter. if unsuccessful (the monitor cache needs to be expanded and the system is out of memory), the function returns null. description pr_c
entermonitor uses the value specified in the address parameter to find a monitor in the monitor cache, then
enters the lock associated with the monitor. if no match is found, an available monitor is associated with the address and the monitor's entry count is incremented (so it has a value of one). if a match is found, then either the calling thread is already in the monitor (and this is a reentrant ca...
...f a match is found, then either the calling thread is already in the monitor (and this is a reentrant call) or another thread is holding the monitor's mutex. in the former case, the entry count is simply incremented and the function returns. in the latter case, the calling thread is likely to find the monitor locked by another thread and waits for that thread to exit before continuing. note: pr_c
entermonitor and pr_cexitmonitor must be paired--that is, there must be an exit for every entry--or the object will never become available for any other thread. ...
JS_EnterCrossCompartmentCall
obsolete since jsapi 18this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8.1 js_
entercrosscompartmentcall has been removed in bug 786068. use js_
entercompartment instead.
enter a different compartment on the given context, so that objects in that compartment can be accessed. syntax jscrosscompartmentcall * js_
entercrosscompartmentcall(jscontext *cx, jsobject *target); name type description cx jscontext * the context on which a cross-compartment call is needed. target jsobject * the object in a different compartment to be accessed. this implicitly identifies t...
... in that compartment can be accessed. syntax jscrosscompartmentcall * js_
entercrosscompartmentcall(jscontext *cx, jsobject *target); name type description cx jscontext * the context on which a cross-compartment call is needed. target jsobject * the object in a different compartment to be accessed. this implicitly identifies the compartment to be
entered. description every jscontext has a current compartment. any access to an object in a different compartment must be bracketed by calling js_
entercrosscompartmentcall and js_leavecrosscompartmentcall. on success, js_
entercrosscompartmentcall returns a pointer to a jscrosscompartmentcall object that must be passed to js_leavecrosscompartmentcall. otherwise it returns null. see also ...
...scontext has a current compartment. any access to an object in a different compartment must be bracketed by calling js_
entercrosscompartmentcall and js_leavecrosscompartmentcall. on success, js_
entercrosscompartmentcall returns a pointer to a jscrosscompartmentcall object that must be passed to js_leavecrosscompartmentcall. otherwise it returns null. ...
GlobalEventHandlers.onpointerenter - Web APIs
the onpointer
enter property of the globaleventhandlers mixin is an eventhandler that processes pointer
enter events. syntax targetelement.onpointer
enter =
enterhandler; var
enterhandler = targetelement.onpointer
enter; value
enterhandler the pointer
enter event handler for element targetelement. example this example shows two ways to use onpointer
enter to set an element's pointer
enter event handler. <html> <script> function
enterhandler(ev) { // process the pointer
enter event } function init() { let el = document.getelementbyid('target1'); el.onpointer
enter =
enterhandler; } </script> <body onload="init();"> <div id="target1"> touch me ... </div> <div id="target2" onpointer
enter="
enterhandler(event)"> touch me ... </div> </body> </html> specifications specifica...
...nction init() { let el = document.getelementbyid('target1'); el.onpointer
enter =
enterhandler; } </script> <body onload="init();"> <div id="target1"> touch me ... </div> <div id="target2" onpointer
enter="
enterhandler(event)"> touch me ... </div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointer
enter' in that specification. recommendation non-stable version pointer eventsthe definition of 'onpointer
enter' in that specification. obsolete initial definition ...
Center an element - CSS: Cascading Style Sheets
in this recipe you will see how to c
enter one box inside another. c
entering both horizontally and vertically was difficult before flexbox, with the box alignment properties it is now straightforward. requirements to place an item into the c
enter of another box horizontally and vertically. recipe download this example choices made to c
enter one box inside another we make the containing box a flex container. then set align-items to c
enter to perform c
entering on the block axis, and justify-content to c
enter to perform c
entering on the inline axis. in the future we may be able to c
enter elements without needing to turn the parent into a flex container, as the box alignment properties used here are specified to apply to block layout too. however, support is currently limited for box a...
... perform c
entering on the block axis, and justify-content to c
enter to perform c
entering on the inline axis. in the future we may be able to c
enter elements without needing to turn the parent into a flex container, as the box alignment properties used here are specified to apply to block layout too. however, support is currently limited for box alignment properties on block layout, so currently c
entering using flexbox is the most robust way to achieve this. ...
mozilla::MonitorAutoEnter
mozilla::monitorauto
enter is an raii helper for mozilla::monitor. it is designed to make using mozilla::monitor safer and easier. to use mozilla::monitorauto
enter, declare and initialize it with a reference to a mozilla::monitor. the mozilla::monitorauto
enter constructor will
enter() the underlying mozilla::monitor automatically. when the mozilla::monitorauto
enter goes out of scope, its destructor will exit() the underlying mozilla::monitorauto
enter. important: when a mozilla::monitorauto
enter is live on the stack, your code is guaranteed to own the underlying mozilla::monitor. constructors monitorauto
enter( in mozilla::monitor& monitor; ); this parameter is a reference so as to guarantee that your code has already properly constructed the mozilla::monitor. methods wait() nsresult wait( ...
PR_EnterMonitor
enters the lock associated with a specified monitor. syntax #include <prmon.h> void pr_
entermonitor(prmonitor *mon); parameter the function has the following parameter: mon a reference to an existing structure of type prmonitor. description when the calling thread returns, it will have acquired the monitor's lock. attempts to acquire the lock for a monitor that is held by some other thread will result in the caller blocking. the operation is neither timed nor interruptible. if the monitor's entry count is greater than zero and the calling thread is recognized as the holder of the lock, pr_
entermonitor increments the entry count by one and returns. if the entry count is greater than zero and the calling thread is not recognized as the holder of the lock, the thread is blocked unti...
nsIDOMDesktopNotificationCenter
the nsidomdesktopnotificationc
enter interface implements the dom navigator.moznotification interface. see that page for details. ...
Document: dragenter event - Web APIs
the drag
enter event is fired when a dragged element or text selection
enters a valid drop target. the target object is the immediate user selection (the element directly indicated by the user as the drop target), or the <body> element. bubbles yes cancelable yes default action reject immediate user selection as potential target element. interface dragevent event handler property ondrag
enter examples see the drag event for example code or this jsfiddle demo. specifications specification status comment html living standardthe definition of 'drag
enter' in that specification. living standard ...
GlobalEventHandlers.onmouseenter - Web APIs
the onmouse
enter property of the globaleventhandlers mixin is the eventhandler for processing mouse
enter events. the mouse
enter event is fired when a pointing device (usually a mouse) is moved over the element that has the listener attached. syntax element.onmouse
enter = handlerfunction; var handlerfunction = element.onmouse
enter; handlerfunction is either null or a javascript function specifying the handler for the event. specification specification status comment html living standardthe definition of 'onmouse
enter' in that specification. living standard ...
MathML Torture Test
yripple.com/samples/83/2259f5bfe3.png" width="250" height="66" alt="texbook, 18.23" /></td> <td> <math display="block"> <mrow> <mi>f</mi> <mo stretchy="false">(</mo> <mi>x</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow> <mo>{</mo> <mtable> <mtr> <mtd columnalign="c
enter"> <mrow> <mn>1</mn> <mo>/</mo> <mn>3</mn> </mrow> </mtd> <mtd columnalign="left"> <mrow> <mtext>if </mtext> <mn>0</mn> <mo>≤</mo> <mi>x</mi> <mo...
...ign="left"> <mrow> <mtext>if </mtext> <mn>0</mn> <mo>≤</mo> <mi>x</mi> <mo>≤</mo> <mn>1</mn> <mo>;</mo> </mrow> </mtd> </mtr> <mtr> <mtd columnalign="c
enter"> <mrow> <mn>2</mn> <mo>/</mo> <mn>3</mn> </mrow> </mtd> <mtd columnalign="c
enter"> <mrow> <mtext>if </mtext> <mn>3</mn> <mo>≤</mo> <mi>x</mi> <...
...n="c
enter"> <mrow> <mtext>if </mtext> <mn>3</mn> <mo>≤</mo> <mi>x</mi> <mo>≤</mo> <mn>4</mn> <mo>;</mo> </mrow> </mtd> </mtr> <mtr> <mtd columnalign="c
enter"> <mn>0</mn> </mtd> <mtd columnalign="left"> <mtext>elsewhere.</mtext> </mtd> </mtr> </mtable> </mrow> </mrow> </math> </td></tr> <tr> <td>19</td> <td><img src="https://udn.realityripple.com/samples/bf/4ccasc768c.png" width="101" height="44" alt="texboo...
...And 66 more matches
<input type="tel"> - HTML: Hypertext Markup Language
unlike <input type="email"> and <input type="url"> , the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world. 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. ...
...ntribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. despite the fact that inputs of type tel are functionally identical to standard text inputs, they do serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimized for
entering phone numbers. using a specific input type for telephone numbers also makes adding custom validation and handling of phone numbers more convenient. note: browsers that don't support type tel fall back to being a standard text input. value a domstring representing a telephone number, or empty events change and input supported common attributes autocomplet...
...e following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum length, in utf-16 characters, to accept as a valid input minlength the minimum length that is considered valid for the field's contents pattern a regular expression the
entered value must match to pass constraint validation placeholder an example value to display inside the field when it has no value readonly a boolean attribute which, if present, indicates that the field's contents should not be user-editable size the number of characters wide the input field should be onscreen list the values of the list attribute is the i...
...And 21 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
ult. <input type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected. <input type="checkbox" name="checkbox"/> color a control for specifying a color; opening a color picker when active in supporting browsers. <input type="color" name="color"/> html5 date a control for
entering a date (year, month, and day, with no time). opens a date picker or numeric wheels for year, month, day when active in supporting browsers. <input type="date" name="date"/> html5 datetime-local a control for
entering a date and time, with no time zone. opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. <in...
... a control that is not displayed but whose value is submitted to the server. there is an example in the next column, but it's hidden! image a graphical submit button. displays an image defined by the src attribute. the alt attribute displays if the image src is missing. <input type="image" name="image" src="" alt="image input"/> month a control for
entering a month and year, with no time zone. <input type="month" name="month"/> html5 number a control for
entering a number. displays a spinner and adds default validation when supported. displays a numeric keypad in some devices with dynamic keypads. <input type="number" name="number"/> html5 password a single-line text field whose value is obsc...
...e="number"/> html5 password a single-line text field whose value is obscured. will alert user if site is not secure. <input type="password" name="password"/> radio a radio button, allowing a single value to be selected out of multiple choices with the same name value. <input type="radio" name="radio"/> range a control for
entering a number whose exact value is not important. displays as a range widget defaulting to the middle value. used in conjunction min and max to define the range of acceptable values. <input type="range" name="range" min="0" max="25"/> html5 reset a button that resets the contents of the form to default values. not recommended. <input type="reset" name="reset"/> ...
...And 20 more matches
<input type="email"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid e-mail address or not. ...
... placeholder, readonly, required, size, and type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring which is automatically validated as conforming to e-mail syntax. more specifically, there are three possible value formats that will pass validation: an empty string ("") indicating that the user did not
enter a value or that the value was removed. a single properly-formed e-mail address. this doesn't necessarily mean the e-mail address exists, but it is at least formatted correctly. in simple terms, this means username@domain or username@domain.tld. there's more to it than that, of course; see validation for a regular expression that matches the e-mail address validation algorithm. if and only if th...
...tion list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid multiple whether or not to allow multiple, comma-separated, e-mail addresses to be
entered pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be li...
...And 19 more matches
<input type="url"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the input value is automatically validated to ensure that it's either empty or a properly-formatted url before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid url or not. on browsers that don't support inputs of type url, a url input falls back to being a standard text input. ...
...butes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange(). value the <input> element's value attribute contains a domstring which is automatically validated as conforming to url syntax. more specifically, there are two possible value formats that will pass validation: an empty string ("") indicating that the user did not
enter a value or that the value was removed. a single properly-formed absolute url. this doesn't necessarily mean the url address exists, but it is at least formatted correctly. in simple terms, this means urlscheme://restofurl. see validation for details on how urls are validated to ensure that they're formatted properly. additional attributes in addition to the attributes that operate on all <in...
...<datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. maxlength the maximum number of characters (as utf-16 code units) the user can
enter into the url input. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the url input has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text value of the field is greater than maxlength utf-16 code units long. constraint validation is...
...And 17 more matches
Index
cates. there is a classic engine that is very stable and works fine in all simple scenarios, for example if all (b) candidate issuer certificates have the same subject and issuer names and differ by validity period; however, it works only in a limited amount of more advanced scenarios. unfortunately, the world of certificates has become more complex in the recent past. new certificate authorities
enter the global pki market, and in order to get started with their business, they might make deals with established cas and receive so-called cross-signing-certificates. as a result, when searching for a trust path from (a) to a trusted anchor (root) certificate (z), the set of candidate issuer certificates might have different issuer names (referring to the second or higher issuer level). as a conseq...
...y newsgroup: mozilla.dev.tech.crypto 25 mozilla-jss jca provider notes newsgroup: mozilla.dev.tech.crypto 26 using jss jss newsgroup: mozilla.dev.tech.crypto 27 jss 4.4.0 release notes d the java security services (jss) team has released jss 4.4.0, which is a minor release. ...
... java security services (jss) team has released jss 4.4.0, which is a minor release. 28 nss 3.12.4 release notes <c
enter> 29 nss 3.12.5 release_notes this document was generated by genma teruaki on november 28, 2010 using texi2html 1.82. 30 nss 3.12.6 release notes no summary! 31 nss 3.12.9 release notes nss <c
enter> 2010-09-23</c
enter> <c
enter> newsgroup: mozilla.dev.tech.crypto</c
enter> 32 nss 3.14 release notes the nss team has released network security services (nss) 3.14, which is a minor release with the following new features: 33 nss 3.14.1 release notes network security services (nss) 3.14.1 is a patch release for nss 3.14. the bug fixes in nss 3.14.1 are...
...And 16 more matches
Color picker tool - CSS: Cascading Style Sheets
elect: 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') c
enter c
enter; 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: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradi...
... top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("https://mdn.mozillademos.org/files/5701/hue.png") c
enter; background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -o...
...th: 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: c
enter; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: c
enter; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-...
...And 16 more matches
<input type="number"> - HTML: Hypertext Markup Language
they include built-in validation to reject non-numerical entries. the browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. on browsers that don't support inputs of type number, a number input falls back to type text. value any floating-point number, or empty. ...
...ame document. the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. max the maximum value to accept for this input. if the value
entered into the element exceeds this, the element fails constraint validation. if the value of the max attribute isn't a number, then the element has no maximum value. this value must be greater than or equal to the value of the min attribute. min the minimum value to accept for this input. if the value of the element is less than this, the element fails constraint validation. if a value is specifi...
...the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data
entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. the default stepping value for number inputs is 1, allowing only integers to be
entered—unless the stepping base is not an integer. using number inputs <input type="number"> elements can help ...
...And 15 more matches
Index - Archive of obsolete content
i add-ons, code snippets, extensions, guide, needshelp, xpinstall this article describes how to sign your own firefox extensions with a code-signing certificate on a windows platform. it was developed from the linux article so you want to sign your xpi package? by mozdev group's pete collins. 300 signing an extension add-ons, administration, extensions, themes, xpinstall,
enterprise this article describes how to digitally sign your extension for firefox and thunderbird, with a code signing certificate for object signing. the following instructions also apply to a theme and other xpi files. 301 supporting search suggestions in search plugins add-ons, opensearch, search, search plugins firefox supports search suggestions in opensearch plugins; a...
...g code reviews. 363 autodial for windows nt necko, outdated_articles this document is intended to explain how the autodial helper feature implemented for bug 93002 works and why it works that way. ...
...n how the autodial helper feature implemented for bug 93002 works and why it works that way. ...
...And 14 more matches
Index - Web APIs
animations api returns or sets the playback rate of the animation. 77 animation.ready api, animation, experimental, property, ready, ready promise, reference, web animations, web animations api the read-only animation.ready property of the web animations api returns a promise which resolves when the animation is ready to play. a new promise is created every time the animation
enters the "pending" play state as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again. 78 animation.reverse() api, animation, interface, method, reference, web animations, reverse, waapi, web animations api the animation.reverse() method of the animation interface reverses the playback direction, meaning the animatio...
...o be read in the source view. 648 comment() api, comment, constructor, dom the comment() constructor returns a newly created comment object with the optional domstring given in parameter as its textual content. 649 compositionevent api, compositionevent, dom, event, reference the dom compositionevent represents events that occur due to the user indirectly
entering text. 650 compositionevent.compositionevent() api, compositionevent, constructor, reference the compositionevent() constructor creates a new compositionevent object instance. 651 compositionevent.data api, compositionevent, property, reference, data the data read-only property of the compositionevent interface returns the characters generated by the in...
.../or an ideal value the property should take on. in addition, you can specify the value as a simple long integer value, in which case the user agent does its best to match the value once all other more stringent constraints are met. 662 constraint validation api api, constraint validation, landing, reference the constraint validation api enables checking values that users have
entered into form controls, before submitting the values to the server. 663 convolvernode api, convolvernode, interface, reference, web audio api the convolvernode interface is an audionode that performs a linear convolution on a given audiobuffer, often used to achieve a reverb effect. a convolvernode always has exactly one input and one output. 664 convolvernode() ...
...And 12 more matches
Border-image generator - CSS: Cascading Style Sheets
{ margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: c
enter; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") c
enter left no-repeat; } .ui-input-sl...
...-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") c
enter left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") c
enter right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: c
enter; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /*****************...
...***********************************/ /*************************************************************************************/ /* * 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 c
enter; 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-select { heig...
...And 12 more matches
<input type="password"> - HTML: Hypertext Markup Language
the element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("•"). this character will vary depending on the user agent and os. 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. ...
...if the required property is specified, then the password edit box must contain a value other than an empty string to be valid. if the pattern attribute is specified, the content of a password control is only considered valid if the value passes validation; see validation for more information. note: the l...
...xlength, minlength, pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text editing control being used to
enter the password. if the user hasn't
entered anything yet, this value is an empty string (""). if the required property is specified, then the password edit box must contain a value other than an empty string to be valid. if the pattern attribute is specified, the content of a password control is only considered valid if the value passes validation; see validation for more information. note: the line feed (u+000a) and carriage return (...
...And 12 more matches
<input type="text"> - HTML: Hypertext Markup Language
contained in the text field. events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange(). value the value attribute is a domstring that contains the current value of the text
entered into the text field. you can retrieve this using the value property in javascript. let thetext = mytextinput.value; if no validation constraints are in place for the input (see validation for more details), the value may be an empty string (""). additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, text inputs support the followi...
...<datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. maxlength the maximum number of characters (as utf-16 code units) the user can
enter into the text input. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the text input has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text value of the field is greater than maxlength utf-16 code units long. constraint validation ...
...t input has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text value of the field is greater than maxlength utf-16 code units long. constraint validation is only applied when the value is changed by the user. minlength the minimum number of characters (as utf-16 code units) the user can
enter into the text input. this must be an non-negative integer value smaller than or equal to the value specified by maxlength. if no minlength is specified, or an invalid value is specified, the text input has no minimum length. the input will fail constraint validation if the length of the text
entered into the field is fewer than minlength utf-16 code units long. constraint validation is only appl...
...And 12 more matches
A first splash into JavaScript - Learn web development
px; margin: 0 auto; } .lastresult { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100. see if you can guess it in 10 turns or fewer. ...
...e a random number between 1 and 100. record the turn number the player is on. start it on 1. provide the player with a way to guess what the number is. once a guess has been submitted first record it somewhere so the user can see their previous guesses. next, check whether it is the correct number. if it is correct: display congratulations message. stop the player from being able to
enter more guesses (this would mess the game up). display control allowing the player to restart the game. if it is wrong and the player has turns left: tell the player they are wrong. allow them to
enter another guess. increment the turn number by 1. if it is wrong and the player has no turns left: tell the player it is game over. stop the player from being able to ...
... display control allowing the player to restart the game. ...
...And 11 more matches
HTML documentation index - HTML: Hypertext Markup Language
current element. the attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the keyboard). 9 autocapitalize autocapitalize, global attributes, html, reference the autocapitalize global attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is
entered/edited by the user. 10 class global attributes, html, reference the class global attribute is a space-separated list of the case-sensitive classes of the element. classes allow css and javascript to select and access specific elements via the class selectors or functions like the dom method document.getelementsbyclassname. 11 contenteditable editing, global a...
...e whole document. its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with css). 19 inputmode attribute, editing, forms, global attributes, html, input, reference, text, web, contenteditable, global, inputmode, text input the inputmode global attribute is an enumerated attribute that hints at the type of data that might be
entered by the user while editing the element or its contents. 20 is global attributes, html, reference, is the is global attribute allows you to specify that a standard html element should behave like a defined custom built-in element (see using custom elements for more details). 21 itemid attribute, global attribute, html, html microdata, microdata, reference, item...
...d or is invalid, no max value is applied. if the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission. 41 html attribute: maxlength attribute, attributes, constraint validation the maxlength attribute defines the maximum number of characters (as utf-16 code units) the user can
enter into an <input> or <textarea>. this must be an integer value 0 or higher. 42 html attribute: min attribute, attributes, constraint validation, min the min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. if the value of the element is less than this, the element fails constraint validation. this value must be less than o...
...And 11 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
r element. orient whether a box's contents will be vertically or horizontally arrayed depends on the elements in their initial state. you can explicitly set or change this layout using the orient attribute, with options for horizontal and vertical. align and pack the align and pack attributes both specify the layout of elements within a box. ...
...ents within a box. they can both take the values start (top or left), c
enter, end (bottom or right), or stretch (extend this element to match the element with the greatest height or width). the align attribute is defined as operating in the axis perpendicular to the orient attribute, while the pack attribute operates along the same axis as the orient attribute. figure 2 shows how setting align="c
enter" pack="start" on two elements will result in completely different output with the only difference being the value for orient. <box flex="1" align="end" pack="end"> <button label="happy"/> <button label="sad"/> </box> listing 2: how align and pack respond to orient figure 2: output from listing 2 flex elements ordinarily have fixed height and width. the flex attribute indicates that an ...
...cript or css rule will be written in such a way that they treat the value as true unconditionally if any value has been set. so when changing the attribute’s value using a dom function for example, do not use setattribute('disabled', false) — instead, use removeattribute('disabled'). tooltiptext use the tooltiptext attribute to display a brief explanatory tooltip above the element. ...
...And 10 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
attributes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontext
entered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, po...
...this should be one of the characters that appears in the label attribute for the element. autocompletepopup type: id the id of a popup el...
...s suggestions are searched. places-tag-autocomplete requires seamonkey 2.1 the user's places tags are searched. mydomain new in thunderbird 3 requires seamonkey 2.0 the user's email domain is suggested. history requires seamonkey 2.0 the user's url history is searched. form-history requires seamonkey 2.0 search the values that the user has
entered into form fields. file (linux only) the local file system is searched. gloda new in thunderbird 3 addrbook new in thunderbird 3 requires seamonkey 2.0 the user's address book is searched. ldap new in thunderbird 25 requires seamonkey 2.22 the user's ldap directory is searched. autocompletesearchparam new in thunderbird 2 re...
...And 10 more matches
Handling common HTML and CSS problems - Learn web development
of how such plugins generally work: install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above. go to atom's preferences... dialog (e.g. by choosing atom > preferences... on mac, or file > preferences... on windows/linux) and choose the install option in the left hand menu. in the search packages text field, type "lint" and press
enter/return to search for linting-related packages. you should see a package called lint at the top of the list. install this first (using the install button), as other linters rely on it to work. after that, install the linter-csslint plugin for linting css, and the linter-tidy plugin for linting html. after the packages have finished installing, try loading up an html file and a css file: you'll s...
...to download the video if even the html5 video player doesn't work, so at least the user can still access the video. html5 form elements also exhibit fallback qualities — html5 introduced some special <input> types for inputting specific information into forms, such as times, dates, colors, numbers, etc. ...
... — html5 introduced some special <input> types for inputting specific information into forms, such as times, dates, colors, numbers, etc. these are very useful, particularly on mobile platforms, where providing a pain-free way of
entering data is very important for the user experience. supporting platforms provide special ui widgets when these input types are used, such as a calendar widget for
entering dates. ...
...And 10 more matches
All keyboard shortcuts - Firefox Developer Tools
move to first node in the tree. home home home move to last node in the tree. end end end expand currently selected node right arrow right arrow right arrow collapse currently selected node left arrow left arrow left arrow (when a node is selected) move inside the node so you can start stepping through attributes. ...
...rst node in the tree. home home home move to last node in the tree. end end end expand currently selected node right arrow right arrow right arrow collapse currently selected node left arrow left arrow left arrow (when a node is selected) move inside the node so you can start stepping through attributes. ...
... arrow left arrow (when a node is selected) move inside the node so you can start stepping through attributes. ...
...And 10 more matches
Using CSS gradients - CSS: Cascading Style Sheets
336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); } using radial gradients radial gradients are similar to linear gradients, except that they radiate out from a central point. you can dictate where that central point is. you can also make them circular or elliptical. a basic radial gradient as with linear gradients, all you need to create a radial gradient are two colors. by default, the c
enter of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box: <div class="simple-radial"></div> div { width: 240px; height: 120px; } .simple-radial { background: radial-gradient(red, blue); } positioning radial color stops again like linear gradients, you can position each radial color stop with a percentage or absolute length. <d...
... } .simple-radial { background: radial-gradient(red, blue); } positioning radial color stops again like linear gradients, you can position each radial color stop with a percentage or absolute length. <div class="radial-gradient"></div> div { width: 120px; height: 120px; } .radial-gradient { background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); } positioning the c
enter of the gradient you can position the c
enter of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top. <div class="radial-gradient"></div> div { width: 120px; height: 240px; } .radial-gradient { background: radial-gradient(at 0% 30%, red 10px...
...0ff 50%); } sizing radial gradients unlike linear gradients, you can specify the size of radial gradients. possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default. example: closest-side for ellipses this example uses the closest-side size value, which means the size is set by the distance from the starting point (the c
enter) to the closest side of the enclosing box. <div class="radial-ellipse-side"></div> div { width: 240px; height: 100px; } .radial-ellipse-side { background: radial-gradient(ellipse closest-side, red, yellow 10%, #1e90ff 50%, beige); } example: farthest-corner for ellipses this example is similar to the previous one, except that its size is specified as farthest-corner, which ...
...And 10 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
%; margin: 0 0 0 -2px; 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: c
enter; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: c
enter; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .input[data-...
... .ui-color-picker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: c
enter; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; line-height: inherit; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("arrows.png") c
enter left no-repeat; } .ui-input-slider-right { bac...
...box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; line-height: inherit; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("arrows.png") c
enter left no-repeat; } .ui-input-slider-right { background: url("arrows.png") c
enter right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: c
enter; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui slider *...
...And 10 more matches
<input type="date"> - HTML: Hypertext Markup Language
the resulting value includes the year, month, and day, but not the time. the time and datetime-local input types support time and date+time input. 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 input ui generally varies from browser to browser; see browser compatibility for further details. in unsupported browsers, the control degrades gracefully to <input type="text">. ...
...fox date control looks like this: value a domstring representing a date in yyyy-mm-dd format, or empty events change and input supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasdate, valueasnumber. methods select(), stepdown(), stepup() value a domstring representing the date
entered in the input. the date is formatted according to iso8601, described in format of a valid date string in date and time formats used in html. you can set a default value for the input with a date inside the value attribute, like so: <input type="date" value="2017-06-01"> the displayed date format will differ from the actual value — the displayed date is formatted based on the locale of th...
...l attributes along with the attributes common to all <input> elements, date inputs have the following attributes: attribute description max the latest acceptable date min the earliest acceptable date step the stepping interval, when clicking up and down spinner buttons and validating the date max the latest date to accept. ...
...And 10 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop and most modern versions of mobile browsers having usable implementations. in other browsers, these degrade gracefully to simple <input type="text"> controls. ...
...re legitimate date/time values before letting them be delivered to the server, as well, but you shouldn't rely on this behavior since you can't easily predict it. for those of you not using a supporting browser, the chrome/opera datetime-local control looks like the below screenshot. clicking the down arrow on the right hand side brings up a date picker to allow you to choose a date; you have to
enter the time manually. the edge datetime-local control looks like the below; clicking the date and the time parts of the value bring up two separate pickers for you, so you can easily set both the date and the time. this is somewhat like having date and time widgets both created for you and merged into one. value a domstring representing a date and time (in the local time zone), o...
... merged into one. value a domstring representing a date and time (in the local time zone), or empty. events change and input supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasnumber. ...
...And 10 more matches
<input type="search"> - HTML: Hypertext Markup Language
these are functionally identical to text inputs, but may be styled differently by the user agent. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value a domstring representing the value contained in the search field. events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required, size. ...
...<datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. maxlength the maximum number of characters (as utf-16 code units) the user can
enter into the search field. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the search field has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text
entered into the field is greater than maxlength utf-16 code units long. minlength th...
...if no maxlength is specified, or an invalid value is specified, the search field has no maximum length. this value must also be greater than or equal to the value of minlength. the input will fail constraint validation if the length of the text
entered into the field is greater than maxlength utf-16 code units long. minlength the minimum number of characters (as utf-16 code units) the user can
enter into the search field. this must be a non-negative integer value smaller than or equal to the value specified by maxlength. if no minlength is specified, or an invalid value is specified, the search input has no minimum length. the search field will fail constraint validation if the length of the text
entered into the field is fewer than minlength utf-16 code units long. pattern the pattern at...
...And 10 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
utofill, completedefaultindex, crop, disableautocomplete, disableautocomplete, disabled, disablehistory, enablehistory, focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontext
entered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignorebl...
...s suggestions are searched. places-tag-autocomplete requires seamonkey 2.1 the user's places tags are searched. mydomain new in thunderbird 3 requires seamonkey 2.0 the user's email domain is suggested. history requires seamonkey 2.0 the user's url history is searched. form-history requires seamonkey 2.0 search the values that the user has
entered into form fields. file (linux only) the local file system is searched. gloda new in thunderbird 3 addrbook new in thunderbird 3 requires seamonkey 2.0 the user's address book is searched. ldap new in thunderbird 25 requires seamonkey 2.22 the user's ldap directory is searched. autocompletesearchparam new in thunderbird 2 re...
... into the textbox as the user types. if false, the default, the value will not be filled in until the user selects an item. as of gecko 1.9.1, this attribute is now always specified in lower case. autofillaftermatch obsolete since gecko 1.9.1 type: boolean if set to true, the entire text of the best match will be displayed at the end of the input. if false, only the text that hasn't been
entered yet will be filled in. the textbox.autofill attribute must be set to true to use this feature. as of gecko 1.9.1, this attribute is superseded by the completedefaultindex attribute. autofill new in thunderbird 3 requires seamonkey 2.0 type: boolean if set to true, the best match will be filled into the textbox as the user types. if false, the default, the value will no...
...And 9 more matches
The JavaScript input interpreter - Firefox Developer Tools
you can interpret javascript expressions in real time using the interpreter provided by the web console. it has two modes: single-line entry and multi-line entry. single-line mode for single-line entry, you can type javascript expressions in the field at the bottom of the console log, at the >> prompt. to
enter expressions in single-line mode, type at the prompt and press
enter. ...
... you can interpret javascript expressions in real time using the interpreter provided by the web console. it has two modes: single-line entry and multi-line entry. single-line mode for single-line entry, you can type javascript expressions in the field at the bottom of the console log, at the >> prompt. to
enter expressions in single-line mode, type at the prompt and press
enter. ...
...ressions in real time using the interpreter provided by the web console. it has two modes: single-line entry and multi-line entry. single-line mode for single-line entry, you can type javascript expressions in the field at the bottom of the console log, at the >> prompt. to
enter expressions in single-line mode, type at the prompt and press
enter. to
enter multi-line expressions, press shift+
enter after typing each line, then
enter to run all the
entered lines. ...
...And 9 more matches
background-position - CSS: Cascading Style Sheets
nd-origin. 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. ...
...pull request. ...
...arated by commas. values <position> a <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. if two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. if only one value is specified, the second value is assumed to be c
enter. if three or four values are used, the length-percentage values are offsets for the preceding keyword value(s). 1-value syntax: the value may be: the keyword value c
enter, which c
enters the image. one of the keyword values top, left, bottom, right. this specifies an edge against which to place the item. the other dimension is then set to 50%, so the item is placed in the middle of the e...
...And 9 more matches
panel - Archive of obsolete content
require("sdk/panel").panel({ contenturl: require("sdk/self").data.url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html"). so you can rewrite the above code like this: var mypanel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); panel positioning by default the panel appears in the c
enter 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. attaching panels to buttons you can attach a panel to a toggle button by passing the button itself as the position option to the panel's show() method or to its constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var sdkpanels = require("...
...function handleclick(state) { textentrypanel.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event to the panel's script, so the // script can prepare the panel for display. textentrypanel.on("show", function() { textentrypanel.port.emit("show"); }); // listen for messages called "text-
entered" coming from // the content script. the message payload is the text the user //
entered. // in this implementation we'll just log the text to the console. textentrypanel.port.on("text-
entered", function (text) { console.log(text); textentrypanel.hide(); }); the content script "get-text.js" looks like this: // when the user hits return, send the "text-
entered" // message to main.js. // the...
...it means that the panel's about // to be shown. // // set the focus to the text area so the user can // just start typing. ...
...And 8 more matches
JavaScript basics - Learn web development
om the tools listed above. you can learn more in mdn's javascript learning area, as well as in other parts of mdn. the section below introduces some aspects of the core language, and offers an opportunity to play with a few browser api features too. have fun! a hello world! example javascript is one of the most popular modern web technologies! as your javascript skills grow, your websites will
enter a new dimension of power and creativity. however, getting comfortable with javascript is more challenging than getting comfortable with html and css. you may have to start small, and progress gradually. to begin, let's examine how to add javascript to your page for creating a hello world! example. (hello world! is the standard for introductory programming examples.) important: if you haven't b...
...ting a hello world! example. (hello world! is the standard for introductory programming examples.) important: if you haven't been following along with the rest of our course, download this example code and use it as a starting point. go to your test site and create a new folder named scripts. within the scripts folder, create a new file called main.js, and save it. in your index.html file,
enter this code on a new line, just before the closing </body> tag: <script src="scripts/main.js"></script> this is doing the same job as the <link> element for css. it applies the javascript to the page, so it can have an effect on the html (along with the css, and anything else on the page). add this code to the main.js file: const myheading = document.queryselector('h1'); myheading.textconte...
...ich has the capability to manipulate documents. language basics crash course to give you a better understanding of how javascript works, let's explain some of the core features of the language. it's worth noting that these features are common to all programming languages. if you master these fundamentals, you have a head start on coding in other languages too! important: in this article, try
entering the example code lines into your javascript console to see what happens. for more details on javascript consoles, see discover browser developer tools. variables variables are containers that store values. you start by declaring a variable with the var (less recommended, dive deeper for the explanation) or the let keyword, followed by the name you give to the variable: let myvariable; no...
...And 8 more matches
ARIA: button role - Accessibility
see the official wai-aria example code. description the button role identifies an element as a button to screen readers. a button is a widget used to perform actions such as submitting a form, opening a dialog, cancelling an action, or performing a command such as inserting a new record or displaying information. a common convention to inf...
...ample the label remains "mute" with a screen reader reading "mute toggle button pressed" or "mute toggle button not pressed" depending on the value of aria-pressed. if the design were to call for the button label to change from "mute" to "unmute," a toggle button would not be appropriate, so the the aria-pressed attribute would be omitted. keyboard interactions key function
enter activates the button. space activates the button following button activation, focus is set depending on the type of action the button performs. for example, if clicking the button opens a dialog, the focus should move to the dialog. if the button closes a dialog, focus should returns to the button that opened the dialog unless the function performed in the dialog context log...
...lly leads to a different element. if the button alters the current context, then focus typically remains on the button, such as muting and unmuting an audio file. required javascript features required event handlers buttons can be operated by mouse, touch, and keyboard users. for native html <button> elements, the button's onclick event fires for mouse clicks and when the user presses space or
enter while the button has focus. but if another tag is used to create a button, the onclick event only fires when clicked by the mouse cursor, even if role="button" is used. because of this, separate key event handlers must be added to the element so that the button is be triggered when the space or
enter key is pressed. onclick handles the event raised when the button is activated using a mouse c...
...And 8 more matches
Box-shadow generator - CSS: Cascading Style Sheets
er-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; text-align: c
enter; } .ui-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } .ui-slider-input > input { margin: 0 10px; padding: 0; width: 50px; text-align: c
enter; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* * ui button */ /* checkbox */ .ui-checkbox { text-align: c
enter; font-size: 16px; font-family: "segoe ui", arial, helvetica, ...
....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: c
enter c
enter; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: c
enter left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: c
enter right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { b...
...ccc; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .container { height: 100%; width: 100%; position: absolute; left: 100%; transition-property: left; transition-duration: 0.5s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .title { text-align: c
enter; font-weight: bold; line-height: 2em; border-bottom: 1px solid #43a6e1; color: #666; } /* * stack of layers for shadow */ #layer_manager { width: 17%; background-color: #fefefe; margin: 0 1% 0 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; } #layer_manager .button { width: 30%; height: 25px; margin:0 0 10px; color: #333;...
...And 8 more matches
Element Positioning - Archive of obsolete content
next line, after fifty pixels. our find files dialog let's add some of these styles to the find files dialog. we'll make it so that the textbox will resize to fit the entire window. <textbox id="find-text" flex="1" style="min-width: 15em;"/> here, the text input has been made flexible. this way, it will grow if the user changes the size of the dialog. this is useful if the user wants to
enter a long string of text. also, a minimum width of 15 ems has been set so that the text box will always show at least 15 characters. if the user resizes the dialog to be very small, the text input will not shrink past 15 ems. it will be drawn as if it extends past the edge of the window. notice in the image that the text input has grown to extend to the full size of the window. box packing let's ...
...ates how to pack the child elements inside the box. for horizontally oriented boxes, it controls the horizonal positioning of the children. for vertically oriented boxes, it controls the vertical positioning of the children. you can use the following values: start this positions elements at the left edge for horizontal boxes and at the top edge for vertical boxes. this is the default value. ...
...ack the child elements inside the box. for horizontally oriented boxes, it controls the horizonal positioning of the children. for vertically oriented boxes, it controls the vertical positioning of the children. you can use the following values: start this positions elements at the left edge for horizontal boxes and at the top edge for vertical boxes. this is the default value. ...
...And 7 more matches
textbox - Archive of obsolete content
it is similar to the html input element. only one line of text is displayed by default. the multiline attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
... decimalplaces type: integer the number of decimal places to display. the default is 0, which doesn't show any decimal places. the value infinity may be used if you want no limit on the number of decimal places. note that decim...
... default value is 1. label type: string if present and not empty, this will be exposed to screen readers through the label property. type: integer the maximum value that the scale or number box may be set to. the default value is 100 for scales and infinity for number boxes. maxlength type: integer the maximum number of characters that the textbox allows to be
entered. min type: integer the minimum value the textbox's value may take. the default value is 0. multiline type: boolean if true, the textbox displays multiple lines. if the user presses
enter, a new line is started. if false, the textbox only allows entry of one line. newlines type: one of the values below how the text box handles pastes with newlines in the...
...And 7 more matches
Client-side form validation - Learn web development
oo easy to bypass, so malicious users can still easily send bad data through to your server. read website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind. what is form validation? go to any popular site with a registration form, and you will notice that they provide feedback when you don't
enter your data in the format they are expecting. you'll get messages such as: "this field is required" (you can't leave this field blank). "please
enter your phone number in the format xxx-xxxx" (a specific data format is required for it to be considered valid). "please
enter a valid email address" (the data you
entered is not in the right format). "your password needs to be between 8 and 30 cha...
...validation done in the browser is called client-side validation, while validation done on the server is called server-side validation. ...
...and lets them try again. we want to make filling out web forms as easy as possible. so why do we insist on validating our forms? there are three main reasons: we want to get the right data, in the right format. our applications won't work properly if our users' data is stored in the wrong format, is incorrect, or is omitted altogether. we want to protect our users' data. forcing our users to
enter secure passwords makes it easier to protect their account information. we want to protect ourselves. there are many ways that malicious users can misuse unprotected forms to damage the application (see website security). warning: never trust data passed to your server from the client. even if your form is validating correctly and preventing malformed input on the client-side, a malicious ...
...And 7 more matches
Page inspector keyboard shortcuts - Firefox Developer Tools
move to first node in the tree. home home home move to last node in the tree. end end end expand currently selected node right arrow right arrow right arrow collapse currently selected node left arrow left arrow left arrow (when a node is selected) move inside the node so you can start stepping through attributes. ...
...rst node in the tree. home home home move to last node in the tree. end end end expand currently selected node right arrow right arrow right arrow collapse currently selected node left arrow left arrow left arrow (when a node is selected) move inside the node so you can start stepping through attributes. ...
... arrow left arrow (when a node is selected) move inside the node so you can start stepping through attributes. ...
...And 7 more matches
Drag Operations - Web APIs
when dragging a link on a web page, the drag data item is the link's url. the drag data contains two pieces of information, the type (or format) of the data, and the data's value. the format is a type string (such as text/plain for text data), and the value is a string of text. when the drag begins, you add data by providing a type and the data. during the drag, in an event listener for the drag
enter and dragover events, you use the data types of the data being dragged to check whether a drop is allowed. for instance, a drop target that accepts links would check for the type text/uri-list. during a drop event, a listener would retrieve the data being dragged and insert it at the drop location. the drag data's types property returns a list of mime-type like domstrings, such as text/plain or i...
...context("2d"); ctx.linewidth = 4; ctx.moveto(0, 0); ctx.lineto(50, 50); ctx.moveto(0, 50); ctx.lineto(50, 0); ctx.stroke(); const dt = event.datatransfer; dt.setdata('text/plain', 'data to drag'); dt.setdragimage(canvas, 25, 25); } in this example, we make one canvas the drag image. as the canvas is 50×50 pixels, we use offsets of half of this (25) so that the image appears c
entered on the mouse pointer. drag effects when dragging, there are several operations that may be performed. the copy operation is used to indicate that the data being dragged will be copied from its present location to the drop location. the move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that some form of relationship or conn...
...above. for example, setting the effectallowed property to copymove allows a copy or move operation but prevents the user from performing a link operation. if you don't change the effectallowed property, then any operation is allowed, just like with the 'all' value. so you don't need to adjust this property unless you want to exclude specific types. ...
...And 7 more matches
align-content - CSS: Cascading Style Sheets
ample 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). ...
...y. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
... end the items are packed flush to each other against the end edge of the alignment container in the cross axis. flex-start the items are packed ...
...And 7 more matches
align-items - CSS: Cascading Style Sheets
ut. 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. ...
...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. ...
... in static position of abso...
...And 7 more matches
justify-items - CSS: Cascading Style Sheets
note that justify-items is ignored in flexbox layouts. */ justify-items: flex-end; /* equivalent to 'end'. note that justify-items is ignored in flexbox layouts. */ justify-items: self-sta...
...note that justify-items is ignored in flexbox layouts. */ justify-items: flex-end; /* equivalent to 'end'. note that justify-items is ignored in flexbox layouts. */ justify-items: self-start; justify-items: self-end; justify-...
...items is ignored in flexbox layouts. */ justify-items: self-start; justify-items: self-end; justify-items: left; /* pack items from the left */ justify-items: right; /* pack items from the right */ /* baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* overflow alignment (for positional alignment only) */ justify-items: safe c
enter; justify-items: unsafe c
enter; /* legacy alignment */ justify-items: legacy right; justify-items: legacy left; justify-items: legacy c
enter; /* global values */ justify-items: inherit; justify-items: initial; justify-items: unset; this property can take one of four different forms: basic keywords: one of the keyword values normal, auto, or stretch. baseline alignment: the baseline keyword...
...And 7 more matches
<input type="time"> - HTML: Hypertext Markup Language
<input> elements of type time create input fields designed to let the user easily
enter a time (hours and minutes, and optionally seconds). the control's user interface will vary from browser to browser. support is good in modern browsers, with safari being the sole major browser not yet implementing it; in safari, and any other browsers that don't support <time>, it degrades gracefully to <input type="text">. 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. ...
... browsers that don't support <time>, it degrades gracefully to <input type="text">. 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. appearance chrome and opera in chrome/opera the time control is simple, with slots to
enter hours and minutes in 12 or 24-hour format depending on operating system locale, and up and down arrows to increment and decrement the currently selected component. in some versions, an "x" button is provided to clear the control's value. 12-hour 24-hour chrome 83 in chrome 83, the ui controls have been updated with a new look and feel. the new element is functionally identical to the old on...
...system locale: 12-hour 24-hour value a domstring representing a time, or empty. events change and input supported common attributes autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list. methods select(), stepdown(), and stepup(). value a domstring containing the value of the time
entered into the input. you can set a default value for the input by including a valid time in the value attribute when creating the <input> element, like so: <label for="appt-time">choose an appointment time: </label> <input id="appt-time" type="time" name="appt-time" value="13:30"> you can also get and set the date value in javascript using the htmlinputelement.value property, for example: var ...
...And 7 more matches
Release notes - Archive of obsolete content
firefox 35 highlights added access keys for context menu. removed isprivatebrowsing from browserwindow. details github commits made between firefox 34 and firefox 35. this will not include any uplifts made after this release
entered aurora. bugs fixed between firefox 34 and firefox 35. this will not include any uplifts made after this release
entered aurora. firefox 34 highlights new api: dev/panel enables you to extend the firefox developer tools. jpm beta released. "./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs. details github commits made between firefox 33 and firefox 34. this will not include any uplifts made after this release
entered aurora. bugs fixed between firef...
... firefox 33 highlights added support for context menus in panels via a new option in the panel constructor. ...
... firefox 33 highlights added support for context menus in panels via a new option in the panel constructor. added tab.readystate. added a browserwindow parameter to sidebar.show() and sidebar.hide(), to control the window for which the sidebar will be shown or hidden. details github commits made between firefox 32 and firefox 33. this will not include any uplifts made after this release
entered aurora. bugs fixed between firefox 32 and firefox 33. this will not include any uplifts made after this release
entered aurora. firefox 32 highlights added exclude option to pagemod. added anonymous option to request. add-on debugger now includes a console and a scratchpad. details github commits made between firefox 31 and firefox 32. this will not include any uplifts made after thi...
...And 6 more matches
Building accessible custom components in XUL - Archive of obsolete content
the final product looks like this: <caption>xul spreadsheet with 7 rows and 5 columns</caption> although this has the visual layout of a spreadsheet, assistive technologies will only see it as a collection of individual, unrelated text labels. i...
...e now have a fully accessible xul spreadsheet, correctly focusable, correctly keyboard-navigable, and correctly exposed to assistive technologies. we could stop now, but we won't. what good is a spreadsheet if you can't edit it? we need to define a specific action that will trigger editing the currently focused cell. ...
...focusable, correctly keyboard-navigable, and correctly exposed to assistive technologies. we could stop now, but we won't. what good is a spreadsheet if you can't edit it? we need to define a specific action that will trigger editing the currently focused cell. to maintain compatibility with the accessible html spreadsheet demo, i chose the
enter key to trigger editing mode. ...
...And 6 more matches
Numeric Controls - Archive of obsolete content
other characters are not allowed and are just ignored if typed. in addition, arrow buttons appear beside the textbox to allow the user to cycle through the values. as with other textboxes, the default value can be specified with the value attribute. ...
...other characters are not allowed and are just ignored if typed. in addition, arrow buttons appear beside the textbox to allow the user to cycle through the values. as with other textboxes, the default value can be specified with the value attribute. ...
...other characters are not allowed and are just ignored if typed. in addition, arrow buttons appear beside the textbox to allow the user to cycle through the values. as with other textboxes, the default value can be specified with the value attribute. ...
...And 6 more matches
HTML: A good basis for accessibility - Learn web development
> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or
enter. semantic html doesn't take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. even better, semantic markup has other benefits beyond accessibility: easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand. better on mobile — semantic html is arguably lighter in fil...
... footer, sidebar, main content column, etc. this is not a good idea because a screen reader will likely give out confusing readouts, especially if the layout is complex and has many nested tables. ...
... and has many nested tables. ...
...And 6 more matches
HTML: A good basis for accessibility - Learn web development
> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or
enter. semantic html doesn't take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. even better, semantic markup has other benefits beyond accessibility: easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand. better on mobile — semantic html is arguably lighter in fil...
... footer, sidebar, main content column, etc. this is not a good idea because a screen reader will likely give out confusing readouts, especially if the layout is complex and has many nested tables. ...
... and has many nested tables. ...
...And 6 more matches
Client-side storage - Learn web development
blank template again, but this time in a different browser to the one you've got this tutorial open in! this will make it easier to deal with. type these lines into the browser's javascript console: localstorage.setitem('name','chris'); let myname = localstorage.getitem('name'); myname you should see the name item returned. now close down the browser and open it up again.
enter the following lines again: let myname = localstorage.getitem('name'); myname you should see that the value is still available, even though the browser has been closed and then opened again. separate storage for each domain there is a separate data store for each domain (each separate web address loaded in the browser). you will see that if you load two websites (say google.com and amaz...
...e.com and amazon.com) and try storing an item on one website, it won't be available to the other website. this makes sense — you can imagine the security issues that would arise if websites could see each other's data! a more involved example let's apply this new-found knowledge by writing a simple working example to give you an idea of how web storage can be used. our example will allow you
enter a name, after which the page will update to give you a personalized greeting. this state will also persist across page/browser reloads, because the name is stored in web storage. you can find the example html at personal-greeting.html — this contains a simple website with a header, content, and footer, and a form for
entering your name. let's build up the example, so you can understand how ...
...his example — we'll create them all as constants, as these references do not need to change in the lifecycle of the app. ...
...And 6 more matches
Accessible Toolkit Checklist
. get_accchild: get the child of an iaccessible. get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu item. this is one reason why a label must be created together with each widget, rather than separately. get_accvalue: get the "value" of the iaccessible, for example a number in a slider, a url for a link, the text a user
entered in a field. get_accrole: get an enumerated value representing what this iaccessible is used for, for example. is it a link, static text, editable text, a checkbox, or a table cell, etc. get_accstate: a 32 bit field representing possible on/off states, such as focused, focusable, selected, selectable, visible, protected (for passwords), checked, etc. get_acckeyboard...
...ult button' setting it's possible that the user wants mnemonics hidden except when the alt key is pressed. this can be supported through spi_getkeyboardcues and spi_getmenuunderlines simple widgets buttons tab, arrow, unmodified letter mnemonics require and support text labels for buttons with images, can be same as tooltip space key activates button
enter key activates focused button (thus current button, not default button shows dark border when a different button is focused) when button has a popup available by clicking on it, the
enter key or space bar should also activate the popup toolbars and toolbar buttons are not focusable, but we should expose the tooltip. if possible, make the tooltip automatically append text for the keyboa...
...popup available by clicking on it, the
enter key or space bar should also activate the popup toolbars and toolbar buttons are not focusable, but we should expose the tooltip. if possible, make the tooltip automatically append text for the keyboard shortcut associated with it. ...
...And 6 more matches
KeyboardEvent: code values - Web APIs
x0012 "keye" "keye" 0x0013 "keyr" "keyr" 0x0014 "keyt" "keyt" 0x0015 "keyy" "keyy" 0x0016 "keyu" "keyu" 0x0017 "keyi" "keyi" 0x0018 "keyo" "keyo" 0x0019 "keyp" "keyp" 0x001a "bracketleft" "bracketleft" 0x001b "bracketright" "bracketright" 0x001c "
enter" "
enter" 0x001d "controlleft" "controlleft" 0x001e "keya" "keya" 0x001f "keys" "keys" 0x0020 "keyd" "keyd" 0x0021 "keyf" "keyf" 0x0022 "keyg" "keyg" 0x0023 "keyh" "keyh" 0x0024 "keyj" "keyj" 0x0025 "keyk" "keyk" 0x0026 "keyl" "keyl" 0x00...
..."" "paste" 0xe00b ～ 0xe00f "" "" 0xe010 "mediatrackprevious" "mediatrackprevious" 0xe011 ～ 0xe016 "" "" 0xe017 "unidentified" "cut" 0xe018 "unidentified" "copy" 0xe019 "mediatracknext" "mediatracknext" 0xe01a, 0xe01b "unidentified" "" 0xe01c "numpad
enter" "numpad
enter" 0xe01d "controlright" "controlright" 0xe01e "unidentified" "launchmail" 0xe01f "unidentified" "" 0xe020 "audiovolumemute" "audiovolumemute" 0xe021 "launchapp2" "" 0xe022 "mediaplaypause" "mediaplaypause" 0xe023 "unidentified" "" 0xe024 "...
...si_0 (0x1d) "digit0" "digit0" kvk_ansi_rightbracket (0x1e) "bracketright" "bracketright" kvk_ansi_o (0x1f) "keyo" "keyo" kvk_ansi_u (0x20) "keyu" "keyu" kvk_ansi_leftbracket (0x21) "bracketleft" "bracketleft" kvk_ansi_i (0x22) "keyi" "keyi" kvk_ansi_p (0x23) "keyp" "keyp" kvk_return (0x24) "
enter" "
enter" kvk_ansi_l (0x25) "keyl" "keyl" kvk_ansi_j (0x26) "keyj" "keyj" kvk_ansi_quote (0x27) "quote" "quote" kvk_ansi_k (0x28) "keyk" "keyk" kvk_ansi_semicolon (0x29) "semicolon" "semicolon" kvk_ansi_backslash (0x2a) "backslash" "backslash" kvk_ansi_comma (0x2b) "comma" "comma" k...
...And 6 more matches
Key Values - Web APIs
os" for the super and hyper keys, instead of "super" and "hyper". [5] chrome 67 and firefox 63 now correctly interpret the right alt key for keyboard layouts which map that key to altgr. see firefox bug bug 900750 and chrome bug 25503 for further details. ...
...per and hyper keys, instead of "super" and "hyper". [5] chrome 67 and firefox 63 now correctly interpret the right alt key for keyboard layouts which map that key to altgr. see firefox bug bug 900750 and chrome bug 25503 for further details. ...
... the right alt key for keyboard layouts which map that key to altgr. see firefox bug bug 900750 and chrome bug 25503 for further details. whitespace keys keyboardevent.key value description virtual keycode windows mac linux android "
enter" the
enter or ↵ key (sometimes labeled return). vk_return (0x0d) kvk_return (0x24) kvk_ansi_keypad
enter (0x4c) kvk_powerbook_keypad
enter (0x34) gdk_key_return (0xff0d) gdk_key_kp_
enter (0xff8d) gdk_key_iso_
enter (0xfe34) gdk_key_3270_
enter (0xfd1e) qt::key_return (0x01000004) qt::key_
enter (0x01000005) keycode_
enter (66) keycode_numpad_
enter (160) keycode_dpad_c
enter (23) "tab" the horizontal tab key, tab. vk_tab (0x09) kvk_tab (0x30) gdk_k...
...And 6 more matches
Border-radius generator - CSS: Cascading Style Sheets
s except ie6 and lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: c
enter; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") c
enter left no-repeat; } .ui-input-sl...
...-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") c
enter left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") c
enter right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: c
enter; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component...
...: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: c
enter; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: c
enter; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-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-...
...And 6 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
the align-self and align-items properties control alignment on the block axis. when we use these properties, we are changing the alignment of the item within the grid area you have placed it. in the following example, i have four grid areas within my grid. ...
...erty for all of the child grid items. this means that you can set the property individually, by using align-self on a grid item. in this next example, i am using the align-self property, to demonstrate the different alignment values. the first area, is showing the default behavior of align-self, which is to stretch. the second item, has an align-self value of start, the third end and the fourth c
enter. * {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(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-t...
...the reason for ...
...And 6 more matches
place-content - CSS: Cascading Style Sheets
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. ...
... 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. ...
...And 6 more matches
repeating-radial-gradient() - CSS: Cascading Style Sheets
; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, repeating-radial-gradient() won't work on background-color and other properties that use the <color> data type. ...
...ong to the <image> data type, they can only be used where <image>s can be used. for this reason, repeating-radial-gradient() won't work on background-color and other properties that use the <color> data type. ...
...e the <color> data type. syntax /* a gradient at the c
enter of its container, starting red, changing to blue, and finishing green, with the colors repeating every 30px */ repeating-radial-gradient(circle at c
enter, red 0, blue, green 30px); /* an elliptical gradient near the top left of its container, starting red, changing to green and back again, repeating five times between the c
enter and the bottom right corner, and only once between the c
enter and the top left corner */ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); values <position> the position of the gradient, interpreted in the same way as background-position or transform-origin. if unspecified, it defaults to c
enter. <shape> the gradient's shape. the value can be circle (meaning...
...And 6 more matches
<input type="month"> - HTML: Hypertext Markup Language
the value is a string whose value is in the format "yyyy-mm", where yyyy is the four-digit year and mm is the month number. 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 control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop — and most modern mobile browser versions — having usable implementations. ...
...send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop — and most modern mobile browser versions — having usable implementations. in browsers that don't support month inputs, the control degrades gracefully to a simple <input type="text">, although there may be automatic validation of the
entered text to ensure it's formatted as expected. for those of you using a browser that doesn't support month, the screenshot below shows what it looks like in chrome and opera. clicking the down arrow on the right hand side brings up a date picker that lets you select the month and year. the microsoft edge month control looks like this: value a domstring representing a month and ye...
... the microsoft edge month control looks like this: value a domstring representing a month and year, or empty. events change and input supported common attributes autocomplete, list, readonly, and step. idl attributes value methods select(), stepdown(), stepup(). value a domstring representing the value of the month and year
entered into the input, in the form yyyy-mm (four or more digit year, then a hyphen ("-"), followed by the two-digit month). the format of the month string used by this input type is described in format of a valid local month string in date and time formats used in html. you can set a default value for the input control by including a month and year inside the value attribute, like so: <label for="b...
...And 6 more matches
Index - Archive of obsolete content
244 onpopupshown xul attributes, xul reference no summary! 245 onsearchbegin xul, xul attributes, xul reference no summary! 246 onsearchcomplete xul attributes, xul reference no summary! 247 onselect no summary! 248 ontextcommand xul attributes, xul reference no summary! 249 ontext
entered xul attributes, xul reference no summary! 250 ontextrevert xul attributes, xul reference no summary! 251 ontextreverted xul attributes, xul reference no summary! 252 onunload xul attributes, xul reference no summary! 253 onwizardback xul attributes, xul reference no summary! 254 onwizardcanc...
...summary! 453 appenditem xul methods, xul reference no summary! 454 appendnotification xul methods, xul reference no summary! 455 blur xul methods, xul reference no summary! 456 cancel xul methods, xul reference no summary! 457 canceldialog xul methods, xul reference no summary! 458 c
enterwindowonscreen xul methods, xul reference no summary! 459 checkadjacentelement xul methods, xul reference no summary! 460 clearresults needscontent, needshelp, xul methods, xul reference no summary! 461 clearselection xul methods, xul reference no summary! 462 click xul methods, xul reference no summary! ...
... 545 openpopupatscreen xul methods, xul reference no ...
...And 5 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
ommunicator, maintains a database of the private keys that correspond to the public keys published in any certificates issued for that client. the client asks for the password to this database the first time the client needs to access it during a given session-for example, the first time the user attempts to access an ssl-enabled server that requires certificate-based client authentication. after
entering this password once, the user doesn't need to
enter it again for the rest of the session, even when accessing other ssl-enabled servers. the client unlocks the private-key database, retrieves the private key for the user's certificate, and uses that private key to digitally sign some data that has been randomly generated for this purpose on the basis of input from both the client and the serve...
...ases, and so on. if the result of the evaluation is positive, the server allows the client to access the requested resource. as you can see by comparing figure 5 to figure 4, certificates replace the authentication portion of the interaction between the client and the server. instead of requiring a user to send passwords across the network throughout the day, single sign-on requires the user to
enter the private-key database password just once, without sending it across the network. for the rest of the session, the client presents the user's certificate to authenticate the user to each new server it encounters. existing authorization mechanisms based on the authenticated user identity are not affected. uses for certificates certificates have a purpose: to establish trust. their usage varies...
...esents the user's certificate to authenticate the user to each new server it encounters. existing authorization mechanisms based on the authenticated user identity are not affected. uses for certificates certificates have a purpose: to establish trust. their usage varies depending on the kind of trust they are used to ensure. some kinds of certificates are used to verify the identity of the pres
enter; others are used to verify that an object or item has not been tampered with. ssl protocol signed and encrypted email single sign-on object signing ssl protocol the secure sockets layer (ssl) protocol is a set of rules governing server authentication, client authentication, and encrypted communication between servers and clients. ssl is widely used on the internet, especially for interac...
...And 5 more matches
Mobile accessibility - Learn web development
n them by swiping two fingers left and right. for a more complete list of talkback gestures, see use talkback gestures. unlocking the phone when talkback is turned on, unlocking the phone is a bit different. you can do a two-finger swipe up from the bottom of the lock screen. if you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to
enter it. you can also explore by touch to find the unlock button at the bottom middle of the screen, and then double-tap. global and local menus talkback allows you to access global and local context menus, wherever you have navigated to on the device. the former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you ar...
...s on all the options available under the global and local context menus, see use global and local context menus. browsing web pages you can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc. for example, with talkback turned on: open your web browser. activate the url bar.
enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. to
enter the text of the url: select the url bar by swiping left/right till you get to it, and then double-tapping. hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. repeat for each character. once you've finished, find the ente...
...bar by swiping left/right till you get to it, and then double-tapping. hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. repeat for each character. once you've finished, find the
enter key and press it. swipe left and right to move between different items on the page. swipe up and right with a smooth motion to
enter the local content menu. swipe right until you find the "headings and landmarks" option. double-tap to select it. now you'll be able to swipe left and right to move between headings and aria landmarks. to go back to the default mode,
enter the local context menu again by swiping up and right, select "default", and then double-tap to activate. note: see get started on android with talkback fo...
...And 5 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
er, you might have skipped this visual hint. but if you are working exclusively with the keyboard, knowing which control has focus is of vital importance. it tells us which control is going to receive our keystrokes. if you press the tab key repeatedly, you'll see the dashed focus indicator cycling between all the focusable elements on the page. if you move the focus to the edit button and press
enter, suddenly the focus disappears, you can no longer tell which control will receive our keystrokes. moreover, if you press the escape or
enter key, nothing happens. and if you click on cancel or save, the focus disappears again. for a user working with the keyboard, this behavior will be confusing at best. we'd also like to add some usability features, like disabling the save button when required...
... autofocusing our input the next feature will add to our newtodo component will be an autofocus prop, which will allow us to specify that we want the <input> field to be focused on page load. our first attempt is as follows — let's try adding the autofocus prop and just call nameel.focus() from the <script> block. update the first part of th...
...the <input> field is focused on page load. note: you can have a look at the other lifecycle functions in the svelte docs, and you can see them in action in the interactive tutorial. waiting for the dom to be updated with the tick() function now we will take care of the todo component's focus management details. first of all, we want a todo component's edit <input> to receive focus when we
enter editing mode by pressing its edit button. in the same fashion as we saw earlier, we'll create a nameel variable inside todo.svelte and call nameel.focus() after setting the editing variable to true. open the file components/todo.svelte and add a nameel variable declaration, just below your editing and name declarations: let nameel // reference to the name inp...
...And 5 more matches
Handling common accessibility problems - Learn web development
ibility.html example (see the source code) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused. you can then press
enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to
enter text in a text input (other form elements have different controls, for example the <select> element can have its options displayed and cycled between using the up and down arrow keys). note that different browsers may have different keyboard control opt...
...rpose. use some interesting tactics to fake button behaviour. take for example our fake-div-buttons.html example (see source code). here we've given our fake <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0" (see webaim's tabindex article for more really useful details). this allows us to tab to the buttons, but not to activate them via the
enter/return key. to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the
enter/return key document.activeelement.onclick(e); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard. we check what button was pressed via the event object's keycode property; if it i...
...activeelement gives us the element that is currently focused on the page. ...
...And 5 more matches
QA phase
ile directly from en-us before you can build. this is due to a bug in the build logic. please either follow the above structure closely or adjust the commands below according to your custom setup. to copy this file to the appropriate directory, do the following: navigate to your working directory from your command-line terminal (i.e., where you created the folder structure described above).
enter the following commands: mkdir -p l10n-central/x-testing/toolkit/ cp mozilla-aurora/toolkit/locales/defines.inc l10n-central/x-testing/toolkit/defines.inc tah-dah! copied! finally, you will need a file called .mozconfig to proceed with manual builds. this file contains the necessary build instructions. to create and configure this file, follow these instructions: until the fix for bug 106...
...eate and configure this file, follow these instructions: until the fix for bug 1063880 lands on mozilla-aurora and mozilla-beta when building language packs against those two trees you should: remove ac_add_options --disable-compile-environment from .mozconfig in step 3 use ./mach build config after step 4 update the mozilla source code: $ cd mozilla-aurora $ hg pull -u
enter the following command to create the .mozconfig file: $ nano -w .mozconfig
enter the following lines in your .mozconfig file: mk_add_options moz_objdir=@topsrcdir@/../firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path relative to moz_objdir ac_add_options --enable-application=[browser or mail] you will need to specify which applic...
....mozconfig file: mk_add_options moz_objdir=@topsrcdir@/../firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path relative to moz_objdir ac_add_options --enable-application=[browser or mail] you will need to specify which application you're localizing in the fourth line (e.g., for firefox, that's browser, thunderbird would be mail).
enter the following command to perform the configuration: $ ./mach configure once your command-line finishes spitting out the config command's output, navigate to the newly created directory: $ cd ../firefox-build/browser/locales now you're ready to build! at this point you can choose between two build options. you can either: create a langpack, which is installed on top of your mozilla applicati...
...And 5 more matches
NSS Tools modutil
the netscape communicator root directory). -tempdir temporary-directory the temporary directory is the location where temporary files will be created in the course of installation by the -jar jar-file option. if no temporary directory is specified, the current directory will be used. -pwfile old-password-file specify a text file containing a token's existing password so that a password can be
entered automatically when the -changepw tokenname option is used to change passwords. -newpwfile new-password-file specify a text file containing a token's new or replacement password so that a password can be
entered automatically with the -changepw tokenname option. -slot slotname specify a particular slot to be enabled or disabled with the -enable modulename or -disable modulename options. -n...
...mple creates a set of security management database files in the specified directory: modutil -create -dbdir c:\databases the security module database tool displays a warning: warning: performing this operation while communicator is running couldcause corruption of your security databases. if communicator iscurrently running, you should exit communicator before continuing thisoperation. type 'q <
enter>' to abort, or <
enter> to continue: after you press
enter, the tool displays the following: creating "c:\databases\key3.db"...done.creating "c:\databases\cert8.db"...done.creating "c:\databases\secmod.db"...done. displaying module information this example gives detailed information about the specified module: modutil -list "netscape internal pkcs #11 module" -dbdir c:\databases the sec...
..., dsa, and rc2 security mechanisms: modutil -default "cryptographic module" -dbdir c:\databases -mechanisms rsa:dsa:rc2 the security module database tool displays a warning: warning: performing this operation while communicator is running couldcause corruption of your security databases. if communicator iscurrently running, you should exit communicator before continuing thisoperation. type 'q <
enter>' to abort, or <
enter> to continue: after you press
enter, the tool displays the following: using database directory c:\databases...successfully changed defaults. enabling a slot this example enables a particular slot in the specified module: modutil -enable "cryptographic module" -slot "cryptographic reader" -dbdir c:\databases the security module database tool displays a warning: war...
...And 5 more matches
Introduction to the JavaScript shell
function, [pc,]] expression) sets a trap at the specific point in the javascript code. when the bytecode at the offset specified by pc in the function function is about to be executed, the expression is evaluated. this is a powerful debugging mechanism when used in concert with line2pc(). for example, if you want to display a message when line 6 of a function, dosomething() is executed, you can
enter the following: trap(dosomething, line2pc(dosomething, 6), "print('line 6!\n')"); note: when a trap is set, the corresponding bytecode in the program is replaced with a trap bytecode until you use untrap() to remove the trap. untrap(function [, pc]) removes a trap from the specified function at the offset pc. if pc isn't specified, the trap is removed from the function's entry point. this fu...
... lets you get or set the javascript version number. this may be useful for gaining access to syntax only available in certain versions of javascript (for example, see using javascript 1.7). debug functions these built-in functions are only available in debug builds. dis([function]) disassembles the javascript bytecode for the entire program, or for the specified function. ...
... 0] pcbase offset 11 dissrc([function]) disassembles the javascript bytecode for the entire program, or for the specified function, showing the source lines. this function only works with programs loaded from files, either using the -f flag on launching the shell, or by using the load() function. ...
...And 5 more matches
Applying styles and colors - Web APIs
at gradient and pattern objects later. by default, the stroke and fill color are set to black (css color value #000000). note: when you set the strokestyle and/or fillstyle property, the new value becomes the default for all shapes being drawn from then on. for every shape you want in a different color, you will need to reassign the fillstyle or strokestyle property. the valid strings you can
enter should, according to the specification, be css <color> values. each of the following examples describe the same color. // these all set the fillstyle to 'orange' ctx.fillstyle = 'orange'; ctx.fillstyle = '#ffa500'; ctx.fillstyle = 'rgb(255, 165, 0)'; ctx.fillstyle = 'rgba(255, 165, 0, 1)'; a fillstyle example in this example, we once again use two for loops to draw a grid of rectangles, each...
...l shapes from that point on. every step in the for loop draws a set of circles with an increasing radius. the final result is a radial gradient. by overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. by increasing the step count and in effect drawing more circles, the background would completely disappear from the c
enter of the image. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency valu...
...egments) sets the current line dash pattern. linedashoffset = value specifies where to start a dash array on a line. you'll get a better understanding of what these do by looking at the examples below. a linewidth example this property sets the current line thickness. values must be positive numbers. by default this value is set to 1.0 units. the line width is the thickness of the stroke c
entered on the given path. in other words, the area that's drawn extends to half the line width 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 5 more matches
ARIA: textbox role - Accessibility
of free-form text. whenever possible, rather than using this role, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input. description when an element has the textbox role, the browser sends an accessible textbox event to assistive technologies, which can then notify the user about it. ...
...the default is a single line input, in which return or
enter submits the form; in this case, it is preferable to use an html <input> with type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contenteditable attribute ensures the text node is editable. ...
... in an html <textarea>, set aria-multiline="true". including the html contenteditable attribute ensures the text node is editable. ...
...And 5 more matches
background-position-x - CSS: Cascading Style Sheets
epository. 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 value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
... background-position-x: left; background-position-x: c
enter; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* side-relative values */ background-position-x: right 3px; background-position-x: left 25%; /* multiple values */ background-position-x: 0px, c
enter; /* global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset; the background-position-x property is specified as one or more values, separated by commas. values left aligns the left edge of the background image with the left edge of the background position layer. ...
... right aligns the right edge of the background image with the right edge of the background position layer. <length> the offset of the given background image's left vertical edge from the background position layer's left vertical edge. ...
...And 5 more matches
background-position-y - CSS: Cascading Style Sheets
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 value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
...ckground-position-y: top; background-position-y: c
enter; background-position-y: bottom; /* <percentage> values */ background-position-y: 25%; /* <length> values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* side-relative values */ background-position-y: bottom 3px; background-position-y: bottom 10%; /* multiple values */ background-position-y: 0px, c
enter; /* global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset; the background-position-y property is specified as one or more values, separated by commas. values top aligns the top edge of the background image with the top edge of the background position layer. ...
... bottom aligns the bottom edge of the background image with the bottom edge of the background position layer. ...
...And 5 more matches
justify-self - CSS: Cascading Style Sheets
note that justify-self is ignored in flexbox layouts. */ justify-self: flex-end; /* equivalent to 'end'. note that justify-self is ignored in flexbox layouts. */ justify-self: self-start; justif...
...note that justify-self is ignored in flexbox layouts. */ justify-self: flex-end; /* equivalent to 'end'. note that justify-self is ignored in flexbox layouts. */ justify-self: self-start; justify-self: self-end; justify-self: left...
...at justify-self is ignored in flexbox layouts. ...
...And 5 more matches
<position> - CSS: Cascading Style Sheets
css data type denotes a two-dimensional coordinate used to set a location relative to an element box. it is used in the background-position and offset-anchor properties. note: the final position described by the <position> value does not need to be inside the element's box. syntax the <position> data type is specified with one or two keywords, with optional offsets. the keyword values are c
enter, top, right, bottom, and left. each keyword represents either an edge of the element's box or the c
enter line between two edges. depending on the context, c
enter represents either the c
enter between the left and right edges, or the c
enter between the top and bottom edges. if specified, an offset can be either a relative <percentage> value or an absolute <length> value. positive values are offset...
...r between the top and bottom edges. if specified, an offset can be either a relative <percentage> 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 c
enter. ...
...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 c
enter. ...
...And 5 more matches
radial-gradient() - CSS: Cascading Style Sheets
its shape may be a circle or an ellipse. 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. syntax /* a gradient at the c
enter of its container, starting red, changing to blue, and finishing green */ radial-gradient(circle at c
enter, 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 c
enter. <shape> the gradient's shape. the value can be circle (meaning that the gradient's shape is a circ...
...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 how big the ending shape must be. ...
...shape is an axis-aligned ellipse). if unspecified, it defaults to ellipse. <extent-keyword> a keyword describing how big the ending shape must be. the possible values are: keyword description closest-side the gradient's ending shape meets the side of the box closest to its c
enter (for circles) or meets both the vertical and horizontal sides closest to the c
enter (for ellipses). closest-corner the gradient's ending shape is sized so that it exactly meets the closest corner of the box from its c
enter. farthest-side similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its c
enter (or vertical and horizontal sides). farthest-corner the default value, the gradient's ...
...And 5 more matches
transform-origin - CSS: Cascading Style Sheets
s transformations. 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 transformation origin is the point around which a transformation is applied. for example, the transformation origin of the rotate() function is the c
enter of rotation. this property is applied by first translating the element by the value of the property, then applying the element's transform, then translating by the negated property value. this means, this definition transform-origin: -100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%...
...nslating the element by the value of the property, then applying the element's transform, then translating by the negated property value. this means, this definition transform-origin: -100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is c
enter. syntax /* one-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset | y-offset */ transform-origin: 3cm 2px; /* x-offset-keyword | y-offset */ transform-origin: left 2px; /* x-offset-keyword | y-offset-keyword */ transform-origin: right top; /* y-offset-keyword | x-offset-keyword */ transform-origin: top right; /* x-offset | y-offset | z-offset */ transform-origin: ...
...al values */ transform-origin: inherit; transform-origin: initial; transform-origin: unset; the transform-origin property may be specified using one, two, or three values, where each value represents an offset. offsets that are not explicitly defined are reset to their corresponding initial values. if two or more values are defined and either no value is a keyword, or the only used keyword is c
enter, then the first value represents the horizontal offset and the second represents the vertical offset. one-value syntax: the value must be a <length>, a <percentage>, or one of the keywords left, c
enter, right, top, and bottom. two-value syntax: one value must be a <length>, a <percentage>, or one of the keywords left, c
enter, and right. the other value must be a <length>, ...
...And 5 more matches
Event reference
click a pointing device button (any button; soon to be primary button only) has been pressed and released on an element. contextmenu the right button of the mouse is clicked (before the context menu is displayed). dblclick a pointing device button is clicked twice on an element. mousedown a pointing device button is pressed on an element. mouse
enter a pointing device is moved onto the element that has the listener attached. mouseleave a pointing device is moved off the element that has the listener attached. mousemove a pointing device is moved over an element (fired continuously as the mouse moves). mouseover a pointing device is moved onto the element that has the listener attached or onto one of its ...
...some text is being selected. wheel a wheel button of a pointing device is rotated in any direction. drag & drop events event name fired when drag an element or text selection is being dragged (fired continuously every 350ms). dragend a drag operation is being ended (by releasing a mouse button or hitting the escape key). drag
enter a dragged element or text selection
enters a valid drop target. dragstart the user starts dragging an element or text selection. dragleave a dragged element or text selection leaves a valid drop target. dragover an element or text selection is being dragged over a valid drop target (fired continuously every 350ms). drop an element is dropped on a...
...each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) a...
...And 5 more matches
<textarea> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ribute to allow the <textarea> to be associated with a <label> element for accessibility purposes a name attribute to set the name of the associated data point submitted to the server when the form is submitted. rows and cols attributes to allow you to specify an exact size for the <textarea> to take. setting these is a good idea for consistency, as browser defaults can differ. default content
entered between the opening and closing tags. <textarea> does not support the value attribute. the <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required. attributes this element includes the global attributes. autocapitalize this is a non-standard attribute supported by webkit on ios (therefor...
...s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required. attributes this element includes the global attributes. autocapitalize this is a non-standard attribute supported by webkit on ios (therefore nearly all browsers running on ios, including safari, firefox, and chrome), which controls whether and how the text value should be automatically capitalized as it is
entered/edited by the user. the non-deprecated values are available in ios 5 and later. possible values are: none: completely disables automatic capitalization. sentences: automatically capitalize the first letter of sentences. words: automatically capitalize the first letter of words. characters: automatically capitalize all characters. on: deprecated since ios 5. off: deprecated sin...
...And 5 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
free web browser developed by google. it's based on the chromium open source project. some key differences are described on the chromium wiki. chrome supports its own layout called blink. note that the ios version of chrome uses that platform's webview, not blink. 178 graceful degradation design, glossary, graceful degradation graceful degradation is a design philosophy that c
enters around trying to build a modern web site/application that will work in the newest browsers, but falls back to an experience that while not as good still delivers essential content and functionality in older browsers. 179 grid css, css grid, glossary a css grid is defined using the grid value of the display property; you can define columns and rows on your grid using the grid...
...view-controller) is a pattern in software design commonly used to implement user interfaces, data, and controlling logic. it emphasizes a separation between the software’s business logic and display. this "separation of concerns" provides for a better division of labor and improved maintenance. some other design patterns are based on mvc, such as mvvm (model-view-viewmodel), mvp (model-view-pres
enter), and mvw (model-view-whatever). 260 main axis css, glossary, main axis, flexbox the main axis in flexbox is defined by the direction set by the flex-direction property. there are four possible values for flex-direction. these are: 261 main thread glossary, reference, web performance the main thread is where a browser processes user events and paints. by ...
...by microsoft since 2014. initially known as spartan, edge replaced the longstanding microsoft browser internet explorer. 269 microsoft internet explorer browser, glossary, internet explorer, microsoft, microsoft internet explorer, navigation, web browser, windows, windows operating system internet explorer (or ie) is a free graphical browser maintained by microsoft for legacy
enterprise uses. microsoft edge is currently the default windows browser. 270 middleware codingscripting, glossary middleware is a (loosly defined) term for any software or service that enables the parts of a system to communicate and manage data. it is the software that handles communication between components and input/output, so developers can focus on the specific purpose of th...
...And 4 more matches
The HTML5 input types - Learn web development
: <input type="email" id="email" name="email"> when this type is used, the user is required to type a valid email address into the field. any other content causes the browser to display an error when the form is submitted. you can see this in action in the below screenshot. you can also use the multiple attribute in combination with the email input type to allow several email addresses to be
entered in the same input (separated by commas): <input type="email" id="email" name="email" multiple> on some devices — notably, touch devices with dynamic keyboards like smart phones — a different virtual keypad might be presented that is more suitable for
entering email addresses, including the @ key. see the firefox for android keyboard screenshot below for an example: note: you can find ...
...note that a@b is a valid email address according to the default provided constraints. this is because the email input type allows intranet email addresses by default. to implement different validation behavior, you can use the pattern attribute, and you can also custom the error messages; we'll talk how to use these features in the client-side form validation article later on. note: if the data
entered is not an email address, the :invalid pseudo-class will match, and the validitystate.typemismatch property will return true. search field search fields are intended to be used to create search boxes on pages and apps. this type of field is set by using the value search for the type attribute: <input type="search" id="search" name="search"> the main difference between a text field and a sea...
...e value search for the type attribute: <input type="search" id="search" name="search"> the main difference between a text field and a search field is how the browser styles its appearance. often, search fields are rendered with rounded corners; they also sometimes display an "Ⓧ", which clears the field of any value when clicked). additionally, on devices with dynamic keyboards, the keyboard's
enter key may read "search", or display a magnifying glass icon. the below screenshots show a non-empty search field in firefox 71, safari 13, and chrome 79 on macos, and edge 18 and chrome 79 on windows 10. note that the clear icon only appears if the field has a value, and, apart from safari, it is only displayed when the field is focused. another feature worth noting is that the values of a sear...
...And 4 more matches
UI pseudo-classes - Learn web development
vailable? the original pseudo-classes available to us (as of css 2.1) that are relevant to forms are: :hover: selects an element only when it is being hovered over by a mouse pointer. :focus: selects an element only when it is focused (i.e. by being tabbed to via the keyboard). :active: selects an element only when it is being activated (i.e. while it is being clicked on, or when the return/
enter key is being pressed down in the case of a keyboard activation). these basic pseudo-classes should be familiar to you now. more recently, the css selector level 3 and css basic ui level 3 added more pseudo-classes related to html forms that provide several other useful targetting conditions that you can take advantage of. we'll discuss these in more detail in the sections below, but briefly, th...
...ogies. ...
...ses. some points worth bearing in mind: controls with no constraint validation will always be valid, and therefore matched with :valid. controls with required set on them that have no value are counted as invalid — they will be matched with :invalid and :required. controls with built-in validation, such as <input type="email"> or <input type="url"> are (matched with) :invalid when the data
entered into them does not match the pattern they are looking for (but they are valid when empty). controls whose current value is outside the range limits specified by the min and max attributes are (matched with) :invalid, but also matched by :out-of-range, as you'll see later on. there are some other ways to make an element matched by :valid/:invalid, as you'll see in the client-side form validati...
...And 4 more matches
Arrays - Learn web development
variable, then call the code that does the printing and adding separately for each item. this would be much longer to write out, less efficient, and more error-prone. if we had 10 items to add to the invoice it would already be annoying, but what about 100 items, or 1000? we'll return to this example later on in the article. as in previous articles, let's learn about the real basics of arrays by
entering some examples into browser developer console. creating arrays arrays consist of square brackets and elements that are separated by commas. suppose we want to store a shopping list in an array. paste the following code into the console: let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles']; shopping; in the above example, each element is a string, but in an array we can sto...
...mit ourselves to storing only numbers in one array, and in another only strings. for example: let sequence = [1, 1, 2, 3, 5, 8, 13]; let random = ['tree', 795, [0, 1, 2]]; before proceeding, create a few example arrays. accessing and modifying array items you can then access individual items in the array using bracket notation, in the same way that you accessed the letters in a string.
enter the following into your console: shopping[0]; // returns "bread" you can also modify an item in an array by simply giving a single array item a new value. try this: shopping[0] = 'tahini'; shopping; // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ] note: we've said it before, but just as a reminder — computers start counting from 0! note that an array ...
...background graphics currently displayed, and you might only want 50 displayed at once, for performance or clutter reasons. as new objects are created and added to the array, older ones can be deleted from the array to maintain the desired number. in this example we're going to show a much simpler use — here we're giving you a fake search site, with a search box. the idea is that when terms are
entered in the search box, the top 5 previous search terms are displayed in the list. when the number of terms goes over 5, the last term starts being deleted each time a new term is added to the top, so the 5 previous terms are always displayed. note: in a real search app, you'd probably be able to click the previous search terms to return to previous searches, and it would display actual search res...
...And 4 more matches
Storing the information you need — Variables - Learn web development
ontained values can change. let's look at a simple example: <button>press me</button> const button = document.queryselector('button'); button.onclick = function() { let name = prompt('what is your name?'); alert('hello ' + name + ', nice to see you!'); } in this example pressing the button runs a couple of lines of code. the first line pops a box up on the screen that asks the reader to
enter their name, and then stores the value in a variable. the second line displays a welcome message that includes their name, taken from the variable value. to understand why this is so useful, let's think about how we'd write this example without using a variable. it would end up looking something like this: let name = prompt('what is your name?'); if (name === 'adam') { alert('hello adam, nice...
...nice to see you!'); } else if (name === 'bianca') { alert('hello bianca, nice to see you!'); } else if (name === 'chris') { alert('hello chris, nice to see you!'); } // ... and so on ... you may not fully understand the syntax we are using (yet!), but you should be able to get the idea — if we didn't have variables available, we'd have to implement a giant code block that checked what the
entered name was, and then display the appropriate message for any name. this is obviously really inefficient (the code is a lot bigger, even for only five choices), and it just wouldn't work — you couldn't possibly store all possible choices. variables just make sense, and as you learn more about javascript they will start to become second nature. another special thing about variables is that they...
... should end with a semi-colon (;) — your code may work correctly for single lines, but probably won't when you are writing multiple lines of code together. try to get into the habit of including it. you can test whether these values now exist in the execution environment by typing just the variable's name, e.g. myname; myage; they currently have no value; they are empty containers. when you
enter the variable names, you should get a value of undefined returned. if they don't exist, you'll get an error message — try typing in scoobydoo; note: don't confuse a variable that exists but has no defined value with a variable that doesn't exist at all — they are very different things. in the box analogy you saw above, not existing would mean there's no box (variable) for a value to go in. ...
...And 4 more matches
Setting up your own test automation environment - Learn web development
e hidden files in mac os x or show hidden folders in ubuntu). paste the following into the bottom of your file (updating the path as it actually is on your machine): #add webdriver browser drivers to path export path=$path:/users/bob save and close this file, then restart your terminal/command prompt to reapply your bash configuration. check that your new paths are in the path variable by
entering the following into your terminal: echo $path you should see it printed out in the terminal. to set your path variable on windows, follow the instructions at how can i add a new folder to my system path? ok, let's try a quick test to make sure everything is working. create a new file inside your project directory called google_test.js: give it the following contents, then save it: ...
...webdriver will then wait for 2 seconds; the document title is then accessed, and if it is "webdriver - google search", we will return a message to claim the...
... 'webdriver - google search') { console.log('test passed'); } else { console.log('test failed'); } driver.quit(); }); }); in terminal, make sure you are inside your project folder, then
enter the following command: node google_test you should see an instance of firefox automatically open up! google should automatically be loaded in a tab, "webdriver" should be
entered in the search box, and the search button will be clicked. webdriver will then wait for 2 seconds; the document title is then accessed, and if it is "webdriver - google search", we will return a message to claim the test is passed. webdriver will then close down the firefox instance and stop. testing in multiple browsers at once there is also nothing to stop you running the test on multiple br...
...And 4 more matches
Introduction to NSPR
y one thread can be in the monitor at a time and that no thread may observe or modify the monitored data without being in the monitor. monitoring is about protecting data, not code. a monitored invariant is a boolean expression over the monitored data. the expression may be false only when a thread is in the monitor (holding the monitor's mutex). this requirement implies that when a thread first
enters the monitor, an evaluation of the invariant expression must yield a true. the thread must also reinstate the monitored invariant before exiting the monitor. therefore, evaluation of the expression must also yield a true at that point in execution. a trivial example might be as follows. suppose an object has three values, v1, v2, and sum. the invariant is that the third value is the sum of the o...
...v1 nor v2 are in flux. note: evaluation of the invariant expression is a conceptual requirement and is rarely done in practice. it is valuable to formally define the expression during design, write it down, and adhere to it. it is also useful to implement the expression during development and test it where appropriate. the thread makes an absolute assertion of the expression's evaluation both on
entering and on exiting the monitor. acquiring a lock is a synchronous operation. once the lock primitive is called, the thread returns only when it has acquired the lock. should another thread (or the same thread) already have the lock held, the calling thread blocks, waiting for the situation to improve. that blocked state is not interruptible, nor is it timed. condition variables condition variab...
...tion to exist in some monitored data. since the nature of the situation is not an attribute of the condition, the program must test that itself. since this testing involves the monitored data, it must be done from within the monitor. the wait operation atomically exits the monitor and blocks the calling thread in a waiting condition state. when the thread is resumed after the wait, it will have re
entered the monitor, making operations on the data safe. there is a subtle interaction between the thread(s) waiting on a condition and those notifying it. the notification must take place within a monitor--the same monitor that protects the data being manipulated by the notifier. in pseudocode, the sequence looks like this:
enter(monitor); ... manipulate the monitored data notify(condition); exit(mo...
...And 4 more matches
align-self - CSS: Cascading Style Sheets
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. ...
...b.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. ...
... 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-...
...And 4 more matches
box-pack - CSS: Cascading Style Sheets
flexible box layout module draft, and has been replaced by a newer standard. see flexbox for information about the current standard. the -moz-box-pack and -webkit-box-pack css properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout. the effect of this is only visible if there is extra space in the box. ...
... end the box packs contents at the end, leaving any extra space at the start. justify the space is divided evenly in-between each child, with none of the extra space placed before the first child or after the last child. ...
...ox-pack: justify; /* global values */ box-pack: inherit; box-pack: initial; box-pack: unset; the direction of layout depends on the element's orientation: horizontal or vertical. syntax the box-pack property is specified as one of the keyword values listed below. values start the box packs contents at the start, leaving any extra space at the end. c
enter the box packs contents in the c
enter, dividing any extra space equally between the start and the end. end the box packs contents at the end, leaving any extra space at the start. justify the space is divided evenly in-between each child, with none of the extra space placed before the first child or after the last child. if there is only one child, treat the value as if it were start. notes the edge of the box designated the s...
...And 4 more matches
justify-content - CSS: Cascading Style Sheets
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. ...
...//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. ...
... end the items are packed flush to each other toward the end edge of the alignment container in the main axis. flex-start the items are pac...
...And 4 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: c
enter; /* <position> values */ mask-position: 25% 75%; mask-position: 0px 0px; mask-position: 10% 8em; /* multiple values */ mask-position: top right; mask-position: 1rem 1rem, c
enter; /* 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 ...
...bal 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. ...
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked {...
...And 4 more matches
place-items - CSS: Cascading Style Sheets
it. 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. ...
...tory. 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. ...
...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. self-start the item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis. self-end the item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis. c
enter the items are packed flush to each other toward the c
enter of the of the alignment container. left the items are packed flush to each other toward 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 appropri...
...And 4 more matches
repeating-conic-gradient() - CSS: Cascading Style Sheets
the repeating-conic-gradient() css function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a c
enter point (rather than radiating from the c
enter). {{embedinteractiveexample("pages/css/function-repeating-conic-gradient.html")}} 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. ...
...example("pages/css/function-repeating-conic-gradient.html")}} 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 /* starburst: a a blue on blue starburst: the gradient is a starburst of lighter and darker blue, c
entered in the upper left quandrant, offset by 3degrees so there is no up/down straight line */ background: repeating-conic-gradient( from 3deg at 25% 25%, hsl(200, 100%, 50%) 0deg 15deg, hsl(200, 100%, 60%) 10deg 30deg); ); 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...
... background: repeating-conic-gradient( from 3deg at 25% 25%, hsl(200, 100%, 50%) 0deg 15deg, hsl(200, 100%, 60%) 10deg 30deg); ); 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 c
enter of the gradient. if omitted, the default value is c
enter, meaing the gradient will be c
entered, . <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). the last color stop minus the first color-stop angle defines the size of the repeating gradient. <color-hint> th color-hint is an interpolation ...
...And 4 more matches
text-align - CSS: Cascading Style Sheets
or table-cell box. this means it works like vertical-align but in the horizontal direction. 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 interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ text-align: left; text-align: right; text-align: c
enter; text-align: justify; text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; /* character-based alignment in a table column */ text-align: "."; text-align: "." c
enter; /* block alignment values (non-standard syntax) */ text-align: -moz-c
enter; text-align: -webkit-c
enter; /* global values */ text-align: inherit; text-align: initial; text-align: unset; the text-align property is specified in one of the following ways: using the keyword values start, end, left, right, c
enter, justify, justify-all, or match-parent. using a <string> value only, in which cas...
...g both a keyword value and a <string> value. values start the same as left if direction is left-to-right and right if direction is right-to-left. end the same as right if direction is left-to-right and left if direction is right-to-left. left the inline contents are aligned to the left edge of the line box. right the inline contents are aligned to the right edge of the line box. c
enter the inline contents are c
entered within the line box. justify the inline contents are justified. text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line. justify-all same as justify, but also forces the last line to be justified. match-parent similar to inherit, but the values start and end are calculated according...
...And 4 more matches
Creating annotations - Archive of obsolete content
r works with firefox. the widget api is deprecated from firefox 29 onwards. please see the ui module for replacements. in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis. we'll use two objects to create annotations: a page-mod to find page elements that the user can annotate, and a panel for the user to
enter the annotation text itself. selector page-mod selector content scripts the content script for the selector page-mod uses jquery to examine and manipulate the dom. its main job is to maintain a matched element: this is the page element that is the current candidate for an annotation. the matched element is highlighted and has a click handler bound to it which sends a message to the main add-on...
...an element is eligible if it, or one of its ancestors in the dom tree, has an attribute named "id". the idea here is to make it more likely that the annotator will be able to identify annotated elements correctly later on. if the page element is eligible for annotation, then the selec...
...ive = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouse
enter event. when a mouse
enter event is triggered the selector checks whether the element is eligible for annotation. an element is eligible if it, or one of its ancestors in the dom tree, has an attribute named "id". the idea here is to make it more likely that the annotator will be able to identify annotated elements correctly later on. if the page element is eligible for annotation, then the selector highlights that elemen...
...And 3 more matches
CSS and JavaScript accessibility best practices - Learn web development
creative with link styles, as long as you keep giving users feedback when they interact with the links. something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — both are very important accessibility aids for those using keyboard controls. form elements elements to allow users to input data into websites: <div> <label for="name">
enter your name</label> <input type="text" id="name" name="name"> </div> you can see some good example css in our form-css.html example (see it live also). most of the css you'll write for forms will be for sizing the elements, lining up labels and inputs, and getting them looking neat and tidy. you shouldn't however deviate too much from the expected visual feedback form elements receive when the...
...olor scheme for your website, make sure that the text (foreground) color contrasts well with the background color. your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content. there is an easy way to check whether your contrast is large enough to not cause problems. there are a number of contrast checking tools online that you can
enter your foreground and background colors into, to check them. for example webaim's color contrast checker is simple to use, and provides an explanation of what you need to conform to the wcag criteria around color contrast. 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. anot...
...d in red. hiding things there are many instances where a visual design will require that not all content is shown at once. for example, in our tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use tab and
enter/return to select them). screen reader users don't care about any of this — they are happy with the content as long as the source order makes sense, and they can get to it all. absolute positioning (as used in this example) is generally seen as one of the best mechanisms of hiding content for visual effect, because it doesn't stop screen readers from getting to it. on the other hand, you sho...
...And 3 more matches
Fundamental text and font styling - Learn web development
rties out the way, let's now have a look at properties we can use to affect text layout. text alignment the text-align property is used to control how text is aligned within its containing content box. the available values are as follows, and work in pretty much the same way as they do in a regular word processor application: left: left-justifies the text. right: right-justifies the text. c
enter: c
enters the text. justify: makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. you need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. if you are going to use this, you should also think about using something else along with it, such as hyphens, to break some of the ...
... varying the gaps in between the words so that all lines of text are the same width. you need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. if you are going to use this, you should also think about using something else along with it, such as hyphens, to break some of the longer words across lines. if we applied text-align: c
enter; to the <h1> in our example, we'd end up with this: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. truly a wond...
...se while staring point blank down the cavernous barrel of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. ...
...And 3 more matches
Manipulating documents - Learn web development
is, and the other apis commonly associated with dom and document manipulation the important parts of a web browser web browsers are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a web developer using javascript. you might think that such limitations are a bad thing, but browsers are locked down for good reasons, mostly c
entering around security. imagine if a web site could get access to your stored passwords or other sensitive information, and log into websites as if it were you? despite the limitations, web apis still give us access to a lot of functionality that enable us to do a great many things with web pages. there are a few really obvious bits you'll reference regularly in your code — consider the following ...
...ith the htmlelement.style property, which contains inline styling information for each element in the document. you can set properties of this object to directly update element styles. ...
...backgroundcolor versus background-color). make sure you don't get these mixed up, otherwise it won't work. ...
...And 3 more matches
Basic math in JavaScript — numbers and operators - Learn web development
that whatever type of numbers you are dealing with in javascript, you handle them in exactly the same way. note: actually, javascript has a second number type, bigint, used for very, very large integers. but for the purposes of this course, we'll just worry about number values. it's all numbers to me let's quickly play with some numbers to reacquaint ourselves with the basic syntax we need.
enter the commands listed below into your developer tools javascript console. first of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order: let myint = 5; let myfloat = 6.667; myint; myfloat; number values are typed in without quote marks — try declaring and initializi...
...able names back in to check that everything is in order: let myint = 5; let myfloat = 6.667; myint; myfloat; number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on. now let's check that both our original variables are of the same datatype. there is an operator called typeof in javascript that does this.
enter the below two lines as shown: typeof myint; typeof myfloat; you should get "number" returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. phew! useful number methods the number object, an instance of which represents all standard numbers you'll use in your javascript, has a number...
...ixed() method. type the following lines into your browser's console: let lotsofdecimal = 1.766584958675746364; lotsofdecimal; let twodecimalplaces = lotsofdecimal.tofixed(2); twodecimalplaces; converting to number data types sometimes you might end up with a number that is stored as a string type, which makes it difficult to perform calculations with it. this most commonly happens when data is
entered into a form input, and the input type is text. there is a way to solve this problem — passing the string value into the number() constructor to return a number version of the same value. for example, try typing these lines into your console: let mynumber = '74'; mynumber + 3; you end up with the result 743, not 77, because mynumber is actually defined as a string. you can test this by typi...
...And 3 more matches
Handling text — strings in JavaScript - Learn web development
messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more. pretty much all of the programs we've shown you so far in the course have involved some string manipulation. strings — the basics strings are dealt with similarly to numbers at first glance, but when you dig deeper you'll start to see some notable differences. let's start by
entering some basic lines into the browser developer console to familiarize ourselves. creating a string to start with,
enter the following lines: let string = 'the revolution will not be televised.'; string; just like we did with numbers, we are declaring a variable, initializing it with a string value, and then returning the value. the only difference here is that when writing a string, you n...
...if the browser can't find it, then an error is raised (e.g. "missing; before statement"). ...
...ned, which contains the value "hello, how are you?". in the last instance, we joined only two strings, but you can join as many as you like, as long as you include a + between each pair. try this: let multiple = one + one + one + one + two; multiple; you can also use a mix of variables and actual strings. try this: let response = one + 'i am fine — ' + two; response; note: when you
enter an actual string in your code, enclosed in single or double quotes, it is called a string literal. concatenation in context let's have a look at concatenation being used in action — here's an example from earlier in the course: <button>press me</button> const button = document.queryselector('button'); button.onclick = function() { let name = prompt('what is your name?'); alert('hello ...
...And 3 more matches
JavaScript object basics - Learn web development
l file. this contains very little — a <script> element for us to write our source code into. we'll use this as a basis for exploring basic object syntax. while working with this example you should have your developer tools javascript console open and ready to type in some commands. as with many things in javascript, creating an object often begins with defining and initializing a variable. try
entering the following line below the javascript code that's already in your file, then saving and refreshing: const person = {}; now open your browser's javascript console,
enter person into it, and press
enter/return. you should get a result similar to one of the below lines: [object object] object { } { } congratulations, you've just created your first object. job done! but this is an empty obj...
...e this: const person = { name: ['bob', 'smith'], age: 32, gender: 'male', interests: ['music', 'skiing'], bio: function() { alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. ...
...le sending a request to the server to be put into a database. sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name. dot notation above, you accessed the object's properties and methods using dot notation. the object name (person) acts as the namespace — it must be
entered first to access anything encapsulated inside the object. next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example: person.age person.interests[1] person.bio() sub-namespaces it is even possible to make the value of an object member another object. for example, try ...
...And 3 more matches
Ember interactivity: Events, classes and state - Learn web development
to make the app functional. when beginning to think about interactivity, it's good to declare what each component's goals and responsibilities are. in the below sections we’ll do this for each component, and then walk you through how the functionality can be implemented. creating todos for our card-header / todo input, we'll want to be able to submit our typed in todo task when we press the
enter key and have it appear in the todos list. we want to be able to capture the text typed into the input. we do this so that our javascript code knows what we typed in, and we can save our todo and pass that text along to the todo list component to display. we can capture the keydown event via the on modifier, which is just ember syntactic sugar around addeventlistener and removeeventlistener (see...
...ponent extends component { } inside this file we will implement the event handler code. update the content to the following: import component from '@glimmer/component'; import { action } from '@ember/object'; export default class headercomponent extends component { @action onkeydown({ target, key }) { let text = target.value.trim(); let hasvalue = boolean(text); if (key === '
enter' && hasvalue) { alert(text); target.value = '' } } } the @action decorator is the only ember-specific code here (aside from extending from the component superclass, and the ember-specific items we are importing using javascript module syntax) — the rest of the file is vanilla javascript, and would work in any application. the @action decorator declares that the function is a...
...onality along the way. for example, the @tracked decorator (see slightly later on) runs code it is applied to, but additionally tracks it and automatically updates the app when values change. read javascript decorators: what they are and when to use them for more general information on decorators. coming back to our browser tab with the app running, we can type whatever we want, and when we hit
enter we'll be greeted with an alert message telling us exactly what we typed. with the interactivity of the header input out of the way, we need a place to store todos so that other components can access them. storing todos with a service ember has built-in application-level state management that we can use to manage the storage of our todos and allow each of our components to access data from th...
...And 3 more matches
Introduction to automated testing - Learn web development
mkdir node-test to make this directory an npm project, you just need to go inside your test directory and initialize it, with the following: cd node-test npm init this second command will ask you many questions to find out the information required to set up the project; you can just select the defaults for now. once all the questions have been asked, it will ask you if the information
entered is ok. type yes and press
enter/return and npm will generate a package.json file in your directory. this file is basically a config file for the project. you can customize it later, but for now it'll look something like this: { "name": "node-test", "version": "1.0.0", "description": "test for npm projects", "main": "index.js", "scripts": { "test": "test" }, "author": "chris...
...erunning gulp to see if you can isolate what the problem is. gulp comes with a watch() function that you can use to watch your files and run tests whenever you save a file. for example, try adding the following to the bottom of your gulpfile.js: gulp.task('watch', function(){ gulp.watch('src/*.html', ['html']); gulp.watch('src/*.css', ['css']); gulp.watch('src/*.js', ['js']); }); now try
entering the gulp watch command into your terminal. gulp will now watch your directory, and run the appropriate tasks whenever you save a change to an html, css, or javascript file. note: the * character is a wildcard character — here we're saying "run these tasks when any files of these types are saved. you could also use wildcards in your main tasks, for example gulp.src('src/*.css') would grab a...
...evice, you get a choice of browsers available on that device. clicking on one of those browser icons will load up your choice of platform/device/browser — choose one now, and give it a try. note: the blue device icon next to some of the mobile device choices signals that you will be testing on a real device; choices without that icon will be run on an emulator. you'll find that you can
enter urls into the address bar, and use the other controls like you'd expect on a real device. you can even do things like copy and paste from the device to your clipboard, scroll up and down by dragging with the mouse, or use appropriate gestures (e.g. pinch/zoom, two fingers to scroll) on the touchpads of supporting devices (e.g. macbook). note that not all features are available on all devices. yo...
...And 3 more matches
Handling common JavaScript problems - Learn web development
ing a linter, which points out errors and can also flag up warnings about bad practices, etc., and be customized to be stricter or more relaxed in their error/warning reporting. the javascript/ecmascript linters we'd recommend are jshint and eslint; these can be used in a variety of ways, some of which we'll detail below. online the jshint homepage provides an online linter, which allows you to
enter your javascript code on the left and provides an output on the right, including metrics, warnings, and errors. code editor plugins it is not very convenient to have to copy and paste your code over to a web page to check its validity several times. what you really want is a linter that will fit into your standard workflow with the minimum of hassle. many code editors have linter plugins, for ...
...plugin available. to install it: install atom (if you haven't got an up-to-date version already installed) — download it from the atom page linked above. go to atom's preferences... dialog (e.g. by choosing atom > preferences... on mac, or file > preferences... on windows/linux) and choose the install option in the left-hand menu. in the search packages text field, type "jslint" and press
enter/return to search for linting-related packages. you should see a package called lint at the top of the list. install this first (using the install button), as other linters rely on it to work. after that, install the linter-jshint plugin. after the packages have finished installing, try loading up a javascript file: you'll see any issues highlighted with green (for warnings) and red (for errors)...
... more sophisticated feature of browser developer tools: the javascript debugger as it is called in firefox. note: similar tools are available in other browsers; the sources tab in chrome, debugger in safari (see safari web development tools), etc. in firefox, the debugger tab looks as follows: on the left, you can select the script you want to debug (in this case we have only one). the c
enter panel shows the code in the selected script. the right-hand panel shows useful details pertaining to the current environment — breakpoints, callstack and currently active scopes. the main feature of such tools is the ability to add breakpoints to code — these are points where the execution of the code stops, and at that point you can examine the environment in its current state and see wha...
...And 3 more matches
How to get a stacktrace with WinDbg
ams->debugging tools for windows->windbg) next, open the "file" menu and choose "open executable...". in the file chooser window that appears, open the firefox.exe executable in your firefox program folder (c:\program files\mozilla firefox). you should now see a "command" text window with debug output at the top and an input box at the bottom. before debugging can start, several commands must be
entered into the one-line input box at the bottom of the command window. tip: all commands must be
entered exactly as written, one line at a time, into the bottom of the command box. copying and pasting each line is the easiest method to avoid mistakes some commands start with a period (.) or a pipe character (|), which is required. (the keystroke for a pipe character on us keyboards is shift+\) ...
...riod (.) or a pipe character (|), which is required. (the keystroke for a pipe character on us keyboards is shift+\) submit the log file on a bug or via the support site, even if nothing seems to happen during the debug process start debugging now that firefox is opened in the debugger, you need to configure your windbg to download symbols from the mozilla symbol server. to load the symbols,
enter the three commands below, pressing
enter after each one. (more details are available at using the mozilla symbol server.) .sympath srv*c:\symbols*http://symbols.mozilla.org/firefox;srv*c:\symbols*http://msdl.microsoft.com/download/symbols .symfix+ c:\symbols .reload /f now wait for the symbols to download. this may take some time depending on your connection speed; the total size of the mozill...
...ozilla and microsoft symbols download is around 1.4gb. windbg will show "busy" at the bottom of the application window until the download is complete. once the download is complete, you need to configure windbg to examine child processes, ignore a specific event caused by flash player, and record a log of loaded modules. you will also want to open a log file to save data you collect. to do this,
enter these four commands, pressing
enter after each one. .logopen /t c:\temp\firefox-debug.log .childdbg 1 .tlist sxn gp lm if you see firefox.exe listed in the output from .tlist more than once, then you are already running the application and need to close the running instance first before you start debugging, otherwise you won't get useful results. now run firefox by opening the debug menu and ...
...And 3 more matches
NSS tools : signtool
of files. this option makes the manifest files (required by the jar format) considerably smaller, but they contain slightly less information. --outfile outputfile specifies a file to receive redirected output from netscape signing tool. -p password specifies a password for the private-key database. note that the password
entered on the command line is displayed as plain text. -s keysize specifies the size of the key for generated certificate. use the -m option to find out what tokens are available. the -s option can be used with the -g option only. -t token specifies which available token should generate the key and receive the certificate. use the -m opt...
...ir 2. put some file into it. echo boo > signdir/test.f 3. specify the name of your object-signing certificate and sign the directory. signtool -k mysigncert -z testjar.jar signdir using key "mysigncert" using certificate directory: /u/jsmith/.netscape generating signdir/meta-inf/manifest.mf file.. --> test.f adding signdir/test.f to testjar.jar generating signtool.sf file..
enter password or pin for "communicator certificate db": adding signdir/meta-inf/manifest.mf to testjar.jar adding signdir/meta-inf/signtool.sf to testjar.jar adding signdir/meta-inf/signtool.rsa to testjar.jar tree "signdir" signed successfully 4. test the archive you just created. signtool -v testjar.jar using certificate directory: /u/jsmith/.netscape archive "testjar.jar" has passed ...
...e named x509.cacert, which has the mime-type application/x-x509-ca-cert. certificates contain standard information about the entity they identify, such as the common name and organization name. netscape signing tool prompts you for this information when you run the command with the -g option. however, all of the requested fields are optional for test certificates. if you do not
enter a common name, the tool provides a default name. in the following example, the user input is in boldface: signtool -g mytestcert using certificate directory: /u/someuser/.netscape
enter certificate information. all fields are optional. acceptable characters are numbers, letters, spaces, and apostrophes. certificate common name: test object signing certificate organization: netscape com...
...And 3 more matches
Examine and edit HTML - Firefox Developer Tools
rumb highlights that element in the page. the breadcrumbs bar has its own keyboard shortcuts. searching the page inspector's search box matches all markup in the current document and in any frames. to start searching the markup, click in the search box to expand it or press ctrl + f , or cmd + f on a mac. there are three types of searches that are performed automatically depending on what you
enter, a full text search, a css selector search, and an xpath search. full text search the full text search will always be executed, independently of what you
enter. that allows you to find css selectors and xpath expressions occurring within the text. css selector search you can search elements by
entering a css selector. as you type, an autocomplete popup shows any class or id attributes that m...
... xpath search it is also possible to search via xpaths. this allows you to search for specific elements without the conflict of matching words within the text. ...
... xpath search it is also possible to search via xpaths. this allows you to search for specific elements without the conflict of matching words within the text. ...
...And 3 more matches
Checking when a deadline is due - Web APIs
whether each time and date is occurring at the current moment. basically, we want to check what the time and date is right now, and then check each stored event to see if any of their deadlines match the current time and date. if they do, we want to let the user know with some kind of notification. this would be easy if we were just comparing two date objects, but of course humans don't want to
enter deadline information in the same format javascript understands. human-readable dates are quite different, with a number of different representations. recording the date information to provide a reasonable user experience on mobile devices, and to cut down on ambiguities, i decided to create an html form with: a text input for
entering a title for your to-do list. this is the least avoidabl...
...vices, and to cut down on ambiguities, i decided to create an html form with: a text input for
entering a title for your to-do list. this is the least avoidable bit of user typing. number inputs for the hour and minute parts of the deadline. on browsers that support type="number", you get a nice little up and down arrow number picker. on mobile platforms you tend to get a numeric keypad for
entering data, which is helpful. on others you just get a standard text input, which is okay. <select> elements for inputting the day, month and year of the deadline. ...
...parts of the deadline. on browsers that support type="number", you get a nice little up and down arrow number picker. on mobile platforms you tend to get a numeric keypad for
entering data, which is helpful. on others you just get a standard text input, which is okay. <select> elements for inputting the day, month and year of the deadline. because these values are the most ambiguous for users to
enter (7, sunday, sun? 04, 4, april, apr? 2013, '13, 13?), i decided the best solution was to give them a choice to pick from, which also saves on annoying typing for mobile users. the days are recorded as numerical days of the month, the months are recorded as full month names, and the years are recorded as full four digit year numbers. when the form's submit button is pressed, we run the adddata() ...
...And 3 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
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 rotation to apply to the reference space for the object in the frame being rendered. radians_p...
...fragment shader returns the color of each vertex, interpolating as needed from the values found in the texture and applying the lighting effects. starting up and shutting down webxr upon initially loading the script, we install a handler for the load event, so that we can perform initialization. ...
... each of the key matrices for informational purposes while our scene is running. then we look to see if navigator.xr is defined. if it isn't—and/or the enableforcepolyfill configuration constant is set to true—we install the webxr polyfill by instantiating the webxrpolyfill class. handling the startup and shutdown ui then we call the setupxrbutton() function, which handles configuring the "
enter/exit webxr" button to enable or disable it as necessary depending on the availability of webxr support for the session type specified in the session_type constant. function setupxrbutton() { if (navigator.xr.issessionsupported) { navigator.xr.issessionsupported(session_type) .then((supported) => { xrbutton.disabled = !supported; }); } else { navigator.xr.supportssession...
...And 3 more matches
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
one of the reasons that flexbox quickly caught the interest of web developers is that it brought proper alignment capabilities to the web for the first time. it enabled proper vertical alignment, so we can at last easily c
enter a box. in this guide, we will take a thorough look at how the alignment and justification properties work in flexbox. to c
enter our box we use the align-items property to align our item on the cross axis, which in this case is the block axis running vertically. we use justify-content to align the item on the main axis, which in this case the inline axis running horizontally. you can take a look at the code of this example below. change the size of the container or nested element and the nested element always remains c
entered. properties that control alignment th...
...er has a height set, then the items will stretch to that height, regardless of how much content is in the item. the reason the items become the same height is that the initial value of align-items, the property that controls alignment on the cross axis, is set to stretch. we can use other values to control how the items align: align-items: flex-start align-items: flex-end align-items: c
enter align-items: stretch align-items: baseline in the live example below, the value of align-items is stretch. try the other values and see how all of the items align against each other in the flex container. aligning one item with align-self the align-items property sets the align-self property on all of the flex items as a group. this means you can explicitly declare the align-self propert...
... will reset the value to that which is defined on the flex container. in this next live example, the flex container has align-items: flex-start, which means the items are all aligned to the start of the cross axis. i have targeted the first item using a first-child selector and set that item to align-self: stretch; another item has been selected using its class of selected and given align-self: c
enter. you can change the value of align-items or change the values of align-self on the individual items to see how this works. changing the main axis so far we have looked at the behaviour when our flex-direction is row, and while working in a language written top to bottom. this means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down. ...
...And 3 more matches
box-align - CSS: Cascading Style Sheets
original css flexible box layout module draft, and has been replaced by a newer standard. the box-align css property specifies how an element aligns its contents across its layout in a perpendicular direction. the effect of the property is only visible if there is extra space in the box. see flexbox for information about the current standard. /* keyword values */ box-align: start; box-align: c
enter; box-align: end; box-align: baseline; box-align: stretch; /* global values */ box-lines: inherit; box-lines: initial; box-lines: unset; the direction of layout depends on the element's orientation: horizontal or vertical. syntax the box-align property is specified as one of the keyword values listed below. values start the box aligns contents at the start, leaving any extra space at the...
...ign: end; box-align: baseline; box-align: stretch; /* global values */ box-lines: inherit; box-lines: initial; box-lines: unset; the direction of layout depends on the element's orientation: horizontal or vertical. syntax the box-align property is specified as one of the keyword values listed below. values start the box aligns contents at the start, leaving any extra space at the end. c
enter the box aligns contents in the c
enter, dividing any extra space equally between the start and the end. end the box aligns contents at the end, leaving any extra space at the start. baseline the box aligns the baselines of the contents (lining up the text). this only applies if the box's orientation is horizontal. stretch the box stretches the contents so that there is no extra space in the...
...ation: horizontal top vertical left the edge opposite to the start is designated the end. if the alignment is set using the element's align attribute, then the style is ignored. ...
...And 3 more matches
conic-gradient() - CSS: Cascading Style Sheets
example conic gradients include pie charts and color wheels. the result of the conic-gradient() function 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. ...
...d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...l(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 c
enter of the gradient. if omitted, the default value is c
enter, meaing the gradient will be c
entered, . <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 an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at whi...
...And 3 more matches
offset-position - CSS: Cascading Style Sheets
the offset-position css property defines the initial position of the offset-path. syntax /* keyword values */ offset-position: auto; offset-position: top; offset-position: bottom; offset-position: left; offset-position: right; offset-position: c
enter; /* <percentage> values */ offset-position: 25% 75%; /* <length> values */ offset-position: 0 0; offset-position: 1cm 2cm; offset-position: 10ch 8em; /* edge offsets values */ offset-position: bottom 10px right 20px; offset-position: right 3em bottom 10px; offset-position: bottom 10px right; offset-position: top right 10px; /* global values */ offset-position: inherit; offset-position: initial; offset-position: unset; values auto the initial position is the position of the box specified by the position property. <position> ...
...d by the position property. <position> a <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. if two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. if only one value is specified, the second value is assumed to be c
enter. if three or four values are used, the length-percentage values are offsets for the preceding keyword value(s). for more explanation of these value types, see background-position. formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrefertosizeofcontainingblockcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea position form...
...alues are offsets for the preceding keyword value(s). for more explanation of these value types, see background-position. ...
...And 3 more matches
<input type="week"> - HTML: Hypertext Markup Language
with sliding reels. value a domstring representing a week and year, or empty events change and input supported common attributes autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list. methods select(), stepdown(), and stepup() value a domstring representing the value of the week/year
entered into the input. the format of the date and time value used by this input type is described in format of a valid week string in date and time formats used in html. you can set a default value for the input by including a value inside the value attribute, like so: <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" value="2017-w01"> one thing...
...ept as valid input readonly a boolean which, if present, indicates that the user cannot edit the field's contents step the stepping interval (the distance between allowed values) to use for both user interface and constraint validation max the latest (time-wise) year and week number, in the string format discussed in the value section above, to accept. if the value
entered into the element exceeds this, the element fails constraint validation. if the value of the max attribute isn't a valid week string, then the element has no maximum value. this value must be greater than or equal to the year and week specified by the min attribute. min the earliest year and week to accept. if the value of the element is less than this, the element fails constraint validation...
...the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data
entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. for week inputs, the value of step is given in weeks, with a scaling factor of 604,800,000 (since the underlying numeric value is in milliseconds). the default value of step is 1, indicating 1week.
...And 3 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
oworld. listing 3: additional content for overlay.xul <?xml version="1.0"?> <overlay id="helloworldoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_toolspopup"> <menuitem id="helloworldmenuitem" label="hello, world!" insertbefore="sanitizeseparator" oncommand="window.opendialog('chrome://helloworld/content/clock.xul','clock','chrome,c
enterscreen,modal');"/> </menupopup> </overlay> phase 2: adding a function to display the time in phase 2, we will make it so that selecting the hello world menu item we created in phase 1 will display a window with the time (figure 6). fixme: figure 6: clock window produced by phase 2 adding an event handler first, we add an event handler to the menu item that will open the window (listing 4...
... they are arranged horizontally. ...
...the clock.dtd file inside the fr-fr folder must be encoded as utf-8. listing 9: content for clock.dtd locale\en-us\clock.dtd: <!entity helloworld.clock "clock"> <!entit...
...And 2 more matches
prefwindow - Archive of obsolete content
os x: a common way of opening modal windows on mac os x that are not attached as a sheet to the main window is to use nsiwindowwatcher.openwindow() with a null parentwindow. this does not work with prefwindows, breaking the general behavior of the window and in particular the list of prefpanes. ...
...e,titlebar,toolbar,c
enterscreen,dialog=yes". ...
... the default setting of browser.preferences.instantapply currently is true on linux and mac os and false on windows (which however might or might not change soon, see bug 738797 and bug 1037225). defaultbutton type: string normally this attribute should not be set, but if it is, it specifies the default button in the dialog. typically, this means that the button will be activated when the
enter key is pressed. this should be set to one of the same values as those for the buttons attribute. inactivetitlebarcolor type: color string specify background color of the window's titlebar when it is inactive (background). moreover this hides separator between titlebar and window contents. this affects only on mac os x. lastselected type: string set this to the id of the last sele...
...And 2 more matches
Summary of Changes - Archive of obsolete content
this section outlines all of the element and practice updates described in this article. for a complete discussion of these items, see the sections in which they are described. ...
... this section outlines all of the element and practice updates described in this article. for a complete discussion of these items, see the sections in which they are described. ...
...ll of the element and practice updates described in this article. for a complete discussion of these items, see the sections in which they are described. ...
...And 2 more matches
azimuth - Archive of obsolete content
ables 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. ...
...al 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. initial valuec
enterapplies toall elementsinheritedyescomputed valuenormalized angleanimation typediscrete syntax <angle> | [ [ left-side | far-left | left | c
enter-left | c
enter | c
enter-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 c
enter 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 keywo...
... 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. ...
...And 2 more matches
3D collision detection - Game development
e the same. their main disadvantage is that unless the entity they are wrapping is actually spherical, the wrapping is usually not a good fit (i.e. wrapping a person with a bounding sphere will cause a lot of false positives, whereas an aabb would be a better match). point vs. sphere to check whether a sphere contains a point we need to calculate the distance between the point and the sphere's c
enter. if this distance is smaller than or equal to the radius of the sphere, the point is inside the sphere. taking into account that the euclidean distance between two points a and b is (ax-bx)2)+(ay-by)2+(az-bz)\sqrt{(a_x - b_x) ^ 2) + (a_y - b_y)^2 + (a_z - b_z)} , our formula for point vs. sphere collision detection would work out like so: f(p,s)=sradius>=(px-sx)2+(py-sy)2+(pz-sz)2f(p,s) = s_{...
...square root, which can be expensive to calculate. an easy optimization to avoid it consists of comparing the squared distance with the squared radius, so the optimized equation would instead involve distancesqr < sphere.radius * sphere.radius. sphere vs. sphere the sphere vs sphere test is similar to the point vs sphere test. what we need to test here is that the distance between the sphere's c
enters is less than or equal to the sum of their radii. mathematically, this looks like: f(a,b)=(ax-bx)2+(ay-by)2+(az-bz)2<=aradius+bradiusf(a,b) = \sqrt{(a_x - b_x)^2 + (a_y - b_y)^2 + (a_z - b_z)^2} <= a_{radius} + b_{radius} or in javascript: function intersect(sphere, other) { // we are using multiplications because it's faster than calling math.pow var distance = math.sqrt((sphere.x - ot...
... sphere and an aabb are colliding is slightly more complicated, but still simple and fast. a logical approach would be to check every vertex of the aabb, doing a point vs sphere test for each one. ...
...And 2 more matches
WAI-ARIA basics - Learn web development
script libraries that generate such controls as a series of nested <div>s or table elements with classnames, which are then styled using css and controlled using javascript. the problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just get told that they can see a jumble of elements with no semantics to describe what they mean.
enter wai-aria wai-aria (web accessibility initiative - accessible rich internet applications) is a specification written by the w3c, defining a set of additional html attributes that can be applied to elements to provide additional semantics and improve accessibility wherever it is lacking. there are three main features defined in the spec: roles — these define what an element is or does. many o...
...on is updated. you can for example only get content additions or removals read out. enhancing keyboard accessibility as discussed in a few other places in the module, one of the key strengths of html with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. generally, you are able to use the tab key to move between controls, the
enter/return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a <select> box). however, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. you might be trying to fix some bad co...
...-aria provides the aria-required attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. update the <input> elements like so: <input type="text" name="name" id="name" aria-required="true"> <input type="number" name="age" id="age" aria-required="true"> if you save the example now and test it with a screenreader, you should hear something like "
enter your name star, required, edit text". it might also be useful if we give screenreader users and sighted users an idea of what the age value should be. this is often presented as a tooltip, or placeholder inside the form field perhaps. wai-aria does include aria-valuemin and aria-valuemax properties to specify min and max values, but these currently don't seem very well supported; a better suppor...
...And 2 more matches
Flexbox - Learn web development
? for a long time, the only reliable cross browser-compatible tools available for creating css layouts were things like floats and positioning. these are fine and they work, but in some ways they are also rather limiting and frustrating. the following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way: vertically c
entering a block of content inside its parent. making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available. making all columns in a multiple column layout adopt the same height even if they contain a different amount of content. as you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. le...
... explore this by looking at a new example — flex-align0.html (see it live also) — which we are going to turn into a neat, flexible button/toolbar. at the moment you'll see a horizontal menu bar, with some buttons jammed into the top left hand corner. first, take a local copy of this example. now, add the following to the bottom of the example's css: div { display: flex; align-items: c
enter; justify-content: space-around; } refresh the page and you'll see that the buttons are now nicely c
entered, horizontally and vertically. we've done this via two new properties. align-items controls where the flex items sit on the cross axis. by default, the value is stretch, which stretches all flex items to fill the parent in the direction of the cross axis. if the parent hasn't got a f...
...s. align-items controls where the flex items sit on the cross axis. by default, the value is stretch, which stretches all flex items to fill the parent in the direction of the cross axis. if the parent hasn't got a fixed width in the cross axis direction, then all flex items will become as long as the longest flex items. this is how our first example got equal height columns by default. the c
enter value that we used in our above code causes the items to maintain their intrinsic dimensions, but be c
entered along the cross axis. this is why our current example's buttons are c
entered vertically. you can also have values like flex-start and flex-end, which will align all items at the start and end of the cross axis respectively. see align-items for the full details. you can override the ali...
...And 2 more matches
Your first form - Learn web development
tes: basic computer literacy, and a basic understanding of html. objective: to gain familiarity with what web forms are, what they are used for, how to think about designing them, and the basic html elements you'll need for simple cases. what are web forms? web forms are one of the main points of interaction between a user and a web site or application. forms allow users to
enter data, which is generally sent to a web server for processing and storage (see sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a ui feature). a web form's html is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structur...
...dditional elements to help structure the overall form — they are often referred to as html forms. the controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too. form controls can also be programmed to enforce specific formats or values to be
entered (form validation), and paired with text labels that describe their purpose to both sighted and blind users. designing your form before starting to code, it's always better to step back and take the time to think about your form. designing a quick mockup will help you to define the right set of data you want to ask your user to
enter. from a user experience (ux) point of view, it's important t...
...for their name, their e-mail and the message they want to send. hitting the button will send their data to a web server. active learning: implementing our form html ok, let's have a go at creating the html for our form. we will use the following html elements: <form>, <label>, <input>, <textarea>, and <button>. before you go any further, make a local copy of our simple html template — you'll
enter your form html into here. the <form> element all forms start with a <form> element, like this: <form action="/my-handling-form-page" method="post"> </form> this element formally defines a form. it's a container element like a <section> or <footer> element, but specifically for containing forms; it also supports some specific attributes to configure the way the form behaves. all of its attrib...
...And 2 more matches
Looping code - Learn web development
statement immediately exits the switch statement and moves onto the code after it. it's the same with loops — a break statement will immediately exit the loop and make the browser move on to any code that follows it. ...
... } }); </script> </body> </html> first of all we have some variable definitions — we have an array of contact information, with each item being a string containing a name and phone number separated by a colon. next, we attach an event listener to the button (btn), so that when it is pressed, some code is run to perform the search and return the results. we store the value
entered into the text input in a variable called searchname, before then emptying the text input and focusing it again, ready for the next search. note that we also run the tolowercase() method on the string, so that searches will be case-insensitive. now onto the interesting part, the for loop: we start the counter at 0, run the loop until the counter is no longer less than contacts.length, and...
...th, and increment i by 1 after each iteration of the loop. inside the loop, we first split the current contact (contacts[i]) at the colon character, and store the resulting two values in an array called splitcontact. we then use a conditional statement to test whether splitcontact[0] (the contact's name, again lower-cased with tolowercase()) is equal to the inputted searchname. if it is, we
enter a string into the paragraph to report what the contact's number is, and use break to end the loop. after (contacts.length-1) iterations, if the contact name does not match the
entered search the paragraph text is set to "contact not found.", and the loop continues looping until the condition is no longer true. note: you can view the full source code on github too (also see it runnin...
...And 2 more matches
What is JavaScript? - Learn web development
javascript code.) the three layers build on top of one another nicely. let's take a simple text label as an example. ...
... so what can it really do? the core client-side javascript language consists of some common pr...
...n find this demo on github — see the source code, or run it live)! javascript can do a lot more than that — let's explore what in more detail. so what can it really do? the core client-side javascript language consists of some common programming features that allow you to do things like: store useful values inside variables. in the above example for instance, we ask for a new name to be
entered then store that name in a variable called name. operations on pieces of text (known as "strings" in programming). in the above example we take the string "player 1: " and join it to the name variable to create the complete text label, e.g. ''player 1: chris". running code in response to certain events occurring on a web page. we used a click event in our example above to detect when the butto...
...And 2 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
this is what we'll cover in this article. ...
...an't update our list of items without manually changing our code! let's fix that. let's create a new component that will allow us to add a new to-do item. in your components folder, create a new file called todoform.vue. add a blank <template> and a <script> tag like before: <template></template> <script> export default {}; </script> let's add in an html form that lets you
enter a new todo item and submit it into the app. we need a <form> with a <label>, an <input>, and a <button>. update your template as follows: <template> <form> <label for="new-todo-input"> what needs to be done? </label> <input type="text" id="new-todo-input" name="new-todo" autocomplete="off" /> <button type="submit"> add </button> <...
...bel>, an <input>, and a <button>. update your template as follows: <template> <form> <label for="new-todo-input"> what needs to be done? </label> <input type="text" id="new-todo-input" name="new-todo" autocomplete="off" /> <button type="submit"> add </button> </form> </template> so we now have a form component into which we can
enter the title of a new todo item (which will become a label for the corresponding todoitem when it is eventually rendered). let's load this component into our app. go back to app.vue and add the following import statement just below the previous one, inside your <script> element: import todoform from './components/todoform'; you also need to register the new component in your app compo...
...And 2 more matches
Gecko Keypress Event
bic, greek, hebrew, russian, etc.). the charcode value depends on the state of capslock and numlock (except they are currently ignored if alt (option) is down on mac - see bug 432953). there are also some differences between the platforms, as described in the following sections. windows the charcode is replaced only when ctrl is down but alt is not down. if the os-provided character cannot be
entered without using the ctrl key, then, gecko does not replace the character. e.g., ctrl+shift+'2' on persian keyboard layout inputs a zwnj, though shift+'2' inputs '@', and so, if gecko were to replace the charcode in this case, users would not be able to input zwnj (bug 414130). otherwise, gecko can replace the charcode with an ascii character. however, gecko replaces the charcode only when the ke...
...ccessibility issues for non-latin keyboard layout users as many non-ascii characters will not be available for shortcuts. therefore, web application developers should use only letters, ascii numerals, plus sign, and minus sign for custom shortcut keys. linux the charcode is replaced only when ctrl is down but alt and meta are not down. if the character provided by the keyboard layout cannot be
entered without ctrl key, then, gecko does not replace the character (as on windows). mac the charcode is replaced when meta (command) or ctrl is down. if the current keyboard layout is dvorak-qwerty layout or a non-latin layout, the command key switches the keyboard layout to the us qwerty keyboard layout temporary. gecko uses the character from this keyboard layout for the ctrl key also. however,...
...odes for internal key handling this section documents only gecko internal keypress event handling, so web application developers can ignore this section. gecko replaces the charcode of dom keypress events for accelerator key handling, but that is not enough. problem 1 the zoom-in shortcut handler in firefox is defined as <key key="+" modifiers="accel"/>. however, the shift key must be used to
enter '+' on us keyboard layout, and so the state of the shift key causes the modifiers not to match those specified in the handler. for the us keyboard layout, a related handler is defined with <key key="=" modifiers="accel"/>, so that users do not need to use the shift key to access the zoom-in shortcut. of course, this is not much help to users with other keyboard layouts. e.g., on a japanese keybo...
...And 2 more matches
Phishing: a short definition
ntity online. a relatively simple, yet effective, phishing scheme is sending an email with a fake invoice of a person’s favorite shopping site. this email will usually contain a link pretending to lead to the original service, but in reality, taking the victim to an attacker-controlled website. the login portal might resemble the trusted website's login page very closely, and convince users to
enter their credentials, letting others hijack their account. past and current countermeasures various technical, and social approaches, exist to combat phishing attacks. none of these are sufficient by themselves, so we see a mix of these deployed by various services. the following is a non-exhaustive list of the most common approaches. shifting blame to users some quick-to-implement, and cost-eff...
...y possible. earlier responses by affected banks, and payment providers, was to attempt educating users to not click links in emails, along with requesting to verify email legitimacy through checking for relevant personal information. another solution is to strengthen logins with pictures, or colored words, often chosen when signing up for a service. users look for these when logging in, and only
enter their credentials when they recognize the user defined pictures or words. a study on the efficacy of security indicators, presented at the 2007 ieee symposium on security and privacy, suggests that the above countermeasures fail to protect the majority of users. this too, includes missing https or ev certificate indicators in a browser’s navigation bar. services assuming responsibility techn...
...aded in a browser and here is the maker’s last chance to preventing fraud. since version 2.0, firefox has used google’s safebrowsing service, to detect known web forgeries, and display an alert instead of the fraudulent website. two-factor authentication none of the above anti-phishing measures address the basic problem: username/password combinations are often enough to impersonate users.
enter the world of second factors. a second factor is something a user possesses to further authenticate with a service. for example, a usb token, bluetooth device, mobile phone, or simply a key stored on a separate device. the first factor is usually the password and username. if both factors don’t match, the service will reject authentication requests. public key cryptography many services will s...
...And 2 more matches
NSS tools : pk12util
rtificate or key is the pkcs#12 input file (-i) and some way to specify the security database being accessed (either -d for a directory or -h for a token). ...
... p12file [-h tokenname] [-v] [-d [sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] for example: # pk12util -i /tmp/cert-files/users.p12 -d sql:/home/my/sharednssdb
enter a password which will be used to encrypt your keys. the password should be at least 8 characters long, and should contain at least one non-alphabetic character.
enter new password: re-
enter password:
enter password for pkcs12 file: pk12util: pkcs12 import successful exporting keys and certificates using the pk12util command to export certificates and keys requires both the name of the certificate to extract from the database (-n) and the pkcs#12-formatted output file to write to. there are optional parameters that can be used to encrypt the file to pro...
...ameters that can be used to encrypt the file to protect the certificate material. pk12util -o p12file -n certname [-c keycipher] [-c certcipher] [-m|--key_len keylen] [-n|--cert_key_len certkeylen] [-d [sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] for example: # pk12util -o certs.p12 -n server-cert -d sql:/home/my/sharednssdb
enter password for pkcs12 file: re-
enter password: listing keys and certificates the information in a .p12 file are not human-readable. the certificates and keys in the file can be printed (listed) in a human-readable pretty-print format that shows information for every certificate and any public keys in the .p12 file. pk12util -l p12file [-h tokenname] [-r] [-d [sql:]directory] [-p dbprefix] [-...
...And 2 more matches
gtstd.html
ting up the ca db and certificate set up the ca with its own separate set of databases. create a new certificate database in the ca_db directory. >mkdir ca_db >certutil -n -d ca_db create the self-signed root ca certificate, specifying the subject name for the certificate. >certutil -s -d ca_db -n "myco's root ca" -s "cn=my ca,o=myco,st=california,c=us" -t "ct,," -x -2
enter password or pin for "communicator certificate db": extract the ca certificate from the ca's certificate database to a file. >certutil -l -d ca_db -n "myco's root ca" -a -o ca_db/rootca.crt
enter password or pin for "communicator certificate db": display the contents of the ca's certificate databases. >certutil -l -d ca_db the trust flag settings "ctu,u,u" indicate that the ...
...otca.crt create the server certificate request, specifying the subject name for the server certificate. we make the common name (cn) be identical to the hostname of the server. note that this step generates the server's private key, so it must be done in the server's database directory. >certutil -r -d server_db -s "cn=myco.mcom.org,o=myco,st=california,c=us" -a -o server_db/server.req
enter password or pin for "communicator certificate db": this step simulates the ca signing and issuing a new server certificate based on the server's certificate request. the new cert is signed with the ca's private key, so this operation uses the ca's databases. this step leaves the server's new certificate in a file. >certutil -c -d ca_db -c "myco's root ca" -a -i server_db/server.req -o ser...
...icator certificate db": this step simulates the ca signing and issuing a new server certificate based on the server's certificate request. the new cert is signed with the ca's private key, so this operation uses the ca's databases. this step leaves the server's new certificate in a file. >certutil -c -d ca_db -c "myco's root ca" -a -i server_db/server.req -o server_db/server.crt -2 -6
enter password or pin for "communicator certificate db": import (add) the new server certificate to the server's certificate database in the server_db directory with the appropriate nickname. notice that no trust is explicitly needed for this certificate. >certutil -a -d server_db -n myco.mcom.org -a -i server_db/server.crt -t ",," display the contents of the server's certificate databases.
...And 2 more matches
NSS tools : pk12util
or key is the pkcs#12 input file (-i) and some way to specify the security database being accessed (either -d for a directory or -h for a token). ...
...le [-h tokenname] [-v] [-d [sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] for example: # pk12util -i /tmp/cert-files/users.p12 -d sql:/home/my/sharednssdb
enter a password which will be used to encrypt your keys. the password should be at least 8 characters long, and should contain at least one non-alphabetic character.
enter new password: re-
enter password:
enter password for pkcs12 file: pk12util: pkcs12 import successful exporting keys and certificates using the pk12util command to export certificates and keys requires both the name of the certificate to extract from the database (-n) and the pkcs#12-formatted output file to write to. there are optional parameters that can be used to encrypt the...
... that can be used to encrypt the file to protect the certificate material. pk12util -o p12file -n certname [-c keycipher] [-c certcipher] [-m|--key_len keylen] [-n|--cert_key_len certkeylen] [-d [sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] for example: # pk12util -o certs.p12 -n server-cert -d sql:/home/my/sharednssdb
enter password for pkcs12 file: re-
enter password: listing keys and certificates the information in a .p12 file are not human-readable. the certificates and keys in the file can be printed (listed) in a human-readable pretty-print format that shows information for every certificate and any public keys in the .p12 file. pk12util -l p12file [-h tokenname] [-r] [-d [sql:]directory] [-p...
...And 2 more matches
Rhino Debugger
debug scripts running in multiple threads and provides facilities to set and clear breakpoints, control execution, view variables, and evaluate arbitrary javascript code in the current scope of an executing script. console window the debugger redirects the system.out, system.in, and system.err streams to an internal javascript console window which provides an editable command line for you to
enter javascript code and view system output. the console window maintains a history of the commands you have
entered. you may move backward and forward through the history list by pressing the up/down arrow keys on the keyboard. opening scripts you may select the file->open menu item on the menu bar to load javascript scripts contained in files. this action will display a file-selection dialog box ...
...ned in files. this action will display a file-selection dialog box prompting you for the location of a script to execute. the loaded script will be run in a new thread and control will be given to the debugger on its first instruction. controlling execution the debugger provides the following facilities for you to control the execution of scripts you are debugging: step into to single step
entering any function calls, you may do any of the following: select the debug->step into menu item on the menu bar press the step into button on the toolbar press the f11 key on the keyboard execution will resume. if the current line in the script contains a function call control will return to the debugger upon entry into the function. otherwise control will return to the debugger at the...
...ss the pause/break key on the keyboard break on exceptions to give control to the debugger whenever a javascript is exception is thrown select the debug->break on exceptions checkbox from the menu bar. whenever a javascript exception is thrown by a script a message dialog will be displayed and control will be given to the debugger at the location the exception is raised. break on function
enter selecting debug->break on function
enter will give control to the debugger whenever the execution is
entered into a function or script. break on function exit selecting debug->break on function return will give control to the debugger whenever the execution is about to return from a function or script. moving up and down the stack the lower-left (dockable) pane in the debugger main window ...
...And 2 more matches
Index
erence, spidermonkey these functions attempt to determine whether a property already exists on a specific jsobject without modifying the object. by design, this search may not find a property that other property lookup functions, such as js_lookupproperty, would find. 191 js_beginrequest jsapi reference, spidermonkey indicates to the js engine that the calling thread is
entering a region of code that may call into the jsapi but does not block. 192 js_bindcallable jsapi reference, reference, référence(2), spidermonkey js_bindcallable binds the given callable to use the given object as this. 193 js_bufferiscompilableunit jsapi reference, spidermonkey given a buffer, return false if the buffer might become a valid javascript st...
...rmonkey js_encodestringtobuffer converts the specified javascript str to a c string (an array of 8-bit chars) and fills the specified buffer with up to length bytes of the string. it returns the length of the whole string encoding or (size_t)-1 if the string can't be encoded as bytes. if the returned value is greater than the length you specified, the string was truncated. 253 js_
entercompartment jsapi reference, spidermonkey no summary! 254 js_
entercrosscompartmentcall jsapi reference, obsolete, spidermonkey no summary! 255 js_
enterlocalrootscope jsapi reference, obsolete, spidermonkey scoped local root management allows native functions, getter/setters, etc. to avoid calling js_addroot and js_removeroot to manage global root...
...g jsapi, jsapi reference, reference, référence(2), spidermonkey js_flattenstring flattens a string str and returns a pointer to jsflatstring. 272 js_flushcaches jsapi reference, needscontent, spidermonkey . 273 js_forgetlocalroot jsapi reference, obsolete, spidermonkey this function is used to interact with scoped local root management. see js_
enterlocalrootscope for more on this topic. 274 js_forwardgetpropertyto jsapi reference, reference, référence(2), spidermonkey js_forwardgetpropertyto is the base implementation of js_getproperty, js_getucproperty, js_getpropertybyid etc, where onbehalfof is same to obj. 275 js_freezeobject jsapi reference, reference, référence(2), spidermonkey freezes an o...
...And 2 more matches
Bytecode Descriptions
d by this instruction must not be used or removed from the stack except by jsop::moreiter and jsop::enditer, or by error handling. the script's jsscript::trynotes() must mark the body of the for-in loop, i.e. exactly those instructions that begin executing with iter on the stack, starting with the next instruction (always jsop::loophead). code must not jump into or out of this region: control can
enter only by executing jsop::iter and can exit only by executing a jsop::enditer or by exception unwinding. (a jsop::enditer is always emitted at the end of the loop, and extra copies are emitted on "exit slides", where a break, continue, or return statement exits the loop.) typically a single try note entry marks the contiguous chunk of bytecode from the instruction after jsop::iter to jsop::enditer ...
..., jof_name, jof_propset setintrinsic operands: (uint32_t nameindex) stack: val ⇒ val assign to an intrinsic. nonstandard. intrinsics are used in lieu of global bindings in self- hosted code. the value is actually stored in the intrinsics holder object, globalobject::getintrinsicsholder. (self-hosted code doesn't have many global vars, but it has many functions.) format: jof_atom, jof_name
entering and leaving environments pushlexicalenv operands: (uint32_t lexicalscopeindex) push a lexical environment onto the environment chain. the lexicalscope indicated by lexicalscopeindex determines the shape of the new lexicalenvironmentobject. all bindings in the new environment are marked as uninitialized. implements: evaluation of block, steps 1-4. fine print for environment chain instructions...
...xical environment onto the environment chain. the lexicalscope indicated by lexicalscopeindex determines the shape of the new lexicalenvironmentobject. all bindings in the new environment are marked as uninitialized. implements: evaluation of block, steps 1-4. ...
...And 2 more matches
JSAutoCompartment
description every jscontext has a current compartment. ...
... scope. syntax jsautocompartment(jscontext *cx, jsobject *target); jsautocompartment(jscontext *cx, jsscript *target); name type description cx jscontext * the context on which a cross-compartment call is needed. target jsobject * / jsscript * the object in a different compartment to be accessed. ...
...artment call is needed. target jsobject * / jsscript * the object in a different compartment to be accessed. this implicitly identifies the compartment to be
entered. description every jscontext has a current compartment. only objects in the current compartment can be accessed, so to access an object in a different compartment, this containing compartment has to be
entered first. compartments have to be
entered and left in lifo order. ...
...And 2 more matches
JS_LeaveCrossCompartmentCall
obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8.1 js_leavecrosscompartmentcall has been removed in bug 786068. use js_leavecompartment instead. ...
...ecrosscompartmentcall has been removed in bug 786068. use js_leavecompartment instead. leave a the compartment, returning to the compartment active before the corresponding js_
entercrosscompartmentcall. syntax void js_leavecrosscompartmentcall(jscrosscompartmentcall *call); name type description call jscrosscompartmentcall * value returned by previous call to js_
entercrosscompartmentcall. description every jscontext has a current compartment. ...
...nding js_
entercrosscompartmentcall. syntax void js_leavecrosscompartmentcall(jscrosscompartmentcall *call); name type description call jscrosscompartmentcall * value returned by previous call to js_
entercrosscompartmentcall. description every jscontext has a current compartment. any access to an object in a different compartment must be bracketed by call js_
entercrosscompartmentcall and js_leavecrosscompartmentcall. ...
...And 2 more matches
SpiderMonkey 1.8.5
choose one of the configuration options to enable nspr (e.g. --with-system-nspr). garbage collection spidermonkey 1.8.5 introduces a conservative stack-scanning garbage collector. unlike the exact garbage collector, the new garbage collector will scan the c stack and registers in your embedding, looking for bits that it can treat as potential gc roots. the approach eliminates the need for the js_
enterlocalrootscope api, and in many cases the need to explicitly root gc things or use the "root as you go" approach popular with earlier spidermonkey releases. since this is a conservative collector, it will often find "garbage" addresses which can trigger warnings from certain code analysis tools. if you are running valgrind on your embedding, be sure to build spidermonkey with the --enable-valgri...
...mpilescriptforprincipalsversion js_compileucfunctionforprincipalsversion js_compileucscriptforprincipalsversion js_consumejsontext (removed in future releases, replaced with js_parsejson) js_decompilescriptobject js_deepfreezeobject js_definefunctionbyid js_defineownproperty js_definepropertybyid js_deletepropertybyid js_deletepropertybyid2 js_doubleisint32 js_encodestringtobuffer js_
entercrosscompartmentcall js_evaluatescriptforprincipalsversion js_evaluateucscriptforprincipalsversion js_executeregexp js_executeregexpnostatics js_executescriptversion js_forget_string_flatness js_fileescapedstring js_finishjsonparse (removed in future releases, replaced with js_parsejson) js_flatstringequalsascii js_flattenstring js_flushcaches js_freezeobject js_getcompartmentprivate ...
...rtmentandglobalobject js_newdateobject js_newdateobjectmsec js_newfunctionbyid body new c++ helpers while jsapi remains a c api, the engine is now implemented in c++. some c++ helpers have been introduced into the api, to help embedders writing c++ projects. please note that spidermonkey reserves the js:: namespace for itself. ...
...And 2 more matches
nsIAuthInformation
ion. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the caller of nsiauthprompt2.promptusernameandpassword() or nsiauthprompt2.promptpasswordasync() provides an object implementing this interface; the prompt implementation can then read the values here to prefill the dialog. after the user
entered the authentication information, it should set the attributes of this object to indicate to the caller what was
entered by the user. attributes attribute type description authenticationscheme autf8string the authentication scheme used for this request, if applicable. if the protocol for this authentication does not support schemes, this will be the empty string. otherwise, this will be a st...
...quest, if applicable. if the protocol for this authentication does not support schemes, this will be the empty string. otherwise, this will be a string such as "basic" or "digest". this string will always be in lowercase. read only. domain astring the initial value should be used to prefill the dialog or be shown in some other way to the user. on return, this parameter should contain the domain
entered by the user. this attribute is only used if flags include #need_domain. flags unsigned long flags describing this dialog. a bitwise or of the constants. it is possible that neither #auth_host nor #auth_proxy are set. auth prompts should ignore flags they do not understand; especially, they should not throw an exception because of an unsupported flag. read only. password astring the initial...
...er #auth_host nor #auth_proxy are set. auth prompts should ignore flags they do not understand; especially, they should not throw an exception because of an unsupported flag. read only. password astring the initial value should be used to prefill the dialog or be shown in some other way to the user. the password should not be shown in clear. on return, this parameter should contain the password
entered by the user. realm astring the server-supplied realm of the authentication as defined in rfc 2617. can be the empty string if the protocol does not support realms. otherwise, this is a human-readable string like "secret files". read only. username astring the initial value should be used to prefill the dialog or be shown in some other way to the user. on return, this parameter should contai...
...And 2 more matches
Address Book examples
selectedab is the uri of an address book to default the dialog to saving the card in. this may be blank if not required. aburi and card are the uri of the address book and the card contained within that address book. ...
...og window.opendialog("chrome://messenger/content/addressbook/abnewcarddialog.xul", "", "chrome,resizable=no,titlebar,modal,c
enterscreen", {selectedab:selectedab}); edit contact dialog window.opendialog("chrome://messenger/content/addressbook/abeditcarddialog.xul", "", "chrome,resizable=no,modal,titlebar,c
enterscreen", {aburi:aburi, card:card}); new list dialog window.opendialog("chrome://messenger/content/addressbook/abmaillistdialog.xul", "", "chrome,resizable=no,titlebar,modal,c
enterscreen", {selectedab:selectedab}); edit list dialog window.opendialog("chrome://messenger/content/addressbook/abeditlistdialog.xul", ...
...the following options are available. for local (mork) address books: window.opendialog( "chrome://messenger/content/addressbook/abaddressbooknamedial...
...And 2 more matches
CanvasRenderingContext2D.rotate() - Web APIs
the canvasrenderingcontext2d.rotate() method of the canvas 2d api adds a rotation to the transformation matrix. syntax void ctx.rotate(angle); parameters angle the rotation angle, clockwise in radians. you can use degree * math.pi / 180 to calculate a radian from a degree. the rotation c
enter point is always the canvas origin. to change the c
enter point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. note that the c
enter of rotation is the top-left corner of the canvas, and not a location relative to any shape. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, ...
... rotate() rotates the matrix by the desired amount. finally, translate() moves the ma...
...ngle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); result the c
enter of rotation is blue. the non-rotated rectangle is gray, and the rotated rectangle is red. rotating a shape around its c
enter this example rotates a shape around its c
enter point. ...
...And 2 more matches
Document - Web APIs
event is raised. globaleventhandlers.ondblclick is an eventhandler representing the code to be called when the dblclick event is raised. globaleventhandlers.ondrag is an eventhandler representing the code to be called when the drag event is raised. globaleventhandlers.ondragend is an eventhandler representing the code to be called when the dragend event is raised. globaleventhandlers.ondrag
enter is an eventhandler representing the code to be called when the drag
enter event is raised. globaleventhandlers.ondragexit is an eventhandler representing the code to be called when the dragexit event is raised. globaleventhandlers.ondragleave is an eventhandler representing the code to be called when the dragleave event is raised. globaleventhandlers.ondragover is an eventhandler representi...
...be called when the loadstart event is raised (when progress has begun on the loading of a resource.) globaleventhandlers.onlostpointercapture is an eventhandler representing the code to be called when the lostpointercapture event type is raised. globaleventhandlers.onmousedown is an eventhandler representing the code to be called when the mousedown event is raised. globaleventhandlers.onmouse
enter is an eventhandler representing the code to be called when the mouse
enter event is raised. globaleventhandlers.onmouseleave is an eventhandler representing the code to be called when the mouseleave event is raised. globaleventhandlers.onmousemove is an eventhandler representing the code to be called when the mousemove event is raised. globaleventhandlers.onmouseout is an eventhandler repre...
...lers.onpointercancel is an eventhandler representing the code to be called when the pointercancel event is raised. globaleventhandlers.onpointerover is an eventhandler representing the code to be called when the pointerover event is raised. globaleventhandlers.onpointerout is an eventhandler representing the code to be called when the pointerout event is raised. globaleventhandlers.onpointer
enter is an eventhandler representing the code to be called when the pointer
enter event is raised. globaleventhandlers.onpointerleave is an eventhandler representing the code to be called when the pointerleave event is raised. globaleventhandlers.onpointerlockchange is an eventhandler representing the code to be called when the pointerlockchange event is raised. globaleventhandlers.onpointerloc...
...And 2 more matches
Element: mouseleave event - Web APIs
ext to an area outside of the most outer div represented here. one single mouseout event is sent to the deepest element of the dom tree, then it bubbles up the hierarchy until it is canceled by a handler or reaches the root. examples the mouseout documentation has an example illustrating the difference between mouseout and mouseleave. mouseleave the following trivial example uses the mouse
enter event to change the border on the <div> when the mouse
enters the space alloted to it. it then adds an item to the list with the number of the mouse
enter or mouseleave event. html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible. #mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333...
...border on the <div> when the mouse
enters the space alloted to it. it then adds an item to the list with the number of the mouse
enter or mouseleave event. html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible. ...
...t"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible. ...
...And 2 more matches
Using files from web applications - Web APIs
ecting files using drag and drop you can also let the user drag and drop files into your web application. the first step is to establish a drop zone. ...
... using drag and drop you can also let the user drag and drop files into your web application. the first step is to establish a drop zone. ...
...ut making an element receive drop events is easy: let dropbox; dropbox = document.getelementbyid("dropbox"); dropbox.addeventlistener("drag
enter", drag
enter, false); dropbox.addeventlistener("dragover", dragover, false); dropbox.addeventlistener("drop", drop, false); in this example, we're turning the element with the id dropbox into our drop zone. this is done by adding listeners for the drag
enter, dragover, and drop events. we don't actually need to do anything with the drag
enter and dragover events in our case, so these functions are both simple. ...
...And 2 more matches
Guide to the Fullscreen API - Web APIs
activating full-screen mode given an element that you'd like to present in full-screen mode (such as a <video>, for example), you can present it in full-screen mode by simply calling its requestfullscreen() method. ...
...n) { elem.requestfullscreen(); } this code checks for the existence of the requestfullscreen() method before calling it. presentation differences it's worth noting a key difference here between the gecko and webkit implementations at this time: gecko automatically adds css rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". webkit doesn't do this; instead, it c
enters the fullscreen element at the same size in a screen that's otherwise black. to get the same fullscreen behavior in webkit, you need to add your own "width: 100%; height: 100%;" css rules to the element yourself: #myvideo:-webkit-full-screen { width: 100%; height: 100%; } on the other hand, if you're trying to emulate webkit's behavior on gecko, you need to place the element you want to pr...
...ss rules to adjust the inner element to match the appearance you want. notification when fullscreen mode is successfully engaged, the document which contains the element receives a fullscreenchange event. when fullscreen mode is exited, the document again receives a fullscreenchange event. note that the fullscreenchange event doesn't provide any information itself as to whether the document is
entering or exiting fullscreen mode, but if the document has a non null fullscreenelement, you know you're in fullscreen mode. when a fullscreen request fails it's not guaranteed that you'll be able to switch into fullscreen mode. for example, <iframe> elements have the allowfullscreen attribute in order to opt-in to allowing their content to be displayed in fullscreen mode. in addition, certain kind...
...And 2 more matches
HTMLInputElement.stepDown() - Web APIs
ecrement the optional stepdecrement paremeter is a numeric value. if no parameter is passed, stepdecrement defaults to 1. if the value is a float, the value will increment as if math.floor(stepdecrement) was passed. if the value is negative, the value will be incremented instead of decremented. ...
...e value will increment as if math.floor(stepdecrement) was passed. if the value is negative, the value will be incremented instead of decremented. ...
...instead of decremented. ...
...And 2 more matches
Pointer events - Web APIs
egrees, with a value in the range 0 to 359. pointertype indicates the device type that caused the event (mouse, pen, touch, etc.) isprimary indicates if the pointer represents the primary pointer of this pointer type. ...
...nt types, seven of which have similar semantics to their mouse event counterparts (down, up, move, over, out,
enter, and leave). below is a short description of each event type and its associated global event handler. event on event handler description pointerover onpointerover fired when a pointer is moved into an element's hit test boundaries. pointer
enter onpointer
enter fired when a pointer is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown). pointerdown onpointerdown fired when a pointer becomes active buttons state. pointermove onpointermove fired when a pointer changes coordinate...
...s property is used to determine the maximum number of simultaneous touch points that are supported at any single point in time. examples this section contains examples of basic usage of using the pointer events interfaces. registering event handlers this example registers a handler for every event type for the given element. ...
...And 2 more matches
Alerts - Accessibility
ible error checking into. examples of common problems include e-mail addresses which are not valid, or a name field which does not contain at least a first name or a surname. the form first, please read about the aria-required technique if you have not done so, as this technique expands upon that. ...
...gend> <label for="name">your name (required):</label> <input name="name" id="name" aria-required="true"/> <br /> <label for="email">e-mail address (required):</label> <input name="email" id="email" aria-required="true"/> <br /> <label for="website">website (optional):</label> <input name="website" id="website"/> </fieldset> <label for="message">please
enter your message (required):</label> <br /> <textarea name="message" id="message" rows="5" cols="80" aria-required="true"></textarea> <br /> <input type="submit" name="submit" value="send message"/> <input type="reset" name="reset" value="reset form"/> </form> checking for validity and notifying the user form validations consists of several steps: checking if the e-...
...each field has a set of criteria which must be met in order to pass validation. in order to simplify this example, we’ll check whether the e-mail address contains the “@” symbol, and if the name entry contains at least 1 character. if the above criteria is not met, the field’s aria-invalid attribute will be given a value of “true”. if the criteria was not met, the...
...And 2 more matches
background - CSS: Cascading Style Sheets
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 ...
... 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>...
...operty 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: "c
enter/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-clip. the <background-color> value may only be included in the last layer specified. values <attachment> see background-attachment <box> see background-cli...
...And 2 more matches
margin - CSS: Cascading Style Sheets
he bottom. when four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise). values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the browser selects a suitable margin to use. ...
...e). values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the browser selects a suitable margin to use. for example, in certain cases this value can be used to c
enter an element. ...
... the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the browser selects a suitable margin to use. for example, in certain cases this value can be used to c
enter an element. ...
...And 2 more matches
scroll-snap-coordinate - CSS: Cascading Style Sheets
pairing, the first value gives the x coordinate of the snap coordinate, the second value its y coordinate. ...
...ives the x coordinate of the snap coordinate, the second value its y coordinate. ...
...snap coordinate, the second value its y coordinate. ...
...And 2 more matches
text-align-last - CSS: Cascading Style Sheets
aligned. 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 values */ text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: c
enter; text-align-last: justify; /* global values */ text-align-last: inherit; text-align-last: initial; text-align-last: unset; values auto the affected line is aligned per the value of text-align, unless text-align is justify, in which case the effect is the same as setting text-align-last to start. start the same as left if direction is left-to-right and right if direction is right-to-left.
...the effect is the same as setting text-align-last to start. start the same as left if direction is left-to-right and right if direction is right-to-left. end the same as right if direction is left-to-right and left if direction is right-to-left. left the inline contents are aligned to the left edge of the line box. right the inline contents are aligned to the right edge of the line box. ...
...g text-align-last to start. start the same as left if direction is left-to-right and right if direction is right-to-left. end the same as right if direction is left-to-right and left if direction is right-to-left. left the inline contents are aligned to the left edge of the line box. right the inline contents are aligned to the right edge of the line box. c
enter the inline contents are c
entered within the line box. ...
...And 2 more matches
HTML attribute reference - HTML: Hypertext Markup Language
specifies the horizontal alignment of the element. allow <iframe> specifies a feature-policy for the iframe. alt <applet>, <area>, <img>, <input> alternative text in case an image can't be displayed. async <script> executes the script asynchronously. autocapitalize global attribute sets whether input is automatically capitalized when
entered by user autocomplete <form>, <input>, <select>, <textarea> indicates whether controls in this form can by default have their values automatically completed by the browser. autofocus <button>, <input>, <keygen>, <select>, <textarea> the element should be automatically focused after the page loaded. autoplay <audio>, <video> the audio or video should p...
... download <a>, <area> indicates that the hyperlink is to be used for downloading a resource. draggable global attribute defines whether the element can be dragged. dropzone global attribute indicates that the element accepts the dropping of content onto it. enctype <form> defines the content type of the form data when the method is post.
enterkeyhint <textarea>, contenteditable the
enterkeyhint specifies what action label (or icon) to present for the
enter key on virtual keyboards. the attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute). for <label>, <output> describes elements which belongs to this one. ...
... <link>, <script> specifies a subresource integrity value that allows browsers to verify what they fetch. intrinsicsize <img> this attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. inputmode <textarea>, contenteditable provides a hint as to the type of data that might be
entered by the user while editing the element or its contents. the attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute). ismap <img> indicates that the image is part of a server-side image map. itemprop global attribute keytype <keygen> specifies the type...
...And 2 more matches
<input type="range"> - HTML: Hypertext Markup Language
are not compatible with the type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. see the range control with hash marks below for an example of how the options on a range are denoted in supported browsers max the greatest value in the range of permitted values. if the value
entered into the element exceeds this, the element fails constraint validation. if the value of the max attribute isn't a number, then the element has no maximum value. this value must be greater than or equal to the value of the min attribute. see the html max attribute. min the lowest value in the range of permitted values. if the value of the element is less than this, the element fails constrain...
...the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). ...
...in the positive direction and -0.5, -1.5, -2.5,... in the negative direction. see the html step attribute. ...
...And 2 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
g browsers changes. there are disadvantages to this approach as well. if the content, layout, and functionality need to change greatly for different devices, it may not be such a good approach. also, taking an existing site and adding responsiveness to it, to make it mobile/tablet friendly, can be a lot more effort than just creating a separate mobile site or app, especially if it is a sprawling
enterprise site. read more about responsive design advantages and disadvantages. you can also read our discussion on the basics of responsive design, if you need some more background information and basics. fluid grids the best place to start is with fluid measurements for our application layout — essentially, this means using a combination of percentages and ems/rems to size your containers and...
...le lot in the following: if (window.matchmedia("(max-width: 480px)").matches) { // the whole of brick.js goes here! } this causes nothing inside the brick.js file to be run unless the viewport width is 480px or less. problem solved. really wide screens one thing you might notice is that when the viewport gets very wide (such as on a cinema display), the layout stops getting wider, and just c
enters in the space available. this is pretty simple to achieve. you could use a min-width media query to fix the <body> width at a certain point: @media all and (min-width: 1400px) { body { width: 1400px; margin: 0 auto; } } but it's actually easier to just set the following rule instead, and get rid of the media query altogether: body { max-width: 1400px; margin: 0 auto; } orienta...
...y problem to solve. if you use the mobile first methodology, you will be creating your mobile layout inside your default css, before any media queries have been applied. the media queries then supply css that is only applied to the markup when the viewport is above a certain width. let's look at a quick example: header { height: 300px; width: 100%; background: url(images/small-header.jpg) c
enter; } @media all and (min-width: 480px) { header { background: url(images/large-header.jpg) c
enter; } } this means that mobile browsers only download the mobile background image asset — not the desktop mobile assets — because they fail the media query tests and therefore ignore the media queries. you can also serve a larger graphic to a higher resolution device using a resolution media...
...And 2 more matches
Displaying annotations - Archive of obsolete content
ages that have annotations associated with them, and a panel to display the annotations. matcher page-mod matcher content script the content script for the matcher page-mod is initialized with a list of all the annotations that the user has created. when a page is loaded the matcher searches the dom for elements that match annotations. if it finds any it binds functions to that element's mouse
enter and mouseleave events to send messages to the main module, asking it to show or hide the annotation. like the selector, the matcher also listens for the window's unload event and on unload sends a detach message to the main module, so the add-on can clean it up. the complete content script is here: self.on('message', function onmessage(annotations) { annotations.foreach( function(annotat...
... detach message to the main module, so the add-on can clean it up. ...
...the current set of annotations provides a handler for messages from that content script, handling the three messages - show, hide and detach - that the content script might send adds the worker to an array, so we it can send messages back later. ...
...e code to construct the annotation panel: var annotation = panels.panel({ width: 200, height: 180, contenturl: data.url('annotation/annotation.html'), contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('annotation/annotation.js')], onshow: function() { this.postmessage(this.content); } }); execute cfx run one last time. activate the annotator and
enter an annotation. you should see a yellow border around the item you annotated: when you move your mouse over the item, the annotation should appear: obviously this add-on isn't complete yet. it could do with more beautiful styling, it certainly needs a way to delete annotations, it should deal with overquota more reliably, and the matcher could be made to match more reliably. but we hope this gi...
Storing annotations - Archive of obsolete content
the simple-storage module with a declaration like: var simplestorage = require('sdk/simple-storage'); in the module scope, initialize an array which will contain the stored annotations: if (!simplestorage.storage.annotations) simplestorage.storage.annotations = []; now we'll add a function to the module scope which deals with a new annotation. ...
...this is implemented as a panel that's shown in response to the widget's right-click message. the panel has three new files associated with it: a content-script which builds the panel content a simple html file used as a template for the panel's content a simple css file to provide some basic styling. these three files can all go in a new subdirectory of data which we will c...
... updating main.js here's the code to create the panel, which can go in the main function. var annotationlist = panels.panel({ width: 420, height: 200, contenturl: data.url('list/annotation-list.html'), contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('list/anno...
...ry we should avoid recording annotations in private windows. there's a very simple way to do this: do nothing. by omitting the "private-browsing" key from the annotator's "package.json" file, the annotator opts out of private browsing altogether. this means that its widget will not appear on any private windows and its selector and matcher content scripts won't run, so the user won't be able to
enter any annotations in private windows. try it: execute cfx run and open a new private window: you should no longer see the annotator's widget. now we can create and store annotations, the last piece is to display them when the user loads the page. ...
Signing an XPI - Archive of obsolete content
ze the certificate database decide which folder to create the certificate database in. use this command to create it (note the trailing dot is required). c:\projects\codesigning\> certutil -n -d . the dot will cause the database to be created in the current directory. you will be prompted for the nss certificate database password - don't forget it! c:\projects\codesigning\> certutil -n -d .
enter a password which will be used to encrypt your keys. the password should be at least 8 characters long, and should contain at least one non-alphabetic character.
enter new password: re-
enter password: create a test certificate create a test certificate, using the -p option to set a password for the new certificate c:\projects\codesigning\> signtool -g mytestcert -d . -p"password" using certif...
...ate a test certificate, using the -p option to set a password for the new certificate c:\projects\codesigning\> signtool -g mytestcert -d . -p"password" using certificate directory: . warning: performing this operation while the browser is running could cause corruption of your security databases. if the browser is currently running, you should exit the browser before continuing this operation.
enter "y" to continue, or anything else to abort: y
enter certificate information. all fields are optional. acceptable characters are numbers, letters, spaces, and apostrophes. certificate common name: xpi test organization: tjworld organization unit: software state or province: nottingham country (must be exactly 2 characters): gb username: tj email address: certificates@lan.tjworld.net generated p...
...se the same browser when installing the new certificate because the key and certificate pair must be together. hint: when applying for a certificate ensure that the organisation (o) contains your name and not the issuer's default text, because this is what is displayed to users. for this guide i applied for a free certificate from unizeto certum. after completing the application process where i
entered my details into the online application, i received an automated email requesting documentary evidence of my id in the form of a photo-id or similar. i have hi-resolution scanned images of my passport and drivers license for these situations so i placed them on my web-server temporarily in a hidden location and emailed unizeto certum with the details and location of the files. within a few hours...
...to the code signing database, and verify the signing attributes (u,u,u). ensure you use the nickname of your certificate in place of mine, and the directory where your mozilla firefox key database files are: c:\projects\codesigning> pk12util -o "certum code signing.pkcs12" -n "tj's unizeto sp. z o.o. id" -d "c:\documents and settings\tj\application data\mozilla\firefox\profiles\xxxxxxxx.default"
enter password for pkcs12 file: re-
enter password: pk12util: pkcs12 export successful c:\projects\codesigning> pk12util -i "certum code signing.pkcs12" -d .
enter password or pin for "nss certificate db":
enter password for pkcs12 file: pk12util: pkcs12 import successful c:\projects\codesigning> certutil -l -d . mytestcert u,u,cu certum root ca ...
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
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 required order of content within generic markup. for wired news, the c
enter (or main) column usually contains the most important content for each page. i wanted c
enter 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 advant...
...owsers to dynamically calculate a total. resizing the browser window often resulted in one column getting pushed to the bottom of another. using absolute positioning for left and right columns allowed the markup for each column to fall in any order. there are some technicalities in the order of our markup and some ad units that would require too much to cover here. ...
...the other disadvantage comes into play at small browser window sizes. while floats automatically reconfigure if they don't fit within the window width, absolute positioned columns always remain in the same place, even if it means content in one column begins to overlap another column. ...
...namically pull in ads from available inventory. because of the iframe, we backed off of the idea that we'd be able to adhere to xhtml strict rules, and settled for using the xhtml transitional dtd. we were hoping to go all the way with the xhtml conversion, but our ad units and some other third-party content prevent us from doing so. our engineers also faced a huge archive of content that wasn't
entered into our cms with xhtml in mind. it's true that our stories exist in a database, separated from page templates and peripheral formatting. but writers, editors, and producers have been inserting stories into vignette for years sans closing paragraph (</p>) tags. unquoted attributes and uppercase html tags? we've got them in spades, and they're embedded in all past stories of the database. fortun...
List of Mozilla-Based Applications - Archive of obsolete content
e think there are many dark matter projects that we don't know about. if you have information about a new project or extra information about an existing project, please feel free to update this page. a list of former mozilla-based applications is also available. name description additional information 389 directory server ldap server uses nss a380 seatback
entertainment system media software this blog post mentions a reference to mozilla being used but i couldn't find more information about it. abstract accounting tool adobe acrobat and adobe reader portable document format (pdf) software uses mozilla spidermonkey adobe flash player popular browser plug-in uses nss in linux version adwatch c...
...ased interface classilla mozilla browser for mac os 9 clines a clone of color lines (game) standalone version cloud web operating system cloud browse iphone/ipad/ipod touch browser seems to be firefox running remotely on servers that people access through device conkeror keyboard-oriented browser convertigo
enterprise mashup server server tool for transactional web scraping and for web clipping cometbird another firefox mod modified version of firefox correo email couac (fr) web-based email and jabber app couchdb document-oriented database uses spidermonkey courtanet benefit (fr) underwriting software for french insurance bro...
...rating system sqlite-manager database manager standalone version of add-on stealthsurfer secure internet tools on usb key uses firefox and thunderbird streambase complex event processing platform seems to use xulrunner stylizer css editor css editor css editor with built-in firebug-like diagnostics and gecko 1.8 preview sun java
enterprise system server products uses nss sundial browser with advanced domain name technology based on firefox surfeasy private and secure web browsing sweet16 apple ii computer emulator uses spidermonkey as a scriptable debugger for software running in the emulator mozilla sunbird/mozilla lightning calendar tabpress auth...
...feel free to supply references. uox3 ultima online server-emulator uses mozilla spidermonkey verbosio xml editor no releases available verseminder bible passage app virgin media security security tools seems to use xulrunner virtualbox ...
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
e too). instead of configuring end user individual preferences files (~/.mozilla/default/randomdir/prefs.js) we now use a centralized default set of preferences. this centralized preference file can lock preferences (lockpref) or initialize them (defaultpref) based on environment variables (user, home...) and/or ldap queries (fetch email address, common name , language, homepage etc...) from the
enterprise directory. central configuration file that feature is provided through a javascript file. file location (not tested since 2012 ...) in thunderbird , firefox, the javascript preference file that calls the centralized preference file is located in $install_dir_moz_app/defaults/pref, for example in thunderbird this would be repectively for windows/linux: c:\program files\mozilla thunderbir...
....pl. for netscape 4.x the convert function from the client customization kit (cck) could also do that (and other things like personalize auto-installation...): http://developer.netscape.com/docs/manuals/deploymt/config.htm. autoconfig directives here we want to set users central mail preferences: create one account from their login name, get their email address from an ldap request and set the
enterprise imap and smtp servers. hence, when working on multiuser workstations, each user gets automatically thunderbird configured for his profile. thunderbird.cfg (version 1) here's the complete file, first we get the user login name from environment variables, then configure the ldap address book, create an email account, and configure imap and smtp: [root@calaz /usr/lib/thunderbird] $ cat thund...
...eck xmlextras pref webservices universalcharset auth" are now present in the default configure script. see bug 295329 for details. add the autoconfig option for old thunderbird 1.0.x by default, autoconfig did not make part of the binaries distribution of thunderbird (1.0.x). it was apparently supposed to increase the load of the binary for a feature not used by lots of individuals. however for
enterprise deployment, it is vital! so we needed to recompile thunderbird with autoconfig support, it's just a matter of adding --enable-extensions=pref in mozconfig file. on my fedora core 3 system, i took the thunderbird source package thunderbird-1.0.2-1.3.3.src.rpm installed it (rpm -i) then modified /usr/src/redhat/sources/thunderbird-mozconfig by adding: ac_add_options --enable-extensions=pref ...
...tions --enable-application=mail ac_add_options --prefix="/usr/local/thunderbirddebug" ac_add_options --libdir="/usr/local/thunderbirddebuglibs" ac_add_options --enable-extensions=pref ac_add_options --enable-static ac_add_options --disable-shared ac_add_options --disable-crashreporter the option --disable-crashreporter is necessary if you get compile error at this stage of the build gmake[7]:
entering directory `/usr/local/moz2/commsrc/mozilla/toolkit/crashreporter/google-breakpad/src/common/linux' dump_symbols.cc build then start building [root@b008-02 commsrc]# time make -f client.mk build rm -f ../../mozilla/dist/bin/testcookie if test -f ../../mozilla/dist/bin/testtarray; then cp ../../mozilla/dist/bin/testtarray ../../mozilla/dist/bin/testcookie; fi; gmake[5]: quittant le répert...
XUL Events - Archive of obsolete content
unload the window. attribute: onclose command this event handler is called when an element is activated. how it is activated varies for each element and in many cases, there are several ways to activate an element. for example, a button can be activated by clicking on it with the mouse or by pressing
enter while it has the focus. menus can be activated by selecting them with the mouse or by pressing a shortcut key. you should always use the command event instead of click because it will be called in all of the needed cases. attribute: oncommand commandupdate this event occurs when a command update occu...
...op, should respond in some manner such inserting the dragged object into itself. attribute: ondragdrop dragend the dragend event is sent to the source node (the node that was dragged) when the drag is finished. ...
...g the dragged object into itself. attribute: ondragdrop dragend the dragend event is sent to the source node (the node that was dragged) when the drag is finished. attribute: ondragend drag
enter the drag
enter event is sent when the mouse pointer first moves over an element during a drag. it is similar to the mouseover event but occurs while dragging. attribute: ondrag
enter dragexit this event is sent when the mouse pointer moves away from an element during a drag. it is also called after a drop on an elem...
... dragover related to the mousemove event, this event is sent while something is being dragged over an element. the handler should indicate whether the object being dragged can be dropped. attribute: ondragover input this event is sent when a user
enters text in a textbox. this event is only called when the text displayed would change, thus it is not called when the user presses non-displayable keys. attribute: oninput overflow this event is only sent to a box or other layout element with a css overflow property set to a value other than 'visible'. ...
Focus and Selection - Archive of obsolete content
only one element per window has the focus at a time. the user can change the focus by clicking an element with the mouse or by pressing the tab key. ...
...ding an onfocus or onblur attribute on an element. they work just like their html counterparts. you might use these event handlers to highlight the element or display text on a status bar. the following example can be used to apply a function to handle a focus event. example 2 : source view <script> function displayfocus(){ var elem=document.getelementbyid('sbar'); elem.setattribute('value','
enter your phone number.'); } </script> <textbox id="tbox1"/> <textbox id="tbox2" onfocus="displayfocus();"/> <description id="sbar" value=""/> the focus event, when it occurs, will call the displayfocus function. this function will change the value of the text label. we could extend this example to remove the text when the blur event occurs. typically, you will use focus and blur events to update p...
..."/> <description id="sbar" value=""/> the focus event, when it occurs, will call the displayfocus function. this function will change the value of the text label. we could extend this example to remove the text when the blur event occurs. typically, you will use focus and blur events to update parts of the interface as the user selects elements. for instance, you might update a total as the user
enters values in other fields, or use focus events to validate certain values. don't display an alert during a focus or blur event as this will be distracting for the user and is poor user interface design. you can also add event handlers dynamically using the dom function addeventlistener. you can use it for any element and event type. it takes three parameters, the event type, a function to execute w...
...ange function. it takes two parameters, the first is the starting character and the second is the character after the last one that you want to have selected. values are zero-based, so the first character is 0, the second is 1 and so on. tbox.setselectionrange(4,8); this example will select the fifth character displayed, as well as the sixth, seventh and eighth. if there were only six characters
entered into the field, only the fifth and sixth characters would be selected. no error would occur. if you use the same value for both parameters, the start and end of the selection changes to the same position. this results in changing the cursor position within the textbox. for example, the line below can be used to move the cursor to the beginning of the text. tbox.setselectionrange(0,0); you can ...
XUL accessibility guidelines - Archive of obsolete content
accessibility. accessibility channel for general discussion around internet accessibility with logger. useful at conferences. apple accessibility. portal to apple accessibility. lars (linux accessibility resource site). portal for general linux accessibility. microsoft accessibility. portal for microsoft accessibility. accessibility - mdc. accessibility hub on the mozilla developer c
enter. mozilla.support.accessibility. mozilla accessibility newsgroup. #accessibility. accessibility channel on mozilla's irc server. guidelines keyboard access keyboard access is important to users who can't use a mouse. many screen reader users and those with physical disabilities rely on the keyboard as their primary input tool. these users require easy, predictable, and well-docume...
...use or disorient users. a common example of this occurrence in the us is with phone number form fields. us phone numbers are often displayed on the web in two main formats xxx-xxx-xxxx or (xxx) xxx-xxxx. to enforce this pattern some forms provide three form fields. the problem occurs when a developer decides to add functionality that jumps the user to the second form field once 3 digits have been
entered into the first form field. this behavior is then repeated for the next form field. users who are used to navigating form fields themselves often end up repeating the jump operation and thereby skipping ahead one form field. initial dialog focus the initial focus in a xul dialog (i.e., the focus when the dialog is first opened) should always be on a specific control, not on the dialog itself. ...
... <dialog id="print_dialog" title="print" ...> <window id="mywindow" title="my application" ...> <wizard id="reg_window" title="register your software" ...> form labels labels are not automatically associated to form elements. use the control attribute to bind a text label (from a label element) to a form element. screen readers will then read aloud the label when
entering a form field. for labels that may wrap to a second line, do not use the description element. instead, use the text of a label enclosed in the label tags, and do not use the value attribute, as shown below for the password field. <label control="login-username" value="username:"/> <textbox id="login-username"/> <label control="login-password">password:</label> <textbox id="login-password" typ...
...standard xul attributes. for example, the first item in the privacy panel in the firefox option dialog (discussed and shown above) is [checkbox] remember visited pages for the last [textbox] days. the difficulty here arises from the fact that the correct label for the checkbox ("remember visited pages for the last x days.") includes three different pieces, the second of which is the current value
entered into the textbox. the correct label for textbox is actually the same, but we don't want assistive technologies to read or show it twice. we need a way of specifying in the source that the checkbox, editbox, and nearby text labels are all part of a single entity, and that they essentially label each other. to solve this problem, we use the aria-labelledby attribute on both controls (note the do...
XUL controls - Archive of obsolete content
ears" value="b"/> </menupopup> </menulist> more information about the menulist element. menulist reference related elements: menupopup menuitem <menulist editable="true"> an editable menulist is like a standard menulist except that the selected value is displayed in a textbox where it may be modified directly or values not in the popup list may be
entered. <menulist editable="true"> <menupopup> <menuitem label="elephants"/> <menuitem label="kangaroos"/> <menuitem label="bats" /> </menupopup> </menulist> more information about the editable menulist element. menulist reference related elements: menupopup menuitem <progressmeter> a progress meter is used to display the progress ...
...division of space between elements. <splitter collapse="before"> <grippy/> </splitter> splitter reference related elements: grippy <tab> description goes here. <tab label="firefox"/> tab reference related elements: tabs tabbox tabpanels <textbox> a textbox which allows a single line of text to be
entered. <textbox value="firefox"/> more information about the textbox element. textbox reference <textbox multiline="true"> a textbox which allows multiple lines of text to be
entered. <textbox multiline="true"/> more information about the multiple line textbox element. textbox reference <textbox type="autoco...
...ment. textbox reference <textbox type="autocomplete"> a textbox that provides a dropdown showing matches that would complete what the user types. the user can select one to have it filled into the textbox. <textbox type="autocomplete" autocompletesearch="history"/> textbox reference <textbox type="number"> a textbox for
entering numbers. two arrow buttons are displayed for cycling through values. <textbox type="number" min="1" max="20"/> textbox reference <textbox type="password"> a textbox that hides the characters typed, used for
entering passwords. <textbox type="password"/> textbox reference <textbox type="search"> a textbox ...
...box type="password"/> textbox reference <textbox type="search"> a textbox for searching. <textbox type="search"/> textbox reference <textbox type="timed"> deprecated in gecko 1.9.1 a textbox for responding to user input. the command event is fired after the user stops typing, or if the user tabs away or hits
enter. <textbox type="timed"/> textbox reference <timepicker> a timepicker displays a set of textboxes for
entering a time. <timepicker value="12:05"/> timepicker reference <toolbarbutton> a button that is displayed on a toolbar. <toolbarbutton label="reload"/> more information about the toolbar...
dialog - Archive of obsolete content
ancel, buttonaccesskeydisclosure, buttonaccesskeyextra1, buttonaccesskeyextra2, buttonaccesskeyhelp, buttonalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, c
enterwindowonscreen, 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" descripti...
.... the default setting of browser.preferences.instantapply currently is true on linux and mac os and false on windows (which however might or might not change soon, see bug 738797 and bug 1037225). defaultbutton type: string normally this attribute should not be set, but if it is, it specifies the default button in the dialog. typically, this means that the button will be activated when the
enter key is pressed. this should be set to one of the same values as those for the buttons attribute. inactivetitlebarcolor type: color string specify background color of the window's titlebar when it is inactive (background). moreover this hides separator between titlebar and window contents. this affects only on mac os x. title type: string the text to appear in the title bar of the ...
...ional additional button. you can set its label with the buttonlabelextra1 attribute. extra2: a second optional additional button. you can set its label with the buttonlabelextra2 attribute. defaultbutton type: string normally this attribute should not be set, but if it is, it specifies the default button in the dialog. typically, this means that the button will be activated when the
enter key is pressed. this should be set to one of the same values as those for the buttons attribute. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelemen...
..., removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata acceptdialog() return type: no return value accepts the dialog and closes 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. c
enterwindowonscreen() return type: no return value c
enters 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 ...
How do I use GitHub Pages? - Learn web development
w may vary on your machine. os x: terminal can be found in applications > utilities. linux: usually you can pull up a terminal with ctrl + alt + t. if that doesn't work, look for terminal in an app bar or menu. this may seem a bit scary at first, but don't worry — you'll soon get the hang of the basics. you tell the computer to do something in the terminal by typing in a command and hitting
enter, as seen above. creating a repo for your code next, you need to create a new repo for your files to go in. click plus (+) in the top right of the github homepage, then choose new repository. on this page, in the repository name box,
enter a name for your code repository, for example my-repository. also fill in a description to say what your repository is going to contain. your screen should...
...tain. your screen should look like this: click create repository; this should bring you to the following page: uploading your files to github on the current page, you are interested in the section …or push an existing repository from the command line. you should see two lines of code listed in this section. copy the whole of the first line, paste it into the command line, and press
enter. the command should look something like this: git remote add origin https://github.com/chrisdavidmills/my-repository.git next, type the following two commands, pressing
enter after each one. these prepare the code for uploading to github, and ask git to manage these files. git add --all git commit -m 'adding my files to my repository' finally, push the code up to github by going to the...
...hing like this: git remote add origin https://github.com/chrisdavidmills/my-repository.git next, type the following two commands, pressing
enter after each one. these prepare the code for uploading to github, and ask git to manage these files. git add --all git commit -m 'adding my files to my repository' finally, push the code up to github by going to the github web page you're on and
entering into the terminal the second of the two commands we saw the …or push an existing repository from the command line section: git push -u origin master now you need to turn github pages on for your repository. to do this, from the homepage of your repository choose settings, then scroll down until you get to the github pages section. underneath source, choose master branch. the page shoul...
...me page is called index.html — it goes to this entry point by default. if your site's entry point is called something else, for example mypage.html, you'll need to go to https://xxxxxx/mypage.html. further github knowledge if you want to make more changes to your test site and upload those to github, you simply need to make the change to your files just like you did before. then, you need to
enter the following commands (pressing
enter after each one) to push those changes to github: git add --all git commit -m 'another commit' git push you can replace another commit with a more suitable message to describe what change you just made. we have barely scratched the surface of git. to learn more, check out our git and github page. ...
What are browser developer tools? - Learn web development
k on the debugger tab. safari: open the developer tools and then select the debugger tab. exploring the debugger there are three panes in the javascript debugger on firefox. file list the first pane on the left contains the list of files associated with the page you are debugging. select the file you want to work with from this list. click on a file to select it and view its contents in the c
enter pane of the debugger. source code set breakpoints where you want to pause execution. in the following image, the highlight on the number 18 shows that the line has a breakpoint set. watch expressions and breakpoints the right-hand pane shows a list of the watch expressions you have added and breakpoints you have set. in the image, the first section, watch expressions, shows that the list...
...tools are already open, click or press the console tab. if not, firefox allows you to open the console directly using ctrl + shift + k or using the menu command: menu ➤ web developer ➤ web console, or tools ➤ web developer ➤ web console. on other browser, open the developer tools and then click the console tab. ...
...open the console directly using ctrl + shift + k or using the menu command: menu ➤ web developer ➤ web console, or tools ➤ web developer ➤ web console. on other browser, open the developer tools and then click the console tab. ...
...s of code into the console one by one (and then pressing
enter): alert('hello!'); document.queryselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mywordmark.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); now try
entering the following incorrect versions of the code and see what you get. alert('hello!); document.cheeseselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mybanana.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); you'...
Drawing graphics - Learn web development
nvas. 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 c
enter (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 right. let's tr...
... of arc() to true, meaning that the arc is drawn counterclockwise, which means that even though the arc is specified as starting at -45 degrees and ending at 45 degrees, we draw the arc around the 270 degrees not inside this portion. if you were to change true to false and then re-run the code, only the 90 degree slice of the circle would be drawn. before calling fill(), we draw a line to the c
enter of the circle. this means that we get the rather nice pac-man-style cutout rendered. if you removed this line (try it!) then re-ran the code, you'd get just an edge of the circle chopped off between the start and end point of the arc. this illustrates another important point of the canvas — if you try to fill an incomplete path (i.e. one that is not closed), the browser fills in a straight line...
...pt code. let's build a simple example. make another fresh copy of our canvas template (1_canvas_template.html) and open it in your code editor. add the following line to the bottom of your javascript. this contains a new method, translate(), which moves the origin point of the canvas: ctx.translate(width/2, height/2); this causes the coordinate origin (0, 0) to be moved to the c
enter of the canvas, rather than being at the top left corner. this is very useful in many situations, like this one, where we want our design to be drawn relative to the c
enter of the canvas. now add the following code to the bottom of the javascript: function degtorad(degrees) { return degrees * math.pi / 180; }; function rand(min, max) { return math.floor(math.random() * (max-min+1)) +...
..., degtorad(0), degtorad(360), false); ctx.fill(); } requestanimationframe(draw); } draw(); note: the <input> range and color types are supported fairly well across browsers, with the exception of internet explorer versions less than 10; also safari doesn't yet support color. if your browser doesn't support these inputs, they will fall back to simple text fields and you'll just have to
enter valid color/number values yourself. webgl it's now time to leave 2d behind, and take a quick look at 3d canvas. 3d canvas content is specified using the webgl api, which is a completely separate api from the 2d canvas api, even though they both render onto <canvas> elements. webgl is based on opengl (open graphics library), and allows you to communicate directly with the computer's gpu. as su...
Inheritance in JavaScript - Learn web development
rom the parent that are set via parameters. setting teacher()'s prototype and constructor reference all is good so far, but we have a problem. we have defined a new constructor, and it has a prototype property, which by default just contains an object with a reference to the constructor function itself. it does not contain the methods of the person constructor's prototype property. to see this,
enter object.getownpropertynames(teacher.prototype) into either the text input field or your javascript console. then
enter it again, replacing teacher with person. nor does the new constructor inherit those methods. to see this, compare the outputs of person.prototype.greeting and teacher.prototype.greeting. we need to get teacher() to inherit the methods defined on person()'s prototype. so how do we ...
...therefore inherit, if and when needed, all the methods available on person.prototype. we need to do one more thing before we move on. after adding the last line, teacher.prototype's constructor property is now equal to person(), because we just set teacher.prototype to reference an object that inherits its properties from person.prototype! try saving your code, loading the page in a browser, and
entering teacher.prototype.constructor into the console to verify. this can become a problem, so we need to set this right. you can do so by going back to your source code and adding the following line at the bottom: object.defineproperty(teacher.prototype, 'constructor', { value: teacher, enumerable: false, // so that it does not appear in 'for in' loop writable: true }); now if you ...
...ype.constructor into the console to verify. this can become a problem, so we need to set this right. you can do so by going back to your source code and adding the following line at the bottom: object.defineproperty(teacher.prototype, 'constructor', { value: teacher, enumerable: false, // so that it does not appear in 'for in' loop writable: true }); now if you save and refresh,
entering teacher.prototype.constructor should return teacher(), as desired, plus we are now inheriting from person()! giving teacher() a new greeting() function to finish off our code, we need to define a new greeting() function on the teacher() constructor. the easiest way to do this is to define it on teacher()'s prototype — add the following at the bottom of your code: teacher.prototype.greet...
...female' || this.gender === 'f' || this.gender === 'f') { prefix = 'ms.'; } else { prefix = 'mx.'; } alert('hello. my name is ' + prefix + ' ' + this.name.last + ', and i teach ' + this.subject + '.'); }; this alerts the teacher's greeting, which also uses an appropriate name prefix for their gender, worked out using a conditional statement. ...
Getting started with Svelte - Learn web development
he svelte documentation. with this in mind, let's have a look at the src/app.svelte file that came with the starter template. you should see something like the following: <script> export let name; </script> <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> <style> main { text-align: c
enter; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> the <script> section the <script> block contains javascript that runs when a component instance is created. variables declared (or imported) at...
... to build svelte apps.</p> </main> svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively. the <style> section if you have experience working with css, the following snippet should make sense: <style> main { text-align: c
enter; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> we are applying a style to our <h1> element. what will happen other components with <h1> elements in them? in svelte, css inside a component's ...
... the git repo, you can use the degit tool like this — npx degit opensas/mdn-svelte-tutorial. you can also download a specific folder with npx degit opensas/mdn-svelte-tutorial/01-getting-started. degit won't create a local git repo, it will just download the files of the specified folder. using the svelte repl a repl (read–eval–print loop) is an interactive environment that allows you to
enter commands and immediately see the results — many programming languages provide a repl. svelte's repl is much more than that. it's an online tool that allows you to create complete apps, save them online, and share with others. it's the easiest way to start playing with svelte from any machine, without having to install anything. it is also widely used by svelte community. if you want to share ...
...r you have the title of the repl. click on it to edit it. on the right side you have three tabs: the result tab shows your app output, and provides a console at the bottom. the js output tab lets you inspect the javascript code generated by svelte, and set compiler options. the css output tab shows the css generated by svelte. above the tabs, you'll find a toolbar that lets you
enter full-screen mode, and download your app. if you login with a github account, you'll also be able to fork and save the app. you'll also be able to see all your saved repls by clicking on your github username profile and selecting your saved apps. whenever you change any file on the repl, svelte will recompile the app and update the result tab. to share your app simply share the url. for example,...
Command line options
y comma (,), for example: "to=foo@nowhere.net,subject=cool page" . comma separators must not follow or precede spaces ( ). to assign multiple values to a field, enclose the values in single quotes ('), for example: "to='foo@nowhere.net,foo@foo.de',subject=cool page" . using command line options command line options follow the command to start the application. if the option contains arguments,
enter the argument after the option. some options have abbreviations, for example, "-editor" can be abbreviated as "-edit" (available abbreviations are described in the text below). in some cases, option arguments must be enclosed in quotation marks (this is noted in the option descriptions below). multiple command line options can be specified. in general, the syntax is as follows: application -optio...
... (this is noted in the option descriptions below). multiple command line options can be specified. in general, the syntax is as follows: application -option -option "argument" -option argument examples the following examples show the use of the "-profilemanager" command, which will open the profile manager prior to starting firefox or thunderbird: windows select run from windows start menu. ...
...yntax is as follows: application -option -option "argument" -option argument examples the following examples show the use of the "-profilemanager" command, which will open the profile manager prior to starting firefox or thunderbird: windows select run from windows start menu.
enter the following command: firefox -profilemanager mac os x go to applications > utilities. ...
...filemanager" command, which will open the profile manager prior to starting firefox or thunderbird: windows select run from windows start menu.
enter the following command: firefox -profilemanager mac os x go to applications > utilities. open terminal and
enter the following command: cd /applications/firefox.app/contents/macos ./firefox -profilemanager if you use firefox nightly, you can
enter: cd /applications/firefoxnightly.app/contents/macos ./firefox -profilemanager linux open terminal and
enter the following command: cd thunderbird installation directory ./thunderbird -profilemanager the example above invokes the "-profilemanager" command line option with mozilla's thunderbird mail client. user profile -allow-downgrade firefox 67's downgrade protection prevents accidenta...
Creating MozSearch plugins
firefox will use the above search engine description to construct the following search url: http://search.yahoo.com/search?p=mozilla&ei=utf-8&fr=moz2 if the user clicks the magnifying glass icon in the search bar, or chooses the web search option in the tools menu when the search bar isn't visible, the browser will take them to http://sear...
..."text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> let's say the user chooses to use the yahoo! search engine plugin and
enters "mozilla" in the search box and presses the
enter key. firefox will use the above search engine description to construct the following search url: http://search.yahoo.com/search?p=mozilla&ei=utf-8&fr=moz2 if the user clicks the magnifying glass icon in the search bar, or chooses the web search option in the tools menu when the search bar isn't visible, the browser will take them to http://search.yahoo.com/, the value of the <searchform> elemen...
...search url: http://search.yahoo.com/search?p=mozilla&ei=utf-8&fr=moz2 if the user clicks the magnifying glass icon in the search bar, or chooses the web search option in the tools menu when the search bar isn't visible, the browser will take them to http://search.yahoo.com/, the value of the <searchform> element. ...
...ses the web search option in the tools menu when the search bar isn't visible, the browser will take them to http://search.yahoo.com/, the value of the <searchform> element. example: searching mdc this plugin lets you easily search the mozilla developer c
enter web site. ...
HTTP logging
bles differs by operating system. don't let the scary-looking command line stuff frighten you off; it's not hard at all! windows if firefox is already running, exit out of it. open a command prompt. on windows xp, you can find the "run..." command in the start menu's "all programs" submenu. on all newer versions of windows, you can hold down the windows key and press "r". ...
...exit out of it. open a command prompt. on windows xp, you can find the "run..." command in the start menu's "all programs" submenu. on all newer versions of windows, you can hold down the windows key and press "r". type cmd and press
enter, a new command prompt window with a black background will appear. copy and paste the following lines one at a time into the command prompt window. ...
...ctory. you can type "%temp%" directly into the windows explorer location bar to get there quickly. linux this section offers information on how to capture http logs for firefox running on linux. quit out of firefox if it's running. open a new shell. the commands listed here assume a bash-compatible shell. copy and paste the following commands into the shell one at a time. make sure to hit
enter after each line. export moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 export moz_log_file=/tmp/log.txt cd /path/to/firefox ./firefox reproduce the problem you're debugging. when the problem has been reproduced, exit firefox and look for the generated log files, which you can find at /tmp/log.txt. mac os x these instructions show how to log ...
...latform, on other platforms we accept the same form of the arguments: if firefox is already running, exit out of it. open a command prompt. on windows xp, you can find the "run..." command in the start menu's "all programs" submenu. on all newer versions of windows, you can hold down the windows key and press "r". ...
Multiple Firefox profiles
you use gnome shell or kde plasma, consult your desktop environment documentation for other environments. run firefox --new-instance --profilemanager. macos run the terminal application, which is found in applications/utilities. type or paste in the path to firefox, followed by .app/contents/macos/firefox. for example, if firefox is installed in the recommended location, you would
enter /applications/firefox.app/contents/macos/firefox. if you have the path to your desired profile handy,
enter a space character, followed by -profile followed by another space character, followed by the full path to the profile folder you wish to launch into. this will launch firefox immediately. otherwise,
enter a space character followed by --profilemanager. this will present the profile mana...
...puter, and then try again. if you want to do this frequently and more easily, you may wish to create an automator application, as explained in this tutorial. creating a profile creating a profile through the profile manager these instructions should be the same for all operating systems. to start the create profile wizard, click "create profile..." in the profile manager. click next and
enter the name of the profile. use a profile name that is descriptive, such as your personal name. this name is not exposed to the internet. you can also choose where to store the profile on your computer. to select storage location, click choose folder.... if you choose your folder location for the profile, select a new or empty folder. if you choose a folder that isn't empty, and you later remove t...
...e the profile and choose the \"delete files\" option, everything inside that folder will be deleted. to create the new profile, click finish. creating a profile through the firefox browser you can create a new firefox profile directly from the browser. type about:profiles into the browser url search bar on the page, click create a new profile button read the introduction, and click next
enter a profile name for your new profile. use a profile name that is descriptive, such as your personal name. this name is not exposed to the internet. optionally, to change where the profile will be stored on your computer, click choose folder... to create the new profile, click finish. deleting a profile in the profile manager, select the profile to remove, and click delete profile.... confi...
...moves the profile and its files, including the profile bookmarks, settings, passwords, etc. warning: if you use the "delete files" option, the profile folder, and files will be deleted. this action cannot be undone. cancel interrupts the profile deletion. renaming a profile in the profile manager, select the profile you want to rename, and then click "rename profile".
enter a new name for the profile and click on ok. note: the folder containing the files for the profile is not renamed. options work offline choosing this option loads the selected profile, and starts firefox offline. you can view previously viewed web pages, and experiment with your profile. don't ask at startup if you have multiple profiles, firefox prompts you for the profile to use each ti...
Using the Browser API
n(result) { if (result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } }); } implementing the url bar the url bar for our simple browser is a <form> containing a single text <input>. when you tap the url bar, you can
enter a url using the built-in firefox os keyboard (although note that we haven't implemented anything sophisticated in this app, like autofilling the http://, etc.). when you press the keyboard's return button, the 'submit' event is fired, which we handle like this: urlform.addeventlistener('submit',function(e) { e.preventdefault(); browser.src = urlbar.value; urlbar.blur(); }); we first call ...
...fluences behaviour later on. then, we disable the "previous" and "next" search item buttons so that they don't run anything unless there are search items to cycle between. var searchactive = false; prev.disabled = true; next.disabled = true; next, we add an event listener to the searchform so that when it is submitted, the htmliframeelement.findall() method is used to do a search for the string
entered into the search input element (searchbar) within the text of the current page (the second parameter can be changed to 'case-insensitive' if you want a case-insensitive search.) we then enable the previous and next buttons, set searchactive to true, and blur() the search bar to make the keyboard disappear and stop taking up our screen once the search is submitted. searchform.addeventlistener('s...
...ion() { browser.findnext("forward"); }); the last event listener in this section controls what happens when the search toggle button is pressed. we switch the class values on the element to toggle the show/hide. if searchactive is true, meaning that a search has been done, we want to disable the search as we hide the search options — we disable the buttons, make searchactive false, clear the
entered search value, and run htmliframeelement.clearmatch(), which gets rid of any stored/highlighted search results from the browser. searchtoggle.addeventlistener('touchend',function() { if(search.getattribute('class') === 'search') { search.setattribute('class', 'search shifted'); } else if(search.getattribute('class') === 'search shifted') { search.setattribute('class', 'search'); ...
...changes if required //}) reporting errors we've got one more piece of code to mention from our source: browser.addeventlistener('mozbrowsererror', function (e) { console.log("loading error: " + e.detail); }); this simple listener logs an error message to the console when an error with the browser iframe is encountered. note that this doesn't include simple errors due to incorrect urls being
entered. see the mozbrowsererror page for more details. other methods and events we've only covered a fraction of the new methods and events that the browser api adds. there are many others covering a variety of functions and edge case requirements: for the full list of methods, check out the htmliframeelement page. for the full list of events, see the browser api landing page events section. ...
source-editor.jsm
sourceeditor.events.focus "focus" fired when the editor gains focus. sourceeditor.events.mouse_move "mousemove" fired when the user moves the mouse over a line annotation. sourceeditor.events.mouse_out "mouseout" fired when the mouse pointer leaves a line annotation. sourceeditor.events.mouse_over "mouseover" fired when the mouse pointer
enters a line annotation. sourceeditor.events.selection "selection" fired when the current selection in the editor changes. sourceeditor.events.text_changed "textchanged" fired when the editor's content changes. methods addbreakpoint adds a breakpoint to be triggered at a certain line in the code, under an optional condition. note: implementing actual support fo...
... aeventtype the name of the event type to stop listening for; see event name constants for possible values. acallback the function to stop calling when the specified event occurs. resetundo resets the undo stack, removing all possible undo and redo operations from the stack. void resetundo(); parameters none. setcaretoffset() sets the current caret position (insertion point) for newly-
entered text. void setcaretoffset( number aoffset ); parameters aoffset the 0-based offset into the text at which to place the caret. setcaretposition() sets the current caret position given a line number and column number. void setcaretposition( number aline, [optional] number acolumn, [optional] number aalign ); parameters aline the 0-based line number on which to place the c...
...er on which to place the caret. acolumn optional the 0-based column number at which to place the caret; if you don't provide this parameter, the caret is placed at the beginning of the line specified by aline. aalign optional how to position the line with respect to the viewport when scrolling the line into view. this may be one of sourceeditor.vertical_align.top, sourceeditor.vertical_align.c
enter, and sourceeditor.vertical_align_bottom. see alignment constants for details. the default is sourceeditor.vertical_align.top. setmode() sets the current syntax highlighting mode for the text being edited. void setmode( string amode ); parameters amode a string indicating the file type being edited. see editor mode constants for possible values. setselection() selects the specified ...
...top of the very first line of text in the document, regardless of vertical scroll position.. y number the y-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the left edge of the very first column of text in the document, regardless of horizontal scroll position. mouseover the "mouseover" event is sent when the user moves the mouse pointer
enters a line of text content. it has the following properties: property type description event mouseevent the dom "mouseover" event. x number the x-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position. y number the y...
SVN for Localizers
(abbreviations of the terms staging and production) to refer to testing and publicly visible websites, respectively. working with svn now that you understand the mozilla svn repository layout (in particular the layout for mozilla.com), let's get some files into your hands to start localizing! the first thing you need to do is copy the mozilla repository you want to work on to your computer.
enter the following command in your command-line tool: svn checkout https://svn.mozilla.org/projects/mozilla.com/trunk/locales/[your locale code] mozilla-l10n-[your-localecode] this command creates the mozilla-l10n-[your-localecode] directory on your computer and copies into it all of the files from https://svn.mozilla.org/projects/moz...om/trunk/locales/[your locale code]. note: the directory you...
...ory you create will be located inside the directory that you're currently in with your console (or cygwin console). also, we use https instead of http because changes can only be pushed back to the mozilla svn repository through a secure connection. open the files you want to translate with your favorite text editor. translate the content in those files, save them and check for differences by
entering this command from the command-line: svn diff this command produces output with every change made to each file. it's a bit hard to read, but you can also create a diff file (aka a diff patch) use svn diff > /path/to/output/file.diff to save the output to a file. note that path/to/output is meant to indicate the directory on your computer where you wish to store the diff file. you can also ...
... > /path/to/output/file.diff to save the output to a file. note that path/to/output is meant to indicate the directory on your computer where you wish to store the diff file. you can also run svn status to check the list of modified files (they'll display a m before the name) you're about to commit. once you're satisfied with changes, commit them to the appropriate mozilla svn repository by
entering the following command: svn commit -m "minor modifications for firefox [version #] beta page for [your locale]" the svn commit command will commit your changes directly to the mozilla svn repositories. since you are writing to the repository here, you will be asked for your ldap login credentials. the -m parameter followed by some text within double quotes (") will be pushed along with you...
...e to see how the localized website will look when it's pushed to prod (i.e., a website that regular visitors will see). when localizing websites, l10n-drivers will always add needed files to your repository or update your files with new strings in english. it's very important for you to update your working copy with the newest files from mozilla svn repository before you start making changes.
enter the following command from the command-line: svn update your local svn repository (i.e., working directory) will be updated with the newest files from the url you initially cloned your repository from. it's very important that you do this often. as a general rule, you should at least do it before translating anything. sometimes mistakes happen and you need to start over. go back to the roo...
MathML Demo: <mtable> - tables and matrices
external vertical align is axis ---... ...
... external vertical align is axis ---... ...
...to only display certain sides of the table border, as in "|rcl", but these can be obtained in mozilla using the 'border' property of css, e.g., "|rcl" can be achieved with the css declaration "mtable { border-left: solid thin }". math axis test, using externally aligned arrays inside symmetric fences. ---... [ 1 666666 x 2 c axis ] [ 1 666666 x 2 c c
enter ] + ⌊ 1 55555 x + 1 c bottom ⌋ + ⌈ 1 4444 x c top ⌉ + ∥ 1 4444 4444 4444 x c
enter ∥ post text. now for a display ---... 1 4444 4444 4444 x 7777777 text after displayed math. do you see which vertical alignment is set on that table? example of \begin{matrix} ---... 0 1 ...
...ring code used for the baseline case (see below). a table with align="baseline -1" to anchor the table externally w.r.t. the baseline of the last row ---... d+p ( α β γ δ ) ...--- , neat isn't it? this would be pretty hard to obtain otherwise. contrast it with the following which has align="bottom" ---... d+p ( α β γ δ ) ...--- , and with this one which has align="c
enter -1" ---... d+p ( α β γ δ ) ...--- , but note that setting the baseline relative to a particular row is meaningless if the row doesn't have at least one cell with "rowalign=baseline" where to anchor the baseline (in which case mozilla will behave as if it was align="c
enter#rownumber"). these may sound like gimmicks until you want to get a damping effect such as this ---... ab ...
Monitors
in addition to the mutex type prlock, nspr provides a special type, prmonitor, for use in java programming. this chapter describes the nspr api for creation and manipulation of a mutex of type prmonitor. monitor type monitor functions with a mutex of type prlock, a single thread may
enter the monitor only once before it exits, and the mutex can have multiple associated condition variables. with a mutex of type prmonitor, a single thread may re-
enter a monitor as many times as it sees fit. ...
...bes the nspr api for creation and manipulation of a mutex of type prmonitor. monitor type monitor functions with a mutex of type prlock, a single thread may
enter the monitor only once before it exits, and the mutex can have multiple associated condition variables. with a mutex of type prmonitor, a single thread may re-
enter a monitor as many times as it sees fit. the first time the thread
enters a monitor, it acquires the monitor's lock and the thread's entry count is incremented to 1. each subsequent time the thread successfully
enters the same monitor, the thread's entry count is incremented again, and each time the thread exits the monitor, the thread's entry count is decremented. when the entry count for a thread reaches zero, the thread releases the monitor's lock, and other thread...
... a call to pr_wait temporarily returns the entry count to zero. when the calling thread resumes, it has the same entry count it had before the wait operation. ...
...monitor type with the exception of pr_newmonitor, which creates a new monitor object, all monitor functions require a pointer to an opaque object of type prmonitor. monitor functions all monitor functions are thread-safe. however, this safety does not extend to protecting the monitor object from deletion. pr_newmonitor creates a new monitor. pr_destroymonitor destroys a monitor object. pr_
entermonitor
enters the lock associated with a specified monitor. pr_exitmonitor decrements the entry count associated with a specified monitor. pr_wait waits for a notify on a specified monitor's condition variable. pr_notify notifies a thread waiting on a specified monitor's condition variable. pr_notifyall notifies all threads waiting on a specified monitor's condition variable. ...
Utilities for nss samples
* * this function supports password extraction from files with * multipe passwords, one for each token. in the single password * case a line would just have the passord whereas in the multi- * password variant they could be of the form * * token_1_name:its_password * token_2_name:its_password * */ extern char * filepasswd(pk11slotinfo * ...
... * * this function supports password extraction from files with * multipe passwords, one for each token. in the single password * case a line would just have the passord whereas in the multi- * password variant they could be of the form * * token_1_name:its_password * token_2_name:its_password * */ char * filepasswd(pk11slotinfo *slot, prboo...
...strdup((char*)phrase); port_free(phrases); return phrase; } /* * getmodulepassword */ char* getmodulepassword(pk11slotinfo *slot, int retry, void *arg) { char prompt[255]; secupwdata *pwdata = (secupwdata *)arg; char *pw; if (pwdata == null) { return null; } if (retry && pwdata->source != pw_none) { pr_fprintf(pr_stderr, "incorrect password/pin
entered.\n"); return null; } switch (pwdata->source) { case pw_none: sprintf(prompt, "
enter password or pin for \"%s\":", pk11_gettokenname(slot)); return getpassword(stdin, stdout, prompt, checkpassword); case pw_fromfile: pw = filepasswd(slot, retry, pwdata->data); pwdata->source = pw_plaintext; pwdata->data = pl_strdup(...
...oise from keyboard strokes */ count = 0; while (count < rsize) { c = getc(stdin); if (c == eof) { rv = secfailure; break; } *(rbuf + count) = c; if (count == 0 || c != *(rbuf + count -1)) { count++; fprintf(stderr, "*"); } } rbuf[count] = '\0'; fprintf(stderr, "\n\nfinished. ...
Hacking Tips
therefore, the jit frames do not appear until you settle on the next breakpoint. to work-around this issue you can use the recording feature of gdb, to step one instruction, and settle back to...
...therefore, the jit frames do not appear until you settle on the next breakpoint. to work-around this issue you can use the recording feature of gdb, to step one instruction, and settle back to where you came from with the follo...
...d by the id() function of both instructions) of the latest mir and the latest lir phases. these locations should correspond to phases of the logs and a filter can be used to remove uninteresting functions. using the arm simulator the arm simulator can be used to test the arm jit backend on x86/x64 hardware. an arm simulator build is an x86 shell (or browser) with the arm jit backend. instead of
entering jit code, it runs it in a simulator (interpreter) for arm code. to use the simulator, compile an x86 shell (32-bit, x64 doesn't work as we use a different value format there), and pass --enable-arm-simulator to configure. for instance, on a 64-bit linux host you can use the following configure command to get an arm simulator build: ar=ar cc="gcc -m32" cxx="g++ -m32" ../configure --target=i686...
...*)athebescontext->mdt.mrawptr->msurface).stride + $x * ((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).depth / 8] watch *(char*)<address of previous command> (note: if you set a watch on the previous expression gdb will watch the expression and run out of watchpoint) rr with emacs within emacs, do m-x gud-gdb and replace the command line with rr replay. when gdb comes up,
enter set annot 1 to get it to emit file location information so that emacs will pop up the corresponding source. note that if you reverse-continue over a sigsegv and you're using the standard .gdbinit that sets a catchpoint for that signal, you'll get an additional stop at the catchpoint. just reverse-continue again to continue to your breakpoints or whatever. [hack] replacing one instruction to r...
Tracing JIT
between adobe and mozilla, and a spidermonkey-specific high level component called jstracer. the nanojit component is language agnostic, and contains no knowledge about spidermonkey or any other part of the mozilla codebase. the jstracer component consists of a monitor and a recorder. the monitor watches the executing spidermonkey interpreter. when the monitor determines that the interpreter has
entered a region of code that would benefit from native compilation, the monitor activates the recorder. the recorder records the activity of the interpreter, using nanojit to build an efficient, native representation of the execution called a fragment. the monitor then calls into the native code stored in the fragment. a schematic diagram of the components of the tracing jit follows: generic low ...
...for the pc. if the hit count of a particular pc reaches a threshold value, the target is considered hot. when the monitor decides a target pc is hot, it looks in a hashtable of fragments to see if there is a fragment holding native code for that target pc. if it finds such a fragment, it transitions to executing mode. otherwise it transitions to recording mode. recording when the trace monitor
enters recording mode, it constructs a new trace recorder, of type tracerecorder. it then passes control back to the spidermonkey interpreter. the interpreter continues interpreting bytecode, but with an important difference: each bytecode it interprets is also sent to the trace monitor and recorded in the monitor's trace recorder. recording mode is temporary -- ideally it only lasts as long as it tak...
...itoring mode, with a high likelihood of immediately transitioning to executing mode on the next bytecode interpreted. the compiled fragment of code returned to the monitor on successful loop-close is called a trace. if the recorder is asked to record a bytecode that implies a call to a native function elsewhere in spidermonkey -- some helper function written in c -- and that native happens to re-
enter the interpreter to interpret yet more bytecode, and furthermore if that bytecode itself contains a hot pc that has not yet been traced, the trace monitor may be asked to begin nested recording. this is the same as normal recording mode, except that the outermost recorder is placed on a deferred-abort stack. when the innermost recorder completes -- successfully or otherwise -- every recorder on th...
...cording mode, except that the outermost recorder is placed on a deferred-abort stack. when the innermost recorder completes -- successfully or otherwise -- every recorder on the deferred abort stack is aborted. this process is called deep aborting the suspended recorders. executing when the monitor interprets a backward jump to a pc that it has a compiled trace of machine code for, the monitor
enters executing mode. this mode is relatively simple compared to recording mode. first the monitor allocates a native stack for the trace to use, and a state structure containing various key pointers into the spidermonkey interpreter's state, including a pointer to the native stack. it then imports the set of jsval values from the spidermonkey interpreter that the trace is known to read or write d...
JSAPI User Guide
onvertstub, nullptr, nullptr, nullptr, nullptr, js_globalobjecttracehook }; // the error reporter callback. void reporterror(jscontext *cx, const char *message, jserrorreport *report) { fprintf(stderr, "%s:%u:%s\n", report->filename ? report->filename : "[no filename]", (unsigned int) report->lineno, message); } int run(jscontext *cx) { //
enter a request before running anything in the context. jsautorequest ar(cx); // create the global object and a new compartment. rootedobject global(cx); global = js_newglobalobject(cx, &globalclass, nullptr, js::dontfireonnewglobalhook); if (!global) return 1; //
enter the new global object's compartment. jsautocompartment ac(cx, gl...
...tom object needs certain values to remain in memory, just store the values in properties of the object. as long as the object is reachable, its properties will remain reachable. if these values must not be accessible from javascript, use reserved slots instead. or store the values in private data and implement jsclass.mark. if a function creates new objects, strings, or numbers, it can use js_
enterlocalrootscope and js_leavelocalrootscope to keep those values alive for the duration of the function. to keep a value alive permanently, store it in a gc root. still, gc bugs do occur. these two functions, both available only in debug builds, are especially useful for debugging gc-related crashes: use js_setgczeal to enable extra garbage collection. gc zeal usually causes a gc-related cr...
...acers and profilers. ...
... *const_cx, jsbool
entering) { jscontext *cx = const_cast<jscontext*>(const_cx); jsstring *name = js_getfunctionid((jsfunction*)func); const char *entexit; const char *namestr; /* build a c string for the function's name */ if (!name) { namestr = "unnamed function"; } else { namestr = js_encodestring(cx, name); } /* build a string for whether we're
entering or exiting */ if (
entering) { entexit = "
entering"; } else { entexit = "exiting"; } /* output information about the trace */ printf("%s javascript function: %s at time: %ld", entexit, namestr, clock()); } void enabletracing(jscontext *cx) { js_setfunctioncallback(cx, functransition); } void disabletracing(jscontext *cx) { js_setfunctioncallback(cx, nullptr); } ...
SpiderMonkey 1.8.7
ons to enable nspr (e.g. --with-system-nspr). xxx all sections below need updating garbage collection spidermonkey 1.8.5 introduces a conservative stack-scanning garbage collector. unlike the exact garbage collector, the new garbage collector will scan the c stack and registers in your embedding, looking for bits that it can treat as potential gc roots. the approach eliminates the need for the js_
enterlocalrootscope api, and in many cases the need to explicitly root gc things or use the "root as you go" approach popular with earlier spidermonkey releases. since this is a conservative collector, it will often find "garbage" addresses which can trigger warnings from certain code analysis tools. if you are running valgrind on your embedding, be sure to build spidermonkey with the --enable-valgri...
...mpilescriptforprincipalsversion js_compileucfunctionforprincipalsversion js_compileucscriptforprincipalsversion js_consumejsontext (removed in future releases, replaced with js_parsejson) js_decompilescriptobject js_deepfreezeobject js_definefunctionbyid js_defineownproperty js_definepropertybyid js_deletepropertybyid js_deletepropertybyid2 js_doubleisint32 js_encodestringtobuffer js_
entercrosscompartmentcall js_evaluatescriptforprincipalsversion js_evaluateucscriptforprincipalsversion js_executeregexp js_executeregexpnostatics js_executescriptversion js_forget_string_flatness js_fileescapedstring js_finishjsonparse (removed in future releases, replaced with js_parsejson) js_flatstringequalsascii js_flattenstring js_flushcaches js_freezeobject js_getcompartmentprivate ...
...rtmentandglobalobject js_newdateobject js_newdateobjectmsec js_newfunctionbyid body new c++ helpers while jsapi remains a c api, the engine is now implemented in c++. some c++ helpers have been introduced into the api, to help embedders writing c++ projects. please note that spidermonkey reserves the js:: namespace for itself. ...
...body new c++ helpers while jsapi remains a c api, the engine is now implemented in c++. some c++ helpers have been introduced into the api, to help embedders writing c++ projects. please note that spidermonkey reserves the js:: namespace for itself. jsautorequest jsautosuspendrequest jsautocheckrequest jsauto
entercompartment js::anchor<> js::call obsolete apis js_clearnewbornroots js_
enterlocalrootscope js_leavelocalrootscope js_leavelocalrootscopewithresult js_forgetlocalroot js_newgrowablestring deleted apis js_getscopechain use js_getglobalforscopechain api changes operation callback js_setoperationcallback was introduced in js 1.8.0, replacing the branch callback, in anticipation of the addition of the tracing jit (tracemonkey). the interface was finalized only after js...
Building the WebLock UI
block"] .getservice() .queryinterface(components.interfaces.iweblock); in addition to this basic setup, you must also write javascript that uses the addsite method to add new sites to the white list. this is a bit more complicated, because it requires that you work with the currently loaded page or provide other ui (e.g., a textfield where you can
enter an arbitrary url) for specifying urls. in the xul section we'll go into how the user interface is defined. this section describes the functions that are called from the interface and how they interact with the weblock component. the url that the addsite method expects is a string, so we can pass a string directly in from the user interface, or we can do a check on the string and verify that it's...
...more sophisticated ways to do this; you may also want to include some ui that lets you view the white list or edit it as a list. in this part of the tutorial, however, we only provide the means of adding an url provided as a string (which is not checked for validity) and passing it through to the addsite api we defined in the earlier part of the tutorial. ...
...
enter"> <textbox id="url.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> this snippet introduces a couple of new general layout widgets in xul. the separator that appears at the top of this snippet creates a little divider between widgets like the kind you see in menus that divide sets of functionality available there. the parent of the textbox that users
enter an url into is something called an <hbox/>, which is a layout widget - often invisible - that controls the way its child elements are rendered. in this case the <hbox/> c
enters the textbox and the button children, and it orients them horizontally (in contrast to the <vbox/>, which orients its children vertically). notice also that when it's clicked, the button executes a javascript function call...
...weblock_mgg" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="web lock manager" style="width: 30em;" persist="screenx screeny" screenx="24" screeny="24"> <script src="chrome://weblock/content/weblock.js"/> <hbox> <separator orient="vertical" class="thin"/> <vbox flex="1"> <separator class="thin"/> <hbox align="c
enter"> <textbox id="dialog.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> <hbox align="c
enter"> <radiogroup onchange="togglelock();"> <radio label="lock"/> <radio label="unlock"/> </radiogroup> <spacer flex="1"/> </hbox> </vbox> </hbox> </dialog> overlaying new us...
Index
, with the category "vacuum-participant". 222 mozistoragevaluearray interfaces, storage, xpcom, xpcom api reference the mozistoragevaluearray interface obtains provides methods to obtain data from a given result. 223 mozitxttohtmlconv interfaces the mozitxttohtmlconv interface is used to convert text into html format. its primary use is in converting user-
entered text into properly-formatted html. 224 mozithirdpartyutil interfaces, interfaces:scriptable, xpcom, xpcom interface reference determine whether the given channel and its content window hierarchy is third party. this is done as follows: 225 mozivisitinfo no summary! 226 mozivisitinfocallback interfaces, interfaces:scriptable, places, refe...
...com, xpcom interface reference no summary! 341 nsiauthinformation interfaces, interfaces:scriptable, xpcom, xpcom interface reference the caller of nsiauthprompt2.promptusernameandpassword() or nsiauthprompt2.promptpasswordasync() provides an object implementing this interface; the prompt implementation can then read the values here to prefill the dialog. after the user
entered the authentication information, it should set the attributes of this object to indicate to the caller what was
entered by the user. 342 nsiauthmodule interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference this method is called to get the next token in a sequence of authentication steps. 343 nsiauthprompt interfaces, interface...
...com interface reference this object was renamed a few times: initial name was textrectangle, then clientrect, then domrect. 472 nsidomdesktopnotification interfaces, interfaces:scriptable, xpcom, xpcom interface reference the nsidomdesktopnotification interface implements the dom notification interface. see that page for details. 473 nsidomdesktopnotificationc
enter interfaces, interfaces:scriptable, xpcom, xpcom interface reference the nsidomdesktopnotificationc
enter interface implements the dom navigator.moznotification interface. see that page for details. 474 nsidomelement interfaces, interfaces:scriptable, xpcom, xpcom interface reference get an attribute value. 475 nsidomevent interfaces:scriptable, xpcom, ...
... weak reference to the listener to avoid any circular dependencies. typically this method will be called to register an object to receive nsiwebprogresslistener or nsishistorylistener notifications in which case the the iid is that of the interface. 1060 nsiwebbrowserchrome interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference asks the implem
enter to destroy the window associated with this webbrowser object. 1061 nsiwebbrowserchrome2 interfaces, interfaces:scriptable, xpcom, xpcom interface reference called when the status text in the chrome needs to be updated. this method may be called instead of nsiwebbrowserchrome.setstatus(). an implementor of this method, should still implement nsiwebbrowserchrome.setstatus(). ...
nsIDOMWindowUtils
ingsynthesizer 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); void
entermodalstate(); nsidomelement findelementwithviewid(in nsviewid aid); void focus(in nsidomelement aelement); void forceupdatenativemenuat(in astring indexstring); void garbagecollect([optional] in nsicyclecollectorlistener alistener); short getcursortype(); astring getdocumentmetadata(in astring aname); nsidomwindow getouterwindoww...
...ntfrompoint( in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout ); parameters ax ay aignorerootscrollframe whether or not to ignore the root scroll frame when retrieving the element. if false, this method returns null for coordinates outside of the viewport. aflushlayout flushes layout if true. otherwise, no flush occurs. return value
entermodalstate() put the window into a state where scripts are frozen and events suppressed, for use when the window has launched a modal prompt. void
entermodalstate(); parameters none. findelementwithviewid() given a view id from the compositor process, return the corresponding dom element object. nsidomelement findelementwithviewid( in nsviewid aid ); parameters aid the id of the vi...
...perty restrictions to this api, and is sufficient for the present testing requirements (which are essentially testing 'color'). astring getvisiteddependentcomputedstyle( in nsidomelement aelement, in astring apseudoelement, in astring apropertyname ); parameters aelement apseudoelement apropertyname return value isinmodalstate() is the window is in a modal state? [see
entermodalstate()] boolean isinmodalstate(); parameters none. return value leavemodalstate() resume normal window state, where scripts can run and events are delivered. void leavemodalstate(); parameters none. loadsheet() synchronously loads a style sheet from |sheeturi| and adds it to the list of additional style sheets of the document. these additional style sheets are very much lik...
... mouseup, mousemove, mouseover, mouseout, contextmenu. events are sent in coordinates offset by ax and ay from the window. note: that additional events may be fired as a result of this call. for instance, typically a click event will be fired as a result of a mousedown and mouseup in sequence. normally at this level of events, the mouseover and mouseout events are only fired when the window is
entered or exited. for inter-element mouseover and mouseout events, a movemove event fired on the new element should be sufficient to generate the correct over and out events as well. cannot be accessed from unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges. the event is dispatched via the toplevel window, so it could go to a...
nsIXULWindow
he creation of a top-level chrome window. when the window is destroyed, it will fire a "xul-window-destroyed" notification through the global observer service. this signals the application in case it needs to quit. ...
...ow what you are doing! in particular, calling this when this xul window does not yet have a document in its docshell could cause problems. void applychromeflags(); parameters none. assumechromeflagsarefrozen() begin assuming chromeflags do not change hereafter, and assert if they do change. the state change is one-way and idempotent. void assumechromeflagsarefrozen(); parameters none. c
enter() move the window to a c
entered position. void c
enter( in nsixulwindow arelative, in boolean ascreen, in boolean aalert ); parameters arelative if not null, the window relative to which the window is moved. see ascreen parameter for details. ascreen true to c
enter the window relative to the screen containing arelative if arelative is not null. if arelative is null then relative to...
... createnewwindow() create a new window. ...
... createnewwindow() create a new window. ...
Working with windows in chrome code
ains tips and example code on opening new windows, finding an already opened window, and passing data between different windows. opening windows from a <script> in a window or an overlay to open a new window, we usually use a window.open or window.opendialog dom call, like this: var win = window.open("chrome://myextension/content/about.xul", "aboutmyextension", "chrome,c
enterscreen"); the first parameter to window.open is the uri of the xul file that describes the window and its contents. the second parameter is the window's name; the name can be used in links or forms as the target attribute. this is different from the user-visible window title, which is specified using xul. the third, and optional, parameter is a list of special window features the window shoul...
...her interface. its parameters are similar to window.open; in fact, window.open's implementation calls nsiwindowwatcher's methods. var ww = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); var win = ww.openwindow(null, "chrome://myextension/content/about.xul", "aboutmyextension", "chrome,c
enterscreen", null); window object note the win variable in the above section, which is assigned the return value of window.open. it can be used to access the opened window. the return value of window.open (and similar methods) is a window object (usually chromewindow) – the same type as the window variable. technically speaking, it implements a number of interfaces, including nsidomjswindow and ...
...ow.opendialog to open a progress dialog. we pass in the current status text as well as the maximum and current progress values. note that using nsiwindowwatcher.openwindow is a bit less trivial . ...
...n label="cancel" oncommand="opener.canceloperation(); close();" /> using a callback function. alternatively, the opener window can pass a callback function to the progress dialog in the same way we passed the status string in the previous example: function oncancel() { alert("operation canceled!"); } ... ...
Edit fonts - Firefox Developer Tools
has been applied. fonts editor firefox 63 adds the font editor — a new area below "fonts used" with additional controls for editing the fonts’ characteristics. for standard (static) fonts, you will be able to change the settings listed below size the font-size for the inspected element. this can be set using em, rem, %, px, vh, or vw units. you can select values using the slider or
enter a numeric value directly into the text box. note: if you want to use a different unit such as pt for font-size or line-height, you can set the property value applied to the currently inspected element to use that unit via the rules view, and the font editor will automatically pick it up and make it available in the associated units dropdown menu. changing the unit of measure converts the nume...
...the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained. example: if 1rem is equivalent to 10 pixels, when you change the unit of measurement from rem to px, 2rem becomes 20px. line height the line-height of the inspected element. this can be set using unitless, em, %, or px units. ...
...for non-variable fonts the slider ranges from 100 to 900 in increments of 100. note: for variable fonts (see below) that define a wght variation axis, this range is custom. italic the font-style for the inspected element. this setting toggles between italic and normal values for the font-style css property. ...
... @font-face descriptor that loads the font into the page, in the case of web fonts. the descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet. a text sample, to give you an idea of what the font looks like when rendered. the default text for the sample is "abc" but the preview text can be edited by clicking on the input field at the top of the section and
entering a new value. once
entered, all of the sample text will be set to the same custom value. variable font support in firefox developer tools firefox 62 added support for variable fonts and firefox 63 features support for editing the properties of variable fonts in the font editor. what are variable fonts? variable fonts, or opentype font variations, define a new font file format that allows t...
Examine and edit CSS - Firefox Developer Tools
ows the calculated value that each css property has for the selected element. (this calculated value is exactly the same as what getcomputedstyle would return.) you can tab through the styles to select them, and you can find more information about each property — pressing f1 on a selected property will open up its mdn reference page. clicking the arrow next to the property name (or pressing
enter or space while it is selected) shows the rule that set this value, along with a link to the source filename and line number: by default, this view only shows values that have been explicitly set by the page: to see all values, click the "browser styles" box. you can tab through the filenames/line numbers; pressing
enter/return will open up the relevant file at that point in the style editor. ...
...e search box. while in the computed view, you can press ctrl / cmd + f to focus the search field. once you've typed in a filter, you can press esc to remove it again. edit rules if you click on a declaration or a selector in the rules view you can edit it and see the results immediately. you can also tab through the different existing properties and values, and start editing them by pressing
enter or space. to add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace). as you start typing a property name, you'll see a list of autocomplete suggestions. press tab to accept the current suggestion or up and down to move through the list. the default choice is the most common property that starts with the letters you've typed. for example, here...
... of the rule (the line occupied by the closing brace). as you start typing a property name, you'll see a list of autocomplete suggestions. press tab to accept the current suggestion or up and down to move through the list. the default choice is the most common property that starts with the letters you've typed. for example, here the user has typed "c" and the default choice is "color": if you
enter an invalid value for a property when editing it, or an unknown property name, a yellow alert icon appears besides the declaration. edits that you make in the rules view are reflected in the style editor, and vice versa. any changes you make are temporary: reloading the page will restore the original styling. while you're editing css, the context menu you'll see is the normal one for working wit...
...at you make in the rules view are reflected in the style editor, and vice versa. any changes you make are temporary: reloading the page will restore the original styling. while you're editing css, the context menu you'll see is the normal one for working with editable text: css variable autocompletion css variable names will auto-complete depending on the variables defined in the css. if you
enter var( into a property value and then type a dash (-), any variables you have declared in your css will then appear in an autocomplete list, which shows a color swatch so you can see exactly what color each variable choice is storing (bug 1451211). in addition, hovering over a css variable name brings up a tooltip showing what color value is stored in that variable (bug 1431949). editing ke...
BiquadFilterNode() - Web APIs
, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. bandpass: a bandpass filter allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. it implements a second-order bandpass filter. q: controls the width of the band. the width becomes narrower as the q value increases. frequency: the c
enter of the frequency band. gain: not used. lowshelf: the lowshelf filter allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies. it implements a second-order lowshelf filter. q: not used. frequency: the upper limit of the frequences where the boost, or attenuation, is applied. gain: the boost, in db, to be applied. if the value is negative, the fr...
...frequences where the boost, or attenuation, is applied. gain: the boost, in db, to be applied. if the value is negative, the frequencies are attenuated. peaking: the peaking filter allows all frequencies through, adding a boost, or attenuation, to a range of frequencies. q: the width of the band of frequencies that are boosted. a large value implies a narrow width. frequency: the c
enter frequency of the boost range. gain: the boost, in db, to be applied. if the value is negative, the frequencies are attenuated. notch: the notch filter (also known as a band-stop, or band-rejection filter) is the opposite of a bandpass filter. it allows all frequencies through, except for a set of frequencies. q: the width of the band of frequencies that are attenuated. a large value...
...boost, in db, to be applied. if the value is negative, the frequencies are attenuated. notch: the notch filter (also known as a band-stop, or band-rejection filter) is the opposite of a bandpass filter. it allows all frequencies through, except for a set of frequencies. q: the width of the band of frequencies that are attenuated. a large value implies a narrow width. frequency: the c
enter frequency of the attenuation range. gain: not used. allpass: an allpass filter allows all frequencies through, but changes the phase relationship between the various frequencies. it implements a second-order allpass filter. q: the sharpness of the phase transition at the c
enter frequency. a larger value implies a sharper transition and a larger group delay. frequency: the frequenc...
...viewed another way, this is the frequency with maximal group delay. gain: not used. ...
CanvasRenderingContext2D.textAlign - Web APIs
the canvasrenderingcontext2d.textalign property of the canvas 2d api specifies the current text alignment used when drawing text. the alignment is relative to the x value of the filltext() method. for example, if textalign is "c
enter", then the text's left edge will be at x - (textwidth / 2). syntax ctx.textalign = "left" || "right" || "c
enter" || "start" || "end"; options possible values: "left" the text is left-aligned. "right" the text is right-aligned. "c
enter" the text is c
entered. "start" the text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales). "end" the text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales). the defaul...
...start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales). "end" the text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales). the default value is "start". ...
...note that the direction property is manually specified as "ltr", although this is also the default for english-language text. ...
...t". html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); canvas.width = 350; const ctx = canvas.getcontext('2d'); const x = canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'c
enter'; ctx.filltext('c
enter-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 130); result direction-dependent text alignment this example demonstrates the two direction-dependent values of the textalign property: "start" and "end". note that the direction property is manually specified as "ltr", although this is also the default for english-language text. html <canvas id="canvas"></canvas...
Transformations - Web APIs
50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample rotating the second transformation method is rotate(). we use it to rotate the canvas around the current origin. rotate(angle) rotates the canvas clockwise around the current origin by the angle number of radians. the rotation c
enter point is always the canvas origin. to change the c
enter point, we will need to move the canvas by using the translate() method. a rotate example in this example, we'll use the rotate() method to first rotate a rectangle from the canvas origin and then from the c
enter of the rectangle itself with the help of translate(). reminder: angles are in radians, not degrees. to convert, we are using: r...
...unction draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // left rectangles, rotate from canvas origin ctx.save(); // blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(30, 30, 100, 100); ctx.rotate((math.pi / 180) * 25); // grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(30, 30, 100, 100); ctx.restore(); // right rectangles, rotate from rectangle c
enter // draw blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(150, 30, 100, 100); ctx.translate(200, 80); // translate to rectangle c
enter // x = x + 0.5 * width // y = y + 0.5 * height ctx.rotate((math.pi / 180) * 25); // rotate ctx.translate(-200, -80); // translate back // draw grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect...
... <canvas id="canvas" width="300" height="200"></canvas> draw(); screenshotlive sample scaling the next transformation method is scaling. ...
... <canvas id="canvas" width="300" height="200"></canvas> draw(); screenshotlive sample scaling the next transformation method is scaling. we use it to increase or decrease the units in our canvas grid. ...
EffectTiming.fill - Web APIs
rves as a button that will trigger the animation to begin. ...
...that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0;...
...border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: c
enter; margin-top: 0px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 160px; padding: 10px; position: relative; text-align: c
enter; align-self: c
enter; 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;...
...ns-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: c
enter; } all this does is specify the size, border, and color information, as well as indicate that the box should be c
entered 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 describe the keyframes and the timing configuration to use, then we'll actually see th...
GlobalEventHandlers.onanimationiteration - Web APIs
on events, so it may look familiar. ...
...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...
...first is the box itself. ...
...ayout. 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: c
enter; 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 { left:calc(100% - var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } ...
GlobalEventHandlers.ondragend - Web APIs
on dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function drag
enter_handler(ev) { console.log("drag
enter"); // change the source element's background color for
enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target el...
...nge the target element's background color to visually indicate // the drag ended. ...
.... ...
...cument.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's
enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondrag
enter = drag
enter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondrag
enter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop...
GlobalEventHandlers.ondragexit - Web APIs
on dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function drag
enter_handler(ev) { console.log("drag
enter"); // change the source element's background color for
enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target el...
...nge the target element's background color to visually indicate // the drag ended. ...
.... ...
...cument.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's
enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondrag
enter = drag
enter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondrag
enter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop...
HTMLInputElement.stepUp() - Web APIs
the table above), or if the step value is set to any, an invalidstateerror exception is thrown. syntax element.stepup( [ stepincrement ] ); parameters stepincrement the optional stepincrement paremeter is a numeric value. if no parameter is passed, stepincrement defaults to 1. ...
... parameters stepincrement the optional stepincrement paremeter is a numeric value. if no parameter is passed, stepincrement defaults to 1. ...
...ncrement defaults to 1. ...
...try it with 0 */ input.stepup() } } css input:invalid { border: red solid 3px; } result note if you don't pass a parameter to the stepup method, it defaults to 1. ...
MouseEvent.relatedTarget - Web APIs
the mouseevent.relatedtarget read-only property is the secondary target for the mouse event, if there is one. ...
... the mouseevent.relatedtarget read-only property is the secondary target for the mouse event, if there is one. ...
... the mouseevent.relatedtarget read-only property is the secondary target for the mouse event, if there is one. ...
...: event name target relatedtarget mouse
enter the eventtarget the pointing device
entered to the eventtarget the pointing device exited from mouseleave the eventtarget the pointing device exited from the eventtarget the pointing device
entered to mouseout the eventtarget the pointing device exited from the eventtarget the pointing device
entered to mouseover the eventtarget the pointing device
entered to the eventtarget the pointing device exited from drag
enter the eventtarget the pointing device
entered to the eventtarget the pointing device exited from dragexit the eventtarget the pointing device exited from the eventtarget the pointing device
entered to for events with no secondary...
SubtleCrypto.wrapKey() - Web APIs
the working examples out on github. raw wrap this example wraps an aes key. it uses "raw" as the export format and aes-kw, with a password-derived key, to encrypt it. see the complete code on github. let salt; /* get some key material to use as input to the derivekey method. the key material is a password supplied by the user. */ function getkeymaterial() { const password = window.prompt("
enter your password"); const enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* given some key material and some random salt derive an aes-kw key using pbkdf2. */ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", ...
... }); pkcs #8 wrap this example wraps an rsa private signing key. it uses "pkcs8" as the export format and aes-gcm, with a password-derived key, to encrypt it. see the complete code on github. let salt; let iv; /* get some key material to use as input to the derivekey method. the key material is a password supplied by the user. */ function getkeymaterial() { const password = window.prompt("
enter your password"); const enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* given some key material and some random salt derive an aes-gcm key using pbkdf2. */ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", ...
...tpublickeyinfo wrap this example wraps an rsa public encryption key. it uses "spki" as the export format and aes-cbc, with a password-derived key, to encrypt it. see the complete code on github. let salt; let iv; /* get some key material to use as input to the derivekey method. the key material is a password supplied by the user. */ function getkeymaterial() { const password = window.prompt("
enter your password"); const enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* given some key material and some random salt derive an aes-cbc key using pbkdf2. */ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", ...
... json web key import this code wraps an ecdsa private signing key. it uses "jwk" as the export format and aes-gcm, with a password-derived key, to encrypt it. see the complete code on github. let salt; let iv; /* get some key material to use as input to the derivekey method. the key material is a password supplied by the user. */ function getkeymaterial() { const password = window.prompt("
enter your password"); const enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* given some key material and some random salt derive an aes-gcm key using pbkdf2. */ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", ...
Web Video Text Tracks Format (WebVTT) - Web APIs
ks 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:c
enter 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 blank line, and then five cues separated by blank lines. a cue consists of five components: an optional cue identifier followed by a newline. cue timings. optional cue settings with at least one space before the fir...
...we can alter the objects form, shape and visibility in html using css. but the vttcue interface is within the webvtt provides the vast range of adjustment variables which can be used directly to alter the cue. ...
...using css. but the vttcue interface is within the webvtt provides the vast range of adjustment variables which can be used directly to alter the cue. ...
...es the vast range of adjustment variables which can be used directly to alter the cue. ...
Geometry and reference spaces in WebXR - Web APIs
3d space used by webxr, it's first useful to understand the units of measure that are applied to the 3d world. lengths and distances webgl measures all distances and lengths in meters. webxr inherits this standard, as well as the fact that the world is a cube two meters wide, two meters tall, and two meters deep. each of the three axes has a minimum value of -1.0 and a maximum of 1.0, with the c
enter of the cube located at (0, 0, 0). this two cubic meter space encompasses the entire universe for the purposes of your code. everything you draw must have its coordinates mapped to fit into this space, either explicitly within your code, or by using a transform to adjust the coordinates of all vertices. the most efficient way, of course, is to design your objects and code to use the same coordi...
...positions and motion of objects and other entities (such as light sources and cameras) within the user's environment. a point in 3d space is, as covered previously, made up of three components, each identifying the distance of the point along one the three axes. the position of any given point in the world is described by indicating how far along each of three axes the point is located from the c
enter of the space, which is the position at which those the three axes meet. this is the native origin of the space, corresponding to a specific physical location in the user's environment. each space has its own native origin, which is tracked by the xr device's tracking system. this may be different from the effective origin, which is the origin point for the space's local coordinate system. the d...
...form, since typically the two origins are aligned when the space is first established. however, as changes in alignment accumulate over time the origin offset may change to compensate. the position of a point in space relative to the origin is determined by determining its distance along each of the three spatial axes shown in the diagram above. the space's origin is the point (0, 0, 0), at the c
enter of the space and at the zero position along each axis. specifically, under the initial starting conditions, with the default orientation of the viewer upon the space: the x-axis extends horizontally from left to right away from the origin, with the x coordinate of +1.0 being located at the right edge of the world. negative values of x extend toward the left from the origin, reaching a value of...
...priate reference space that best represents those needs. this is done by asking the user agent for an xrreferencespace matching those needs. an xrreferencespace object acts as a means to adapt one coordinate system reference frame to another. after putting on a headset, consider the virtual world around you to have a coordinate system in which your position is (0, 0, 0)—that is, you're at the c
enter of everything. doesn't that feel empowering? forward, directly toward your headset, is the -y axis, with +y behind you. x is positive to your right and negative to your left. z is negative as you go up and positive as you go upward. this indicates the position of the headset in space at the start of your use of the xr system, with the origin (0, 0, 0) being positioned basically at the bridge of y...
Basic concepts behind Web Audio API - Web APIs
rent sound samples contained in each channel, leading to a richer sound experience. the channels are usually represented by standard abbreviations detailed in the table below: mono 0: m: mono stereo 0: l: left 1: r: right quad 0: l: left 1: r: right 2: sl: surround left 3: sr: surround right 5.1 0: l: left 1: r: right 2: c: c
enter 3: lfe: subwoofer 4: sl: surround left 5: sr: surround right up-mixing and down-mixing when the number of channels doesn't match between an input and an output, up- or down-mixing happens according the following rules. this can be somewhat controlled by setting the audionode.channelinterpretation property to speakers or discrete: interpretation input channels o...
....l = input.m output.r = input.m 1 (mono) 4 (quad) up-mix from mono to quad. the m input channel is used for non-surround output channels (l and r). surround output channels (sl and sr) are silent. output.l = input.m output.r = input.m output.sl = 0 output.sr = 0 1 (mono) 6 (5.1) up-mix from mono to 5.1. the m input channel is used for the c
enter output channel (c). all the others (l, r, lfe, sl, and sr) are silent. output.l = 0 output.r = 0 output.c = input.m output.lfe = 0 output.sl = 0 output.sr = 0 2 (stereo) 1 (mono) down-mix from stereo to mono. both input channels (l and r) are equally combined to produce the unique output channel (m). output.m = 0.5 * (input.l + input.r) 2 (s...
...r non-surround respective output channels (l and r). surround output channels (sl and sr) are silent. output.l = input.l output.r = input.r output.sl = 0 output.sr = 0 2 (stereo) 6 (5.1) up-mix from stereo to 5.1. the l and r input channels are used for their non-surround respective output channels (l and r). surround output channels (sl and sr), as well as the c
enter (c) and subwoofer (lfe) channels, are left silent. output.l = input.l output.r = input.r output.c = 0 output.lfe = 0 output.sl = 0 output.sr = 0 4 (quad) 1 (mono) down-mix from quad to mono. all four input channels (l, r, sl, and sr) are equally combined to produce the unique output channel (m). output.m = 0.25 * (input.l + input.r + input.sl + input...
...uce the unique left output channel (l). and similarly, both right input channels (r and sr) are equally combined to produce the unique right output channel (r). output.l = 0.5 * (input.l + input.sl) output.r = 0.5 * (input.r + input.sr) 4 (quad) 6 (5.1) up-mix from quad to 5.1. the l, r, sl, and sr input channels are used for their respective output channels (l and r). c
enter (c) and subwoofer (lfe) channels are left silent. output.l = input.l output.r = input.r output.c = 0 output.lfe = 0 output.sl = input.sl output.sr = input.sr 6 (5.1) 1 (mono) down-mix from 5.1 to mono. the left (l and sl), right (r and sr) and central channels are all mixed together. the surround channels are slightly attenuated and the regular lateral c...
Cognitive accessibility - Accessibility
hange setting based on an active request form control operation and data entry should result in predictable behavior. changes in context can confuse users with cognitive disabilities, and should therefore only occur when it is clear that such a change will happen in response to the user's action. changing state should require intentional user action. examples of this are checking a checkbox,
entering data or changing a select option. also be sure to provide a submit button to initiate the change of context, and describe what will happen before the change is made. keep navigation consistent throughout the site keep the navigation order consistent between pages. for example, if you have a navigation bar on multiple pages, make that navigation uniform across the site with the same li...
...ers need to be alerted to the error and informed of what is wrong. if there is client side error detection, observe the following guidelines to make the error as effective as possible when conveyed to the user: the error must be described in the text. ensure that the error message is as specific as possible. provide text to identify incomplete required fields and text descriptions if a value
entered is invalid. if the error prevented a form submission, focus on the error. if multiple errors are present, provide a summary, with each error linking to the related input. include text along with use of icons, images, color and so on. some people have difficulty understanding the meaning of icons and other visual cues. other people may have difficulty understanding the text version of your e...
...suggested input to the user if an input error is automatically detected and suggestions for correction are known (unless doing so would jeopardize the security or purpose of the content). prevent catastrophes for submissions that cause, or can lead to, legal, financial, or other significant consequences, ensure that the submissions can be reviewed, confirmed, and/or are reversible. data
entered by the user should be checked for errors before submission, and the user should be given the opportunity to correct them. the user should be able to review, confirm, and correct information before final submission. also, be sure to include a confirmation checkbox in addition to a submit button. if a submission causes a legal or financial transaction to occur, provide a stated time within which...
...veryone. many people with cognitive impairments also have physical disabilities. websites must conform with the w3c’s web content accessibility guidelines. the w3c’s cognitive and learning disabilities accessibility task force produces web accessibility guidelines for people with cognitive impairments. webaim has a cognitive page of relevant information and resources. the united states c
enters for disease control estimate that, as of 2018, 1 in 4 u.s. citizens have a disability and, of them, cognitive impairment is the most common for young people. in the u.s., “intellectual disabilities” used to be called “mental retardation.” in the u.k., “intellectual disabilities” is commonly called “learning disabilities” or “learning difficulties”. see also accessibilit...
Web accessibility for seizures and physical reactions - Accessibility
cause harm. a <div> element set to change color and luminosity at high frequency, easily done via javascript, can cause real harm. and, flickering can occur everywhere. for example, "spinners" commonly used to display while pages load, can easily "flicker" while spinning. additional concerns exist for individuals with motor-skills problems. ...
...working draft personalization tools 1.0 working draft three flashes or below threshhold understanding sc 2.3.1 understanding wcag 2.0 (older, but contains some explanations of references made in the wcag 2.1 criteria) three flashes or below threshold understanding succes...
... ...
...ck of the low vision task force of the w3c; tom jewett and eric eggert from knowbility; jim allan of the diagram c
enter; and dr. selim r. benbadis, director, comprehensive epilepsy program and clinical neurophysiology laboratory at usf and tgh in tampa, florida for their great, great assistance and discussions on this topic. we are all in tremendous gratitude to the trace research & development c
enter for making their amazing tool, the photosensitive epilepsy analysis tool (peat) for free. ...
Coordinate systems - CSS: Cascading Style Sheets
s moved, for example, or if the user's screen geometry changes (by changing display resolution or by adding or removing monitors to their system). the mouseevent.screenx and mouseevent.screeny properties give the coordinates of a mouse event's position relative to the screen's origin. example let's take a look at an example. this simple example creates a set of nested boxes. whenever the mouse
enters, moves around inside, or exits the inner box, the corresponding event is handled by updating a set of informational messages within the box, listing out the current mouse coordinates in each of the four available coordinate systems. javascript let's look at the script in two sections. first, the code that logs the coordinates to the screen. this code will be called by the event handler for the...
...n coordinate system. for example, if the value of type is "page", then idx is "pagex" and idy is "pagey". handling the mouse events setcoords() is called by the event handler for the various mouse events, named update(); this is shown below. ...
... html the html for our example is below. note that within the <div> with the id "log", we have a paragraph for each coordinate system, with span used for each of the elements to receive and display the coordinates in each model. ...
...rdinates. .outer { width: 1000px; height: 200px; background-color: red; } .inner { position: relative; width: 500px; height: 150px; top: 25px; left: 100px; background-color: blue; color: white; cursor: crosshair; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } .log { position: relative; width: 100%; text-align: c
enter; } result here you can see the results in action. as you mouse in and around the blue box, watch the values of the mouse's x and y coordinates change in the various coordinate systems in which you can obtain the values. note also the effect of scrolling the example horizontally upon the values returned and how the value of clientx doesn't change. ...
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
and any auto margins have been resolved. typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. it also exerts some control over the alignment of items when they overflow the line. note: space-* values not supported in older syntaxes. ...
...o justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container's items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. ...
... -webkit-align-self: $value; @if $value == flex-start { -ms-flex-item-align: start; } @else if $value == flex-end { -ms-flex-item-align: end; } @else { -ms-flex-item-align: $value; } align-self: $value; } flexbox align con...
...flex-item-align: $value; } align-self: $value; } flexbox align content the align-content property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main axis. note that this property has no effect when the flexbox has only a single line. values: flex-start | flex-end | c
enter | space-between | space-around | stretch (default) spec: https://drafts.csswg.org/css-flexbox/#align-content-property @mixin align-content($value: stretch) { // no webkit box fallback. -webkit-align-content: $value; @if $value == flex-start { -ms-flex-line-pack: start; } @else if $value == flex-end { -ms-flex-line-pack: end; } @else { -ms-flex-line-pack: $value; } al...
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
sidebar" "nav content ad" "footer footer footer" } nav ul { flex-direction: column; } } the three-column layout has two 1fr unit side columns and a middle column that has 4fr as the track size. this means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the c
enter. in this layout i am displaying the nav in the left column, alongside the content. in the right column we have the sidebar and underneath it the advertisements (ad). the footer now spans right across the bottom of the layout. i then use a flexbox to display the navigation as a column. this is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different...
...i want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. we achieve this with the minmax() function in our repeat notation for track sizing. .listing { list-style: none; ma...
...a little touch of flexbox. i set the list item to display: flex and the flex-direction to column. i can then use an auto margin on the .cta to push this bar down to the bottom of the box. .listing li { border: 1px solid #ffe066; border-radius: 5px; display: flex; flex-direction: column; } .listing .cta { margin-top: auto; border-top: 1px solid #ffe066; padding: 10px; text-align: c
enter; } .listing .body { padding: 10px; } this is really one of the key reasons i would use flexbox rather than grid, if i am just aligning or distributing something in a single dimension, that’s a flexbox use case. this is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. it might be nice to cause those to span two tracks...
... goes here.</p></div> <div class="cta"><a href="">call to action!</a></div> </li> </ul> * {box-sizing: border-box;} img {max-width: 100%; display: block;} body { font: 1.2em helvetica, arial, sans-serif; } a:link, a:visited { text-decoration: none; color: #f08c00; } h2 { background-color: #f08c00; color: #fff; text-align: c
enter; margin: 0; padding: 20px; } .listing li { border: 1px solid #ffe066; border-radius: 5px; display: flex; flex-direction: column; } .listing .cta { margin-top: auto; border-top: 1px solid #ffe066; padding: 10px; text-align: c
enter; } .listing .body { padding: 10px; } .listing { list-style: none; margin: 2em; display: grid; grid-gap: 20px; grid-auto-f...
Using CSS transforms - CSS: Cascading Style Sheets
slation 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 c
enter of the element and can be moved. it is used by several transforms, like rotations, scaling or skewing, that need a specific point as a parameter. transform specifies the transforms to apply to the element. it is a space-separated list of transforms, which are applied one after the other, as requested by the composition operation. composite transforms are effectively applied in order from right ...
...px; 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: c
enter; } /* 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); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) t...
...latez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result the second element to configure is the position of the viewer, with the perspective-origin property. by default the perspective is c
entered on the viewer, which is not always adequate. changing the perspective origin this example shows cubes with popular perspective-origin values. html <section> <figure> <caption><code>perspective-origin: top left;</code></caption> <div class="container"> <div class="cube potl"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3<...
...ainer { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; 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: c
enter; } /* 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); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) tran...
offset-anchor - CSS: Cascading Style Sheets
the offset-anchor css property specifies the point inside the box of an element travelling along an offset-path that is actually moving along the path. ...
... pages. note that the 3-value position syntax does not work for any usage of <position>, except for in background(-position). ...
...ue position syntax does not work for any usage of <position>, except for in background(-position). formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrelativetowidthandheightcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting various offset-anchor values in the following example, we have three <div> elements nested in <section> elements. each <div> is g...
... offset-anchor values in the following example, we have three <div> elements nested in <section> elements. each <div> is given the same offset-path (a horizontal line 200 pixels long) and animated to move along it. the three are then given different background-color and offset-anchor values. each <section> has been styled with a linear gradient to give it a horizontal line running through its c
enter, to give you a visual display of where the <div>'s offset paths are running. this allows you to see what effect the different offset-anchor values have — the first one, auto, causes the <div>'s c
enter point to move along the path. the other two cause the <div>'s top-right and bottom-left points to move along the path, respectively. html <section> <div class="offset-anchor1"></div> </sectio...
perspective-origin - CSS: Cascading Style Sheets
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. c
enter, 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 following values: <length-percentage> indicating the position as an absolute length value or relative to the height of the element. the value may be negative. top, a...
...alue. 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 following values: <length-percentage> indicating the position as an absolute length value or relative to the height of the element. the value may be negative. top, a keyword being a shortcut for the 0 length value. c
enter, a keyword being a shortcut for the 50% percentage value. bottom, a keyword being a shortcut for the 100% percentage value. formal definition initial value50% 50%applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax ...
...ercentage value. bottom, a keyword being a shortcut for the 100% percentage value. formal definition initial value50% 50%applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples changing the perspective origin this example shows cubes with popular perspective-origin values. html <secti...
...ainer { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; 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: c
enter; } /* 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); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) tran...
place-self - CSS: Cascading Style Sheets
for it. 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. ...
...epository. 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. ...
...onding to the item's start side in the cross axis. self-end aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis. flex-start the cross-start margin edge of the flex item is flushed with the cross-start edge of the line. flex-end the cross-end margin edge of the flex item is flushed with the cross-end edge of the line. c
enter the flex item's margin box is c
entered within the line on the cross-axis. if the cross-size of the item is larger than the flex container, it will overflow equally in both directions. 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...
...l <article class="container"> <span>first</span> <span>second</span> <span>third</span> <span>fourth</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 300px; } span:nth-child(2) { place-self: start c
enter; } span:nth-child(3) { place-self: c
enter start; } span:nth-child(4) { place-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: c
enter; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3th...
ruby-align - CSS: Cascading Style Sheets
space-between is a keyword indicating that the extra space will be distributed between the elements of the ruby. ...
... space-between is a keyword indicating that the extra space will be distributed between the elements of the ruby. ...
...l be distributed between the elements of the ruby. space-around is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it. ...
...by base containers, ruby annotation containersinheritedyescomputed valueas specifiedanimation typediscrete formal syntax start | c
enter | space-between | space-around examples ruby aligned at the start of the base text html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: start; } result ruby aligned at the c
enter of the base text html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: c
enter; } result extra space distributed between ruby elements html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: space-between; } result extra space dist...
matrix3d() - CSS: Cascading Style Sheets
ass="face bottom">6</div> </section> css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); margin: 50px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: c
enter; justify-content: c
enter; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) transl...
...nother transform3d() example, which implements an animated combined translate and scale. html <div class="foo"> lorem ipsum dolor sit amet, consectetur adipisicing elit. ...
...d scale. html <div class="foo"> lorem ipsum dolor sit amet, consectetur adipisicing elit. ...
...s="foo"> lorem ipsum dolor sit amet, consectetur adipisicing elit. quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse? </div> css html { width: 100%; } body { height: 100vh; /* c
entering content */ display: flex; flex-flow: row wrap; justify-content: c
enter; align-content: c
enter; } .foo { width: 50%; padding: 1em; color: white; background: #ff8c66; border: 2px dashed black; text-align: c
enter; font-family: system-ui, sans-serif; font-size: 14px; /* setting up animation for better demonstration */ animation: motionscale 2s alternate linear infinite; } @keyframes motionscale { from { /* identity matrix is used as basis here. the m...
The HTML autocomplete attribute - HTML: Hypertext Markup Language
area> elements, <select> elements, and <form> elements. autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. the source of the suggested values is generally up to the browser; typically values come from past values
entered by the user, but they may also come from pre-configured values. for instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. perhaps the browser offers the ability to save encrypted credit card information, for autocompletion following an authentication procedure. if an <input>, <select> or <textarea> element has no autocompl...
...hose id is specified by the form attribute of the element. for more information, see the autocomplete attribute in <form>. in order to provide autocompletion, user-agents might require <input>/<select>/<textarea> elements to: have a name and/or id attribute be descendants of a <form> element the form to have a submit button values "off" the browser is not permitted to automatically
enter or select a value for this field. it is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically
entered. note: in most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from au...
... name. "additional-name" the middle name. "family-name" the family (or "last") name. "honorific-suffix" the suffix, such as "jr.", "b.sc.", "phd.", "mbasw", or "iv". "nickname" a nickname or handle. "email" an email address. "username" a username or account name. "new-password" a new password. when creating a new account or changing passwords, this should be used for an "
enter your new password" or "confirm new password" field, as opposed to a general "
enter your current password" field that might be present. this may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password (see also preventing autofilling with autocomplete="new-password"). "current-password" the user's current password. ...
... and (if applicable) dynamic checkedness of an <input> element, <textarea> element, or entire <form> across page loads. the persistence feature is enabled by default. setting the value of the autocomplete attribute to off disables this feature. this works even when the autocomplete attribute would normally not apply by virtue of its type. see bug 654072. examples <div> <label for="cc-number">
enter your credit card number</label> <input name="cc-number" id="cc-number" autocomplete="off"> </div> administrative levels in addresses the four administrative level fields (address-level1 through address-level4) describe the address in terms of increasing levels of precision within the country in which the address is located. each country has its own system of administrative levels, and may arr...
<tr>: The Table Row element - HTML: Hypertext Markup Language
art of the html specification and may be missing or may not work as expected. they should be avoided. alignobsolete since html5 a domstring which specifies how the cell's context should be aligned horizontally within the cells in the row; this is shorthand for using align on every cell in the row individually. possible values are: left align the content of each cell at its left edge. c
enter c
enter the contents of each cell between their left and right edges. right align the content of each cell at its right edge. justify widen whitespaces within the text of each cell so that the text fills the full width of each cell (full justification). char align each cell in the row on a specific character (such that each row in the column that is configured this way will horizonta...
...he alignment character (typically "." or "," when aligning numerical data) and the number of characters that should follow the alignment character. this alignment type was never widely supported. if no value is expressly set for align, the parent node's value is inherited. instead of using the obsolete align attribute, you should instead use the css text-align property to establish left, c
enter, right, or justify alignment for the row's cells. to apply character-based alignment, set the css text-align property to the alignment character (such as "." or ","). bgcolorobsolete since html5 a domstring specifying a color to apply to the backgrounds of each of the row's cells. this can be either an hexadecimal #rrggbb or #rgb value or a color keyword. omitting the attribute or sett...
...ttribute or setting it to null in javascript causes the row's cells to inherit the row's parent element's background color. the <tr> element should be styled using css. to give a similar effect as the bgcolor attribute, use the css property background-color. charobsolete since html5 a domstring which sets the character to align the cells in each of the row's columns on (each row's c
entering that uses the same character gets aligned with others using the same character . typical values for this include a period (".") or comma (",") when attempting to align numbers or monetary values. if align is not set to char, this attribute is ignored. this attribute is not only obsolete, but was rarely implemented anyway. to achieve the same effect as the char attribute, set the css text-a...
... the bottom of the cell, handling alignment of different fonts and font sizes by aligning the characters along the baseline of the font(s) used in the row. if all of the characters in the row are the same size, the effect is the same as bottom. bottom, draws the text in each of the row's cells as closely as possible to the bottom edge of those cells. middle each cell's text is vertically c
entered. top each cell's text is drawn as closely as possible to the top edge of the containing cell. don't use the obsolete valign attribute. instead, add the css vertical-align property to the row. examples see <table> for examples on <tr>. basic example this simple example shows a table listing people's names along with various information about membership in a club or service. h...
Introduction - JavaScript
also includes a javascript interpreter that you can use to execute javascript expressions in the current page. to open the web console (ctrl+shift+i on windows and linux or cmd-option-k on mac), open the tools menu in firefox, and select "developer ▶ web console". the web console appears at the bottom of the browser window. ...
...nsole (ctrl+shift+i on windows and linux or cmd-option-k on mac), open the tools menu in firefox, and select "developer ▶ web console". the web console appears at the bottom of the browser window. along the bottom of the console is an input line that you can use to
enter javascript, and the output appears in the panel above: the console works the exact same way as eval: the last expression
entered is returned. ...
... and select "developer ▶ web console". the web console appears at the bottom of the browser window. along the bottom of the console is an input line that you can use to
enter javascript, and the output appears in the panel above: the console works the exact same way as eval: the last expression
entered is returned. for the sake of simplicity, it can be imagined that every time something is
entered into the console, it is actually surrounded by console.log around eval, like so: function greetme(yourname) { alert("hello " + yourname) } console.log(eval('3 + 5')) multi-line input in the web console the single-line input mode of the web console is great for quick testing of javascript expressions, but although you can execute multiple lines, it's not very convenient for that. for more ...
...e complex javascript, you can use the multi-line line input mode. hello world to get started with writing javascript, open the web console in multi-line mode, and write your first "hello world" javascript code: (function(){ "use strict"; /* start of your code */ function greetme(yourname) { alert('hello ' + yourname); } greetme('world'); /* end of your code */ })(); press cmd+
enter or ctrl+
enter (or click the run button) to watch it unfold in your browser! in the following pages, this guide introduces you to the javascript syntax and language features, so that you will be able to write more complex applications. but for now, remember to always include the (function(){"use strict"; before your code, and add })(); to the end of your code. you will learn what these mean, but...
<mtable> - MathML
similar to <table> , <tr> and <td> elements of html. note: the <mtable> element resets the displaystyle attribute to false. if you want to use this element as an inline-block, you might want to set <mtable displaystyle="true">...</mtable>. attributes align specifies the vertical alignment of the table with respect to its environment. possible values are: axis (default): the vertical c
enter of the table aligns on the environment's axis (typically the minus sign). baseline: the vertical c
enter of the table aligns on the environment's baseline. bottom: the bottom of the table aligns on the environments baseline. c
enter: see baseline. top: the top of the table aligns on the environments baseline. in addition, values of the align attribute can end with a rownumber (e.g. align...
...this allows you to align the specified row of the table rather than the whole table. a negative integer value counts rows from the bottom of the table. starting with gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the interpretation of negative values has been corrected (bug 601436). ...
... 601436). in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) the parsing has been updated to treat whitespace correctly. alignmentscope unimplemented class, id, style provided for use with stylesheets. columnalign specifies the horizontal alignment of the cells. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnalign="left right c
enter"). possible values are: left, c
enter (default) and right. columnlines specifies column borders. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnlines="none none solid"). possible values are: none (default), solid and dashed. columnspacing specifies the space between table columns. unimplemented columnwidth specifies the width of table column...
...an use #rgb, #rrggbb and html color names. unimplemented minlabelspacing a length value specifing the minimum space between a label and the adjacent cell in the row. rowalign specifies the vertical alignment of the cells. multiple values separated by space are allowed and apply to the corresponding rows (e.g. rowalign="top bottom axis"). possible values are: axis, baseline (default), bottom, c
enter and top. rowlines specifies row borders. multiple values separated by space are allowed and apply to the corresponding rows (e.g. rowlines="none none solid"). possible values are: none (default), solid and dashed. unimplemented rowspacing specifies the space between table rows. unimplemented side specifies the position where <mlabeledtr> label elements should be placed. possible values are:...
refX - SVG: Scalable Vector Graphics
the refx attribute defines the x coordinate of an element’s reference point. two elements are using this attribute: <marker> and <symbol> marker for <marker>, refx defines the x coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the shape. value <length-percentage> | <number> | left | c
enter | right default value 0 animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox width. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of...
...ts, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox width. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. left the reference point of the marker is placed at the left edge of the shape. c
enter the reference point of the marker is placed at the horizontal c
enter of the shape. right the reference point of the marker is placed at the right edge of the shape. symbol for <symbol>, refx defines the x coordinate of the symbol, which is defined by the cumulative effect of the x attribute and any transformations on the <symbol> and its host <use> element. unlike other positioning attribu...
...ectangular viewport region (regardless of the viewbox coordinate) is positioned at the x coordinate. for backwards compatibility, the behavior when refx is not specified on a <symbol> element is different from when it is specified with a value of 0, and therefore different from the behavior when an equivalent attribute is not specified on a <marker> element. value <length> | left | c
enter | right default value none animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox width. <number> numbers are interpreted as being in the coordinate system of...
...ts, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox width. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. left the reference point of the marker is placed at the left edge of the shape. c
enter the reference point of the marker is placed at the horizontal c
enter of the shape. right the reference point of the marker is placed at the right edge of the shape. specifications specification status comment scalable vector graphics (svg) 2the definition of 'refx' in that specification. candidate recommendation added keywords left, c
enter, and right. ...
refY - SVG: Scalable Vector Graphics
the refy attribute defines the y coordinate of an element’s reference point. two elements are using this attribute: <marker> and <symbol> marker for <marker>, refy defines the y coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the shape. value <length-percentage> | <number> | top | c
enter | bottom default value 0 animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox height. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application o...
...nts, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox height. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. top the reference point of the marker is placed at the top edge of the shape. c
enter the reference point of the marker is placed at the vertical c
enter of the shape. bottom the reference point of the marker is placed at the bottom edge of the shape. symbol for <symbol>, refy defines the y coordinate of the symbol, which is defined by the cumulative effect of the y attribute and any transformations on the <symbol> and its host <use> element. unlike other positioning attribu...
...rectangular viewport region (regardless of the viewbox coordinate) is positioned at the y coordinate. for backwards compatibility, the behavior when refy is not specified on a <symbol> element is different from when it is specified with a value of 0, and therefore different from the behavior when an equivalent attribute is not specified on a <marker> element. value <length> | top | c
enter | bottom default value none animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox height. <number> numbers are interpreted as being in the coordinate system ...
...nts, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox height. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. top the reference point of the marker is placed at the top edge of the shape. c
enter the reference point of the marker is placed at the vertical c
enter of the shape. bottom the reference point of the marker is placed at the bottom edge of the shape. specifications specification status comment scalable vector graphics (svg) 2the definition of 'refy' in that specification. candidate recommendation added keywords left, c
enter, and right. ...
Gradients in SVG - SVG: Scalable Vector Graphics
like linear gradients, the <radialgradient> node can take several attributes to describe its position and orientation. however, unlike linear gradients, it's a bit more complex. the radial gradient is again defined by two points, which determine where its edges are. the first of these defines a circle around which the gradient ends. it ...
... directions gradually change to blue at the edge. like linear gradients, the <radialgradient> node can take several attributes to describe its position and orientation. however, unlike linear gradients, it's a bit more complex. the radial gradient is again defined by two points, which determine where its edges are. the first of these defines a circle around which the gradient ends. it requires a c
enter point, designated by the cx and cy attributes, and a radius, r. setting these three attributes will allow you to move the gradient around and change its size, as shown in the second rect above. the second point is called the focal point and is defined by the fx and fy attributes. while the first point described where the edges of the gradient were, the focal point describes where its middle is. ...
...butes, and a radius, r. setting these three attributes will allow you to move the gradient around and change its size, as shown in the second rect above. the second point is called the focal point and is defined by the fx and fy attributes. while the first point described where the edges of the gradient were, the focal point describes where its middle is. this is easier to see with an example. ...
...> <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> screenshotlive sample if the focal point is moved outside the circle described earlier, it's impossible for the gradient to be rendered correctly, so the spot will be assumed to be within the edge of the circle. if the focal point isn't given at all, it's assumed to be at the same place as the c
enter point. both linear and radial gradients also take a few other attributes to describe transformations they may undergo. the only other one i want to mention here is the spreadmethod attribute. this attribute controls what happens when the gradient reaches its end, but the object isn't filled yet. it can take on one of three values, "pad", "reflect", or "repeat". "pad" is what you have seen so far...
cfx - Archive of obsolete content
. you can specify "firefox", "xulrunner", "fennec", or "thunderbird". but note that at present only firefox is supported. --no-run with this option cfx will not execute the command, but will print out the command that it would have used to execute the command. for example, if you type: cfx run ---no-run you will see something like: to launch the application,
enter the following command: /path/to/firefox/firefox-bin -profile /path/to/profile/tmpjdnlp6.mozrunner -foreground -no-remote this enables you to run the add-on without going through cfx, which might be useful if you want to run it inside a debugger like gdb. -o, --overload-modules in early versions of the sdk, the sdk modules used by an add-on were themselves included in t...
...at present only firefox is supported. --check-memory attempts to detect leaked compartments after a test run. --no-run with this option cfx will not execute the command, but will print out the command that it would have used to execute the command. for example, if you type: cfx run ---no-run you will see something like: to launch the application,
enter the following command: /path/to/firefox/firefox-bin -profile /path/to/profile/tmpjdnlp6.mozrunner -foreground -no-remote this enables you to run the add-on without going through cfx, which might be useful if you want to run it inside a debugger like gdb. -o, --overload-modules in early versions of the sdk, the sdk modules used by an add-on were themselves included in t...
... what application they are run with, and which binary is used. this accepts the same options as cfx test. cfx testall this will test everything: the cfx tool, all available commonjs packages, and all examples. this accepts the same options as cfx test. using --profiledir by default, cfx run and cfx test use a new profile each time they are executed. this means that any profile-specific data
entered from one run of cfx will not, by default, be available in the next run. this includes, for example, any extra add-ons you installed, or your history, or any data stored using the simple-storage api. to make cfx use a specific profile, pass the --profiledir option, specifying the path to the profile you wish to use. if you give --profiledir a path to a nonexistent profile, cfx will create a p...
jpm - Archive of obsolete content
- directory for your source code, defaulting to the current directory installation jpm is distributed with the node package manager npm. installing npm there are two ways to get npm. download and install node.js from nodejs.org. node.js includes npm. or, if you have a package manager like apt, install npm via that. for example, in an ubuntu or debian terminal window,
enter sudo apt-get install nodejs nodejs-legacy npm. to test your installation, run: /usr/bin/env node -v if you get an error message saying /usr/bin/env: node: no such file or directory and you have installed nodejs through a package manager, nodejs may have been installed under a different executable name. to ensure compatibility with jpm, however, it must be present in your path under the name...
...ich you are running jpm init. unless an id field is present in package.json, jpm prepends "@" to name and use the result as the id field in the add-on's install manifest. version description entry point (which maps to "main" in package.json) author engines (supported applications) license most of these fields have a default, which is shown in brackets after the question. if you just press
enter, your add-on gets the default value. once you've supplied a value or accepted the default for these properties, you'll be shown the complete contents of "package.json" and asked to accept it. then jpm creates a skeleton add-on, as a starting point for your add-on development, with the following file structure: my-addon index.js package.json test test-index.js ...
...building a .xpi file with jpm xpi. here is an example: # ignore .ds_store files created by mac .ds_store # ignore any zip or xpi files *.zip *.xpi a .jpmignore file with the above contents would ignore all zip files and .ds_store files from the xpi generated by jpm xpi. using profiles by default, jpm run uses a new profile each time it is executed. this means that any profile-specific data
entered from one run of jpm is not, by default, available in the next run. this includes, for example, any extra add-ons you installed, or your history, or any data stored using the simple-storage api. to make jpm use a specific profile, pass the --profile option, specifying the name of the profile you wish to use, or the path to the profile. jpm run --profile boogaloo jpm run --profile path/to/bo...
Appendix: What you should know about open-source software licenses - Archive of obsolete content
...
... that attend software are not limited to copyright: software is also covered by patent and trademark law. while you can freely duplicate, distribute, and modify copyrighted open-source software, it’s typical that with trademarked or patented works, you can’t do whatever you want with them. there are companies that have built businesses on open source by taking advantage of this fact. red hat
enterprise linux (rhel) cannot be copied or distributed with the redhat trademark in place. a number of rhel clones have appeared, such as centos, where the trademarked parts have been scrubbed away by a community effort. the firefox web browser, developed by the mozilla foundation, does not permit modifications of its name or trademarked icon. for this reason, the debian project, which distributes fr...
...06-07-27.html gnu gplv3 third discussion draft http://gplv3.fsf.org/gpl-draft-2007-03-28.html gnu gplv3 "last call" discussion draft http://gplv3.fsf.org/gpl-draft-2007-05-31.html official support for oss japan’s ministry of economy, trade, and industry has issued “guidelines when considering deploying open-source software.” this report, which was prepared by the software information c
enter study group as part of the information-technology promotion agency’s (ipa) “platform-technology development and businesses relating to electronic commerce” project. this report is available online (in japanese) at http://www.meti.go.jp/kohosys/press/0004397/ the ipa has also established an open-source software c
enter to promote and cultivate oss http://www.ipa.go.jp/software/open/o...ish...
Adding windows and dialogs - Archive of obsolete content
« previousnext » opening windows and dialogs to open a new window, use the javascript window.open function just like with html windows. window.open( "chrome://xulschoolhello/content/somewindow.xul", "xulschoolhello-some-window", "chrome,c
enterscreen"); the first argument is the url to open, the second is an id to identify the window, and the last is an optional comma-separated list of features, which describe the behavior and appearance of the window. if this value is null or empty, the default toolbars of the main window will be added to the new one, which is rarely what you want. the window.open page has a detailed description of the features you can use and their values. the following features are very important and you should always keep them in mind: chrome. this ca...
...of the content. to open a new dialog, use the function window.opendialog, an extension of the open function. it allows you to send a set of optional parameters that can be used to communicate with the dialog. let somevalue = 2; let returnvalue = { accepted : false , result : "" }; window.opendialog( "chrome://xulschoolhello/content/somedialog.xul", "xulschoolhello-some-dialog", "chrome,c
enterscreen", somevalue, returnvalue); // you can send as many extra parameters as you need. // if (returnvalue.accepted) { do stuff } the optional parameters are available in the dialog code through the window.arguments property: let somevalue = window.arguments[0]; let returnvalue = window.arguments[1]; // returnvalue.accepted = true; // returnvalue.result = "something"; the parameter n...
...before reading any text in its contents. you can change its style using css in case you don't want the borders to appear. see the firefox preferences window for an example of this: sections are defined using groupbox elements, but their style is quite different from the default. attribute persistence user actions can change the state of your windows, such as selecting an option in a listbox, or
entering text in a textbox. if the user closes and then reopens your window, all the controls are reset to their defaults, which may not be what you want. you need some way of remembering the user-manipulated attribute values so that the window reloads it last state when opened. most xul elements support the persist attribute, which has this exact function. you set the persist attribute with a space-s...
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
nsiwindowwatcher)servicemanager.getservicebycontractid("@mozilla.org/embedcomp/window-watcher;1", nsiwindowwatcher.ns_iwindowwatcher_iid); // set the window creator (from step 6) windowwatcher.setwindowcreator(windowcreator); // create the root xul window: nsidomwindow win = windowwatcher.openwindow(null, "chrome://your-app/content/window.xul", "mywindow", "chrome,resizable,c
enterscreen", null); // set this as the active window windowwatcher.setactivewindow(win); // hand over the application to xpcom/xul, this will block: appstartup.run(); here is an example of a locationprovider that works : public class locationprovider implements iappfilelocprovider { private final file libxulpath; int counter = 0; public locationpr...
...in order to communicate with xpcom after this point, you should use an nsiproxyobjectmanager. following on from the above example, to create a new window, we would do the following: // first, get the event queue service. this handles all event queues in xpcom. nsieventqueueservice eventqueueservive = (nsieventqueueservice)...
...ectmanager_iid); // and use the proxy object manager to create a proxy for the nsiwindowwatcher instance we created above. ...
Supporting private browsing mode - Archive of obsolete content
s = components.classes["@mozilla.org/privatebrowsing;1"] .getservice(components.interfaces.nsiprivatebrowsingservice); this._inprivatebrowsing = pbs.privatebrowsingenabled; } catch(ex) { // ignore exceptions in older versions of firefox } }, observe : function (asubject, atopic, adata) { if (atopic == "private-browsing") { if (adata == "
enter") { this._inprivatebrowsing = true; if (this.watcher && "on
enterprivatebrowsing" in this._watcher) { this.watcher.on
enterprivatebrowsing(); } } else if (adata == "exit") { this._inprivatebrowsing = false; if (this.watcher && "onexitprivatebrowsing" in this._watcher) { this.watcher.onexitprivatebrowsing(); ...
...istener.inprivatebrowsing) { // we are in private browsing mode! } else { // we are not in private browsing mode! } in addition, you can install watcher functions to be called when private browsing turns on and off, as shown in the following example. this lets you passively monitor for changes in private browsing status. var listener = new privatebrowsinglistener(); listener.watcher = { on
enterprivatebrowsing : function() { // we have just
entered private browsing mode! }, onexitprivatebrowsing : function() { // we have just left private browsing mode! } }; canceling shutting off private browsing mode extensions can prevent private browsing mode from being shut off. an extension might wish to do this if it's currently in the middle of an operation that prevents safely t...
... the subject "exit", and set its data field to true to cancel the operation, like this: var os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); os.addobserver(function (asubject, atopic, adata) { asubject.queryinterface(components.interfaces.nsisupportsprbool); // if another extension has not already canceled
entering the private mode if (!asubject.data) { if (adata == "exit") { // if we are leaving the private mode /* you should display some user interface here */ asubject.data = true; // cancel the operation } } }, "private-browsing-cancel-vote", false); note: a well-mannered extension should display some sort of user interface to indicate that private browsing mode ...
Venkman Introduction - Archive of obsolete content
that matches the pattern and line, a breakpoint will be set. in this way, fbreak allows one to set breakpoints in files that are not yet loaded, as well as set breakpoints that are triggered when a file is loaded. the interactive session view another basic view in venkman is the actual interactive session view, which allows you to interact with the debugger from a command line. commands are
entered in the text box, and responses are appended to the end of the output. type /commands in the input area (the text box) to list all of the commands available. the /help command can be used to get additional information about a specific command. you can type /help next, for example, to see how to use the next command. the input area supports command history and tab-completion for command names. c...
... to the end of the output. type /commands in the input area (the text box) to list all of the commands available. the /help command can be used to get additional information about a specific command. you can type /help next, for example, to see how to use the next command. the input area supports command history and tab-completion for command names. command history remembers the last 20 commands
entered. the up and down arrows can be used to revisit these previous commands. tab completion allows the user to type the first portion of a command, and press tab twice to see possible completions. if only one command matches, it will be auto-completed on the first tab. view customization venkman offers nearly complete control over the arrangement and display of views within the application. the de...
...ou just set in step 3. in the interactive session, context becomes animator-0.03.js and the scope is the pause function. there will also be "stopped for breakpoint" in red in the interactive session, along with the file name, line number, and snippet source code from where it stopped. figure 13. (from step 5) stopped at a breakpoint. in the interactive session's input field,
enter this.fpaused venkman evaluates the expression, giving you [boolean] false back. press step into to follow the steps until you have finished debugging the function, and the fishes have paused. in addition to step in, which will execute a single line of javascript and stop, step over can be used to step over a impending function call, and return control to the debugger when the call returns. ...
textbox.type - Archive of obsolete content
below you can set the type attribute to one of the values below for a more specialized type of textbox. don't set the type if you wish to use a regular textbox. autocomplete a textbox that supports autocomplete. for more information about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamonkey]) (firefox) number a textbox that only allows the user to
enter numbers. in addition, arrow buttons appear next to the textbox to let the user step through values. there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value. password a textbox that hides what is typed, used for
entering passwords. search a textbox intended for searching. the ...
...you may specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command event using the timeout attribute (defaults to 500). timed this textbox will fire a command event after the user types characters and a certain time has passed. ...
...ou may specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command event using the timeout attribute (defaults to 500). timed this textbox will fire a command event after the user types characters and a certain time has passed. the delay is set with the timeout attribute. the command event will fire if the user presses the
enter key. the timed type is deprecated in gecko 1.9.1 and the search textbox may be used instead. xbl-specific note beware that if you create an xbl binding for a textbox, you need to use the appropriate extends attribute and changing type attribute on the tree won't have effect. e.g. if you have <binding id="input" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete" >, th...
Panels - Archive of obsolete content
note that the panel is not placed in a separate file and is instead placed inside another window. ...
...note that the panel is not placed in a separate file and is instead placed inside another window. ...
...attribute. the popup attribute should be set to the id of a panel within the same document. when the left mouse button 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. 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:"/> <te...
Adding HTML Elements - Archive of obsolete content
le. you can actually use any html element in a xul file, meaning that java applets and tables can be placed in a window. you should avoid using html elements in xul files if you can. (there are some reasons, and the main one concerns the control of the layout described later). however, this section will describe how to use them anyway. remember that xml is case-sensitive though, so you'll have to
enter the tags and attributes in lowercase. xhtml namespace in order to use html elements in a xul file, you must declare that you are doing so using the xhtml namespace. this way, mozilla can distinguish the html tags from the xul ones. the attribute below should be added to the window tag of the xul file, or to the outermost html element. xmlns:html="http://www.w3.org/1999/xhtml" this is a declarati...
... use html elements in a xul file, you must declare that you are doing so using the xhtml namespace. this way, mozilla can distinguish the html tags from the xul ones. the attribute below should be added to the window tag of the xul file, or to the outermost html element. xmlns:html="http://www.w3.org/1999/xhtml" this is a declaration of html much like the one we used to declare xul. this must be
entered exactly as shown or it won't work correctly. note that mozilla does not actually download this url, but it does recognize it as being html. here is an example as it might be added to the find file window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns:html="http://www.
... id="findfile-window" title="find files" orient="horizontal" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> then, you can use html tags as you would normally, keeping in mind the following: you must add a html: prefix to the beginning of each tag, assuming you declared the html namespace as above. the tags must be
entered in lowercase. "quotes" must be placed around all attribute values. xml requires a trailing slash at the end of tags that have no content. this may be clearer from the examples below. using html elements you can use any html tag although some such as head and body are not really useful. some examples of using html elements are shown below. <html:img src="banner.jpg"/> <html:input type="check...
Creating a Wizard - Archive of obsolete content
mple above, it has been placed on the second page, but not the first page. handling page changes you will generally want to do something once the finish button is pressed. you can set an attribute onwizardfinish on the wizard element to accomplish this. set it to a script which performs whatever task you want and then returns true. this script might be used to save the information that the user
entered during the wizard. for example: <wizard id="example-window" title="select a dog wizard" onwizardfinish="return savedoginfo();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> when the user clicks the finish button, the function savedoginfo() will be called, which would be defined in a script file to save the information that was
entered. if the function returns tru...
...ncel buttons are pressed respectively. these functions are called regardless of which page is currently displayed. to have different code called depending on which page you are on, use the onpagerewound or onpageadvanced attributes on a wizardpage element. they work in a similar way to the other functions except that you can use different code for each page. this allows you to validate the input
entered on each page before the user continues. a third option is to use the onpagehide and onpageshow attributes on the wizardpage element. these methods will be called when the page is hidden or shown, regardless of which button was pressed (except when cancel is pressed -- you need to use onwizardcancel to check for this.) these three methods should provide enough flexibility to handle navigation ...
... one returns false, the navigation will be cancelled. attribute place on tag when it is called pagehide wizardpage called on the page that the user is leaving. pageadvanced wizardpage called on the page the user is leaving. wizardnext wizard called on the wizard. pageshow wizardpage called on the page that the user is
entering. a similar process occurs for the back button. when trying to use a function in the event above, such as pageadvanced, you should use return funcname() instead of just calling funcname() or it will not work as expected e.g. <wizardpage pageadvanced='return funcname()'></wizardpage> in the next section, we'll see some additional features of wizards. « previousnext » ...
Input Controls - Archive of obsolete content
previousnext » xul has elements that are similar to the html form controls. looking for a guide to using input controls and forms on the web? see forms in html. text entry fields html has an input element which can be used for text entry controls. xul has a similar element, textbox, used for text entry fields. without any attributes, the textbox element creates a box in which the user can
enter text. textboxes accept many of the same attributes as html input controls. the following are some of them: id a unique identifier so that you can identify the textbox. class the style class of the textbox. value if you want the textbox to have default text, supply it with the value attribute. disabled set to true to have text entry disabled. textbox.type you can set this attribut...
...that hides what it types. this is usually used for password entry fields. maxlength the maximum number of characters that the textbox allows. note that while in html, several different kinds of fields can be created with the input element, in xul there are separate elements for each type. the following example shows some textboxes: example 1 : source view <label control="some-text" value="
enter some text"/> <textbox id="some-text"/> <label control="some-password" value="
enter a password"/> <textbox id="some-password" type="password" maxlength="8"/> multiline textbox the textbox examples above will create text inputs that can only be used for
entering one line of text. html also has a textarea element for creating a larger text entry area. in xul, you can use the textbox element for t...
... enable the check box or radio button. accesskey the shortcut key that can be used to select the element. the letter specified is usually drawn underlined in the label. to view xul, you need e.g. seamonkey or waterfox and remote-xul-manager from https://github.com/jvillalobos/remote-xul-manager find files example so far : source view in the next section, we will look at some elements for
entering and selecting numbers. « previousnext » looking for a guide to using input controls and forms on the web? see forms in html. ...
XUL element attributes - Archive of obsolete content
children will be aligned vertically. for boxes that have vertical orientation, it specifies how its children will be aligned horizontally. start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. c
enter extra space is split equally along each side of the child elements, resulting in the children being placed in the c
enter of the box. end child elements are placed on the right or bottom edge of the box. if the box is larger than the total size of the children, the extra space is placed on the left or top side. baseline thi...
...box. for a horizontal box, the children are stretched to be the height of the box. for a vertical box, the children are stretched to be the width of the box. if the size of the box changes, the children stretch to fit. use the flex attribute to create elements that stretch in the opposite direction. left the elements are aligned on their left edges. c
enter the elements are c
entered 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, event...
...ate the position of children vertically. the align attribute is used to specify the position in the opposite direction. you can also specify the value of pack using the style property -moz-box-pack. start child elements are placed starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. c
enter extra space is split equally along each side of the child elements, resulting the children being placed in the c
enter of the box. end child elements are placed on the right or bottom edge of the box. if the box is larger than the total size of the children, the extra space is placed on the left or top side. persist type: space-separated list of attribute names a space-separat...
datepicker - Archive of obsolete content
grid - a datepicker with a calendar grid for selecting a date. popup - a normal datepicker with three fields, but with an additional dropdown button to display a popup grid. there are several ways to set the selected day. in xul, the value attribute may be set to a value of the form yyyy-mm-dd to initialize the datepicker to a certain date. ...
...ent. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: one of the values below you can set the type attribute to one of the values below to specify the type of datepicker to use normal a datepicker with three fields for
entering the year, month and date. this is the default value so do not specify the type attribute if this kind is desired. grid a datepicker that displays a calendar grid where one month is shown at a time. popup a datepicker with three entry fields but an additional dropdown button, which, when pressed, will display a popup calendar grid. ...
... properties date type: integer the currently selected date of the month from 1 to 31. set this property to change the selected date. dateleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the date when it is less than 10. datevalue type: date the date that is currently
entered or selected in the datepicker as a date object. disabled type: boolean gets and sets the value of the disabled attribute. month type: integer the currently selected month from 0 to 11. set this property to change the selected month. monthleadingzero type: boolean a read only value indicating whether a leading zero should b...
menulist - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
...e max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disableautoselect type: boolean if this attribute is true or omitted, the selected item on the menu will update to match what the user
entered in the textbox. if the text does not match any of the items in the list, the menu selection is cleared. if this attribute is false, the selection is never updated to match the text box. this attribute applies only to editable menulists. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usuall...
...ute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. editable type: boolean indicates that the value of the menulist can be modified by typing directly into 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 t...
timepicker - Archive of obsolete content
arrow buttons next to the fields allow the values to be adjusted with the mouse. a fourth textbox appears for 12 hour clocks which allows selection of am or pm. to specify the initial, use the value attribute set to a value of either the form hh:mm:ss or hh:mm. the value may be retrieved and changed using the value property or the datevalue property. ...
...tab sequence. value type: string the initial value of the timepicker in either the form hh:mm:ss or hh:mm. properties amindicator type: string the string value displayed for hours between midnight and noon, defaulting to am. this value is determined from the user's locale. datevalue type: date the date that is currently
entered or selected in the datepicker as a date object. disabled type: boolean gets and sets the value of the disabled attribute. hideseconds type: boolean indicates whether the seconds field is visible or not. hour type: integer the currently selected hour from 0 to 23. set this property to change the selected hour. hou...
...ted second from 0 to 59. set this property to change the selected second. secondleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the second when it is less than 10. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string the currently
entered time of the form hh:mm:ss. set this property to change the time. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelemen...
Scratchpad - Archive of obsolete content
of javascript code, then execute it in various ways depending on how you want to use the output. the featured video tutorial shows a case of using scratchpad with a page run by a local web server. it is also possible to use scratchpad over pages opened from a local file system, if permission policies allow that. but even with possible limitations present, the html code can be either manually
entered or copied from the source and pasted into the "about:blank" page (a new empty tab) with the use page inspector's edit as html context menu command. usage opening scratchpad in its own window there are several different ways to open scratchpad in its own window: press shift + f4, or go to the web developer menu (which is a submenu in the tools menu on macos and linux), then select scratch...
...stions and popups containing information on the current symbol. to list autocomplete suggestions, press ctrl + space. for example, try typing d, then pressing ctrl + space. you'll see the autocomplete box, as shown below: the icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information. ↑ and ↓ cycle through the suggestions and
enter or tab select the highlighted choice. inline documentation to show the inline documentation popup, press ctrl + shift + space when the cursor is on an identifier. for example, if you type document.addeventlistener, then press ctrl + shift + space, you'll see a popup that shows a summary of the function's syntax and a short description: the "[docs]" link takes you to the mdn documentation for t...
...run when you choose the run option, the selected code is executed. this is what you'd use to execute a function or other code that manipulates the content of your page without needing to see the result. inspect the inspect option executes the code just like the run option; however, after the code returns, an object inspector is opened to let you examine the returned value. for example, if you
enter the code: window then choose inspect, the object inspector is shown that looks something like this: display the display option executes the selected code, then inserts the result directly into your scratchpad editor window as a comment, so you can use it as a repl. reload and run the reload and run option is only available in the execute menu. it first reloads the page, then executes the...
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
also since you know which engine you're targeting, you're free to confidently use advanced built in controls such as xml processing via e4x, xpath, and xslt. let's take a tour through some of the top features of jaxer through code examples. jaxer – server-side ajax via the firefox browser engine on the server although server-side ...
...starts by hooking in the ext js library which is used to produce the ui elements of the form. next a script named validatecomments.js is hooked in with the runat attribute set to both. the function defined within this file checks the form to make sure it is complete, returning a boolean. the both context it operates within is a very powerful concept as we are able to use this code to check values
entered in the form on both the client and server side. no custom validation libraries for each environment makes for rapid development with less risk for error. towards the bottom of the code are two div tags with ids form-comments and out-logger. the form-comments div is used to render the form and the out-logger will be used as a log display as each comment is added. the co...
...f the form passes validation client-side, submit results to the processor if( validatecomments( name, email, message ) ) { formprocessor( name, email, message ); // update the logger with the most recent entry document.getelementbyid( "out-logger" ).innerhtml += "name: " + name + "<br/>email: " + email + "<br/>message: " + message + "<br/><br/>"; } else { ext.msg.alert( "error", "please
enter the required fields" ); } } </script> <!-- processes the form contents --> <script runat="server"> function formprocessor( name, email, message ) { // perform the same validation of the data server-side if( !validatecomments( name, email, message ) ) { throw "incomplete data was submitted."; } // assemble the string var s = "name: " + name + "<br/>" + "email: " + email + "<br/>" + "mes...
Input method editor - MDN Web Docs Glossary: Definitions of Web-related terms
an input method editor (ime) is a program that provides a specialized user interface for text input. ...
... an input method editor (ime) is a program that provides a specialized user interface for text input. ...
... an input method editor (ime) is a program that provides a specialized user interface for text input. ...
Backgrounds and borders - Learn web development
styling backgrounds in css the css background property is a shorthand for a number of background longhand properties that we will meet in this lesson. if you discover a complex background property in a stylesheet, it might seem a little hard to understand as so many values can be passed in at once. .box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) c
enter c
enter / 400px 200px no-repeat, url(big-star.png) c
enter no-repeat, rebeccapurple; } we'll return to how the shorthand works later in the tutorial, but first let's have a look at the different things you can do with backgrounds in css, by looking at the individual background properties. background colors the background-color property defines the background color on any element in css. the ...
...ertical (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. ...
...ize and position, then an image background with no-repeat and a position, then a color. there are a few rules that need to be followed when writing background image shorthand values, for example: a background-color may only be specified after the final comma. the value of background-size may only be included immediately after background-position, separated with the '/' character, like this: c
enter/80%. take a look at the mdn page for background to see all of the considerations. accessibility considerations with backgrounds when placing text on top of a background image or color, you should take care that you have enough contrast for the text to be legible for your visitors. if specifying an image, and text will be placed on top of that image, you should also specify a background-colo...
Practical positioning examples - Learn web development
ans-serif; } * { box-sizing: border-box; } body { margin: 0; } this is just some general setup to set a sans-serif font on our page, use the border-box box-sizing model, and get rid of the default <body> margin. next, add the following just below your previous css: .info-box { width: 450px; height: 400px; margin: 0 auto; } this sets a specific width and height on the content, and c
enters it on the screen using the old margin: 0 auto trick. previously in the course we advised against setting a fixed height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs. it also looks a bit jarring to have different tabs at different heights. styling our tabs now we want to style tabs to look like tabs — basically, these are a ...
...-block so they will sit in a line but still be stylable, and they are styled appropriately for tab buttons, using a variety of other properties. add the following css: .info-box li { float: left; list-style-type: none; width: 150px; } .info-box li a { display: inline-block; text-decoration: none; width: 100%; line-height: 3; background-color: red; color: black; text-align: c
enter; } finally for this section we'll set some styles on the link states. first, we'll set the :focus and :hover states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. secondly, we'll set a rule that puts the same styling on one of the tabs when a class of active is present on it. we will set this using javascript when a tab is clicked on. plac...
...is is fake content. your main web page contents would probably go here.</p> </section> note: you can feel free to change the fake content for some real content if you like. changes to the existing css next we need to make some small changes to the existing css, to get the info-box placed and positioned. change your .info-box rule to get rid of margin: 0 auto; (we no longer want the info-box c
entered), add position: fixed;, and stick it to the top of the browser viewport. it should now look like this: .info-box { width: 450px; height: 400px; position: fixed; top: 0; } styling the main content the only thing left for this example is to provide the main content with some styling. add the following rule underneath the rest of your css: .fake-content { background-color: #a60000; ...
create fancy boxes - Learn web development
margin by having border-radius larger than the actual size of the box. making circles <div class="fancy">hi! i want to be fancy.</div> this is something that is both very simple and very fun. the border-radius property is made to create a rounded corner applied to boxes, but what happens if the radius size is equal or larger than the actual width of the box? .fancy { /* within a circle, c
entered text looks prettier. */ text-align : c
enter; /* let's avoid our text touching the border. as our text will still flow in a square, it looks nicer that way, giving the feeling that it's a "real" circle. */ padding : 1em; /* the border will make the circle visible. you could also use a background, as backgrounds are clipped by border radius */ border : 0.5em s...
...mazing styles. most of the time, that leads to polluting the dom by adding extra html element for the unique purpose of style. even if it is necessary, it's somewhat considered bad practice. one solution to avoid such pitfalls is to use 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: c
enter; /* 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...
...fancy">hi! i want to be fancy.</div> let's create some partial drop shadow effect. the box-shadow property allow us to create inner light and a flat drop shadow effect, but with some little extra work it becomes possible to create a more natural geometry by using pseudo-element and the transform property. ...
Styling links - Learn web development
r example moved to by a keyboard user using the tab key or similar, or programmatically focused using htmlelement.focus()) — this is styled using the :focus pseudo class. active: a link when it is being activated (e.g. clicked on), styled using the :active pseudo class. default styles the following example illustrates what a link will behave like by default (the css is simply enlarging and c
entering the text to make it stand out more.) <p><a href="#">a simple link</a></p> p { font-size: 2rem; text-align: c
enter; } note: all the links in the examples in this page are fake links — a # (hash, or pound sign) is put in place of the real url. this is because if the real links were included, clicking on them would break the examples (you'd end up with an error, or a page loaded in t...
...</li><li><a href="#">pizza</a></li><li><a href="#">music</a></li><li><a href="#">wombats</a></li><li><a href="#">finland</a></li> </ul> and now our css: body,html { margin: 0; font-family: sans-serif; } ul { padding: 0; width: 100%; } li { display: inline; } a { outline: none; text-decoration: none; display: inline-block; width: 19.5%; margin-right: 0.625%; text-align: c
enter; line-height: 3; color: black; } li:last-child a { margin-right: 0; } a:link, a:visited, a:focus { background: yellow; } a:hover { background: orange; } a:active { background: red; color: white; } this gives us the following result: let's explain what's going on here, focusing on the most interesting parts: our second rule removes the default padding from the <ul> element...
...margin-right to 0.625%. you'll notice that all this width adds up to 100.625%, which would make the last button overflow the <ul> and fall down to the next line. however, we take it back down to 100% using the next rule, which selects only the last <a> in the list, and removes the margin from it. done! the last three declarations are pretty simple and are mainly just for cosmetic purposes. we c
enter the text inside each link, set the line-height to 3 to give the buttons some height (which also has the advantage of c
entering the text vertically), and set the text color to black. note: you may have noticed that the list items in the html are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, jus...
How do you set up a local testing server? - Learn web development
"3.xxx". at the bottom of the page, choose the windows x86 executable installer and download it. when it has downloaded, run it. on the first installer page, make sure you check the "add python 3.xxx to path" checkbox. click install, then click close when the installation has finished. open your command prompt (windows)/ terminal (macos/ linux). ...
... has finished. open your command prompt (windows)/ terminal (macos/ linux). to check python is installed,
enter the following command: python -v # or you might have the py command available, # in which case try py -v this should return a version number. if this is ok, navigate to the directory that your example is inside, using the cd command. # include the directory name to
enter it, for example cd desktop # use two dots to jump up one directory level if you need to cd .. ...
...stalled,
enter the following command: python -v # or you might have the py command available, # in which case try py -v this should return a version number. if this is ok, navigate to the directory that your example is inside, using the cd command. # include the directory name to
enter it, for example cd desktop # use two dots to jump up one directory level if you need to cd ..
enter the command to start up the server in that directory: # if python version returned above is 3.x python3 -m http.server # on windows try "python" instead of "python3", or "py -3" # if python version returned above is 2.x python -m simplehttpserver by default, this will run the contents of the directory on a local web server, on port 8000. you can go to this server by going to the url loca...
Basic native form controls - Learn web development
all browsers, which is not the case for all form controls. we cover newer form controls added in html5 in the next two articles. if you want a more advanced reference, you should consult our html forms element reference, and in particular our extensive <input> types reference. text input fields text <input> fields are the most basic form widgets. they are a very convenient way to let the user
enter any kind of data, and we've already seen a few simple examples. note: html form text fields are simple plain text input controls. this means that you cannot use them to perform rich editing (bold, italic, etc.). all rich text editors you'll encounter are custom widgets created with html, css, and javascript. all basic text controls share some common behaviors: they can be marked as readonl...
...with the rest of the form data) or disabled (the input value can't be modified and is never sent with the rest of the form data). they can have a placeholder; this is text that appears inside the text input box that should be used to briefly describe the purpose of the box. they can be constrained in size (the physical size of the box) and maxlength (the maximum number of characters that can be
entered into the box). they can benefit from spell checking (using the spellcheck attribute), if the browser supports it. note: the <input> element is unique amongst html elements because it can take many different forms depending on its type attribute value. it is used for creating most types of form widgets including single line text fields, time and date controls, controls without text input lik...
...before sending the data to the server. the following screenshot shows default, focused and disabled text input types in firefox 71 and safari on macos and in chrome 79 and edge 18 on windows 10. note: html5 enhanced the basic original single line text field by adding special values for the type attribute that enforce specific validation constraints and other features, for example specific to
entering urls or numbers. we'll cover those in the next article, the html5 input types. password field one of the original input types was the password text field type: <input type="password" id="pwd" name="pwd"> the password value doesn't add any special constraints to the
entered text, but it does obscure the value
entered into the field (e.g. with dots or asterisks) so it can't be easily read b...
Example 1 - Learn web development
e { 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 : c
enter; 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; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%;...
...e { 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 : c
enter; 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; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%;...
... 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; box-sizing : border-box; text-align : c
enter; 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; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : ...
How to structure a web form - Learn web development
n of code into the form, below our previous entry. here you'll see that we are wrapping the contact information fields inside a distinct <section> element. moreover, we have a set of two radio buttons, each of which we are putting inside its own list (<li>) element. we also have two standard text <input>s and their associated <label> elements, each contained inside a <p>, and a password input for
entering a password. add this code to your form: <section> <h2>contact information</h2> <fieldset> <legend>title</legend> <ul> <li> <label for="title_1"> <input type="radio" id="title_1" name="title" value="k" > king </label> </li> <li> <label for="title_2"> <input type="rad...
...r title="required">*</abbr></strong> </label> <input type="password" id="pwd" name="password"> </p> </section> the second <section> of our form is the payment information. we have three distinct controls along with their labels, each contained inside a <p>. the first is a drop-down menu (<select>) for selecting credit card type. the second is an <input> element of type tel, for
entering a credit card number; while we could have used the number type, we don't want the number's spinner ui. the last one is an <input> element of type date, for
entering the expiration date of the card; this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers. these newer input types are reintroduced in the html5 input t...
...t card number; while we could have used the number type, we don't want the number's spinner ui. the last one is an <input> element of type date, for
entering the expiration date of the card; this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers. these newer input types are reintroduced in the html5 input types. ...
HTML text fundamentals - Learn web development
re? to answer this question, let's take a look at text-start.html—the starting point of our running example for this article (a nice hummus recipe). you should save a copy of this file on your local machine, as you'll need it for the exercises later on. this document's body currently contains multiple pieces of content—they aren't marked up in any way, but they are separated with linebreaks (
enter/return pressed to go onto the next line). however, when you open the document in your browser, you'll see that the text appears as a big chunk! this is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. furthermore: users looking at a web page tend to scan quickly to find relevant content, often just reading ...
...they were all wearing green jumpsuits and silly hats, and seemed to be having a whale of a time. if anyone has any information about this incident, please contact the police now.</p></textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: ...
...they were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. if anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatec...
Function return values - Learn web development
own return value function let's have a go at writing our own functions featuring return values. first of all, make a local copy of the function-library.html file from github. this is a simple html page containing a text <input> field and a paragraph. there's also a <script> element, in which we have stored a reference to both html elements in two variables. this little page will allow you to
enter a number into the text box, and display different numbers related to it in the paragraph below. let's add some useful functions to this <script> element. below the two existing lines of javascript, add the following function definitions: function squared(num) { return num * num; } function cubed(num) { return num * num * num; } function factorial(num) { if (num < 0) return undefined; ...
...undefined; if (num == 0) return 1; let x = num - 1; while (x > 1) { num *= x; x--; } return num; } the squared() and cubed() functions are fairly obvious — they return the square or cube of the number that was given as a parameter. the factorial() function returns the factorial of the given number. next, we're going to include a way to print out information about the number
entered into the text input.
enter the following event handler below the existing functions: input.onchange = function() { const num = input.value; if (isnan(num)) { para.textcontent = 'you need to
enter a number!'; } else { para.textcontent = num + ' squared is ' + squared(num) + '. ' + num + ' cubed is ' + cubed(num) + '. ' + num + ' facto...
...ntent = 'you need to
enter a number!'; } else { para.textcontent = num + ' squared is ' + squared(num) + '. ' + num + ' cubed is ' + cubed(num) + '. ' + num + ' factorial is ' + factorial(num) + '.'; } } here we are creating an onchange event handler. it runs whenever the change event fires on the text input — that is, when a new value is
entered into the text input, and submitted (e.g.,
enter a value, then unfocus the input by pressing tab or return). when this anonymous function runs, the value in the input is stored in the num constant. next, we do a conditional test. if the
entered value is not a number, an error message is printed to the paragraph. the test looks at whether the expression isnan(num) returns true. the isnan() fun...
Third-party APIs - Learn web development
script library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> you can then start using the objects available in that library. for example: let map = l.mapquest.map('map', { c
enter: [53.480759, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which takes as its parameters the id of a <div> element you want to display the map in ('map'), and an options object containing the details of the particular map we want to display. in this case w...
...: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which takes as its parameters the id of a <div> element you want to display the map in ('map'), and an options object containing the details of the particular map we want to display. in this case we specify the coordinates of the c
enter of the map, a map layer of type map to show (created using the mapquest.tilelayer() method), and the default zoom level. this is all the information the mapquest api needs to plot a simple map. the server you are connecting to handles all the complicated stuff, like displaying the correct map tiles for the area being shown, etc. note: some apis handle access to their functionality slightly dif...
... javascript library to be applied to the page. the restful api has functions available to handle making the http requests and returning the results. we are not going to say too much more about this example in the article — the source code has detailed comments inserted inside it to explain how it works. to get it running, you'll need to: get an api key from google cloud. find the string
enter-api-key-here in the source code, and replace it with your api key. run the example through a web server. it won't work if you just run it directly in the browser (i.e. via a file:// url). summary this article has given you a useful introduction to using third-party apis to add functionality to your websites. previous overview: client-side web apis next in this module introduction...
Silly story generator - Learn web development
this page. project brief you have been provided with some raw html/css and a few text strings and javascript functions; you need to write the necessary javascript to turn this into a working program, which does the following: generates a silly story when the "generate random story" button is pressed. replaces the default name "bob" in the story with a custom name, only if a custom name is
entered into the "
enter custom name" text field before the generate button is pressed. converts the default us weight and temperature quantities and units in the story into uk equivalents if the uk radio button is checked before the generate button is pressed. will generate another random silly story if you press the button again (and again...) the following screenshot shows an example of what the ...
......
...rs are each replaced with a random silly string. as a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice. inside the first if block, add another string replacement method call to replace the name 'bob' found in the newstory string with the name variable. in this block we are saying "if a value has been
entered into the customname text input, replace bob in the story with that custom name." inside the second if block, we are checking to see if the uk radio button has been selected. if so, we want to convert the weight and temperature values in the story from pounds and fahrenheit into stones and centigrade. what you need to do is as follows: look up the formulae for converting pounds to stone, ...
Useful string methods - Learn web development
esult has a large number of properties and methods available to it. you can see this if you go to the string object page and look down the list on the side of the page! now, before your brain starts melting, don't worry! you really don't need to know about most of these early on in your learning journey. but there are a few that you'll potentially use quite often that we'll look at here. let's
enter some examples into the browser developer console. finding the length of a string this is easy — you simply use the length property. try
entering the following lines: let browsertype = 'mozilla'; browsertype.length; this should return the number 7, because "mozilla" is 7 characters long. this is useful for many reasons; for example, you might want to find the lengths of a series of names so ...
... retrieving a specific string character on a related note, you can return any character inside a string by using square bracket notation — this means you include square brackets ([]) on the end of your variable name. ...
... slice() is optional: if you don't include it, the slice ends at the end of the original string. there are other options too; study the slice() page to see what else you can find out. changing case the string methods tolowercase() and touppercase() take a string and convert all the characters to lower- or uppercase, respectively. this can be useful for example if you want to normalize all user-
entered data before storing it in a database. let's try
entering the following lines to see what happens: let raddata = 'my name is mud'; raddata.tolowercase(); raddata.touppercase(); updating parts of a string you can replace one substring inside a string with another substring using the replace() method. this works very simply at a basic level, although there are some advanced things you can do w...
Object building practice - Learn web development
s 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 c
enter — 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). that gives us a c...
...he html file in a browser. open the browser's javascript console, and then refresh the page so that the canvas size changes to the smaller 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)...
...ball is going off the right edge). if the x coordinate is smaller than 0 (the ball is going off the left edge). if the y coordinate is greater than the height of the canvas (the ball is going off the bottom edge). if the y coordinate is smaller than 0 (the ball is going off the top edge). in each case, we include the size of the ball in the calculation because the x/y coordinates are in the c
enter of the ball, but we want the edge of the ball to bounce off the perimeter — we don't want the ball to go halfway off the screen before it starts to bounce back. the last two lines add the velx value to the x coordinate, and the vely value to the y coordinate — the ball is in effect moved each time this method is called. this will do for now; let's get on with some animation! animating the ...
Object prototypes - Learn web development
methods/properties available just on the object() constructor itself. note: this seems strange — how can you have a method defined on a constructor, which is itself a function? well, a function is also a type of object. see the function() constructor reference if you don't believe us. you can check out existing prototype properties for yourself — go back to our previous example and try
entering the following into the javascript console: person.prototype the output won't show you very much because we haven't defined anything on our custom constructor's prototype! by default, a constructor's prototype always starts empty. now try the following: object.prototype you'll see a large number of methods defined on object's prototype property, which are then available on objects th...
...reate() earlier on we showed how the object.create() method can be used to create a new object instance. for example, try this in your previous example's javascript console: let person2 = object.create(person1); what create() actually does is to create a new object from a specified prototype object. here, person2 is being created using person1 as a prototype object. you can check this by
entering the following in the console: person2.__proto__ this will return the person1 object. the constructor property every constructor function has a prototype property whose value is an object containing a constructor property. this constructor property points to the original constructor function. as you will see in the next section, properties defined on the person.prototype property (or i...
...ype. go back to our oojs-class-further-exercises.html example and make a local copy of the source code. below the existing javascript, add the following code, which adds a new method to the constructor's prototype property: person.prototype.farewell = function() { alert(this.name.first + ' has left the building. bye for now!'); }; save the code and load the page in the browser, and try
entering the following into the text input: person1.farewell(); you should get an alert message displayed, featuring the person's name as defined inside the constructor. this is really useful, but what is even more useful is that the whole inheritance chain has updated dynamically, automatically making this new method available on all object instances derived from the constructor. think about th...
Starting our Svelte Todo list app - Learn web development
="button" class="btn btn__primary">check all</button> <button type="button" class="btn btn__primary">remove completed</button> </div> </div> check the rendered out again, and you'll see something like this: it's current not very nicely styled, and also functionally useless. but let's have a look at the markup and see how it relates to our desired features: a label and a text box for
entering new tasks. three buttons to filter by task status. a label showing the total number of tasks and the completed tasks. an unordered list, which holds a list item for each task. when the task is being edited, the list item has an input and two button to cancel or save modifications. if the task is not being edited, there's a checkbox to set the completed status, and two buttons to edit or d...
... #bd2130; } .btn__filter { border-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: c
enter; } .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-...
...em 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: c
enter; margin: 0; margin-bottom: 1rem; } .label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: c
enter; } .input__lg { padding: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:...
Componentizing our Svelte app - Learn web development
g. if it ends up growing, it should be split into smaller subcomponents. both approaches should complement each other, and help you decide how to better organize your components. eventually, we will split up our app into the following components: alert.svelte: a general notification box for communicating actions that have occurred. newtodo.svelte: the text input and button that allow you to
enter a new todo item. filterbutton.svelte: the all, active, and completed buttons that allow you to apply filters to the displayed todo items. todosstatus.svelte: the "x out of y items completed" heading. todo.svelte: an individual todo item. each visible todo item will be displayed in a separate copy of this component. moreactions.svelte: the check all and remove completed buttons at the bottom o...
...ack up to the parent, so our "x out of y items completed" status heading will now update appropriately when todos are deleted. now we'll take care of the update event, so that our parent component can get notified of any modified todo. updating todos we still have to implement functionality to allow us to edit existing todos. we'll have to include an editing mode in the todo component. when
entering editing mode we'll show an <input> field to allow us to edit the current todo name, with two buttons to confirm or cancel our changes. handling the events we'll need one variable to track whether we are in editing mode and another to store the name of the task being updated. add the following variable definitions at the bottom of the <script> section of the todo component: let editin...
... to handle the the editing mode we are using the editing variable, which is a boolean. when it's true, it should display the <input> field for editing th...
Working with Svelte stores - Learn web development
at the beginning we im...
...ve to make in order to use our custom store. app.svelte is completely transparent in terms of what kind of store we are using. go ahead and try your app again. create a few todos and then close the browser. you may even stop the svelte server and restart it. upon revisiting the url, your todos will still be there. you can also inspect it in the devtools console. in the web console,
enter the command localstorage.getitem('mdn-svelte-todo'). make some changes to your app, like pressing the uncheck all button, and check the web storage content once more. you will get something like this: svelte stores provide a very simple and lightweight, but extremely powerful, way to handle complex app state from a global data store in a reactive way. and because svelte compiles our code,...
...to abstract away the inner workings of the store itself. bonus track: transitions let's change the subject now, and do something fun and different — let's add an animation to our alerts. svelte provides a whole module to define transitions and animations so we can make our user interfaces more appealing. a transition is applied with the transition:fn directive, and is triggered by an element
entering or leaving the dom as a result of a state change. the svelte/transition module exports seven functions: fade, blur, fly, slide, scale, draw, and crossfade. let's give our alert component a fly transition. we'll open the alert.svelte file and import the fly function from the svelte/transition module. put the following import statement below the existing ones: import { fly } from 'svel...
Getting started with Vue - Learn web development
testing, and more. we’ll look at using this below. initializing a new project to explore various features of vue, we will be building up a sample todo list app. we'll begin by using the vue cli to create a new app framework to build our app into. follow the steps below: in terminal, cd to where you'd like to create your sample app, then run vue create moz-todo-vue. use the arrow keys and
enter to select the "manually select features" option. the first menu you’ll be presented with allows you to choose which features you want to include in your project. make sure that "babel" and "linter / formatter" are selected. if they are not, use the arrow keys and the space bar to toggle them on. once they are selected, press
enter to proceed. next you’ll select a config for the linter / for...
...u you’ll be presented with allows you to choose which features you want to include in your project. make sure that "babel" and "linter / formatter" are selected. if they are not, use the arrow keys and the space bar to toggle them on. once they are selected, press
enter to proceed. next you’ll select a config for the linter / formatter. navigate to "eslint with error prevention only" and hit
enter again. this will help us catch common errors, but not be overly opinionated. next you are asked to configure what kind of automated linting we want. select "lint on save". this will check for errors when we save a file inside the project. hit
enter to continue. now, you will select how we want your config files to be managed. "in dedicated config files" will put your config settings for things ...
... finally, you are asked if you want to save this as a preset for future options. this is entirely up to you. if you like these settings over the existing presets and want to use them again, type y , otherwise type n. the cli will now begin scaffolding out your project, and installing all of your dependencies. ...
Command line crash course - Learn web development
previous overview: understanding client-side tools next in your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). this article provides an introduction to the terminal, the essential commands you'll need to
enter into it, how to chain commands together, and how to add your own command line interface (cli) tools. prerequisites: familiarity with the core html, css, and javascript languages. objective: to understand what the terminal/command line is, what basic commands you should learn, and how to install new command line tools. welcome to the terminal the terminal is a text interface for executing text-based programs. if you're running any tooling f...
... better parity with unix tools. side note: what's the difference between a command line and a terminal? generally you'll find these two terms used interchangeably. technically, a terminal is software that starts and connects to a shell. a shell is your session and session environment (where things like the prompt and shortcuts might be customised). the command line is the literal line where you
enter commands and the cursor blinks. do you have to use the terminal? although there's a great wealth of tools available from the command line, if you're using tools like visual studio code there's also a mass of extensions that can be used as a proxy to using terminal commands without needing to use the terminal directly. however, you won’t find a code editor extension for everything you want to ...
...an input, counting the number of lines it contains, and prints that count to stdout instead. a slightly more complex example let’s go through something a bit more complicated. we will first try to fetch the contents of mdn's "fetch" page using the curl command (which can be used to request content from urls), from /docs/web/api/fetch. however, this url is the old location of the page. if you
enter it in a new browser tab, you’ll (eventually) get redirected to /docs/web/api/windoworworkerglobalscope/fetch. therefore, if you use curl to request /docs/web/api/fetch, you won’t get an output. try it now: curl /docs/web/api/fetch we need to explicitly tell curl to follow redirects using the -l flag. let's also look at the headers that developer.mozilla.org returns using curl's -i flag, a...
Deploying our app - Learn web development
me.git so if your remote url was https://github.com/remy/super-website.git, as in the screenshot above, your command would be git remote add github https://github.com/remy/super-website.git change the url to your own repository, and run it now. now we're ready to push our code to github; run the following command now: git push github master at this point you'll be prompted to
enter a username and password before git will allow the push to be sent. this is because we used the https option rather than the ssh option, as seen in the screenshot earlier. for this you need your github username and then — if you do not have two-factor authentication (2fa) turned on — your github password. we would always encourage you to use 2fa if possible, but bear in mind that if you do, yo...
... — if you do not have two-factor authentication (2fa) turned on — your github password. we would always encourage you to use 2fa if possible, but bear in mind that if you do, you'll also need to use a "personal access token". github help pages has an excellent and simple walkthrough covering how to get one. note: if you are interested in using the ssh option, thereby avoiding the need to
enter your username and password every time you push to github, this tutorial walks you through how. this final command instructs git to push the code (aka publish) to the "remote" location that we called github (that's the repository hosted on github.com — we could have called it anything we like) using the branch master. we've not encountered branches at all, but the (terribly named) "master" bra...
...r orgs). choose the one you pushed your project to. netlify will prompt you with a list of the github repositories it can find. select your project repository and proceed to the next step. since we've connected netlify to our github account and given it access to deploy the project repository, netlify will ask how to prepare the project for deployment and what to deploy. you should
enter the command npm run build for the build command, and specify the dist directory for the publish directory — this contains the code that we want to make public. to finish up, click deploy site. after a short wait for the deployment to occur, you should get a url that you can go to, to see your published site — try it out! and even better, whenever we make a change and pus...
Software accessibility: Where are we today?
non-graphical information can be conveyed - via text-to-speech or a refreshable braille display. whatever the user does, the software needs to respond with small, bite sized pieces of information that are as short and to the point as possible. ideally, intelligent decisions are made, so the user does not have to wade through as much non-relevant data. alternative ways to command the computer and
enter data another problem is how people with disabilities get information into the computer. if you're physically disabled, you may not be able to type on a regular keyboard or use a mouse. here are some of the alternative ways physically disabled people
enter information: sticky keys make
entering key combinations easy. for example to make a capital letter, first press the shift key, r...
...tions easy. for example to make a capital letter, first press the shift key, release it, then press the letter to be capitalized. the sticky key technique is utilized by people who have only one usable hand, or who have no use of their hands and type using a stick in their mouth. single switch technologies enable persons with severe physical disabilities. some, like stephen hawking,
enter information by choosing among lists of options. they might press a switch down to begin moving a highlight bar through the list, and release the switch when the desired option is highlighted. special keyboards exist to make data entry easier. however, any special features are generally handled in the keyboard itself, so that no special programming is required. speech recognit...
...tivity applications are not open source, this forced disabled people to rely on the companies which produce this software to make it accessible. these companies were often reluctant for various reasons including the large amount of time required to do so. on a positive note, recent federal purchasing rules such as section 508 have caused many companies to pay attention and implement msaa support.
enter open source software microsoft was on the right track with microsoft active accessibility, but because the source code to most popular desktop applications which are used in large corporations is not publicly available, they were never made fully accessible. in open source, however, making the necessary modifications to make them accessible is very possible. open source software is an ideal way t...
Eclipse CDT
alling eclipse regarding llvm4eclipsecdt, do not install or select this toolchain for mozilla development. this plugin is intended mainly for managed projects but we use an unmanaged project for mozilla (since it has its own build system). using this plugin will result in parts of the ui described below being hidden or disabled. download "eclipse ide for c/c++ developers" (not eclipse ide for
enterprise java developers) from the eclipse download page, install it, and add the directory containing the eclipse binary to your path (/applications/eclipse.app/contents/eclipse/ on mac). (while package managers like snap sometimes provide an eclipse package, they do not include the c++ developer tools. since it's a pain to install them and keep them up to date we do not recommend getting eclipse t...
...e window. the benefit of building from inside eclipse is that build errors will appear in the problems tab at the bottom of the window, and from there you can double click on the build error and it will take you straight to the source file and line where the problem occurred. for this to work reliably though, you still need to build using slow -j1 -w builds, so that make outputs non-interleaved "
entering"/"leaving" lines. it also used to be necessary to add the following two lines to your mozconfig to make the compiler output errors all on a single line, but that may not be needed anymore: export cflags="-fmessage-length=0" export cppflags="-fmessage-length=0" debugging to create a debug configuration, open the project properties window, and select "run/debug settings" on the left. click "...
...llowing two lines to your mozconfig to make the compiler output errors all on a single line, but that may not be needed anymore: export cflags="-fmessage-length=0" export cppflags="-fmessage-length=0" debugging to create a debug configuration, open the project properties window, and select "run/debug settings" on the left. click "new", then select "c/c++ application". in the window that opens
enter the path to your firefox binary (something like {your-obj-dir}/dist/nightlydebug.app/contents/macos/firefox) and select "disable auto build". select the arguments tab and
enter any args you want to pass to firefox (such as "--no-remote -p my-testing-profile"). if you're on linux, you may also need to set the "working directory" to {your-obj-dir}/dist/bin, and then select the environment tab and s...
How to implement a custom autocomplete search component
lete mechanism and the autocompletesearch="history" sets the source for the autocomplete. there are more options and features, see xul:textbox_(firefox_autocomplete) for more details. the toolkit mechanism has built-in support for several autocomplete sources, including: history: search the browser's url history (firefox: 1.0+; seamonkey: 1.1+) form-history: search the values that the user has
entered into form fields. (firefox: 1.0+; seamonkey: 2.0+) file: search file names (firefox: 2.0+; thunderbird: 2.0+; seamonkey: 1.1+; gtk builds only). the component uses the autocompletesearchparam attribute or searchparam property to allow the developer to define the default directory otherwise only paths beginning with / or ~/ will be autocompleted. building your custom autocomplete search compon...
...._searchstring; }, /** * @return {number} the result code of this result object, either: * result_ignored (invalid searchstring) * result_failure (failure) * result_nomatch (no matches found) * result_success (matches found) */ get searchresult() { return this._searchresult; }, /** * @return {number} the index of the default item that should be
entered if * none is selected */ get defaultindex() { return this._defaultindex; }, /** * @return {string} description of the cause of a search failure */ get errordescription() { return this._errordescription; }, /** * @return {number} the number of matches */ get matchcount() { return this._results.length; }, /** * @return {string} the value of ...
... return this._searchstring; }, /** * the result code of this result object, either: * result_ignored (invalid searchstring) * result_failure (failure) * result_nomatch (no matches found) * result_success (matches found) */ get searchresult() { return this._searchresult; }, /** * index of the default item that should be
entered if none is selected */ get defaultindex() { return this._defaultindex; }, /** * a string describing the cause of a search failure */ get errordescription() { return this._errordescription; }, /** * the number of matches */ get matchcount() { return this._results.length; }, /** * get the value of the result at the given index */ getvalueat:...
FxAccountsProfileClient.jsm
ile server url. token - firefox accounts oauth bearer token. return value a newly created fxaccountsprofileclient object implementing the methods described in this article. methods fetchprofile() fetches firefox accounts profile information. parameters none return value promise resolves: object - successful response from the '/profile' endpoint. ...
...i
enterror - profile client error. examples using the fxaccountsprofileclient chrome code let client = new fxaccountsprofileclient({ serverurl: "https://profile.accounts.firefox.com/v1", token: "fxa_oauth_bearer_token", }); client.fetchprofile().then(profile => console.log(profile)); error handling the fxaccountsprofileclient.jsm normalizes request and client errors into fxaccountsprofilecli
enterror object. ...
...amples using the fxaccountsprofileclient chrome code let client = new fxaccountsprofileclient({ serverurl: "https://profile.accounts.firefox.com/v1", token: "fxa_oauth_bearer_token", }); client.fetchprofile().then(profile => console.log(profile)); error handling the fxaccountsprofileclient.jsm normalizes request and client errors into fxaccountsprofilecli
enterror object. fxaccountsprofilecli
enterror attributes name string name of the error fxaccountsprofilecli
enterror code number status code of the request errno number error number error string error description message string error message ...
Localizing with Mercurial
ose the appropriate command for your distribution and make sure to run as root. # debian/ubuntu $ apt-get install mercurial # fedora $ yum install mercurial # gentoo $ emerge mercurial # arch linux $ pacman -s mercurial # opensolaris $ pkg install sunwmercurial if you prefer a graphical interface, you can download and install mercurialeclipse here. did it work? open a terminal window and
enter hg --version. if you see a message about the version of mercurial (e.g. mercurial distributed scm (version 1.3.1)), you have installed mercurial successfully! more details for more details on installing hg on linux systems, refer to the instructions on mercurial's download page. mercurial on windows with windows, you have a couple of install options: for a command line interface, download ...
...lf. here are the steps to send your l10n work using mercurial: since your l10n work takes place in your own local repository, you should ensure that there are no changes made to the remote repository before committing your work. to do this, update your locale, as per the section above. after finishing a change or set of changes and checking you have updated to the latest, you should commit by
entering this command: hg commit -m "your message identifying the change (bug 555)" committing won’t send your changes to mozilla’s repository, but prepares them for it. the next step will send your changes to your remote repo via push. to push to mozilla-hosted repositories, you have to have committer access, and you must edit the file (your-local-hg-root aka the directory you pulled your lo...
...take a break and grab a snack, you deserve it ...
Basics
= a0 + a1x + a2 x2 + ... + an-1 xn-1 b0 + b1x + b2 x2 + ... + bn-1 xn-1 . you can also do other weird and risky things which are not portable, bongo warns, such as mixing mathml with other markups lizard + bongo = ∫ a b d x + mathml and javascript html content <p> and you can turn to javascript and the dom for dynamic operations. </p> <div style="text-align:c
enter"> fill the gaps in this matrix with resizable input fields. </div> <math class="inputmath" display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext><input id="input12" value="?" size="1"/></mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input id="input21" value="?" size="1"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </mat...
...trix with resizable input fields. ...
...on("a33","1"); setselection("a41","1"); setselection("a42","1"); setselection("a43","1"); } function incrementinput(inputid, increment) { var inputelement = document.getelementbyid(inputid); var size = parseint(inputelement.size) + increment; if (size <= 0) size = 1 inputelement.size = size; } and there could be more... ...
Profiling with the Firefox Profiler
s" will allow you to search for functions by name. one of the easiest ways to find slowness caused by a page's js is to type its url into the "filter stacks" box. you can then select corresponding call tree entries and watch the timeline for entries in the content process main thread that get darker as you select call tree entries. tip: if things are blank elsewhere in the ui, you may have text
entered into the "filter stacks" box. custom annotations in bug 1334218 an annotation was added to presshell::paint to show the url of the document being painted. these annotations are not too complex to add so if you would like something added, file a bug. 3. sharing the profile click "publish...", some of the data may be excluded, click "publish". if you select a different time range, the url re...
...for further analysis! i haven’t yet had the opportunity to try this, but i hope to next week. i’d be eager to hear people’s experience giving this a go – it might be a great tool in determining what’s going on in firefox when it’s hung! profiling threads the firefox profiler has rudimentary support for profiling multiple threads. to enable it, check the 'multi-thread' box then
enter one or more thread names into the textbox beside it. thread names are the strings passed to the base::thread class at initialization. at present there is no central list of these thread names, but you can find them by grepping the source. examples: 1 2 if the filter you
entered is invalid, no threads will be profiled. you can identify this by hitting analyze (cleopatra will show you an error me...
...glitch, because it allows you to find the precise composite that shows the glitch, and look at the layer tree for that composite. visualizing a layer tree without a profile if you have a layer dump from somewhere (such as from adb logcat on b2g), you can get cleopatra to visualize it (just the structure of course, not textures) without needing a profile. to do so, paste the layer dump into the "
enter your profile data here" text field on the front page of cleopatra: the resulting "profile" will have the layer tree view enabled (but nothing else). this is useful in cases where you want to gain a quick visual understanding of a layer dump without having to take a profile. on b2g, each line of a layer dump in adb logcat output is prefixed with something like i/gecko (30593):. cleopatra do...
Creating a Cookie Log
probably been directed here from a bug report. please follow the instructions below to run firefox with cookie logging enabled. enabling cookie logging windows open a command prompt (this is under programs or programs/accessories in normal installations of windows). change to your firefox directory (usually c:\program files\mozilla firefox) type "set nspr_log_file=c:\temp\cookie-log.txt",
enter type "set nspr_log_modules=cookie:4" and press
enter run firefox by typing "firefox.exe" and pressing
enter. linux start a command shell (these instructions are for bash, if you use something else, you probably know how to modify these instructions already). change to the installation directory for firefox. type "export nspr_log_file=~/cookie-log.txt" and press
enter. type "export nspr_...
... change to the installation directory for firefox, e.g. ...
... change to the installation directory for firefox, e.g. type "cd /applications/firefox.app/contents/macos" and press return. ...
NSS Sample Code Sample_2_Initialization of NSS
sswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "
enter a password which will be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_f...
...try again.\n"); } ...
...try again.\n"); } /* clear out the duplicate password string */ if (p1) { port_memset(p1, 0, port_strlen(p1)); port_free(p1); } fclose(input); fclose(output); ...
NSS Sample Code Utilities_1
* * this function supports password extraction from files with * multiple passwords, one for each token. in the single password * case a line would just have the password whereas in the multi- * password variant they could be of the form * * token_1_name:its_password * token_2_name:its_password * */ char *filepasswd(pk11slotinfo *slot, prb...
...; /* clean up any eol before the start of the next passphrase */ while ( (i<nb) analyze="" char="" current="" getmodulepassword="" if="" int="" now="" passphrase="" phrase="&phrases[startphrase];" phraselen="" pk11slotinfo="" pwdata="=" pwdata-="" retry="" return="" secupwdata="" the="" void="" while="">source != pw_none) { pr_fprintf(pr_stderr, "incorrect password/pin
entered.\n"); return null; } switch (pwdata->source) { case pw_none: sprintf(prompt, "
enter password or pin for \"%s\":", pk11_gettokenname(slot)); return getpassword(stdin, stdout, prompt, checkpassword); case pw_fromfile: pw = filepasswd(slot, retry, pwdata->data); pwdata->source = pw_plaintext; pwdata->data = pl_strdup(...
...oise from keyboard strokes */ count = 0; while (count < rsize) { c = getc(stdin); if (c == eof) { rv = secfailure; break; } *(rbuf + count) = c; if (count == 0 || c != *(rbuf + count -1)) { count++; fprintf(stderr, "*"); } } rbuf[count] = '\0'; fprintf(stderr, "\n\nfinished. ...
Initialize NSS database - sample 2
sswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ input = fopen("/dev/tty", "r"); if (input == null) { pr_fprintf(pr_stderr, "error opening input terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "
enter a password which will be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_f...
...try again.\n"); } ...
...try again.\n"); } /* clear out the duplicate password string */ if (p1) { port_memset(p1, 0, port_strlen(p1)); port_free(p1); } fclose(input); fclose(output); ...
Python binding for NSS
in addition the test directory contains unit tests that also illustrate python-nss usage, however unlike the examples the unit tests are geared towards testing rather than expository illustration. other documentation the doc directory contains other files you may wish to review. how to report a bug python-nss bugs are currently being tracked in the red hat bugzilla system for fedora. you can
enter a bug report here. source download area source downloads are maintained here. links to download url for a specific release can be found in the release information section. mozilla source code management (scm) information on march 21, 2013 the nss project switched from using cvs as it's source code manager (scm) to mercurial, also known as hg. all prior cvs information (including release tags)...
... nsprerror now derived from standardexception, provides: errno (numeric error code) strerror (error description associated with error code) error_message (optional detailed ...
...der nss.certusageanyca nss.ocspmode_failureisverificationfailure nss.ocspmode_failureisnotaverificationfailure internal changes reimplement exception handling nsprerror is now derived from standardexception instead of environm
enterror. it was never correct to derive from environm
enterror but was difficult to implement a new subclassed exception with it's own attributes, using environm
enterror had been expedient. nsprerror now derived from standardexception, provides: errno (numeric error code) strerror (error description associated with error code) error_message (optional detailed message) error_code (alias for errno) ...
NSS tools : modutil
er, that mechanism's default provider is undefined. modutil supports several mechanisms: rsa, dsa, rc2, rc4, rc5, aes, des, dh, sha1, sha256, sha512, ssl, tls, md5, md2, random (for random number generation), and friendly (meaning certificates are publicly readable). -newpwfile new-password-file specify a text file containing a token's new or replacement password so that a password can be
entered automatically with the -changepw option. -nocertdb do not open the certificate or key databases. this has several effects: o with the -create command, only a module security file is created; certificate and key databases are not created. o with the -jar command, signatures on the jar file are not checked. o with the -changepw command, the password on the nss internal module cannot be ...
...file is created; certificate and key databases are not created. o with the -jar command, signatures on the jar file are not checked. o with the -changepw command, the password on the nss internal module cannot be set or changed, since this password is stored in the key database. -pwfile old-password-file specify a text file containing a token's existing password so that a password can be
entered automatically when the -changepw option is used to change passwords. -secmod secmodname give the name of the security module database (like secmod.db) to load. -slot slotname specify a particular slot to be enabled or disabled with the -enable or -disable options. -string config_string pass a configuration string for the module being added to the database. -tempdir temporary-director...
...false flag (it doesn't matter which). the tool returns the current fips setting. modutil -chkfips false -dbdir sql:/home/my/sharednssdb/ fips mode enabled. changing the password on a token initializing or changing a token's password: modutil -changepw tokenname [-pwfile old-password-file] [-newpwfile new-password-file] modutil -dbdir sql:/home/my/sharednssdb -changepw "nss certificate db"
enter old password: incorrect password, try again...
enter old password:
enter new password: re-
enter new password: token "communicator certificate db" password changed successfully. jar installation file format when a jar file is run by a server, by modutil, or by any program that does not interpret javascript, a special information file must be included to install the libraries. there are se...
NSS tools : modutil
modutil supports several mechanisms: rsa, dsa, rc2, rc4, rc5, aes, des, dh, sha1, sha256, sha512, ssl, tls, md5, md2, random (for random number generation), and friendly (meaning certificates are publicly readable). -newpwfile new-password-file specify a text file containing a token's new or replacement password so that a password can be
entered automatically with the -changepw option. -nocertdb do not open the certificate or key databases. this has several effects: o with the -create command, only a module security file is created; certificate and key databases are not created. o with the -jar command, signatures on the jar file are not ...
...ommand, signatures on the jar file are not checked. o with the -changepw command, the password on the nss internal module cannot be set or changed, since this password is stored in the key database. -pwfile old-password-file specify a text file containing a token's existing password so that a password can be
entered automatically when the -changepw option is used to change passwords. -secmod secmodname give the name of the security module database (like secmod.db) to load. -slot slotname specify a particular slot to be enabled or disabled with the -enable or -disable options. -string config_string pass a configuration string f...
...t doesn't matter which). the tool returns the current fips setting. modutil -chkfips false -dbdir sql:/home/my/sharednssdb/ fips mode enabled. changing the password on a token initializing or changing a token's password: modutil -changepw tokenname [-pwfile old-password-file] [-newpwfile new-password-file] modutil -dbdir sql:/home/my/sharednssdb -changepw "nss certificate db"
enter old password: incorrect password, try again...
enter old password:
enter new password: re-
enter new password: token "communicator certificate db" password changed successfully. jar installation file format when a jar file is run by a server, by modutil, or by any program that does not interpret javascript, a special information file must be included to install the libraries. there...
Tutorial: Embedding Rhino
plex embeddings. fully compilable examples are provided along the way. the examples live in the rhino/examples directory in the distribution and in mozilla/js/rhino/examples in cvs. this document will link to them using lxr. in this document, javascript code will be in green, java code will be in green, and shell logs will be in purple. ...
...t does it read a script from the command line, execute it, and print a result. here's an example use of runscript from a shell command line: $ java runscript "math.cos(math.pi)" -1 $ java runscript "function f(x){return x+1} f(7)" 8 note that you'll have to have both the rhino classes and the runscript example class file in the classpath. let's step through the body of main one line at time.
entering a context the code context cx = context.
enter(); creates and
enters a context. a context stores information about the execution environment of a script. initializing standard objects the code scriptable scope = cx.initstandardobjects(); initializes the standard objects (object, function, etc.) this must be done before scripts can be executed. the null parameter tells initstandardobjec...
...ained in the variable result). result could be a string, javascript object, or other values. the tostring method converts any javascript value to a string. exiting the context the code } finally { context.exit(); } exits the context. this removes the association between the context and the current thread and is an essential cleanup action. there should be a call to exit for every call to
enter. to make sure that it is called even if an exception is thrown, it is put into the finally block corresponding to the try block starting after context.
enter(). expose java apis using java apis no additional code in the embedding needed! the javascript feature calledliveconnect allows javascript programs to interact with java objects: $ java runscript "java.lang.system.out.println(3)" 3.0 unde...
JSAPI reference
sapi 24 js_isrunning js_saveframechain js_restoreframechain js_isassigning obsolete since javascript 1.8.5 js_isconstructing obsolete since jsapi 26 js_isconstructing_possiblywithgiventhisobject obsolete since jsapi 17 js_getscopechain obsolete since javascript 1.8.7 compartments: class jsautocompartment added in spidermonkey 24 js_newglobalobject added in spidermonkey 17 js_
entercompartment added in spidermonkey 24 js_leavecompartment added in spidermonkey 24 js_getcompartmentprivate added in spidermonkey 1.8.5 js_setcompartmentprivate added in spidermonkey 1.8.5 js_getglobalforcompartmentornull added in spidermonkey 17 js_iteratecompartments added in spidermonkey 17 js_setdestroycompartmentcallback added in spidermonkey 17 js_setcompartmentnamecallback added in sp...
...e added in spidermonkey 1.8.5 js_setcompartmentprivate added in spidermonkey 1.8.5 js_getglobalforcompartmentornull added in spidermonkey 17 js_iteratecompartments added in spidermonkey 17 js_setdestroycompartmentcallback added in spidermonkey 17 js_setcompartmentnamecallback added in spidermonkey 17 js_newcompartmentandglobalobject added in spidermonkey 1.8.1 obsolete since jsapi 16 js_
entercrosscompartmentcall added in spidermonkey 1.8.1 obsolete since jsapi 18 js_leavecrosscompartmentcall added in spidermonkey 1.8.1 obsolete since jsapi 18 locale callbacks: struct jslocalecallbacks js_getlocalecallbacks js_setlocalecallbacks locale callback types: jslocaletouppercase jslocaletolowercase jslocalecompare jslocaletounicode scripts just running some javascript code i...
...ddnamedrootrt obsolete since javascript 1.8.5 js_removeroot obsolete since javascript 1.8.5 js_removerootrt obsolete since javascript 1.8.5 js_mapgcroots obsolete since jsapi 19 jsgcmaprootfun obsolete since jsapi 19 js_dumpnamedroots obsolete since jsapi 19 local root scopes were another way of protecting objects from the garbage collector. ...
History Service Design
allow to quickly find a page in a certain timeframe remembering only small details about it. the system should be customizable enough to allow creation of custom, calendar and graphical views based on queries executed through a common api upon underlying data. the querying system allows to extract slices of data based on common patterns, this is directly usable by the end user, but also by implem
enters to provide a variety of nice features. for example, is possible to create a query folder containing the 10 pages most visited by the user, allowing to fast find good candidates for bookmarking. a locationbar intelligent algorithm (aka: the awesomebar) allows searchs through bookmarks, history, keywords (and much more) detaching the user from the old long searches through tree views. this is pos...
...atabase maintenance at startup the service creates an exclusive storage connection to places.sqlite, the exclusive locking is needed for both a perf gain and data-safety. in case the database is missing a new one is created, if instead the database exists but the connection to it fails due to database corruption, the corrupt database is moved away and a new one is created. in both cases an implem
enter can know what did happen at startup and act accordingly (maybe restoring a backup). once the database connection has been set-up the schema version of the database is checked. schema version is upgraded every time a change is made to the database schema, history service will eventually upgrade the database, moving and fixing its datas accordingly. in case the database has been created for the fi...
...ny queries can be executed and combined at the same time. an history container node is built (the so-called rootnode), this node will fill itself. finally the root node is assigned to a history result object, that can be furtherly modified setting for example a sorting mode. only the first level of a node is usually filled, internal nodes or queries will populate themselves when opened. an implem
enter working on a ui can then associate a viewer with the result, so that it will be notified when the result tree changes. queries can act on a variety of datas, coming from all dependant services, so it is possible to query history, bookmarks or both, also with values coming from other services like tags, annotations. result nodes can be simple uri nodes with page attributes or complete visit attri...
nsIAppShellService
void hidesplashscreen(); obsolete since gecko 1.8 void initialize(in nsicmdlineservice acmdlineservice, in nsisupports nativea...
...ure1window() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) ensures that at least one window exists after creating the startup state. if one has not been made, this will create a browser window. void ensure1window( in nsicmdlineservice acmdlineservice ); parameters acmdlineservice the command line from which startup args can be read.
enterlastwindowclosingsurvivalarea() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) during application startup (and at other times!) we may temporarily encounter a situation where all application windows will be closed but we do not want to take this as a signal to quit the application. bracket the code where the last window could close with these. (and at ap...
.../ seamonkey 1.0) during application startup (and at other times!) we may temporarily encounter a situation where all application windows will be closed but we do not want to take this as a signal to quit the application. bracket the code where the last window could close with these. (and at application startup, on platforms that do not normally quit when the last window has closed, call
enter once, but not exit) void
enterlastwindowclosingsurvivalarea(); parameters none. exitlastwindowclosingsurvivalarea() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void exitlastwindowclosingsurvivalarea(); parameters none. native code only!gethiddenwindowandjscontext return the (singleton) application hidden window as an nsidomwindow, ...
nsIAppStartup
d createhiddenwindow(); boolean createstartupstate(in long awindowwidth, in long awindowheight); obsolete since gecko 1.9.1 void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.9.1 void ensure1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.9.1 void
enterlastwindowclosingsurvivalarea(); void exitlastwindowclosingsurvivalarea(); void getstartupinfo(); void hidesplashscreen(); obsolete since gecko 1.9.1 void initialize(in nsisupports nativeappsupportorsplashscreen); obsolete since gecko 1.9.1 void quit(in pruint32 amode); void restartinsafemode(in pruint32 aquitmode); void run(); ...
... ensure1window() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) ensures that at least one window exists after creating the startup state. if one has not been made, this will create a browser window. void ensure1window( in nsicmdlineservice acmdlineservice ); parameters acmdlineservice the command line from which startup args can be read.
enterlastwindowclosingsurvivalarea() serves for situations when all application windows will be closed but we don't want to take this as a signal to quit the application. bracket the code where the last window could close with these. void
enterlastwindowclosingsurvivalarea(); parameters none. exitlastwindowclosingsurvivalarea() this method serves for situations when all application windows will ...
... is constructed from the constants defined above. restartinsafemode() restart the application in safe mode. void quit( in pruint32 aquitmode ); parameters aquitmode this parameter modifies how the app is shutdown. run() runs an application event loop: normally the main event pump which defines the lifetime of the application. if there are no windows open and no outstanding calls to
enterlastwindowclosingsurvivalarea() this method will exit immediately. void run(); parameters none. return value returns ns_success_restart_app code. this return code indicates that the application should be restarted because quit was called with the erestart flag. see also nsicmdlineservice nsiappstartup_mozilla_2_0 ...
nsIAuthPrompt
f the prompt message dialog box. passwordrealm the password realm. for example, ldap://localhost/dc=test. if a username is specified (http://user@site.com) it will be used when matching existing logins or saving new ones. if no username is specified, only password-only logins will be matched or saved. savepassword saving password option. one of the save_password_* constants pwd the password
entered by the user if ok was selected. return value true for ok, false for cancel. promptusernameandpassword() this method puts up a username/password dialog with ok and cancel buttons. boolean promptusernameandpassword( in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint32 savepassword, inout wstring user, inout wstring pwd ); parameters dialogtitle th...
... return value true for ok, false for cancel. ...
...ordrealm, in pruint32 savepassword, inout wstring user, inout wstring pwd ); parameters dialogtitle the title of the dialog. text the text of the prompt message dialog box. passwordrealm the password realm. for example, ldap://localhost/dc=test. savepassword saving password option. one of the save_password_* constants user the username
entered in the dialog. pwd the password
entered by the user if ok was selected. return value true for ok, false for cancel. ...
nsIAuthPrompt2
1 password will be sent encrypted, but the connection is otherwise insecure. level_secure 2 the connection, both for password and data, is secure. methods asyncpromptauth() asynchronously prompt the user for a username and password. this has largely the same semantics as nsiauthprompt.promptusernameandpassword(), but must return immediately after calling and return the
entered data in a callback. if the user closes the dialog using a cancel button or similar, the callback's nsiauthpromptcallback.onauthcancelled() method must be called. calling nsicancelable.cancel() on the returned object should close the dialog and must call nsiauthpromptcallback.onauthcancelled() on the provided callback. this implementation may: coalesce identical prompts. this means prompts ...
...ptauth( in nsichannel achannel, in nsiauthpromptcallback acallback, in nsisupports acontext, in pruint32 level, in nsiauthinformation authinfo ); parameters achannel the channel that requires authentication. acallback acontext level one of the level constants. authinfo authentication information object. the implementation should fill in this object with the information
entered by the user before returning. return value promptauth() requests a username and a password. implementations will commonly show a dialog with a username and password field, depending on flags also a domain field. note: exceptions thrown from this function will be treated like a return value of false. boolean promptauth( in nsichannel achannel, in pruint32 level, in nsiauthinformati...
...ptions thrown from this function will be treated like a return value of false. boolean promptauth( in nsichannel achannel, in pruint32 level, in nsiauthinformation authinfo ); parameters achannel the channel that requires authentication. level one of the level constants. authinfo authentication information object. the implementation should fill in this object with the information
entered by the user before returning. return value false, authentication should be cancelled, usually because the user did not provide username/password. true, authentication can proceed using the values in the authinfo object. see also nsiauthprompt ...
nsIAutoCompleteInput
autocompleteinput.idlscriptable this interface monitors the input in a text field and displays an autocomplete panel at the appropriate time. ...
...llup event will be dispatched. read only. controller nsiautocompletecontroller the controller. read only. disableautocomplete boolean true if auto-complete is currently disabled; otherwise false. forcecomplete boolean if true, the text field automatically completes to the default result whenever the user hits the
enter key or the text field loses focus. maxrows unsigned long the maximum number of rows to display in the autocomplete suggestion popup. minresultsforpopup unsigned long specifies a minimum number of search results that must be available before the autocomplete popup will open. popup nsiautocompletepopup the view in w...
...ring getsearchat( in unsigned long index ); parameters index the index number of the search session object whose name is to be returned. return value the name of the specified object. onsearchbegin() called when the search starts. void onsearchbegin(); parameters none. onsearchcomplete() called when the search ends successfully. void onsearchcomplete(); parameters none. ontext
entered() called when the user selects and presses
enter on a result item. boolean ontext
entered(); parameters none. return value return true to prevent handling the selection. ontextreverted() called when the user cancels the autocomplete session. boolean ontextreverted(); parameters none. return value return true to prevent the reversion. selecttextrange() selects a range of text in the autocomplet...
nsITextInputProcessor
n you commit composition with specific string, specify commit string with its argument: tip.commitcompositionwith("foo-bar-buzz"); when you cancel composition, just do this: tip.cancelcomposition(); when you dispatch keydown event (and one or more keypress events), just do this: var keyevent = new keyboardevent("", // type attribute value should be empty. { key: "
enter", // required. code: "
enter", // optional. keycode: keyboardevent.dom_vk_return, // required if printable key, but optional if non-printable key. location: keyboardevent.dom_vk_standard, // optional, may be computed from code attribute value. repeat: false, // optional. }); ...
...); tip.appendclausetopendingcomposition("ab".length, tip.attr_selected_clause); tip.setcaretposition("ab".length); // this means that the composition string is converted by a keypress of "convert" key. var convertkeyevent = new keyboardevent("", { key: "convert", code: "convert" }); tip.flushpendingcomposition(convertkeyevent); // this means that the composition is committed by a keypress of "
enter" key. var
enterkeyevent = new keyboardevent("", { key: "
enter", code: "
enter" }); tip.commitcomposition(
enterkeyevent); note that specifying keyboard event may not be dispatched during composition due to conforming to the specification of dom level 3 events. however, it's the best for every textinputprocessor user to specify keyboardevent every time because when gecko will change the behavior...
...can detect the registered key name change from the thrown exception. key_force_printable_key 0x00000004 one of akeyflags. when you attempt to dispatch a printable key's event whose key attribute value (i.e., inputting string) will match with a registered key name, this flag makes dispatched keyboard events printable keyboard events forcibly. for example, if a key causes inputting "
enter" as text, this flag is necessary. if this flag is not specified in such case, non-printable keyboard events will be dispatched. key_keep_key_location_standard 0x00000008 one of akeyflags. the location attribute value of dispatching keyboard events is computed automatically if the attribute isn't initialized or initialized with 0. for the latter case, you may not want textinputproce...
nsIWebBrowserChrome
cription chromeflags unsigned long the chrome flags for this browser chrome. the implementation should reflect the value of this attribute by hiding or showing its chrome appropriately. webbrowser nsiwebbrowser the currently loaded webbrowser. the browser chrome may be told to set the webbrowser object to a new object by setting this attribute. in this case the implem
enter is responsible for taking the new webbrowser object and doing any necessary initialization or setup as if it had created the webbrowser itself. this includes positioning setting up listeners etc. constants constant value description status_script 1 flag for setstatus() status_script_default 2 flag for setstatus() status_link 3 flag...
...use with nsiwindowcreator. chrome_with_position 8192 specifically for use with nsiwindowcreator. chrome_window_min 16384 represent special cases. chrome_window_popup 32768 represent special cases. chrome_window_raised 33554432 represent special cases. chrome_window_lowered 67108864 represent special cases. chrome_c
enter_screen 134217728 represent special cases. chrome_dependent 268435456 make the new window dependent on the parent. this flag is only meaningful if chrome_openas_chrome is set; content windows should not be dependent. chrome_modal 536870912 the modal style bit just affects the way the window looks and does not mean it's actually modal. chrome_openas_dial...
...oks and does not mean it's actually modal. chrome_openas_dialog 1073741824 represent special cases. chrome_openas_chrome 2147483648 represent special cases. chrome_all 4094 represent special cases. chrome_remote_window 1048576 whether this window should use remote (out-of-process) tabs. methods destroybrowserwindow() asks the implem
enter to destroy the window associated with this webbrowser object. void destroybrowserwindow(); parameters none. exitmodaleventloop() exit a modal event loop if we're in one. the implementation should also exit out of the loop if the window is destroyed. void exitmodaleventloop( in nsresult astatus ); parameters astatus the result code to return from showasmodal(). iswindowmodal() is the...
Migrating from Firebug - Firefox Developer Tools
d line firebug's console has a multi-line command line called command editor. the devtools do not have a side panel like the command editor (which is requested in bug 1133849), but therefore has a separate tool called scratchpad, which can be added as panel to the toolbox or opened in a separate window via firefox menu > developer > scratchpad or shift + f4. also, the normal command line smartly
enters a line break when it recognizes an unfinished command like document. and you hit
enter. you can also manually
enter a line break by pressing shift +
enter. response preview there is a preview tab when a network request logged to the console is expanded in firebug. the web console displays a preview within the response tab. it is currently missing the preview for html, xml and svg, though, whic...
...hin the style side panel. furthermore it has a source and a live edit mode, which allow to edit the selected style sheet like within a text editor. the style editor of the devtools only has one way to edit style sheets, which corresponds to firebug's live edit mode. try out css selectors firebug's selectors side panel provides a way to validate a css selector. it lists all elements matching the
entered selector. the devtools don't have this feature yet, but it's requested in bug 1323746. searching within the style sheets firebug allows to search within the style sheets via the search field. the style editor in the devtools also provides a way to search within a style sheet, though there is currently no option to search within multiple sheets (see bug 889571) and also not via a regular expre...
...u select a request. view remote address the remote address of a request is shown within the remote ip column within firebug. in the network monitor the address is shown at remote address in the headers tab when a request is selected. search within requests the search field within firebug allows to search within the requests. the search field in the firefox devtools filters the requests by the
entered string. firebug allowed to search within the response body of the network requests by checking response bodies within its search field options. this feature is not available yet within the network monitor, but it's requested in bug 1334408. while response bodies can't be searched yet, the network monitor allows to filter by different request properties. storage inspector the cookies panel in...
Network request list - Firefox Developer Tools
nt at which the page's load event is triggered. blocking specific urls if you want to view your page as it would look without a resource (e.g., if it were blocked by the browser or an extension), you can block requests matching patterns you specify. click the request blocking icon in the toolbar. this opens the blocking sidebar. (click the icon again when you want to close the sidebar.)
enter a string in the field with the placeholder text block resource when url contains. reload the page to test it with the specified url blocked. other actions you can take with request blocking: to turn all request blocking off or on: toggle the checkbox next to enable request blocking. to turn a specific block off or on: toggle the checkbox next to that item. to delete a blocked item, click ...
...y are xmlhttprequests or websocket requests, or by request properties. filter type how to apply content type use the buttons in the toolbar (html, css, js). xhr requests use the xhr button in the toolbar. websocket connections use the ws button in the toolbar. you can filter by plain text (in which case the text is used to find partial matches;
entering "for" will match any message that contains the word "for") or—as of firefox 75—using regular expressions (by writing the regexp bracketed within slashes; "/.+corp.*/" will look for any occurrence of "corp" which has at least one character before it and may or may not have any characters after it, for example). the third-party add-on websocket sniffer may be helpful as well. ...
...expression. regexp:\d{5} regexp:mdn|mozilla for example, to find all 404, not found, errors, you can type "404" into the search and auto-complete suggests "status-code:404" so you'll end up with something like this: search in requests use the search panel to run a full-text search on headers and content. click the search icon in the toolbar. this opens the search sidebar.
enter a string in the search field of the sidebar, and press
enter or return. the search results area below the search field displays the requests that contain that string in the request or response headers or in the content of the response. you can expand each item to show the specific item that matches the string. clicking an item in the search results highlights that item in the monitor list, and di...
AudioNode.channelInterpretation - Web APIs
.l = input.m output.r = input.m 1 (mono) 4 (quad) up-mix from mono to quad. the m input channel is used for non-surround output channels (l and r). surround output channels (sl and sr) are silent. output.l = input.m output.r = input.m output.sl = 0 output.sr = 0 1 (mono) 6 (5.1) up-mix from mono to 5.1. the m input channel is used for the c
enter output channel (c). all the others (l, r, lfe, sl, and sr) are silent. output.l = 0 output.r = 0 output.c = input.m output.lfe = 0 output.sl = 0 output.sr = 0 2 (stereo) 1 (mono) down-mix from stereo to mono. both input channels (l and r) are equally combined to produce the unique output channel (m). output.m = 0.5 * (input.l + input.r) 2 (s...
...r non-surround respective output channels (l and r). surround output channels (sl and sr) are silent. output.l = input.l output.r = input.r output.sl = 0 output.sr = 0 2 (stereo) 6 (5.1) up-mix from stereo to 5.1. the l and r input channels are used for their non-surround respective output channels (l and r). surround output channels (sl and sr), as well as the c
enter (c) and subwoofer (lfe) channels, are left silent. output.l = input.l output.r = input.r output.c = 0 output.lfe = 0 output.sl = 0 output.sr = 0 4 (quad) 1 (mono) down-mix from quad to mono. all four input channels (l, r, sl, and sr) are equally combined to produce the unique output channel (m). output.m = 0.25 * (input.l + input.r + input.sl + input...
...uce the unique left output channel (l). and similarly, both right input channels (r and sr) are equally combined to produce the unique right output channel (r). output.l = 0.5 * (input.l + input.sl) output.r = 0.5 * (input.r + input.sr) 4 (quad) 6 (5.1) up-mix from quad to 5.1. the l, r, sl, and sr input channels are used for their respective output channels (l and r). c
enter (c) and subwoofer (lfe) channels are left silent. output.l = input.l output.r = input.r output.c = 0 output.lfe = 0 output.sl = input.sl output.sr = input.sr 6 (5.1) 1 (mono) down-mix from 5.1 to mono. the left (l and sl), right (r and sr) and central channels are all mixed together. the surround channels are slightly attenuated and the regular lateral c...
BiquadFilterNode.type - Web APIs
f. frequencies below the cutoff are attenuated; frequencies above it pass through. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value, the greater the peak. not used bandpass standard second-order bandpass filter. frequencies outside the given range of frequencies are attenuated; the frequencies inside it pass through. the c
enter of the range of frequencies. controls the width of the frequency band. the greater the q value, the larger the frequency band. not used lowshelf standard second-order lowshelf filer. frequencies lower than the frequency get a boost, or an attenuation; frequencies over it are unchanged. the upper limit of the frequencies getting a boost or an attenuation. not used the bo...
...th of the frequency band. the greater the q value, the larger the frequency band. the boost, in db, to be applied; if negative, it will be an attenuation. notch standard notch filter, also called a band-stop or band-rejection filter. it is the opposite of a bandpass filter: frequencies outside the give range of frequencies pass through; frequencies inside it are attenuated. ...
... controls how sharp the transition is at the medium frequency. the larger this parameter is, the sharper and larger the transition will be. not used example the following example shows basic usage of an audiocontext to create a biquad filter node. ...
BiquadFilterNode - Web APIs
encies below the cutoff are attenuated; frequencies above it pass through. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value, the greater the peak. not used bandpass standard second-order bandpass filter. frequencies outside the given range of frequencies are attenuated; the frequencies inside it pass through. the c
enter of the range of frequencies. controls the width of the frequency band. the greater the q value, the smaller the frequency band. not used lowshelf standard second-order lowshelf filter. frequencies lower than the frequency get a boost, or an attenuation; frequencies over it are unchanged. the upper limit of the frequencies getting a boost or an attenuation. not used...
...he frequency band. the greater the q value, the smaller the frequency band. the boost, in db, to be applied; if negative, it will be an attenuation. notch standard notch filter, also called a band-stop or band-rejection filter. it is the opposite of a bandpass filter: frequencies outside the give range of frequencies pass through; frequencies inside it are attenuated. ...
... controls how sharp the transition is at the medium frequency. the larger this parameter is, the sharper and larger the transition will be. not used methods inherits methods from its parent, audionode. ...
CanvasRenderingContext2D.arc() - Web APIs
radius the arc's radius. must be positive. ...
... radius the arc's radius. must be positive. startangle the angle at which the arc starts in radians, measured from the positive x-axis. ...
... radius the arc's radius. must be positive. startangle the angle at which the arc starts in radians, measured from the positive x-axis. endangle the angle at which the arc ends in radians, measured from the positive x-axis. anticlockwise optional an optional boolean. ...
Drawing shapes with canvas - Web APIs
d('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillrect(25, 25, 100, 100); ctx.clearrect(45, 45, 60, 60); ctx.strokerect(50, 50, 50, 50); } } this example's output is shown below. screenshotlive sample the fillrect() function draws a large black square 100 pixels on each side. the clearrect() function then erases a 60x60 pixel square from the c
enter, and then strokerect() is called to create a rectangular outline 50x50 pixels within the cleared square. in upcoming pages we'll see two alternative methods for clearrect(), and we'll also see how to change the color and stroke style of the rendered shapes. unlike the path functions we'll see in the next section, all three rectangle functions draw immediately to the canvas. drawing paths now ...
...ngle. this is, as mentioned above, because shapes are automatically closed when a path is filled, but not when they are stroked. if we left out the closepath() for the stroked triangle, only two lines would have been drawn, not a complete triangle. arcs to draw arcs or circles, we use the arc() or arcto() methods. arc(x, y, radius, startangle, endangle, anticlockwise) draws an arc which is c
entered at (x, y) position with radius r starting at startangle and ending at endangle going in the given direction indicated by anticlockwise (defaulting to clockwise). arcto(x1, y1, x2, y2, radius) draws an arc with the given control points and radius, connected to the previous point by a straight line. let's have a more detailed look at the arc method, which takes six parameters: x and y are the...
... with radius r starting at startangle and ending at endangle going in the given direction indicated by anticlockwise (defaulting to clockwise). arcto(x1, y1, x2, y2, radius) draws an arc with the given control points and radius, connected to the previous point by a straight line. let's have a more detailed look at the arc method, which takes six parameters: x and y are the coordinates of the c
enter of the circle on which the arc should be drawn. radius is self-explanatory. the startangle and endangle parameters define the start and end points of the arc in radians, along the curve of the circle. these are measured from the x axis. the anticlockwise parameter is a boolean value which, when true, draws the arc anticlockwise; otherwise, the arc is drawn clockwise. note: angles in the arc fun...
Constraint validation API - Web APIs
concepts and usage certain html form controls, such as <input>, <select> and <textarea>, can restrict the format of allowable values, using attributes like required and pattern to set basic constraints. however, you may want to impose more complex constraints, or to provide clearer reporting of validation failures than the defaults. this can be done using the constraint validation api. note: client-side constraint validation doesn't remove the need for validation on the server side. ...
...to the user upon submitting the form, explaining why the value is not valid — when a message is set, the validity state is set to invalid. to clear this state, invoke the function with an empty string passed as its argument. in this case the custom error message is cleared, the element is considered valid, and no message is shown. examples take the following form: <form> <label for="name">
enter username (upper and lowercase letters): </label> <input type="text" name="name" id="name" required pattern="[a-za-z]+"> <button>submit</button> </form> the basic html form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the pattern. if you wanted to instead display custom erro...
...try again!'); } }); the example renders like so: in brief: we check the valid state of the input element every time its value is changed by running the checkvalidity() method via the input event handler. if the value is invalid, an invalid event is raised, and the invali...
Detecting device orientation - Web APIs
nts a left to right 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. ...
... warning: chrome and firefox do not handle the angle...
... warning: chrome and firefox do not handle the angles the same way, so on some axes the ...
Element: mouseover event - Web APIs
the mouseover event is fired at an element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements. bubbles yes cancelable yes interface mouseevent event handler property onmouseover examples the following example illustrates the difference between mouseover and mouse
enter events. ...
...handler property onmouseover examples the following example illustrates the difference between mouseover and mouse
enter events. ...
... following example illustrates the difference between mouseover and mouse
enter events. ...
Element.msZoomTo() - Web APIs
ir zoom level through mscontentzoom (ie. scrolltop/left). the zoom level can be reset with mszoomto. this proprietary method is specific to internet explorer and microsoft edge. syntax element.mszoomto(arguments); parameters args[in] type: mszoomtooptions contentx[in]: the x-coordinate of the content that is the target of the scroll/zoom. if no value is specified, defaults to the current c
enterpoint of visible content, horizontally. contenty[in]: the y-coordinate of the content that is the target of the scroll/zoom. if no value is specified, defaults to the current c
enterpoint of visible content, vertically. viewportx[in]: the alignment point of the viewport. the scroll/zoom operation attempts to align this point with the contentx point. c
enter: default. aligns the horizontal cente...
...he viewport to the element's contentx value. right: aligns the right-most point of the viewport to the element's contentx value. integer: aligns the specified x-coordinate of the viewport to the element's contentx value. viewporty[in]: the alignment point of the viewport. the scroll/zoom operation attempts to align this point with the contenty point. middle: default. aligns the vertical c
enter of the viewport to the element's contenty value. top: aligns the top-most point of the viewport to the element's contenty value. bottom: aligns the bottom-most point of the viewport to the element's contenty value. integer: aligns the specified y-coordinate of the viewport to the element's contenty value. scalefactor[in]: floating-point. the scale factor (mscontentzoomfactor) to zoom to. i...
...mation is used. this method has no scrolling effect on non-scrollable elements and no zooming effect on non-zoomable elements (e.g., elements with "-ms-content-zooming: none"). ...
Element.setPointerCapture() - Web APIs
the setpointercapture() method of the element interface is used to designate a specific element as the capture target of future pointer events. subsequent events for the pointer will be targeted at the capture element until capture is released (via element.releasepointercapture()). note: when pointer capture is set, pointerover, pointerout, pointer
enter, and pointerleave events are only generated when crossing the boundary of the capture target. this has the effect of suppressing these events on all other elements. overview of pointer capture pointer capture allows events for a particular pointer event (pointerevent) to be re-targeted to a particular element instead of the normal (or hit test) target at a pointer's location. this can be used to ensure that an element continues to receive po...
...lanation invalidpointerid pointerid does not match any of the active pointers. example this example sets pointer capture on a <div> when you press down on it. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. ...
...idpointerid pointerid does not match any of the active pointers. example this example sets pointer capture on a <div> when you press down on it. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. ...
GlobalEventHandlers.ondragleave - Web APIs
r_handler(ev) { console.log("dragover"); // change the target element's background color to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function drag
enter_handler(ev) { console.log("drag
enter"); // change the source element's background color for
enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's background color back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the...
...rget element's background color to visually indicate // the drag ended. ...
...document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's background color back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's
enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondrag
enter = drag
enter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondrag
enter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it...
GlobalEventHandlers - Web APIs
event is raised. globaleventhandlers.ondblclick is an eventhandler representing the code to be called when the dblclick event is raised. globaleventhandlers.ondrag is an eventhandler representing the code to be called when the drag event is raised. globaleventhandlers.ondragend is an eventhandler representing the code to be called when the dragend event is raised. globaleventhandlers.ondrag
enter is an eventhandler representing the code to be called when the drag
enter event is raised. globaleventhandlers.ondragexit is an eventhandler representing the code to be called when the dragexit event is raised. globaleventhandlers.ondragleave is an eventhandler representing the code to be called when the dragleave event is raised. globaleventhandlers.ondragover is an eventhandler representi...
...be called when the loadstart event is raised (when progress has begun on the loading of a resource.) globaleventhandlers.onlostpointercapture is an eventhandler representing the code to be called when the lostpointercapture event type is raised. globaleventhandlers.onmousedown is an eventhandler representing the code to be called when the mousedown event is raised. globaleventhandlers.onmouse
enter is an eventhandler representing the code to be called when the mouse
enter event is raised. globaleventhandlers.onmouseleave is an eventhandler representing the code to be called when the mouseleave event is raised. globaleventhandlers.onmousemove is an eventhandler representing the code to be called when the mousemove event is raised. globaleventhandlers.onmouseout is an eventhandler repre...
...lers.onpointercancel is an eventhandler representing the code to be called when the pointercancel event is raised. globaleventhandlers.onpointerover is an eventhandler representing the code to be called when the pointerover event is raised. globaleventhandlers.onpointerout is an eventhandler representing the code to be called when the pointerout event is raised. globaleventhandlers.onpointer
enter is an eventhandler representing the code to be called when the pointer
enter event is raised. globaleventhandlers.onpointerleave is an eventhandler representing the code to be called when the pointerleave event is raised. globaleventhandlers.onpointerlockchange is an eventhandler representing the code to be called when the pointerlockchange event is raised. globaleventhandlers.onpointerloc...
HTMLInputElement - Web APIs
the autofocus attribute. it cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control). required boolean: returns / sets the element's required attribute, indicating that the user must fill in a value before submitting a form. value string: returns / sets the current value of the control. note: if the user
enters a value different from the value expected, this may return an empty string. validity read only validitystate object: returns the element's current validity state. validationmessage read only string: returns a localized message that describes the validation constraints that the control does not satisfy (if any). this is the empty string if the control is not a candid...
... returns / sets the element's autocomplete attribute, indicating whether the value of the control can be automatically completed by the browser. ignored if the value of the type attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). possible values are: on: the browser can autocomplete the value using previously stored value off: the user must explicity
enter a value max string: returns / sets the element's max attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value. maxlength long: returns / sets the element's maxlength attribute, containing the maximum number of characters (in unicode code points) that the value can have. (if you set this to a...
...ibute, containing a regular expression that the control's value is checked against. use the title attribute to describe the pattern to help the user. this attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. placeholder string: returns / sets the element's placeholder attribute, containing a hint to the user of what can be
entered in the control. the placeholder text must not contain carriage returns or line-feeds. this attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. readonly 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 ty...
HTMLTextAreaElement - Web APIs
r interaction. form read only object: returns a reference to the parent form element. if this element is not contained in a form element, it can be the id attribute of any <form> element in the same document or the value null. inputmode maxlength long: returns / sets the element's maxlength attribute, indicating the maximum number of characters the user can
enter. this constraint is evaluated only when the value changes. minlength long: returns / sets the element's minlength attribute, indicating the minimum number of characters the user can
enter. this constraint is evaluated only when the value changes. name string: returns / sets the element's name attribute, containing the name of the control. placeholder string: re...
... readonly boolean: returns / sets the element's readonly attribute, indicating that the user cannot modify the value of the control. ...
...etc. ]</p> <p><textarea name="mytxtarea" rows="...
Intersection Observer API - Web APIs
of the two libraries they are using. as the user scrolls the page, these intersection detection routines are firing constantly during the scroll handling code, resulting in an experience that leaves the user frustrated with the browser, the web site, and their computer. the intersection observer api lets code register a callback function that is executed whenever an element they wish to monitor
enters or exits another element (or the viewport), or when the amount by which the two intersect changes by a requested amount. this way, sites no longer need to do anything on the main thread to watch for this kind of element intersection, and the browser is free to optimize the management of intersections as it sees fit. one thing the intersection observer api can't tell you: the exact number of pix...
...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: absolute; margin: 0; background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.7); width: 3em; height: 18px; padding: 2px; text-align: c
enter; } .topleft { left: 2px; top: 2px; } .topright { right: 2px; top: 2px; } .bottomleft { bottom: 2px; left: 2px; } .bottomright { bottom: 2px; right: 2px; } let observers = []; startup = () => { let wrapper = document.queryselector(".wrapper"); // options for the observers let observeroptions = { root: null, rootmargin: "0px", threshold: [] }; // an a...
...element and establishes that the background-color and border attributes can participate in css transitions, which we'll use to affect the changes to the element as it becomes more or less obscured. #box { background-color: rgba(40, 40, 190, 255); border: 4px solid rgb(20, 20, 120); transition: background-color 1s, border 1s; width: 350px; height: 350px; display: flex; align-items: c
enter; justify-content: c
enter; padding: 20px; } .vertical { color: white; font: 32px "arial"; } .extra { width: 350px; height: 350px; margin-top: 10px; border: 4px solid rgb(20, 20, 120); text-align: c
enter; padding: 20px; } javascript finally, let's take a look at the javascript code that uses the intersection observer api to make things happen. setting up first, we need to ...
KeyboardEvent - Web APIs
ent type (keydown, keypress, or keyup) identifies what kind of keyboard activity occurred. note: keyboardevent events just indicate what 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. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/w...
...oard). 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 key does not fall into this group and is always encoded with the location dom_key_location_standard. examples include the digits on the numeric keypad, the keypad's
enter key, and the decimal point on the keypad. properties this interface also inherits properties of its parents, uievent and event. keyboardevent.altkey read only returns a boolean that is true if the alt ( option or ⌥ on os x) key was active when the key event was generated. keyboardevent.code read only returns a domstring with the code value of the physical key represented ...
...keyboardevent.key read only returns a domstring representing the key value of the key represented by the event. keyboardevent.locale read only returns a domstring representing a locale string indicating the locale the keyboard is configured for. this may be the empty string if the browser or device doesn't know the keyboard's locale. note: this does not describe the locale of the data being
entered. a user may be using one keyboard layout while typing text in a different language. keyboardevent.location read only returns a number representing the location of the key on the keyboard or other input device. a list of the constants identifying the locations is shown above in keyboard locations. keyboardevent.metakey read only returns a boolean that is true if the meta key (on mac keyb...
WebXR permissions and security - Web APIs
mersive-vr session mode, but there are things to be aware of when setting up an ar session, as well. immersive presentation of vr first, any requests to activate the immersive-vr mode are rejected if the domain issuing the request does not have permission to enable an immersive session. this permission comes from the xr-spatial-tracking feature policy. ...
...that check is passed, the request to
enter immersive-vr mode is allowed if all of the following are true: the requestsession() call was issued by code executing within the handler for a user event, or the from the startup code for a user-launched web application. the document is considered trustworthy, in that it is responsible and is both currently active and has focus. the user's intent to
enter immersive vr mode is well understood; see user intent below for details. if all of that is true, the promise returned by requestsession() is resolved, and the new xrsession object is passed into the fulfillment handler. otherwise, an appropriate exception is thrown, such as securityerror if the document doesn't have permission to
enter immersive mode. inline presentation when you request an x...
...xplicit. explicit user intent (explicit user consent) is granted when the user has specifically and expressly been asked for permission to perform an action. implicit user intent (implicit user consent) is assumed if either of the following scenarios is the case: the user has interacted with the document in some way which has in turn caused your request to occur. for example, if you have an "
enter xr mode" button, and the user clicks it, calling requestsession() from the button's click event handler will permitted. if your code is executing during the launch of a web application, the runtime may consider the act of launching your web application to qualify as user intent. ...
Rendering and the WebXR frame animation callback - Web APIs
rceiving our images in 3d. the advantage to xr is that not only can we use the classic monocular techniques to simulate 3d graphics (perspective, size, and simulated parallax), but we can also simulate binocular vision—that is, vision using two eyes—by rendering the scene twice for each frame of animation—once for each eye. ...
...ular techniques to simulate 3d graphics (perspective, size, and simulated parallax), but we can also simulate binocular vision—that is, vision using two eyes—by rendering the scene twice for each frame of animation—once for each eye. the typical human's pupillary distance—the distance between the c
enters of the pupils—is between 54 and 74 millimeters (0.054 to 0.074 meters). so if the c
enter of the viewer's head is located at [0.0, 2.0, 0.0] (about two meters above ground level at the c
enter of the space horizontally), we first need to render the scene from, say, [-0.032, 2.0, 0.0] (32mm to the left of c
enter) and then render it again at [0.032, 2.0, 0.0]. (32mm right of c
enter) this way, we place the positions of the viewer's eyes at an average human pupillary distance of 64mm. tha...
...eing 2d surfaces. this is illustrated in the diagram below, in which we see how each eye perceives a die located directly in front of the viewer. while this diagram exaggerates the effect in some respects for illustrative purposes, the concept is the same. each eye sees an area whose boundaries make up an arc in front of the eye. because each eye is offset to one side or the other of the head's c
enterline, and each eye sees about the same field of view, the result is that each eye sees a slightly different part of the world in front of it, and from a slightly different angle. the left eye sees the die from a little bit to the left of c
enter, and the right eye sees it from a bit to the right of c
enter. as a result, the left eye sees just a little bit more of the left side of the object and a...
Using the Web Speech API - Web APIs
r of closely-related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. again, most oses have some kind of speech synthesis system, which will be used by the api for this task as available. demo to show simple usage of web speech synthesis, we've provided a demo called speak easy synthesis. this includes a set of form controls for
entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. after you have
entered your text, you can press
enter/return to hear it spoken. to run the demo, you can clone (or directly download) the github repo it is part of, open the html index file in a supporting desktop browser, or navigate to the live demo url in a supporting mobile browser like chrom...
...ermissions. chrome for desktop and android have supported it since around version 33, without prefixes. html and css the html and css are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls. the <select> element is initially empty, but is populated with <option>s via javascript (see later on.) <h1>speech synthesiser</h1> <p>
enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p> <form> <input type="text" class="txt"> <div> <label for="rate">rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate"> <div class="rate-value">1</div> <div class="clearfix"></div> </div> <div> <label for="pitch">pitch</label><input type="range" mi...
... doesn't support speechsynthesis.onvoiceschanged, and will just return a list of voices when speechsynthesis.getvoices() is fired. with chrome however, you have to wait for the event to fire before populating the list, hence the if statement seen below. populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } speaking the
entered text next, we create an event handler to start speaking the text
entered into the text field. we are using an onsubmit handler on the form so that the action happens when
enter/return is pressed. we first create a new speechsynthesisutterance() instance using its constructor — this is passed the text input's value as a parameter. next, we need to figure out which voice to use. we use the ht...
XRSystem: requestSession() - Web APIs
immersive-vr but there is already an immersive vr session either currently active or in the process of being set up. there can only be one immersive vr session at a time. notsupportederror there is no webxr-compatible device available, or the device does not support the specified sessionmode; this can also be thrown if any of the required options are unsupported. securityerror permission to
enter the specified xr mode is denied. this can happen for a number of reasons, which are covered in more detail in permissions and security in webxr device api. examples creating an immersive vr session the following example calls requestsession() requesting an "immersive-vr" session. if the promise resolves, it sets up a session and initiates the animation loop. navigator.xr.requestsession("im...
...'t supported, or an error occurred activating vr!"); }); verifying webxr support and using a button to start vr mode the following example shows how to use both issessionsupported() and requestsession(). first, it checks to see if webxr is available by verifying the existence of navigator.xr. next, it calls issessionsupported(), passing it the desired session option before enabling controls for
entering xr. adding controls is a necessary step because
entering xr requires a user action. finally, the onbuttonclicked() method calls requestsession() using the same session option passed to issessionsupported(). if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.addeventlistener('click', onbuttonclicked); ...
...ssary step because
entering xr requires a user action. finally, the onbuttonclicked() method calls requestsession() using the same session option passed to issessionsupported(). ...
An overview of accessible web applications and widgets - Accessibility
navigation often times developers overlook support for the keyboard when they create custom widgets. to be accessible to a variety of users, all features of a web application or widget should also be controllable with the keyboard, without requiring a mouse. in practice, this usually involves following the conventions supported by similar widgets on the desktop, taking full advantage of the tab,
enter, spacebar, and arrow keys. traditionally, keyboard navigation on the web has been limited to the tab key. a user presses tab to focus each link, button, or form on the page in a linear order, using shift-tab to navigate backwards. it's a one-dimensional form of navigation—forward and back, one element at a time. on fairly dense pages, a keyboard-only user often has to press the tab key dozens ...
...enabled web application: the tab key should provide focus to the widget as a whole. for example, tabbing to a menu bar should not put focus on the menu's first element. the arrow keys should allow for selection or navigation within the widget. for example, using the left and right arrow keys should move focus to the previous and next menu items. when the widget is not inside a form, both the
enter and spacebar keys should select or activate the control. within a form, the spacebar key should select or activate the control, while the
enter key should submit the form's default action. if in doubt, mimic the standard desktop behavior of the control you are creating. so, for the tabs widget example above, the user should be able to navigate into and out of the widget's container (the <ol> ...
...idget's container (the <ol> in our markup) using the tab and shift-tab keys. once keyboard focus is inside the container, the arrow keys should allow the user to navigate between each tab (the <li> elements). from here, conventions vary from platform to platform. on windows, the next tab should automatically be activated when the user presses the arrow keys. on mac os x, the user can press either
enter or the spacebar to activate the next tab. an in-depth tutorial for creating keyboard-navigable javascript widgets describes how to implement this behavior with javascript. ...
Keyboard-navigable JavaScript widgets - Accessibility
note that disabled items within a grouped widget (such as menu items in a menu) should remain navigable using arrow keys. managing foc...
...note that disabled items within a grouped widget (such as menu items in a menu) should remain navigable using arrow keys. managing focus inside groups when...
...ample, the code that updates the tabindex or the styling when users navigate using the arrow keys should also be used by mouse click handlers to produce the same changes. ensure that the keyboard can be used to activate element to ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. for example, to ensure that the
enter key will activate an element, if you have an onclick="dosomething()", you should bind dosomething() to the key down event as well: onkeydown="return event.keycode != 13 || dosomething();". always draw the focus for tabindex="-1" items and elements that receive focus programatically ie will not automatically draw the focus outline for items that programatically receive focus. choose between chan...
Understandable - Accessibility
...) if you need to have something like a carousel on a page, provide an option to stop it automatically advancing. better to avoid such functionality if possible. note: also see the wcag description for guideline 3.2 predictable: make web pages appear and operate in predictable ways. guideline 3.3 — input assistance: help users avoid and correct mistakes this guideline c
enters around helping users
enter correct information when required with the minimum of mistakes. success criteria how to conform to the criteria practical resource 3.3.1 error identification (a) when a user is filling out a form or choosing between options, any error that is detected should be clearly reported to the user, along with the form control that the error...
...aningful text labels how to structure an html form text labels and names 3.3.3 error suggestion (aa) when an error is detected and suggestions for correction are known, provide these to the user (e.g. suggesting alternatives when the user is choosing a user name and has selected one that is already taken), unless doing so would cause a security issue (e.g. when
entering a password) or context problem (e.g. they are trying to answer a question in a quiz app). in such cases, when this is appropriate, you'll probably use a combination of javascript and server-side functionality to check if the entry is correct, and if not, what viable suggestions can be given to the user. such suggestions should be displayed usefully in context, just like error messages (se...
...ch as legal agreements, e-commerce transactions, or personal data), at least one of the following should be true: submissions are reversible. data is checked for errors, and the user is given an opportunity to correct them. a mechanism is available for confirming and correcting information before final submission. reversible — for any view where data can be
entered, provide an equivalent view that allows you to edit or even delete an entry, as appropriate. checking data — as covered in 3.3.1, a combination of client-side and server-side validation should be used to detect errors and display helpful messages to the user to allow them to correct their inputs. confirm and correct — where appropriate, after filling in a series of form fields to ...
-webkit-mask-position-x - CSS: Cascading Style Sheets
the -webkit-mask-position-x css property sets the initial horizontal position of a mask image. ...
... the position of the left edge of the image relative to the box's left padding edge. percentages are calculated against the horizontal dimension of the box padding area. that means, a value of 0% means the left edge of the image is aligned with the box's left padding edge and a value of 100% means the right edge of the image is aligned with the box's right padding edge. left equivalent to 0%. ...
...edge of the image is aligned with the box's right padding edge. left equivalent to 0%. c
enter equivalent to 50%. right equivalent to 100%. formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | left | c
enter | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: right; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: 25%; } specifications not part of any standard. ...
-webkit-mask-position-y - CSS: Cascading Style Sheets
the -webkit-mask-position-y css property sets the initial vertical position of a mask image. ...
...n of the top side of the image relative to the box's top padding edge. percentages are calculated against the vertical dimension of the box padding area. a value of 0% means the top edge of the image is aligned with the box's top padding edge and a value of 100% means the bottom edge of the image is aligned with the box's bottom padding edge. top equivalent to 0%. bottom equivalent to 100%. ...
...edge of the image is aligned with the box's bottom padding edge. top equivalent to 0%. bottom equivalent to 100%. c
enter equivalent to 50%. formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | top | c
enter | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: bottom; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: 25%; } specifications not part of any standard. ...
::placeholder - CSS: Cascading Style Sheets
), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. large text is defined as 18.66px and bold or larger, or 24px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 usability placeholder text with sufficient color contrast may be interpreted as
entered input. placeholder text will also disappear when a person
enters content into an <input> element. both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns. an alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use aria-describedby to programmatically associ...
...ese circumstances can interfere with successful form completion, especially for people with cognitive concerns. an alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use aria-describedby to programmatically associate the <input> with its hint. with this implementation, the hint content is available even if information is
entered into the input field, and the input appears free of preexisting input when the page is loaded. most screen reading technology will use aria-describedby to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary. <label for="user-email">your email address</label> <span id="user-email-hint" class="...
...a information unnecessary. <label for="user-email">your email address</label> <span id="user-email-hint" class="input-hint">example: jane@sample.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> placeholders in form fields are harmful — nielsen norman group windows high contrast mode placeholder text will appear with the same styling as user-
entered text content when rendered in windows high contrast mode. this will make it difficult for some people to determine which content has been
entered, and which content is placeholder text. greg whitworth — how to use -ms-high-contrast labels placeholders are not a replacement for the <label> element. without a label that has been programmatically associated with an input using a combinatio...
:placeholder-shown - CSS: Cascading Style Sheets
ng text is displayed. html <input id="input1" placeholder="name, rank, and serial number"> <br><br> <input id="input2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown { text-overflow: ellipsis; } result customized input field the following example highlights the branch and id code fields with a custom style. ...
...put2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown { text-overflow: ellipsis; } result customized input field the following example highlights the branch and id code fields with a custom style. ...
...ult customized input field the following example highlights the branch and id code fields with a custom style. ...
:target - CSS: Cascading Style Sheets
as risus odio, pharetra nec ultricies et, mollis ac augue. nunc et diam quis sapien dignissim auctor. ...
... ultricies et, mollis ac augue. nunc et diam quis sapien dignissim auctor. ...
...ustify-content: c
enter; } /* 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: c
enter; justify-content: c
enter; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; } result specifications specification status comment ...
CSS Box Alignment - CSS: Cascading Style Sheets
out, and grid layout. the module aims to create a consistent method of alignment across all of css. this document details the general concepts found in the specification. note: the documentation for each layout method will detail how box alignment is applied there. older alignment methods css traditionally had very limited alignment capabilities. we were able to align text using text-align, c
enter blocks using auto margins, and in table or inline-block layouts using the vertical-align property. alignment of text is now covered by the inline layout and css text modules, and for the first time in box alignment we have full horizontal and vertical alignment capabilities. if you initially learned flexbox then you may consider these properties to be part of the flexbox specification, and some ...
...ample in this example using grid layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. this space is distributed using justify-content. on the block (cross) axis the alignment of the items inside their grid areas is controlled with align-items. the first item overrides the align-items value set on the group by setting align-self to c
enter. flexbox alignment example in this example, three flex items are aligned on the main axis using justify-content and on the cross axis using align-items. the first item overrides the align-items set on the group by setting align-self to c
enter. key concepts and terminology the specification details some alignment terminology to make it easier to discuss these alignment properties outside o...
...t 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. c
enter 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, which relate to physical attributes of the screen, all of the other values are logical values and relate to the writing mode of the content. for example, when working in css grid layout, if you are working in english and set justify-content to...
Basic concepts of flexbox - CSS: Cascading Style Sheets
xis. the initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. they are in fact stretching to fill the flex container — the tallest item is defining the height of that. ...
...-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or c
enter to align them in the centre. try this in the live example — i have given the flex container a height in order that you can see how the items can be moved around inside the container. see what happens if you set the value of align-items to: stretch flex-start flex-end c
enter justify-content the justify-content property is used to align the items on the main axis, the direction in which flex-direction has set the flow. the initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or c
enter to line them up in the centre. you can also use the value space-bet...
...item. to cause an equal amount of space on the right and left of each item use the value space-around. with space-around, items have a half-size space on either end. or, to cause items to have equal space around them use the value space-evenly. with space-evenly, items have a full-size space on either end. try the following values of justify-content in the live example: flex-start flex-end c
enter space-around space-between space-evenly in the article aligning items in a flex container we will explore these properties in more depth, in order to have a better understanding of how they work. these simple examples however will be useful in the majority of use cases. next steps after reading this article you should have an understanding of the basic features of flexbox. in the next ar...
Typical use cases of Flexbox - CSS: Cascading Style Sheets
on the main axis. in the below live example we display the items at their natural size and by using justify-content: space-between make equal amounts of space between the items. you can change how the space is distributed using the space-around value, or where supported, space-evenly. you could also use flex-start to place the space at the end of the items, flex-end to place it before them, or c
enter to centre the navigation items. space distributed within the items a different pattern for navigation would be to distribute the available space within the items themselves, rather than create space between them. in this case we would use the flex properties to allow items to grow and shrink in proportion to one another as described in controlling ratios of flex items along the main axis. if...
...e the split happens. also in this example we are using margins on the flex items to create a gap between items, and a negative margin on the container in order that the items still remain flush with the right and left edges. until the gap properties from the box alignment specification are implemented in flexbox, we have to use margins in this way if we want to create a gutter between items. c
enter item before flexbox, developers would joke that the hardest problem in web design was vertical c
entering. this has now been made straightforward using the alignment properties in flexbox, as the following live example shows. you can play with the alignment, aligning the item to the start with flex-start or end with flex-end. in the future we may not need to make a container a flex container ...
... can see how the display changes by removing that class from the html. form controls flexbox is particularly useful when it comes to styling form controls. forms have lots of markup and lots of small elements that we typically want to align with each other. a common pattern is to have an <input> element paired with a <button>, perhaps for a search form or where you simply want your visitor to
enter an email address. flexbox makes this type of layout easy to achieve. i have contained my <button> and <input> field in a wrapper which i have given a border and set to display: flex. i then use the flex properties to allow the <input> field to grow, while the button does not grow. this means we have a pair of fields, with the text field growing and shrinking as the available space changes. yo...
Grid wrapper - CSS: Cascading Style Sheets
recipe download this example choices made this recipe uses the css grid minmax() function to define the grid track sizes in the grid-template-columns property. ...
...e values or viewport units will mean this wrapper grows or shrinks in response to its context. the outer two columns have a maximum size of 1fr, meaning that they will each expand to fill the remaining available space in the grid container. ...
...he outer two columns have a maximum size of 1fr, meaning that they will each expand to fill the remaining available space in the grid container. ...
<basic-shape> - CSS: Cascading Style Sheets
nclosing 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 c
enter of the circle. this defaults to c
enter 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 height (for the ry value) of the r...
... 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 height (for the ry value) of the reference box. the position argument defines the c
enter of the ellipse. this defaults to c
enter if omitted. polygon() polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# ) <fill-rule> represents the filling rule used to determine the interior of the polygon. possible values are nonzero and evenodd. default value when omitted is nonzero. each pair argument in the list represents xi and yi - the x and y axis coordinates of the ith vertex of th...
...efault value when omitted is nonzero. the required <string> is an svg path string encompassed in quotes the arguments not defined above are defined as follows: <shape-arg> = <length> | <percentage> <shape-radius> = <length> | <percentage> | closest-side | farthest-side defines a radius for a circle or ellipse. if omitted it defaults to closest-side. closest-side uses the length from the c
enter of the shape to the closest side of the reference box. for circles, this is the closest side in any dimension. for ellipses, this is the closest side in the radius dimension. farthest-side uses the length from the c
enter 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.
<length> - CSS: Cascading Style Sheets
particular for mobile devices. interpolation when animated, values of the <length> data type are interpolated as real, floating-point numbers. the interpolation happens on the calculated value. the speed of the interpolation is determined by the timing function associated with the animation. ...
...e animation. examples length unit comparison the following demo provides you with an input field in which you can
enter a <length> value (e.g. 300px, 50%, 30vw) to set the width of a result bar that will appear below it once you've pressed return. this allows you to compare and contrast the effect of different length units. ...
...sition: relative; } .inner { height: 50px; background-color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); } .result { height: 20px; background-color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); background-color: orange; display: flex; align-items: c
enter; margin-top: 10px; } .result code { position: absolute; margin-left: 20px; } .results { margin-top: 10px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-items: c
enter; height: 50px; } label { margin: 0 10px 0 20px; } javascript const inputdiv = document.queryselector('.inner'); const inputelem = document.queryselector('input');...
object-position - CSS: Cascading Style Sheets
t'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: c
enter 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 definition initial value50% 50%appli...
...fsets can be used. note: the position can be set so that the replaced element is drawn outside its box. ...
... the position can be set so that the replaced element is drawn outside its box. formal definition initial value50% 50%applies toreplaced elementsinheritedyespercentagesrefer to width and height of element itselfcomputed valueas specifiedanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples positioning image content html here we see html that includes two <img> elements, each displaying the mdn logo. <img id="object-positio...
scroll-snap-align - CSS: Cascading Style Sheets
thin its snap container’s snapport (as the alignment container). the two values specify the snapping alignment in the block axis and inline axis, respectively. if only one value is specified, the second value defaults to the same value. syntax /* keyword values */ scroll-snap-align: none; scroll-snap-align: start end; /* when two values set first is block, second inline */ scroll-snap-align: c
enter; /* global values */ scroll-snap-align: inherit; scroll-snap-align: initial; scroll-snap-align: unset; values none the box does not define a snap position in that axis. start the start alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis. end the end alignment of this box's scroll snap area, within the scroll container's snapp...
...n: inherit; scroll-snap-align: initial; scroll-snap-align: unset; values none the box does not define a snap position in that axis. start the start alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis. end the end alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis. c
enter the c
enter alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis. safari currently has the two value syntax in the wrong order, the first value being inline the second block. see bug #191865. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ none | s...
...lignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis. safari currently has the two value syntax in the wrong order, the first value being inline the second block. see bug #191865. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ none | start | end | c
enter ]{1,2} specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-align' in that specification. candidate recommendation initial definition ...
Video player styling basics - Developer guides
ideo player could be styled and be made responsive. note: in some cases some basic css is omitted from the code examples here as its use is either obvious or not specifically relevant to styling the video player. ...
...in addition, the buttons need to be pushed below the progress container so that they are visible. ...
...in addition, the buttons need to be pushed below the progress container so that they are visible. ...
<col> - HTML: Hypertext Markup Language
value is 1. deprecated attributes the following attributes are deprecated and should not be used. they are documented below for reference when updating existing code and for historical interest only. align this enumerated attribute specifies how horizontal alignment of each column cell content will be handled. possible values are: left, aligning the content to the left of the cell c
enter, c
entering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell if this attribute is not set, its value is inherited from the align of the <colgroup> element this <col> element belongs too. if there are none, the left value is assumed. note: to achieve the same e...
...ent in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell if this attribute is not set, its value is inherited from the align of the <colgroup> element this <col> element belongs too. if there are none, the left value is assumed. note: to achieve the same effect as the left, c
enter, right or justify values: do not try to set the text-align property on a selector giving a <col> element. because <td> elements are not descendant of the <col> element, they won't inherit it. if the table doesn't use a colspan attribute, use the td:nth-child(an+b) css selector. set a to zero and b to the position of the column in the table, e.g. td:nth-child(2) { text-align: right; }...
... column. possible values for this attribute are: baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. if characters are all of the size, this has the same effect as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will c
enter the text in the cell; and top, which will put the text as close to the top of the cell as it is possible. note: do not try to set the vertical-align property on a selector giving a <col> element. because <td> elements are not descendant of the <col> element, they won't inherit it. if the table doesn't use a colspan attribute, use the td:nth-child(an+b) css selector where a is the tot...
<td>: The Table Data Cell element - HTML: Hypertext Markup Language
ent itself. note: do not use this attribute as it is obsolete in the latest standard. alternatively, you can put the abbreviated description inside the cell and place the long content in the title attribute. align this enumerated attribute specifies how the cell content's horizontal alignment will be handled. possible values are: left: the content is aligned to the left of the cell. c
enter: the content is c
entered in the cell. right: the content is aligned to the right of the cell. justify (with text only): the content is stretched out inside the cell so that it covers its entire width. char (with text only): the content is aligned to a character inside the <th> element with minimal offset. this character is defined by the char and charoff attributes unimplemented (see bug 22...
...e content is stretched out inside the cell so that it covers its entire width. char (with text only): the content is aligned to a character inside the <th> element with minimal offset. this character is defined by the char and charoff attributes unimplemented (see bug 2212). the default value when this attribute is not specified is left. note: to achieve the same effect as the left, c
enter, right or justify values, apply the css text-align property to the element. to achieve the same effect as the char value, give the text-align property the same value you would use for the char. unimplemented in css3. axis this attribute contains a list of space-separated strings. each string is the id of a group of cells that this header applies to. bgcolor this attribute define...
...ifies how a text is vertically aligned inside a cell. possible values for this attribute are: baseline: positions the text near the bottom of the cell and aligns it with the baseline of the characters instead of the bottom. if characters don't descend below the baseline, the baseline value achieves the same effect as bottom. bottom: positions the text near the bottom of the cell. middle: c
enters the text in the cell. and top: positions the text near the top of the cell. to achieve a similar effect, use the css vertical-align property. width this attribute is used to define a recommended cell width. use the css width property instead. examples see <table> for examples on <td>. specifications specification status comment html living standardthe...
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. deprecated attributes align deprecated since html4obsolete since html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled. possible values are: left, aligning the content to the left of the cell c
enter, c
entering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes unimplemented (see bug 2212). if this attribute is not set, the left value is ass...
...so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes unimplemented (see bug 2212). if this attribute is not set, the left value is assumed. note: do not use this attribute as it is obsolete (not supported) in the latest standard. to achieve the same effect as the left, c
enter, right or justify values, use the css text-align property on it. to achieve the same effect as the char value, in css3, you can use the value of the char as the value of the text-align property unimplemented. bgcolor this attribute defines the background color of each cell of the column. it is one of the 6-digit hexadecimal code as defined in srgb, prefixed by a '#'. one of the six...
... header. possible values for this attribute are: baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. if characters are all of the size, this has the same effect as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will c
enter the text in the cell; and top, which will put the text as close to the top of the cell as it is possible. note: do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the css vertical-align property on it. examples please see the <table> page for examples on <tfoot>. specifications specification status comment h...
<th> - HTML: Hypertext Markup Language
> element. colgroup: the header belongs to a colgroup and relates to all of its cells. auto the default value when this attribute is not specified is auto. deprecated attributes align obsolete since html5 this enumerated attribute specifies how the cell content's horizontal alignment will be handled. possible values are: left: the content is aligned to the left of the cell. c
enter: the content is c
entered in the cell. right: the content is aligned to the right of the cell. justify (with text only): the content is stretched out inside the cell so that it covers its entire width. char (with text only): the content is aligned to a character inside the <th> element with minimal offset. this character is defined by the char and charoff attributes. the default value wh...
...ell so that it covers its entire width. char (with text only): the content is aligned to a character inside the <th> element with minimal offset. this character is defined by the char and charoff attributes. the default value when this attribute is not specified is left. note: do not use this attribute as it is obsolete in the latest standard. to achieve the same effect as the left, c
enter, right or justify values, apply the css text-align property to the element. to achieve the same effect as the char value, give the text-align property the same value you would use for the char. unimplemented in css3. axis obsolete since html5 this attribute contains a list of space-separated strings. each string is the id of a group of cells that this header applies to. note: do not us...
...ifies how a text is vertically aligned inside a cell. possible values for this attribute are: baseline: positions the text near the bottom of the cell and aligns it with the baseline of the characters instead of the bottom. if characters don't descend below the baseline, the baseline value achieves the same effect as bottom. bottom: positions the text near the bottom of the cell. middle: c
enters the text in the cell. and top: positions the text near the top of the cell. note: do not use this attribute as it is obsolete in the latest standard: use the css vertical-align property instead. width deprecated since html4, obsolete since html5 this attribute is used to define a recommended cell width. additional space can be added with the cellspacing and cellpadding properties and t...
<thead>: The Table Head element - HTML: Hypertext Markup Language
e rowgroup permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. deprecated attributes align in html 4, in html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled. possible values are: left, aligning the content to the left of the cell c
enter, c
entering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes unimplemented (see bug 2212). if this attribute is not set, the left value is ass...
...so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes unimplemented (see bug 2212). if this attribute is not set, the left value is assumed. note: do not use this attribute as it is obsolete (not supported) in the latest standard. to achieve the same effect as the left, c
enter, right or justify values, use the css text-align property on it. to achieve the same effect as the char value, in css3, you can use the value of the char as the value of the text-align property unimplemented. bgcolor this attribute defines the background color of each cell of the column. it is one of the 6-digit hexadecimal code as defined in srgb, prefixed by a '#'. one of the six...
... header. possible values for this attribute are: baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. if characters are all of the size, this has the same effect as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will c
enter the text in the cell; top, which will put the text as close to the top of the cell as it is possible. note: do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the css vertical-align property on it. examples see <table> for examples on <thead>. specifications specification status comment html living standardt...
<tt>: The Teletype Text element (obsolete) - HTML: Hypertext Markup Language
permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. ...
...mission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes examples basic example this example uses <tt> to show text
entered into, and output by, a terminal application. ...
...you can override this using css by creating a rule using the tt selector, as seen in the example overriding the default font above. user-c...
Global attributes - HTML: Hypertext Markup Language
xml:base — these are inherited from the xhtml specifications and deprecated, but kept for compatibility purposes. the multiple aria-* attributes, used for improving accessibility. ...
... list of global attributes accesskey provides a hint for generating a keyboard shortcut for the current...
...pdate, ontoggle, onvolumechange, onwaiting. list of global attributes accesskey provides a hint for generating a keyboard shortcut for the current element. this attribute consists of a space-separated list of characters. the browser should use the first one that exists on the computer keyboard layout. autocapitalize controls whether and how text input is automatically capitalized as it is
entered/edited by the user. it can have the following values: off or none, no autocapitalization is applied (all letters default to lowercase) on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words, the first letter of each word defaults to a capital letter; all other letters default to lowercase characters, all letters sh...
Digital audio concepts - Web media technologies
his process is called analog to digital conversion (a/d for short). the first factor affecting the fidelity of the captured audio is the audio bandwidth; that is, the range of audio frequencies the a/d converter is capable of capturing and converting into digital form. the audio bandwidth is also affected by the codec, if it chooses to discard any frequency bands while encoding the sound. sound
enters the computer through a microphone or other input in the form of a stream of electrons whose voltage varies to represent the amplitude of the sound wave. this analog signal is then converted into digital form by a circuit that captures the incoming wave's amplitude at regular intervals, converting that data into a number in a form that is understood by the audio recording system. each of these ca...
... the web. for details about the most important and useful ones for web developers to be familiar with, see the article guide to audio codecs used on the web. audio channels and frames there are two types of audio channel. standard audio channels are used to present the majority of the audible sound. the sound for the left and right main channels, as well as all of your surround sound speakers (c
enter, left and right rear, left and right sides, ceiling channels, and so forth) are all standard audio channels. special low frequency enhancement (lfe) channels provide the signal for special speakers designed to produce the low frequency sounds and vibration to create a visceral sensation when listening to the audio. the lfe channels typically drive subwoofers and similar devices. monophonic audio...
...frames which require 2⨉samplesize bits each, where samplesize is the number of bits each audio sample takes. therefore, for a 16-bit stereo audio recording, each sample uses 2⨉16 or 32 bits of space. this is standard left/right (l/r) stereo or simple stereo. joint stereo is a method of storing stereo audio samples in a more space-efficient manner by taking into account that usually the sound
entering each ear is similar. thus, rather than storing every bit of each channel's sample, a base amplitude and a per-channel amplitude deviation value are stored, wherein the deviation value may use fewer bits than a complete sample. there are two types of joint stereo: mid-side and intensity. over the duration of an audio file, the encoder may change which format is being used to represent the ster...
Mobile first - Progressive web apps (PWAs)
on for mobile as much as possible, it is also a good idea to not include visual effects such as shadows, animations, and gradients. you should at least consider it as an option, especially if you are experiencing slow or laggy performance when your application is running on mobile. control mechanisms control mechanisms are another large constraint on mobile devices. anyone who has ever tried to
enter data into a form on a mobile device, or even just navigated around a complex site, knows this well. therefore we should try to simplify things on mobile, keeping each view cut down to a single, simple purpose where possible, and reducing the amount of typing users are expected to do. the latter will please desktop users as well as mobile users! usage context on top of everything else, you must ...
...ve to the <body> element.) adding a mobile first layout the above layout is fine for narrower layouts, but it doesn't work very well when you get wider than about 480px. ...
... } nav li a { padding: 0 10px; font-size: 2em; } } the first one cancels out the css display: table behaviour, hides the links to jump to and from the navigation, as they are not needed anymore in the wider layout, and changes the vertical menu to a horizontal menu that makes better use of the horizontal space available. the second one sets the width of the content at 600px and c
enters it in the space available, then adds in a gradient and a nice background image for the wider layout. this is a key point - the background image is 126kb, and not ideal for narrow layouts. having it included in the "600 pixels or wider" media query means that narrow screen devices won't read that media query, so they will not waste their time and bandwidth downloading that image. note: firefox'...
transform-origin - SVG: Scalable Vector Graphics
the transform-origin svg attribute sets the origin for an item’s transformations. note: as a presentation attribute in svg, transform-origin corresponds in syntax and behavior to the transform-origin property in css, and can be used as css property to style svg. see the css transform-origin property for more information. usage notes values [ <length-percentage> | left | c
enter | right | top | bottom ] | [ [ <length-percentage> | left | c
enter | right ] && [ <length-percentage> | top | c
enter | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> default value 50%, 50% animatable yes the transform-origin property may be specified using one, two, or three values, where each value represents an offset. offsets that are not exp...
... <length> | <percentage> default value 50%, 50% animatable yes the transform-origin property may be specified using one, two, or three values, where each value represents an offset. offsets that are not explicitly defined are reset to their corresponding initial values. if two or more values are defined and either no value is a keyword, or the only used keyword is c
enter, then the first value represents the horizontal offset and the second represents the vertical offset. one-value syntax: the value must be a <length>, a <percentage>, or one of the keywords left, c
enter, right, top, and bottom. two-value syntax: one value must be a <length>, a <percentage>, or one of the keywords left, c
enter, and right. the other value must be a <length>, ...
... three-value syntax: the first two values are the same as for the two-value syntax. the third value must be a <length>. it always represents the z offset. ...
<circle> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0; animatable: yes r the radius of the circle. a value lower or equal to zero disables rendering of the circle. ...
... value type: <length>|<percentage> ; default value: 0; animatable: yes r the radius of the circle. a value lower or equal to zero disables rendering of the circle. ...
... value type: <length>|<percentage> ; default value: 0; animatable: yes r the radius of the circle. a value lower or equal to zero disables rendering of the circle. value type: <length> ; default value: 0; animatable: yes pathlength the total length for the circle's circumference, in user units. ...
SVG documentation index - SVG: Scalable Vector Graphics
ated, svg, svg attribute the contentstyletype attribute specifies the style sheet language for the given document fragment on the <svg> element. 51 cursor svg, svg attribute the cursor attribute specifies the mouse cursor displayed when the mouse pointer is over an element. 52 cx svg, svg attribute the cx attribute define the x-axis coordinate of a c
enter point. 53 cy svg, svg attribute the cy attribute define the y-axis coordinate of a c
enter point. 54 d svg, svg attribute the d attribute defines a path to be drawn. 55 data-* attribute, svg the data-* svg attributes are called custom data attributes. they let svg markup and its resulting dom share information that standard attributes ...
... 301 <animatetransform> element, svg, svg animation the animatetransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing. 302 <circle> circle, element, graphics, reference, svg the <circle> svg element is an svg basic shape, used to draw circles based on a c
enter point and a radius. 303 <clippath> element, reference, svg the <clippath> svg element defines a clipping path, to be used by the clip-path property. 304 <color-profile> element, needsexample, reference, svg the <color-profile> element allows describing the color profile used for the image. 305 <cursor> deprecated, element, needsexample, ref...
... authors to specify the time at which particular elements are to be discarded, thereby reducing the resources required by an svg user agent. this is particularly useful to help svg viewers conserve memory while displaying long-running documents. 309 <ellipse> element, reference, svg, svg graphics the <ellipse> element is an svg basic shape, used to create ellipses based on a c
enter coordinate, and both their x and y radius. 310 <feblend> element, svg, svg filter the <feblend> svg filter primitive composes two objects together ruled by a certain blending mode. this is similar to what is known from image editing software when blending two layers. the mode is defined by the mode attribute. 311 <fecolormatrix> element, svg, svg filter t...
Basic shapes - SVG: Scalable Vector Graphics
dth 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 c
enter of the circle. cy the y position of the c
enter 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 posit...
... 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. ...
...e. 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 c
enter of the ellipse. cy the y position of the c
enter 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 group of connected straight lines. since the list of points can g...
Paths - SVG: Scalable Vector Graphics
example: <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 315 l 110 215 a 30 50 0 0 1 162.55 162.45 l 172.55 152.45 a 30 50 -45 0 1 215.1 109.9 l 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> </svg> the example shows a <path> element that goes diagonally across the page. at its c
enter, two elliptical arcs have been cut out (x radius = 30, y radius = 50). in the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. for the second arc, though, the x-axis-rotation is set to -45 degrees. this rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by t...
...or the second arc, though, the x-axis-rotation is set to -45 degrees. this rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image. for the unrotated ellipse in the image above, there are only two different arcs and not four to choose from because the line drawn from the start and end of the arc goes through the c
enter of the ellipse. in a slightly modified example the two ellipses that form the four different arcs can be seen: <svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"> <path d="m 10 315 l 110 215 a 36 60 0 0 1 150.71 170.29 l 172.55 152.45 a 30 50 -45 0 1 215.1 109.9 l 315 10" stroke="black" fill="green" stroke-width="2" fill-op...
...nded so it could reach the start→end points. the interactive codepen at the bottom of this page demonstrates this well. to determine if an ellipse's radii are large enough to require expanding, a system of equations would need to be solved, such as this on wolfram alpha. this computation is for the non-rotated ellipse with start→end (110, 215)→(150.71, 170.29). the solution, (x, y), is the c
enter of the ellipse(s). the solution will be imaginary if the ellipse's radii are too small. this second computation is for the non-rotated ellipse with start→end (110, 215)→(162.55, 162.45). the solution has a small imaginary component because the ellipse was just barely expanded. the four different paths mentioned above are determined by the next two parameter flags. as mentioned earlier, there...
SVG In HTML Introduction - SVG: Scalable Vector Graphics
olor:red; } #err { display:none; } body.invalid #err { display:inline; } </style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <legend>html form</legend> <p><label>
enter something:</label> <input type="text"> <span id="err">incorrect value!</span></p> <p><input type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offse...
...="30" style="fill:url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript. the only interesting part is the <svg> element it contains. this element and its children are declared to be in the svg namespace. the element contains a gradient and two shapes filled with the gradient. the gradient color stops have their colors set by css. when the user
enters something incorrect into the form, the script sets the invalid attribute on the <body>, and a style rule changes the gradient end-stop color to red. (another style rule makes an error message appear.) this approach has the following points in its favor: we have taken a regular html form that could have been part of an existing web site, and added an attractive, interactive background the ap...
...("http://www.w3.org/2000/svg", "image"); img.setattributens("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); details the viewbox attribute establishes a logical coordinate system which the svg picture's coordinates are relative to. in this case our picture is laid out in a 100 by 100 viewport. the preserveaspectratio attribute specifies that the aspect ratio must be preserved by c
entering the picture in the available size, sizing to the maximum of the height or width and then cutting off any overflow. the style attribute pins the svg element to the background of the form. related links another svg in html example: a swarm of motes working example that works in both mozilla and in internet explorer with adobe's svg viewer installed. (for inline svg to work in both firefox ...
Display a Popup - Archive of obsolete content
the button. function handleclick(state) { text_entry.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event to the panel's script, so the // script can prepare the panel for display. text_entry.on("show", function() { text_entry.port.emit("show"); }); // listen for messages called "text-
entered" coming from // the content script. the message payload is the text the user //
entered. // in this implementation we'll just log the text to the console. text_entry.port.on("text-
entered", function (text) { console.log(text); text_entry.hide(); }); the content script "get-text.js" looks like this: // when the user hits return, send the "text-
entered" // message to main.js. // the messag...
...it means that the panel's about // to be shown. // // set the focus to the text area so the user can // just start typing. ...
Dialogs and Prompts - Archive of obsolete content
is page has some code snippets used to display and process dialog boxes. see working with windows in chrome code for introductory information and more discussion and examples. describing dialog windows dialogs in mozilla whenever you want to create a dialog in your application, use <dialog> (instead of usual <window>) as root element in the xul file. this will: handle a few keyboard events (
enter/esc and more), which is good for keyboard accessibility. add ok and cancel buttons in an order that is consistent with os default (but the button set and layout is highly customizable, see below). simple dialog code the following xul code defines a simple dialog with two buttons, ok and cancel (buttons="accept,cancel" attribute on dialog). <?xml version="1.0"?> <?xml-stylesheet href="chrome:...
...s="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="mydialogid" title="my dialog" ondialogaccept="return onok();" onload="onload();" persist="screenx screeny width height" windowtype="mydialogwindowtype"> <script type="application/javascript" src="chrome://myext/content/mydialog.js"/> <grid> <columns><column/><column/></columns> <rows> <row align="c
enter"><label value="name:"/><textbox id="name"/></row> <row align="c
enter"><label value="description:"/><textbox id="description"/></row> <row align="c
enter"><spacer/><checkbox id="enabled" label="check to enable"/></row> </rows> </grid> </dialog> mydialog.js: // called once when the dialog displays function onload() { // use the arguments passed to us by the caller document.g...
Forms related code snippets - Archive of obsolete content
docclick); })(); </script> <style type="text/css"> table.zdp-calendar { border: 1px solid #666666; border-collapse: collapse; background-color: #cccccc; cursor: default; font-family: verdana; font-size: 12px; } table.zdp-calendar th { border: 1px solid #666666; font-weight: bold; background-color: #ff6666; } table.zdp-calendar td { border: 1px solid #666666; text-align: c
enter; } table.zdp-calendar caption { background-color: #333333; padding: 2px; } span.zdp-current-month { display: inline-block; width: auto; height: 16px; padding: 0 2px; line-height: 16px; margin: 0 auto; background-color: #999999; border-radius: 5px; } span.zdp-increase-month, span.zdp-increase-year, span.zdp-decrease-month, span.zdp-decrease-year { display: block; padding...
... padding: 0 2px; height: 16px; font-weight: bold; background-color: #999999; border-radius: 5px; cursor: pointer; } span.zdp-decrease-month, span.zdp-decrease-year { float: left; margin-right: 2px; } span.zdp-increase-month, span.zdp-increase-year { float: right; margin-left: 2px; } td.zdp-active-cell { padding: 1px 3px; cursor: pointer; color: #000000; text-align: c
enter; vertical-align: middle; } td.zdp-active-cell:hover { background-color: #999999; cursor: pointer; } td.zdp-empty-cell { cursor: not-allowed; } </style> </head> <body> <form name="myform"> <p> from: <input type="text" readonly class="date-picker" name="date-from" /> to: <input type="text" readonly class="date-picker" name="date-to" /> </p> </form> </body> </html> note: t...
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
16 pixels. only the gnome theme has a set of large icons that are 24x24 pixels. only a few icons have different states (rows). the disabled state for most buttons is handled with css. the icon sets have different paddings for their icons. the one for windows has 19x19 pixel frames, while the mac os ones are 20x20 pixels. ...
...this is also the reason this is the only theme that still has colorful icons for its buttons. now let's look at the css work involved in a toolbar that works on the aforementioned systems. ...
Handling Preferences - Archive of obsolete content
s most common high-level preferences through the preferences window and other parts of its ui. in reality there are thousands of other preferences firefox handles that are not readily available to the user. these are hidden because they are too advanced or obscure for regular users to manage, and because the preferences window should be as easy to use as possible. to access all other preferences,
enter "about:config" into the location bar. this xul page lists all the preferences defined in the firefox installation, allowing you to change them as you please. as the warning message states, you should be very careful when changing preferences. incorrect values can make firefox behave oddly or break altogether. you can type on the "filter" textbox to search for specific preferences. if you type th...
..., you need to take into account that the opening behavior of a preferences window is different depending on the operating system. this is how we do it: openpreferences : function() { if (null == this._preferenceswindow || this._preferenceswindow.closed) { let instantapply = application.prefs.get("browser.preferences.instantapply"); let features = "chrome,titlebar,toolbar,c
enterscreen" + (instantapply.value ? ",dialog=no" : ",modal"); this._preferenceswindow = window.opendialog( "chrome://xulschoolhello/content/preferenceswindow.xul", "xulschoolhello-preferences-window", features); } this._preferenceswindow.focus(); }, this code is based on the code that opens preference windows from the add-ons manager. it does 2 things: check...
Setting Up a Development Environment - Archive of obsolete content
rt site. we'll also delve deeper in this topic later on in this section. to make "make install" work on non-windows systems, you need an extra step. the install process requires using an environment variable called ostype, which is not exported. long story short, if you want to run it from a command line, you need to run: export ostype; make install and in the command in komodo, you should
enter the following: bash -c "export ostype; make install" the export command won't work correctly unless you use "bash -c". the file makefile specifies which profile folder the add-on will be reinstalled to. this is set in the profile_dir variable (set to "xulschool-dev" in this case). when creating a development profile for your add-on, make sure you choose an easy name for the profile folder,...
...install as many firefox versions as you want, and mix profiles and versions. on windows and linux it's easy to create shortcuts for every profile you create, using the commands described at http://kb.mozillazine.org/command_line_arguments . for mac os x developers, there is also a way to set up "shortcuts". you can do this by opening the automator application, choosing run shell script and then
entering the profile-loading script in the textbox: /applications/firefox.app/contents/macos/firefox-bin -no-remote -p myprofile > /dev/null & you can change "/dev/null" to a file location, in case you want to see dump output from firefox, or other extensions. the last & prevents automator from waiting for your firefox session to finish. save this as an application, not a workflow. and you probab...
The Essentials of an Extension - Archive of obsolete content
ale files work in the same way, and you don't need to specify skin names or locale names. so, to access the dtd file in the hello world extension, the chrome path is chrome://xulschoolhello/locale/browseroverlay.dtd. firefox knows what locale to look for. here's an interesting experiment. open a new firefox tab, type chrome://mozapps/content/downloads/downloads.xul on your location bar and press
enter. surprised? you just opened the downloads window in a firefox tab! you can access any chrome file by just typing its uri in the location bar. this can come in handy if you want to inspect script files that are part of firefox, other extensions, or your own. most of these files are opened as text files, with the exception of xul files, which are executed and displayed like you would normally see t...
...or all xul elements and windows. forgetting to include this file in a xul window usually leads to interesting and often unwanted results. in our case we don't really need to include it, since we're overlaying the main browser xul file, and that file already includes this global css. at any rate it's better to always include it. this way it's harder to make the mistake of not including it. you can
enter the chrome path in the location bar and inspect the file if you're curious. this covers all of the files in the hello world extension. now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. but first, a little exercise. exercise make the following changes to the example extension: edit the welcome message...
Signing an extension - Archive of obsolete content
by following the steps below. the certificate which the author purchased from verisign was directly installed to firefox. click the firefox button and select options. in the options window, open the advanced panel, then select the encryption tab. click view certificates. in the certificate manager, select the your certificates tab. select your organization's certificate and click backup.
enter the file name, e.g. codesign.p12.
enter the password to protect your certificate backup and click ok. a p12 file will be exported on your desktop. create a certificate database first, create a certificate database that will be used for signing. mkdir keystore cd keystore nss-certutil -n -d . you will be asked for the password. use a strong password to protect your database. then cert8.db, ...
... the directory that contains your certificate database files) \ -k (your certificate nickname) \ -p (your certificate password) \ -x -z (output path/name of signed file) \ (path to your extension working directory that contains chrome directory, chrome.manifest file, install.rdf file, etc.) writing your password directly in the script is dangerous. for production, use such a code: echo "
enter password for object signing:" read mypassword nss-signtool \ -d /volumes/codesign/keystore \ -k "my company's verisign, inc. id" \ -p $mypassword \ -x -z ~/desktop/myextension/dest/myextension-1.0.xpi \ ~/desktop/myextension/source unset mypassword then a signed xpi file will be generated. verify drag and drop the xpi file into the content area of firefox. on the installation dialog, you ...
Adding preferences to an extension - Archive of obsolete content
in our case, we have a single preference, the stock symbol to monitor. preferences are identified by name; in this case, the name is "extensions.st...
... "extensions.stockwatcher2.symbol". the actual user interface is described in the <prefpane> block. the <hbox> element is used to lay out the user interface by indicating that the widgets inside it should be positioned horizontally, next to each other in the window. our dialog has two widgets in it. the first is a label describing the textbox. the second is the textbox itself, in which the user
enters the symbol. the preference property ties the textbox to the "pref_symbol" <preference> element and to the "extensions.stockwatcher2.symbol" preference. this lets the preference value automatically be updated to reflect the content of the textbox. alternative method: inline options requires gecko 7(firefox 7 / thunderbird 7 / seamonkey 2.4) you could use inline options for this prefer...
Bookmark Keywords - Archive of obsolete content
eby trigger a google search for the words "spam and eggs." because these tools require bookmarks with specific keywords in order to work, they will be referred to hereafter as keymarks, as distinct from regular bookmarks. laying the groundwork we're going to pick a relatively easy example to illustrate this process: a keymark that will let the user jump straight to a specific bugzilla entry by
entering its number. the quickest way to start is to simply look up any random bug in the bugzilla system-- the actual number doesn't matter. see figure 1 for an example. to file this bookmark open the "bookmarks" menu in the browser and select "add bookmark," or by of use the keyboard equivalent (e.g., <tt>cmd-d</tt> on macintosh). this will add a bookmark of the current page to the list of bookmarks...
...ted, is shown in figure 7. once this result page has been bookmarked, we need only adjust the boookmark's properties. in this case, we'll give it a keyword and title of google and replace the term "geitost" with the %s, as shown (with extra highlighting) in figure 8. now we can run google searches straight from the address bar. these searches can be as complex as google will tolerate, since the
entered data will be converted to url-encoded text before it's sent to the google servers. thus we could type any of the following into the address bar and get back useful results: <tt>google geitost</tt> <tt>google mozilla keyword bookmark</tt> <tt>google bookmark site:developer.netscape.com</tt> <tt>google netscape xml support -site:netscape.com</tt> a few examples in the course of writing th...
Drag and Drop JavaScript Wrapper - Archive of obsolete content
op is done at a lower level. note that you can only use these libraries from within xul loaded via a chrome url. <script src="chrome://global/content/nsdraganddrop.js" /> <script src="chrome://global/content/nstransferable.js" /> this drag and drop library creates an object stored in the variable nsdraganddrop. the object contains a series of functions, one for each event handler (except for drag
enter where it has nothing special to do). each of the functions takes two parameters, the first is the event object and the second is an observer object that you create. more on that in a moment. the following is an example of calling the nsdraganddrop object. <button label="drag me" ondraggesture="nsdraganddrop.startdrag(event,buttonobserver);" /> the function startdrag will be called when a drag st...
...the functions are implemented by the nsdraganddrop object, which is declared in the file nsdraganddrop.js, which was included in one of the script tags. they handle the event, handle the xpcom interfaces and pass a simpler data structure to functions of the observer object. the observer is an object that you declare yourself. in the above examples, this...
Drag and Drop - Archive of obsolete content
gesture; this is the html 5 spec name for the event and may be used in html or xul; however, for backward compatibility with older versions of firefox, you may wish to continue using ondraggesture in xul. ondragover this event handler is called for an element when something is being dragged over top of it. if the object can be dropped on the element, the drag session should be notified. ondrag
enter called for an element when the mouse pointer first moves over the element while something is being dragged. this might be used to change the appearance of the element to indicate to the user that the object can be dropped on it. ondragexit called for an element when the mouse pointer moves out of an element while something is being dragged. the is also called after a drop is complete so that...
...is used to get and set properties of the drag that is currently occuring. the following properties and methods are available: candrop set this property to true if the element the mouse is currently over can accept the object currently being dragged to be dropped on it. set the value to false if it doesn't make sense to drop the object on it. this should be changed in the ondragover and ondrag
enter event handlers. dragaction set to the current action to be performed, which should be one or more of the constants described earlier. this can be used to provide extra feedback to the user. numdropitems the number of items being dragged. for example, this will be set to 5 if five bookmarks are being dragged. getdata(transfer,index) get the data being dragged. the first argument should be...
jspage - Archive of obsolete content
et||a.fromelement; break;case"mouseout":l=a.relatedtarget||a.toelement;}if(!(function(){while(l&&l.nodetype==3){l=l.parentnode;}return true;}).create({attempt:browser.engine.gecko})()){l=false; }}}}return $extend(this,{event:a,type:j,page:i,client:c,rightclick:e,wheel:h,relatedtarget:l,target:g,code:b,key:m,shift:a.shiftkey,control:a.ctrlkey,alt:a.altkey,meta:a.metakey}); }});event.keys=new hash({
enter:13,up:38,down:40,left:37,right:39,esc:27,space:32,backspace:8,tab:9,"delete":46});event.implement({stop:function(){return this.stoppropagation().preventdefault(); },stoppropagation:function(){if(this.event.stoppropagation){this.event.stoppropagation();}else{this.event.cancelbubble=true;}return this;},preventdefault:function(){if(this.event.preventdefault){this.event.preventdefault(); }else{this.e...
...eypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouse
enter:{base:"mouseover",condition:a},mouseleave:{base:"mouseout",condition:a},mousewheel:{base:(browser.engine.gecko)?"dommousescroll":"mousewheel"}}); })();element.properties.styles={set:function(a){this.setstyles(a);}};element.properties.opacity={set:function(a,b){if(!b){if(a==0){if(this.style.visibility!="hidden"){this.style.visibility="hidden"; }}else{if(this.style.visibility!="visible"){this.style...
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
avascript console the javascript console can show the full log list or just errors, warnings, and messages. the error message in figure 1 says that at aol.com, line 95 tries to access an undefined variable called is_ns70. clicking on the link will open mozilla's internal view source window with the offending line highlighted. the console also allows you to evaluate javascript. to evaluate the
entered javascript syntax, type in 1+1 into the input field and press evaluate, as figure 2 shows. figure 2. javascript console evaluating mozilla's javascript engine has built-in support for debugging, and thus can provide powerful tools for javascript developers. venkman, shown in figure 3, is a powerful, cross-platform javascript debugger that integrates with mozilla. it is usually bundled with ...
...n. --- insertimage inserts an image at the cursor's position. url of the image to use insertorderedlist inserts an ordered list (<ol>) element at the cursor's position. --- insertunorderedlist inserts an unordered list (<ul>) element at the cursor's position. --- italic toggles the selection's italicize attribute. --- justifyc
enter c
enters the content at the current line. --- justifyleft justifies the content at the current line to the left. --- justifyright justifies the content at the current line to the right. --- outdent outdents the block where the caret is. --- redo redoes the previous undo command. --- removeformat removes all formatting fr...
Mozilla Crypto FAQ - Archive of obsolete content
to that request. where can i learn more about u.s. export controls on encryption software? for more information on u.s. export control of encryption software and related topics, see the following online references: the itar, ear and encryption export archive maintained by the electronic freedom foundation (eff). the cryptography policy page maintained by the electronic privacy information c
enter (epic). the encryption page maintained by the c
enter for democracy and technology (cdt). the following books may also be of interest if you want to know more about the history and politics of u.s. export control of encryption software: privacy on the line: the politics of wiretapping and encryption, by whitfield diffie and susan landau. provides historical context and technical background f...
...ting to u.s. encryption policy and related topics. building in big brother: the cryptographic policy debate, by lance hoffman (ed.). an earlier (circa 1995) collection of essays and public documents, with a concentration on the clipper chip controversy and the digital telephony act. cryptography & liberty 2000: an international survey of encryption policy, by the electronic privacy information c
enter. the latest in a series of annual surveys of government policies relating to encryption, covering over a hundred countries. the limits of trust: cryptography, governments, and electronic commerce, by stewart baker and paul hurst. an in-depth (but badly outdated) discussion of the legal framework for regulation of cryptography in various countries around the world, including the u.s. see the ep...
Using Breakpoints in Venkman - Archive of obsolete content
lity to examine variables—function return values, errors, counters, variable scopes—as they change over the course of the script execution. the onflipx function in figure 1, for example, uses the variable newsign to figure out what image to use for the fish. when you set a breakpoint at line 81, you can start animation on the web page in the browser window and see venkman stop execution as it
enters the onflipx function. stopped there, venkman displays the value of the newsign variable as "1" in the local variables view. using breakpoints and the interactive view, you can change the values of the variables that venkman displays (only in the context of the debugging environment itself) and see how these changes affect the execution of the code. for more information about the sorts of actio...
... thrown an exception from the breakpoint script. the log result checkbox tells venkman you want the result of the script to show up in the interactive session view. when used with the continue regardless of result option, the breakpoint can be used as a simple log message. the number of times the breakpoint has been hit is passed in as a parameter to the breakpoint script. to reset the count,
enter a 0 in the "trigger count" field. meta comments you can also embed scripted breakpoints directly into the source code you are debugging by using a venkman facility called meta comments. meta comments are specially formatted comments that pull in the script named after the comment and specify how to treat the output of that script. the following meta comment types are available: the //@jsd_log...
align - Archive of obsolete content
children will be aligned vertically. for boxes that have vertical orientation, it specifies how its children will be aligned horizontally. start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. c
enter extra space is split equally along each side of the child elements, resulting in the children being placed in the c
enter of the box. end child elements are placed on the right or bottom edge of the box. if the box is larger than the total size of the children, the extra space is placed on the left or top side. baseline thi...
...box. for a horizontal box, the children are stretched to be the height of the box. for a vertical box, the children are stretched to be the width of the box. if the size of the box changes, the children stretch to fit. use the flex attribute to create elements that stretch in the opposite direction. left the elements are aligned on their left edges. c
enter the elements are c
entered 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. ...
Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog c
enterwindowonscreen checkadjacentelement clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirst...
...ssionresultat getsessionstatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsearchcomplete ontext
entered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogre...
ContextMenus - Archive of obsolete content
a context menu. when using the mouse to open a context menu, the context is the element that was clicked. when using the keyboard, the context is the element in the window that is currently focused. although there are several ways to open a context menu, a single event may be used to listen for any of these situations; the 'contextmenu' event is fired in any case. <hbox id="container" align="c
enter" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attached using the oncontextmenu attribute. as textboxes have a context menu built in, the event will fire before an attempt to open the context menu. however, the event will also fire when the label is right-click...
...t menu within the same document. in the example, a context menu is attached to a grid. <window id="main-window"> <popupset> <menupopup id="ins-del-menu"> <menuitem label="insert"/> <menuitem label="delete"/> </menupopup> </popupset> </window> <grid context="ins-del-menu"> <columns> <column/> <column flex="1"/> </columns> <rows id="rows"> <row align="c
enter"> <label value="name:"/> <textbox/> </row> </rows> </grid> the same context menu can be attached to multiple elements. just set the context attribute on those elements you want the context menu to apply to. one technique is to attach a context menu to an entire document area. for instance, the firefox browser applies a single context menu to the browser area which displays we...
Box Model Details - Archive of obsolete content
aning for elements that are directly inside a box or an element that is a type of box. layout examples using spacers example 3 : source view <hbox> <button label="one"/> <spacer style="width: 5px"/> <button label="two"/> </hbox> here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels. you could also set margins using the css margin property. c
entering buttons example 4 : source view <hbox pack="c
enter" align="c
enter" flex="1"> <button label="look at me!"/> <button label="push me!"/> </hbox> this example contains a horizontal box with two buttons in it, contained inside a flexible box. the box has the pack attribute which is used to c
enter the buttons horizontally. the align attribute aligns the buttons vertically. the result is that th...
...this example will work with a vertical box as well, although the second button will be underneath the first one, instead of beside it. ...
Content Panels - Archive of obsolete content
from a different file. set the url to appear in the frame with the src attribute. this url may point to any kind of file, although it will usually point to an html file or another xul file. you can use a script to change the contents of the iframe without affecting the main window. in the mozilla browser window, the area where the web page is displayed is created by using an iframe. when the user
enters a url or clicks on a link in a document, the source of the frame is changed. iframe example example 1 : source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back" /> <toolbarbutton label="forward" /> <textbox id="urlfield" /> </toolbar> </toolbox> <iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1" /> the example here has created a ...
...orward button and a field for typing is urls has been added to the only toolbar (we'll learn about toolbar in a later section). the web pages would appear inside the iframe. in this case, the file index.html would appear by default. this example isn't functionally complete. next, we would want to add script which changes the src attribute at the desired time, for example when the user presses the
enter key. browsers there is a second type of content panel, using the browser tag. you would use this when you want to create a frame that displays content like a browser. actually, the iframe can do this too, but the browser has a variety of additional features. for example, the browser maintains a page history for use with back and forward buttons. the browser can also load pages with referers ...
Creating Dialogs - Archive of obsolete content
e application is running on. in addition, the opendialog() function can take additional arguments beyond the first three. these arguments are passed to the new dialog and placed in an array stored in the new window's arguments property. you can pass as many arguments as you wish. this is a convenient way to supply default values to the fields in the dialog. var somefile=document.getelementbyid('
enterfile').value; window.opendialog("chrome://findfile/content/showdetails.xul","showmore", "chrome",somefile); in this example the dialog showdetails.xul is displayed. it's passed one argument, somefile, which was taken from the value of an element with the id
enterfile. in a script used by the dialog, we can then refer to the argument using the window's arguments property. for e...
...ample above, you will find that the dook() function is called when the ok button is pressed and the docancel() function is called when the cancel button is pressed. the two functions dook() and docancel() both return true, which indicates that the dialog should be closed. if the dialog shouldn't be closed, false should be returned instead. this would be used, for example, if an invalid value was
entered in a field in the dialog. amongst other useful attributes are buttonlabelaccept - label to appear on the accept button egsave buttonaccesskeyaccept - access key to use for the accept button egs defaultbutton - button is activated when the
enter key is pressed note: the label attributes are required by remote sites and are probably missing in the above examples due to bug 224996. exam...
Keyboard Shortcuts - Archive of obsolete content
l examples: <keyset> <key id="copy-key" modifiers="control" key="c"/> <key id="explore-key" modifiers="control alt" key="e"/> <key id="paste-key" modifiers="accel" key="v"/> </keyset> keycode attribute the key attribute is used to specify the key that must be pressed. however, there will also be cases where you want to refer to keys that cannot be specified with a character (such as the
enter key or the function keys). the key attribute can only be used for printable characters. another attribute, keycode can be used for non-printable characters. the keycode attribute should be set to a special code which represents the key you want. a table of the keys is listed below. not all of the keys are available on all keyboards. vk_cancel vk_back vk_tab vk_clear v...
...ction keys). the key attribute can only be used for printable characters. another attribute, keycode can be used for non-printable characters. the keycode attribute should be set to a special code which represents the key you want. a table of the keys is listed below. not all of the keys are available on all keyboards. ...
List Controls - Archive of obsolete content
in" /> </menupopup> </menulist> this menulist will contain four choices, one for each menuitem element. to show the choices, click the arrow button on the menulist. when one is selected, it appears as the choice in the menulist. the selected attribute is used to indicate the value that is selected by default. editable menulist by default, you can only select choices from the list. you cannot
enter your own text by typing it in. a variant of the menulist allows editing the text in the field. for example, the url field in the browser has a drop-down for selecting previously typed urls, but you can also type them in yourself. to create an editable menulist, add the editable attribute as follows: example 6 : source view <menulist editable="true"> <menupopup> <menuitem label="www.mozilla.
...hem in yourself. to create an editable menulist, add the editable attribute as follows: example 6 : source view <menulist editable="true"> <menupopup> <menuitem label="www.mozilla.org" /> <menuitem label="www.xulplanet.com" /> <menuitem label="www.dmoz.org" /> </menupopup> </menulist> the url field created here has three pre-populated choices that the user can select or they can
enter one of their own by typing it into the field. the text the user
enters is not added as a new choice. because the label attribute was not used in this example, the default value will be blank. in the next section, we'll learn about creating progress meters. « previousnext » ...
Manipulating Lists - Archive of obsolete content
the tabbox's selectedtab property instead. or, use the selectedpanel property to get the selected panel, that is, return the content associated with the tab. changing the selection all of the selection related properties described above may also be assigned a new value to change the selection. in the next example, the selectedindex property of a radiogroup element is changed based on the value
entered in a textbox. this code isn't foolproof though; for example it doesn't check if the value
entered is out of range. you will want to make sure that you add this kind of error checking. example 3 : source view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } ...
...e isn't foolproof though; for example it doesn't check if the value
entered is out of range. you will want to make sure that you add this kind of error checking. example 3 : source view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="c
enter"> <label value="
enter a number from 1 to 3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <radiogroup id="level"> <radio label="excellent"/> <radio label="good"/> <radio label="poor"/> </radiogroup> listboxes also support multiple selection and the functions of the nsidomxulmultiselectcontrolelement interface. this interface provides a number of...
More Wizards - Archive of obsolete content
lues of the fields on all pages will be remembered. thus, you do not have to load and save information between pages. however, you may want to do some validation of each field on each page. for this, use the handlers described in the previous section. if a field is invalid, you might display an alert. in some cases, it would be more convenient to disable the next button until valid input has been
entered. the wizard has a property canadvance, which can be set to true to indicate that the next button should be enabled. if set to false, the next button is disabled. you can change the property when invalid or valid data has been
entered. in the following example, the user must
enter a secret code into a textbox on the first page of the wizard. the function checkcode() is called whenever the first ...
...both properties are adjusted automatically as you switch pages. thus, the back button will be disable...
Using the Editor from XUL - Archive of obsolete content
e listener. this only happens for situations where the nseditorshell is used (i.e. not for text widgets): nseditorshellmouselistener (as a nsidommouselistener) note: starting in gecko 12, the editor refuses any events sent by unprivileged content. nstexteditorkeylistener this event listener handles key presses for typing, and other editing operations (backspace, delete,
enter/return). cases that it does not handle explicitly it passes on to nshtmleditor::editorkeypress(), which is where normal typing keys end up. note that it only responds to the keypress event; keydown and keyup events are ignored. nstexteditormouselistener the mouse listener is used to do middle-mouse paste (which is a unix copy/paste feature). this happens in response to mouseclick with button 2.
...wed by a <br> when necessary. when handling key presses, this will just insert a single character. we fall out of the willdoaction() call, and drop into willdoaction(), which, for text insertion, does nothing. the last thing that happens on a keypress is that nstexteditorkeylistener::keypress() calls scrollselectionintoview(), which, as the name suggests, ensures that the text that was just
entered is visible. original document information author(s): editor team last updated date: july 25, 2000 copyright information: copyright (c) editor team ...
attribute.align - Archive of obsolete content
. 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. parameters start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. c
enter extra space is split equally along each side of the child elements, resulting the children being placed in the c
enter of the box. end child elements are placed on the right or bottom edge of the box. if the box is larger than the total size of the children, the extra space is placed on the left or top side. baseline this value applies to horizontally oriented boxes only. it causes the child ele...
...retched to fit the size of the box. for a horizontal box, the children are stretched to be the height of the box. for a vertical box, the children are stretched to be the width of the box. if the size of the box changes, the children stretch to fit. use the flex attribute to create elements that stretch in the opposite direction. left: (deprecated) the elements are aligned on their left edges. c
enter: (deprecated) the elements are c
entered horizontally. right: (deprecated) the elements are aligned on their right edges. ...
key - Archive of obsolete content
entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. key type: character the character that must be pressed. this should be set to a displayable character. keycode type: string key code for keys that do not have displayable characters, such as the
enter key or function keys, use this attribute instead of the key attribute. valid keys are listed at keyboard shortcuts. keytext type: string a label for the keyboard shortcut. this text would appear next to a menuitem label if that menuitem is associated with the key element via its key attribute. modifiers type: space-separated list of the values below a list of modifier keys that ...
...ist of modifier keys that should be pressed to invoke the keyboard shortcut. multiple keys may be separated by spaces or commas. keys will map to other keys on platforms that do not have them. shift: the shift key. alt: the alt key. on the macintosh, this is the option key. on macintosh this can only be used in conjunction with another modifier, since alt+letter combinations are reserved for
entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. os: windows logo key on windows, super or hyper key on linux. this shouldn't be specified directly because it may conflict with system wide shortcut key. accel: the key used for keyboard shortcuts on the user's platform, which is control on windows and linux, and command on...
label - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
...its left side. monospace this class causes the text to be displayed in a monospace font. plain this class causes the element to be displayed with no border or margin. small-margin this class causes the text to be displayed with a smaller margin. text-link labels with this class may be focused and the click handler run or the address in the href attribute opened on a mouse click or
enter key press. labels will appear like a link (blue and underlined). related elements description attributes label interfaces nsiaccessibleprovider, nsidomxullabelelement notes labels are not focusable note: starting in gecko 2.0, labels are properly not focusable. they used to incorrectly inherit from nsidomxulcontrolelement. the caption is in the "value" attribute reme...
listcell - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
...placechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes listcell-iconic use this class to have an image appear on the listcell. specify the image using the image attribute. note that both an image and a label are added when this style is set. the label will take up extra space even when no label text is set. if it is desired to c
enter the image, use css to hide the label. tips if you need to right-align a cell's contents, you can do so like this: cell = document.createelement("listcell"); cell.setattribute("label", "this is the cell's label"); cell.setattribute("style", "text-align:right"); related elements listbox, listcol, listcols, listhead, listheader, listitem ...
tooltip - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
...e word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should be aligned. 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). the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftc
enter, rightc
enter, topc
enter or bottomc
enter. the popup value (ie, the second word) can be one of topleft, topright, bottomleft or bottomright. positions specified as a single word string are shortcuts for the values above. valid single-word values are after_start, after_end, before_start, before_end, end_after, end_before, start_after, start_before, overlap, at_pointer or after_pointer. for mor...
Mozilla release FAQ - Archive of obsolete content
various netscape/mozilla projects? gecko (formerly raptor) is the new html rendering engine in mozilla. it features speed improvements, a more modular nature, and significantly less platform-dependant code. it is more suitable for being embedded in other applications than the previous rendering engine. ...
...modularize/clean up apis fix bugs work on the expermental features (mail/news, aurora, nglayout) add new things: make opendoc and ole nglayout controls write new skins (see themes.org) add preference interfaces for the hidden features there's plenty to do.. what subprojects are there for documentation people? mozilla currently has far more developers than docum
enters. as a result, the project is in dire need of documentation work. maintenance of old documentation would be helpful, new documentation is also welcome. post to netscape.public.mozilla.documentation your intent, and you might get some help. what projects are there for others? there are some important things that you can do if you don't code or care to document: ideas - if you have an idea for w...
NPEvent - Archive of obsolete content
ks since start-up. where point. cursor location. modifiers integer. flags. xevent npevent on unix/x11 npevent is defined as an xevent data structure, which is a union of a number of different x11 event structures. type the type member is an int representing an event type, and indicating which structure is relevant. the event type may be any of the ollowing: graphicsexpose focusin focusout
enternotify leavenotify motionnotify buttonpress buttonrelease keypress keyrelease description microsoft windows description the type npevent represents an event passed by npp_handleevent() to a windowless plug-in. for information about these events, see your microsoft windows documentation. mac os description the npevent object represents an event passed by npp_handleevent() to a windowless p...
... losefocusevent. if your plug-in ignores key events, return false, and the key events will be processed by the browser itself. losefocusevent: sent when the instance has lost the text focus, as a result of the user clicking elsewhere on the page or pressing the tab key to move the focus. no key events are sent to the instance until the next getfocusevent. adjustcursorevent: sent when the mouse
enters or leaves the bounds of the instance. if your plug-in wants to set the cursor when the mouse is within the instance, set the cursor and return true. if you don't want a special cursor, return false and the browser will use the standard arrow cursor. xwindows description the npevent object represents an event passed by npp_handleevent() to a windowless plug-in. the npevent structure is defined...
Using SSH to connect to CVS - Archive of obsolete content
linux, bsd, and osx distributions come with it installed already. cygwin makes ssh available on windows if you install the openssh package from the net category. if all else fails, openssh is a widely used and highly portable implementation. the following command should generate a suitable key pair: ssh-keygen -t dsa this will take a moment, followed by a prompt for a passphrase. once you have
entered a passphrase, ssh-keygen will create two files, ~/.ssh/id_dsa and ~/.ssh/id_dsa.pub do not sendid_dsa. do file a server operations bug in bugzilla and attach yourid_dsa.pub to the bug. setting up cvs to use ssh in your system's environment, make sure thatcvs_rsh is set to whatever your ssh binary is called; a full path is not necessary if ssh is already in your path. replace pserver w...
... (as opposed to storing them in a batch file that you call), you'll need to replace the occurances of "%%" in the first line with "%". finally, note that ssh-add needs the environment variable home to be set with the cygwin path to your cygwin home directory. mozillabuild if you're using mozillabuild, ssh-agent should be started when you run the start-msvc???.bat file. you should be prompted to
enter your passphrase. mozillabuild 1.2 contains a bug that will stop ssh-agent from automatically starting with msys. to fix this, apply this diff to c:\mozilla-build\msys\etc\profile.d\profile-sshagent.sh. ...
forEach - Archive of obsolete content
ok, in the end i didn't remove the old code as it isn't hosted anywhere (i thought the github reference contained the code) but inserted a faster implementation above while retaining the rest of the document. ...
...nter 30 june 2012 <hr> the compatibility section goes to extraordinary lengths in providing a foreach implementation. a much more sane approach would be to count on the implementation to throw errors if wrong arguments are provided and implement this in fewer lines of code. i've removed the lengthy example, while still linking to it and provided a much simpler and leaner implementation. dotnetcarp
enter 30 june 2012 <hr> i have released the write access restriction, but i will be watching changes closely. jswisher 01 october 2011 <hr> there is some mistype in array.prototype.foreach: kvalue = o[ pk ]; should be kvalue = o[ k ]; <hr> this page has been the target of a revert war, and so write access to it has been restricted. if you wish to make changes, and especially if you wish to revert anot...
Bounding volume collision detection with THREE.js - Game development
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 meshnormalmaterial({})); var knotbbox = new box3(new three.vector3(), new three.vector3()); knotbbox.setfromobject(knot); instantiating spheres instantiating sphere objects is similar. we need to provide the sphere's c
enter 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 t...
... but we can patch sphere to implement a sphere vs. aabb intersection algorithm. // expand three.js sphere to support collision tests vs box3 // we are creating a vector outside the method scope to // avoid spawning a new instance of vector3 on every check three.sphere.__closest = new three.vector3(); three.sphere.prototype.intersectsbox = function (box) { // get box closest point to sphere c
enter by clamping three.sphere.__closest.set(this.c
enter.x, this.c
enter.y, this.c
enter.z); three.sphere.__closest.clamp(box.min, box.max); var distance = this.c
enter.distancetosquared(three.sphere.__closest); return distance < (this.radius * this.radius); }; demos we have prepared some live demos to demonstrate these techniques, with source code to examine. point vs. box and sphe...
Building up a basic demo with A-Frame - Game development
een with our custom background: here's the code we have created so far: you can also check it out on github. a-frame takes care of setting up everything you need: a default light source and camera are included, so the cube is visible. ...
...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. we can set the position of the camera explicitly and move it back a little bit from the c
enter of the scene, so we'll be able to see the shapes. add this just before the closing </a-scene> element: <a-camera position="0 1 4" cursor-visible="true" cursor-scale="2" cursor-color="#0095dd" cursor-opacity="0.5"> </a-camera> we've also defined a cursor for the given camera, using the cursor-* attributes (by default it is invisible.) — we've set its scale so it will more easily vis...
Building up a basic demo with PlayCanvas editor - Game development
create projects and manage them, change their settings etc. creating a new project start a brand new project by clicking on the new button: the resulting dialog box will show a few different options. there are starter kits available, but we don't want to load models or start a platform game. we want to start small, so we will use the empty project — click on the blank project option and
enter a name for it (we are using "mdn games demo".)
enter a description if you want — it is optional. click create to have it created. next you'll see your project's page — there's not much yet. by clicking the editor button we'll launch the online playcanvas editor where we'll create our scene with the shapes. do this now. creating the scene here's how the scene looks initially in the e...
...play. now edit the name text field to give it a unique name (we've chosen boxmaterial). a unique name will help us remember what this material is for — we will add more later! to change its color we'll use the diffuse option in the entity inspector. click diffuse, then select the colored box next to the color label — it will open a color wheel. from here you can click your desired color or
enter it in the bottom text field as a hex value. we've chosen a blue color with a hex value of 0095dd —
enter this code in the text field and press return for it to be accepted. note: yes, you read that right — you need to
enter the hex value without the hash/pound symbol. now we can apply the colored material to the shape by clicking and dragging its icon from the bottom part of the screen ...
Building up a basic demo with Three.js - Game development
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 c
enter 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 should experiment with these values and see how they change what you see in the sce...
...s there are various types of light sources available in three.js. the most basic is pointlight, which works like a flashlight, shining a spotlight in a defined direction. add the following lines, below your shape definitions: var light = new three.pointlight(0xffffff); light.position.set(-10, 15, 50); scene.add(light); we define a white point of light, set its position a little away from the c
enter of the scene, so it can light up some parts of the shapes, finally adding it to the scene. now everything works as it should, all three shapes are visible. you should check the documentation for other types of lights, like ambient, directional, hemisphere, or spot. experiment placing them on our scene, to see how they affect it. this looks a little boring though. in a game, something is usuall...
Bounce off the walls - Game development
before the closing curly brace. the ball keeps disappearing into the wall! test your code at this point, and you will be impressed — now we have a ball that bounced off all four edges of the canvas! we have another problem however — when the ball hits each wall it sinks into it slightly before changing direction: this is because we're calculating the collision point of the wall and the c
enter of the ball, while we should be doing it for its circumference. the ball should bounce right after if touches the wall, not when it's already halfway in the wall, so let's adjust our statements a bit to include that. update the last code you added to this: if(x + dx > canvas.width-ballradius || x + dx < ballradius) { dx = -dx; } if(y + dy > canvas.height-ballradius || y + dy < ballradius) { ...
...s circumference. the ball should bounce right after if touches the wall, not when it's already halfway in the wall, so let's adjust our statements a bit to include that. update the last code you added to this: if(x + dx > canvas.width-ballradius || x + dx < ballradius) { dx = -dx; } if(y + dy > canvas.height-ballradius || y + dy < ballradius) { dy = -dy; } when the distance between the c
enter of the ball and the edge of the wall is exactly the same as the radius of the ball, it will change the movement direction. subtracting the radius from one edge's width and adding it onto the other gives us the impression of the proper collision detection — the ball bounces off the walls as it should do. compare your code lets again check the finished code for this part against what you've got...
Collision detection - Game development
s through them. we need to think about adding collision detection so it can bounce off the bricks and break them. it's our decision how to implement this, of course, but it can be tough to calculate whether the ball is touching the rectangle or not because there are no helper functions in canvas for this. for the sake of this tutorial we will do it the easiest way possible. we will check if the c
enter of the ball is colliding with any of the given bricks. this won't give a perfect result every time, and there are much more sophisticated ways to do collision detection, but this will work fine for teaching you the basic concepts. a collision detection function to kick this all off we want to create a collision detection function that will loop through all the bricks and compare every single br...
... with the ball's coordinates as each frame is drawn. for better readability of the code we will define the b variable for storing the brick object in every loop of the collision detection: function collisiondetection() { for(var c=0; c<brickcolumncount; c++) { for(var r=0; r<brickrowcount; r++) { var b = bricks[c][r]; // calculations } } } if the c
enter of the ball is inside the coordinates of one of our bricks, we'll change the direction of the ball. for the c
enter of the ball to be inside the brick, all four of the following statements need to be true: the x position of the ball is greater than the x position of the brick. the x position of the ball is less than the x position of the brick plus its width. the y position of the ball is gre...
Visual-js game engine - Game development
hotoshop.com/ female body v3.blend this file has been released by andrescuccaro under the following license: creative commons attribution 3.0 about gui for windows (canvas2d part only) : windows gui application version 1.0 (using visual-js 0.9 lib) important : you will need net 4.5.2 minimum also redistribution pack for c++ how to start project ? ...
... now you can use on-page-editor (nice for visual setup , checking positions and dimensions - not for logic ) . manual start from cmd : server_folder/node editor.js after starting on-page-edi...
Visual JS GE - Game development
js vs mysql, the client made in four variant on a javascript frameworks for 2d canvas js , three.js , webgl2 vs glmatrix and 2d canvas with matter.js in typescript to complete the stack. installation and setup first of all download visual-js from bitbucket. extract the package into your root folder. installing modules navigate to server_instance/, then in the node.js command prompt or console
enter the following installation commands: npm install mysql npm install delivery npm install express npm install mkdirp npm install socket.io npm install nodemailer@0.7.0 setting up config.js you will find config.js in the server_instance folder: all node.js applications use the same folder — server_instance. some apps might need to have local storage, for instance, editor.js. you need to edit th...
...s data from the system folder lib/visual_scripts/ and generates your code. resource js objects used for adding images for animation purposes. this is done using server_instance/res.js. you need to put your images in a folder, for example test_res/ , inside project_instance/res/. next, run the command server_instance/node res.js. after this has finished processing, restart the web page by
entering the following in the console: resource.test_res. resource objects contain the path data for all your images. the actual image objects will be created after you add animation to the game objects. this is good because it is memory safe. visual js.exe windows gui freeware only for windows users. contains the following tools. visual_js.exe version 1.0 — comes with source editor. ml_sys...
SQL Injection - MDN Web Docs Glossary: Definitions of Web-related terms
sql injection takes advantage of web apps that fail to validate user input. hackers can maliciously pass sql commands through the web app for execution by a backend database. sql injection can gain unauthorized access to a database or to retrieve information directly from the database. many data breaches are due to sql injection. ...
...tabase. sql injection can gain unauthorized access to a database or to retrieve information directly from the database. many data breaches are due to sql injection. how it works after
entering username and password, behind the gui the sql queries work as follows: "select count(*) from users where username=' " + txt.user.text+" ' and password=' "+ txt.password.text+" ' "; now suppose user
enters the username: admin and password: passwd123, so after clicking on the log in button, sql query will run as follows: "select count(*) from users where username=' admin ' and password=' passwd123 ' "; if the credentials are correct, then the user is allowed to log in, so it's a very simple (and therefore insecure) mechanism. hackers use this insecurity to gain unauthorized access. hackers use...
Server - MDN Web Docs Glossary: Definitions of Web-related terms
a software server (often running on a hardware server) is a program that provides services to client programs or a user interface to human clients. services are provided generally over local area networks or wide area networks such as the internet. a client program and server program traditionally connect by passing messages encoded using a protocol over an api. ...
...ea networks such as the internet. ...
What is accessibility? - Learn web development
t it is a good idea to try out some websites using just the keyboard to see how you get on. can you use the tab key to move between the different controls of a web form, for example? you can find more details about keyboard controls in our cross browser testing using native keyboard accessibility section. in terms of statistics, a significant number of people have mobility impairments. the u.s. c
enters for disease control and prevention disability and functioning (noninstitutionalized adults 18 years and over) reports the usa "percent of adults with any physical functioning difficulty: 16.1%". people with cognitive impairments cognitive impairment refers to a broad range of disabilities, from people with intellectual disabilities who have the most-limited capabilities, to all of us as we age...
...ents also have physical disabilities. websites must conform with the w3c’s web content accessibility guidelines, including cognitive accessibility guidelines. the w3c’s cognitive and learning disabilities accessibility task force produces web accessibility guidelines for people with cognitive impairments. webaim has a cognitive page of relevant information and resources. the united states c
enters for disease control estimate that, as of 2018, 1 in 4 u.s. citizens have a disability and, of them, cognitive impairment is the most common for young people. in the u.s., “intellectual disabilities” is the new term for “mental retardation.” in the u.k., “intellectual disabilities” is commonly “learning disabilities” or “learning difficulties”. implementing accessibility in...
Debugging CSS - Learn web development
milar fashion, you could change the width or style of the border. adding a new property you can add properties using the devtools. perhaps you have realised that you don't want your box to inherit the <body> element's font size, and want to set its own specific size? you can try this out in devtools before adding it to your css file. you can click the closing curly brace in the rule to start
entering a new declaration into it, at which point you can start typing the new property and devtools will show you an autocomplete list of matching properties. after selecting font-size,
enter the value you want to try. you can also click the + button to add an additional rule with the same selector, and add your new rules there. note: there are other useful features in the rules view too, for exa...
...e shows the compat data for the shape-outside property. no compatibility data found. please contribute data for "css.shape-outside" (depth: 1) to the mdn compatibility data repository. is something else overriding your css? this is where the information you have learned about specificity will come in very useful. if you have something more specific overriding what you are trying to do, you can
enter into a very frustrating game of trying to work out what. however, as described above, devtools will show you what css is applying and you can work out how to make the new selector specific enough to override it. make a reduced test case of the problem if the issue isn't solved by the steps above, then you will need to do some more investigating. the best thing to do at this point is to create s...
Styling tables - Learn web development
we've also set our custom font on the headings inside the <thead> and <tfoot> elements, for a nice grungy, punky look. we've set some letter-spacing on th...
...generally tweaking the font styling to make things easier to read: we have set a global sans-serif font stack; this is purely a stylistic choice. we've also set our custom font on the headings inside the <thead> and <tfoot> elements, for a nice grungy, punky look. we've set some letter-spacing on the headings and cells, as we feel it aids readability. again, mostly a stylistic choice. we've c
enter-aligned the text in the table cells inside the <tbody> so that they line up with the headings. by default, cells are given a text-align value of left, and headings are given a value of c
enter, but generally it looks better to have the alignments set the same for both. the default bold weight on the heading fonts is enough to differentiate their look. we've right-aligned the heading inside the <t...
CSS values and units - Learn web development
the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common. color keywords quite often in examples here in the learn section or elsewhere on mdn you will see the color keywords used, as they are a simple and understandable way of specifying color. there are a number of these keywords, some of which have fairly
entertaining names! you can see a full list on the page for the <color> value. try playing with different color values in the live examples below, to get more of an idea how they work. hexadecimal rgb values the next type of color value you are likely to encounter is hexadecimal codes. each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one ...
...ome 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 c
enter 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 specify values for one axis the other will default to c
enter. in the following example we have positioned a background image 40px ...
Legacy layout methods - Learn web development
s, but you could choose something more semantically appropriate like <article>s, <section>s, and <aside>, or whatever. now for the css. first, of all, apply the following to your html to provide some basic setup: body { width: 90%; max-width: 900px; margin: 0 auto; } the body will be 90% of the viewport wide until it gets to 900px wide, in which case it will stay fixed at this width and c
enter itself in the viewport. by default, its children (the <h1> and the two <div>s) will span 100% of the width of the body. if we want the two <div>s to be floated alongside one another, we need to set their widths to total 100% of the width of their parent element or smaller so they can fit alongside one another. add the following to the bottom of your css: div:nth-of-type(1) { width: 48%; } div...
...="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row"> <div class="col">13</div> <div class="col">14</div> <div class="col">15</div> <div class="col">16</div> </div> </div> to start using skeleton we need to give the wrapper <div> a class of container — this is already included in our html. this c
enters the content with a maximum width of 960 pixels. you can see how the boxes now never become wider than 960 pixels. you can take a look in the skeleton.css file to see the css that is used when we apply this class. the <div> is c
entered using auto left and right margins, and a padding of 20 pixels is applied left and right. skeleton also sets the box-sizing property to border-box like we did earl...
What text editors are available? - Learn web development
a cross-platform editor eases migration from os to os. so first find out which os you're using, and then check if a given editor supports your os. most editors specify on their website whether they support windows or mac, though some editors only support certain versions (say, only windows 7 or later and not vista). if you're running ubuntu, your best bet is to search within the ubuntu software c
enter. in general, of course, the linux/unix world is a pretty diverse place where different distros work with different, incompatible packaging systems. that means, if you've set your heart on an obscure text editor, you may have to compile it from source yourself (not for the faint-hearted). what kind of technologies do i want to manipulate? generally speaking, any text editor can open any text fil...
...rar, and in that case you'll need to install an additional program to extract the content from the archive. windows supports .zip by default. mac. on the editor's website you can download a .dmg file. some text editors you can find directly in the apple store to make installation even simpler. linux. in the most popular distros you can start with your graphical package manager (ubuntu software c
enter, mintinstall, gnome software, &c.). you can often find a .deb or .rpm file for prepackaged software, but most of the time you'll have to use your distro's repository server or, in worst case scenario, compile your editor from source. take the time to carefully check the installation instructions on the text editor's website. when you install a new text editor, your os will probably continue to ...
How do you host your website on Google App Engine? - Learn web development
wn site or app, you need to create a new project on google cloud platform. this requires having a google account. go to the app engine dashboard on the google cloud platform console and press the create button. if you've not created a project before, you'll need to select whether you want to receive email updates or not, agree to the terms of service, and then you should be able to continue.
enter a name for the project, edit your project id and note it down. for this tutorial, the following values are used: project name: gae sample site project id: gaesamplesite click the create button to create your project. creating an application each cloud platform project can contain one app engine application. let's prepare an app for our project. we'll need a sample application...
.... open google cloud shell. drag and drop the sample-app folder into the left pane of the code editor. run the following in the command line to select your project: gcloud config set project gaesamplesite then run the following command to go to your app's directory: cd sample-app you are now ready to deploy your application, i.e. upload your app to app engine: gcloud app deploy
enter a number to choose the region where you want your application located.
enter y to confirm. now navigate your browser to your-project-id.appspot.com to see your website online. for example, for the project id gaesamplesite, go to gaesamplesite.appspot.com. ...
How do you upload your files to a web server? - Learn web development
nect to connect to the sftp server. note: make sure your hosting provider offers sftp (secure ftp) connection to your hosting space. ftp is inherently insecure, and you shouldn't use it. here and there: local and remote view once connected, your screen should look something like this (we've connected to an example of our own to give you an idea): let's examine what you're seeing: on the c
enter left pane, you see your local files. navigate into the directory where you store your website (e.g. mdn). on the c
enter right pane, you see remote files. we are logged into our distant ftp root (in this case, users/demozilla) you can ignore the bottom and top panes for now. respectively, these are a log of messages showing the connection status between your computer and the sftp server, and a l...
...s of what is needed at how to copy files with rsync over ssh. rsync gui tools as with other command line tools, gui tools also exist for rsync, for those who are not as comfortable with using the command line. acrosync is one such tool, and it is available for windows and macos. again, you would have to get the connection credentials from your hosting provider, but this way you'd have a gui to
enter them in. github github allows you to publish websites via github pages (gh-pages). we've covered the basics of using this in the publishing your website article from our getting started with the web guide, so we aren't going to repeat it all here. however, it is worth knowing that you can also host a website on github, but use a custom domain with it. see using a custom domain with github pag...
Other form controls - Learn web development
tag — any default value is put inside the value attribute. note that even though you can put anything inside a <textarea> element (including other html elements, css, and javascript), because of its nature, it is all rendered as if it was plain text content. (using contenteditable on non-form controls provides an api for capturing html/"rich" content instead of plain text). visually, the text
entered wraps and the form control is by default resizable. modern browsers provide a drag handle that you can drag to increase/decrease the size of the text area. the following screenshots show default, focused, and disabled <textarea> elements in firefox 71 and safari 13 on macos, and edge 18, yandex 14, firefox 71 and chrome 79 on windows 10. note: you can find a slightly more interesting examp...
...dgets using the <datalist> element with child <option> elements to specify the values to display. the <datalist> needs to be given an id. the data list is then bound to an <input> element (e.g. a text or email input type) using the list attribute, the value of which is the id of the data list to bind. once a data list is affiliated with a form widget, its options are used to auto-complete text
entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input. let's look at an example. <label for="myfruit">what's your favorite fruit?</label> <input type="text" name="myfruit" id="myfruit" list="mysuggestion"> <datalist id="mysuggestion"> <option>apple</option> <option>banana</option> <option>blackberry</optio...
CSS basics - Learn web development
ns-serif; /* this should be the rest of the output you got from google fonts */ } note: anything in css between /* and */ is a css comment. the browser ignores comments as it renders the code. css comments are a way for you to write helpful notes about your code or logic. now let's set font sizes for elements that will have text inside the html body (<h1>, <li>, and <p>). we'll also c
enter the heading. finally, let's expand the second ruleset (below) with settings for line height and letter spacing to make body content more readable. h1 { font-size: 60px; text-align: c
enter; } p, li { font-size: 16px; line-height: 2; letter-spacing: 1px; } adjust the px values as you like. your work-in-progress should look similar to this: css: all about boxes something you'll ...
... the shadow from the text: how far it moves across. the second pixel value sets the vertical offset of the shadow from the text: how far it moves down. the third pixel value sets the blur radius of the shadow. a larger value produces a more fuzzy-looking shadow. the fourth value sets the base color of the shadow. try experimenting with different values to see how it changes the appearance. c
entering the image img { display: block; margin: 0 auto; } next, we c
enter the image to make it look better. we could use the margin: 0 auto trick again as we did for the body. but there are differences that require an additional setting to make the css work. the <body> is a block element, meaning it takes up space on the page. a block element can have margin and other spacing values applied to...
Publishing your website - Learn web development
tructure — whether you need to build a multi-tiered web application from scratch or host a static website. see how do you host your website on google app engine? for more information. these options are usually free, but you may outgrow the limited feature-set. using a web-based ide such as codepen there are a number of web apps that emulate a website development environment, allowing you to
enter html, css and javascript, and then display the result of that code as a website — all in one browser tab. generally speaking, these tools are relatively easy, great for learning, good for sharing code (for example, if you want to share a technique with or ask for debugging help from colleagues in a different office), and free (for basic features). they host your rendered page at a unique web ad...
...sets (like images). try playing with some of these examples to find out which one works best for you: jsfiddle glitch js bin codepen publishing via github now let's examine how to easily publish your site via github pages. first of all, sign up for github and verify your email address. next, you need to create a repository to store files. on this page, in the repository name box,
enter username.github.io, where username is your username. for example, our friend bob smith would
enter bobsmith.github.io. check the "initialize this repository with a readme" box. then click create repository. drag and drop the content of your website folder into your repository. then click commit changes. note: make sure your folder has an index.html file. navigate your browser...
Advanced text formatting - Learn web development
ally code blocks) — if you use indentation or excess whitespace inside your text, browsers will ignore it and you will not see it on your rendered page. if you wrap the text in <pre></pre> tags however, your whitespace will be rendered identically to how you see it in your text editor. <var>: for specifically marking up variable names. <kbd>: for marking up keyboard (and other types of) input
entered into the computer. <samp>: for marking up the output of a computer program. let's look at a few examples. you should try having a play with these (try grabbing a copy of our other-semantics.html sample file): <pre><code>var para = document.queryselector('p'); para.onclick = function() { alert('owww, stop poking me!'); }</code></pre> <p>you shouldn't use presentational elements like <cod...
...rking up the output of a computer program. let's look at a few examples. ...
Document and website structure - Learn web development
igation on your website will just lead to confused, frustrated users. many web designers consider the navigation bar to be part of the header rather than an individual component, but that's not a requirement; in fact, some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate. main content: a big area in the c
enter that contains most of the unique content of a given webpage, for example, the video you want to watch, or the main story you're reading, or the map you want to view, or the news headlines, etc. this is the one part of the website that definitely will vary from page to page! sidebar: some peripheral info, links, quotes, ads, etc. usually, this is contextual to what is contained in the main conte...
...website — write a big list down. next, try to sort all these content items into groups, to give you an idea of what parts might live together on different pages. this is very similar to a technique called card sorting. now try to sketch a rough sitemap — have a bubble for each page on your site, and draw lines to show the typical workflow between pages. the homepage will probably be in the c
enter, and link to most if not all of the others; most of the pages in a small site should be available from the main navigation, although there are exceptions. you might also want to include notes about how things might be presented. active learning: create your own sitemap try carrying out the above exercise for a website of your own creation. what would you like to make a site about? note: save...
Responsive images - Learn web development
omewhere inside the content column. ...
...d the source code on github.) we won't discuss the css much in this lesson, except to say that: the body content has been set to a maximum width of 1200 pixels — in viewports above that width, the body remains at 1200px and c
enters itself in the available space. in viewports below that width, the body will stay at 100% of the width of the viewport. the header image has been set so that its c
enter always stays in the c
enter of the header, no matter what width the heading is set at. if the site is being viewed on a narrower screen, the important detail in the c
enter of the image (the people) can still be seen, and the excess is lost off either side. it is 200px high. the content images have been set so that if the body element becomes smaller than the image, the images start to shrink so t...
Introduction to events - Learn web development
a developer, you want to prevent the submission to the server and give an error message saying what's wrong and what needs to be done to put things right. some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. let's look at a simple example. ...
...the output is as follows: note: for the full source code, see preventdefault-validation.html (also see it running live here.) event bubbling and capture the final subject to cover here is something that you won't come across often, but it can be a real pain if you don't understand it. event bubbling and capture are two m...
Functions — reusable blocks of code - Learn web development
the javascript language has many built-in functions to allow you to do useful things without having to write all that code yourself. in fact, some of the code you are calling when you invoke (a fancy word for run, or execute) a built in browser function couldn't be written in javas...
...) and b(), and three variables — x, y, and z — two of which are defined inside the functions, and one in the global scope. it also contains a third function called output(), which takes a single parameter and outputs it in a paragraph on the page. open the example up in a browser and in your text editor. open the javascript console in your browser developer tools. in the javascript console,
enter the following command: output(x); you should see the value of variable x output to the screen. now try
entering the following in your console output(y); output(z); both of these should return an error along the lines of "referenceerror: y is not defined". why is that? because of function scope — y and z are locked inside the a() and b() functions, so output() can't access them when cal...
What went wrong? Troubleshooting JavaScript - Learn web development
ember that javascript is case sensitive, so any slight difference in spelling or casing will cause an error. changing addeventlistener to addeventlistener should fix this. do this now. note: see our typeerror: "x" is not a function reference page for more details about this error. syntax errors round two save your page and refresh, and you should see the error has gone. now if you try to
enter a guess and press the submit guess button, you'll see ... another error! this time the error being reported is "typeerror: loworhi is null", on line 78. note: null is a special value that means "nothing", or "no value". so loworhi has been declared and initialised, but not with any meaningful value — it has no type or value. note: this error didn't come up as soon as the page was loaded ...
...that you don't mix up the assignment operator (=) — which sets a variable to be equal to a value — with the strict equality operator (===), which tests whether one value is equal to another, and returns a true/false result. note: see our syntaxerror: missing ; before statement reference page for more details about this error. the program always says you've won, regardless of the guess you
enter this could be another symptom of mixing up the assignment and strict equality operators. for example, if we were to change this line inside checkguess(): if (userguess === randomnumber) { to if (userguess = randomnumber) { the test would always return true, causing the program to report that the game has been won. be careful! syntaxerror: missing ) after argument list this one is pretty si...
Object-oriented JavaScript for beginners - Learn web development
: a constructor function name usually starts with a capital letter — this convention is used to make constructor functions easier to recognize in code. ...
... object literal, and using a constructor function (see above). these make sense, but there are other ways — we want to make you familiar with these in case you come across them in your travels around the web. the object() constructor first of all, you can use the object() constructor to create a new object. yes, even generic objects have a constructor, which generates an empty object. try
entering this into your browser's javascript console: let person1 = new object(); this stores an empty object in the person1 variable. you can then add properties and methods to this object using dot or bracket notation as desired; try these examples in your console: person1.name = 'chris'; person1['age'] = 38; person1.greeting = function() { alert('hi! i\'m ' + this.name + '.'); }; you can...
Website security - Learn web development
attacker can construct a search link that contains a malicious script as a parameter (e.g., http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script>) and email it to another user. if the target user clicks this "interesting link", the script will be executed when the search results are displayed. as discussed earlier, this gives the attacker all the information they need to
enter the site as the target user, potentially making purchases as the user or sharing their contact information. a persistent xss vulnerability occurs when the malicious script is stored on the website and then later redisplayed unmodified for other users to execute unwittingly. for example, a discussion board that accepts comments that contain unmodified html could store a malicious script fro...
... get requests, post requests, http headers and cookies, and user-uploaded files. always check and sanitize all incoming data. always assume the worst. a number of other concrete steps you can take are: use more effective password management. encourage strong passwords that are changed regularly. consider two-factor authentication for your site, so that in addition to a password the user must
enter another authentication code (usually one that is delivered via some physical hardware that only the user will have, such as a code in an sms sent to their phone). configure your web server to use https and http strict transport security (hsts). https encrypts data sent between your client and server. this ensures that login credentials, cookies, post requests data and header information are not ...
Routing in Ember - Learn web development
active" and "completed" todos. an ember application has a default "application" route, which is tied to the app/templates/application.hbs template. because that application template is the entry point to our todo app, we'll need to make some changes to allow for routing. creating the routes let's start by creating three new routes: "index", "active" and "completed". to do this you’ll need to
enter the following commands into your terminal, inside the root directory of your app: ember generate route index ember generate route completed ember generate route active the second and third commands should have not only generated new files, but also updated an existing file, app/router.js. it contains the following contents: import emberrouter from '@ember/routing/router'; import config from '.
...we'll first need to replace the todolist component invocation from the application template with an {{outlet}} call, which means "any sub-route will be rendered in place here". go to the todomvc/app/templates/application.hbs file and replace <todolist /> with {{outlet}} next, in our index.hbs, completed.hbs, and active.hbs templates (also found in the templates directory) we can for now just
enter the todolist component invocation. in each case, replace {{outlet}} with <todolist /> so at this point, if you try the app again and visit any of the three routes localhost:4200 localhost:4200/active localhost:4200/completed you'll see exactly the same thing. at each url, the template that corresponds to the specific path ("active", "completed", or "index"), will render the <todolist /> ...
Ember app structure and componentization - Learn web development
tion. using the cli to create our components for us so to represent our app, we want to create 4 components: header list individual todo footer to create a component, we use the ember generate component command, followed by the name of the component. let’s create the header component first. to do so: stop the server running by going to the terminal and pressing ctrl + c. ...
...ing is outside the scope of this tutorial, although generally testing should be implemented as you develop, rather than after, otherwise it tends to be forgotten about. if you're curious about testing, or why you would want to have automated tests, check out the official ember tutorial on testing. before we start adding any component code, let’s create the scaffolding for the other components. ...
Beginning our React todo list - Learn web development
.btn__danger { color: #fff; 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: c
enter; } .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-...
...em 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: c
enter; margin: 0; margin-bottom: 1rem; } .label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: c
enter; } .input__lg { padding: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:...
Styling Vue components with CSS - Learn web development
#ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: c
enter; } [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:...
...now we can go through and begin editing our components to use some of these styles. adding css classes in vue we should apply the button css classes to the <button> in our todoform component. since vue templates are valid...
Strategies for carrying out testing - Learn web development
s like those mentioned above. you may also consider using open source and privacy focussed analytics platforms like open web analytics and matomo. they expect you to self-host the analytics platform. setting up google analytics first of all, you'll need a google account. use this account to sign into google analytics. choose the google analytics (web) option, and click the sign up button.
enter your web site/app details into the signup page. this is fairly intuitive to set up; the most important field to get right is the website url. this needs to be your site/app's root url. once you've finished filling in everything, press the get tracking id button, then accept the terms of service that appear. the next page provides you with some code snippets and other instructions. for a basic w...
...f hardware/software to test. an emulator might be as simple as testing a device condition. for example, if you want to do some quick and dirty testing of your width/height media queries for responsive design, you could use firefox's responsive design mode. safari has a similar mode too, which can be enabled by going to safari > preferences, and checking show develop menu, then choosing develop >
enter responsive design mode. chrome also has something similar: device mode (see simulate mobile devices with device mode). more often than not though, you'll have to install some kind of emulator. the most common devices/browsers you'll want to test are as follows: the official android studio ide for developing android apps is a bit heavy weight for just testing websites on google chrome or the ...
Introducing a complete toolchain - Learn web development
oject in, and go inside the folder: mkdir will-it-miss cd will-it-miss now we will create a new directory for all of our web site's development code to live in. run the following now: mkdir src code organization tends to be quite subjective from team to team. for this project, the source code will live in src. ...
... for this project, the source code will live in src. making sure you are inside the root of the will-it-miss directory,
enter the following command to start git’s source control functionality working on the directory: git init this means that you'll now be able to start storing revisions to the folder's contents, saving it to a remote repository, etc. more on this later! next,
enter the following command to turn your directory into an npm package, with the advantages that we discussed in the previous article: npm init --force this will create a default package.json file that we can configure later on if desired. the --force flag causes the command to instantly create a default package.json file without asking you all the usual questions about what contents you want it ...
Links and Resources
ficial guidelines from the w3c web accessibility initiative (wai). the european union is looking to base their upcoming accessibility regulations on these guidelines. wai interest group - discussion list for standards in web accessibility. web accessibility checklist from ibm. ibm's java accessibility checklist - guidelines to making java accessibility. accessibility information resource c
enter for developers at adobe - flash mx accessibility, pdf document accessibility and actionscript accessibility. online accessibility validators there are now a few available and excellent online accessibility validators which check single webpages according to checkpoints of wcag guidelines and then reports errors or warnings. webxact™ from watchfire® corporation webxact™ is a free and ...
...reader for windows, written in python. lsr open source screen reader for linux, written in python orca open source screen reader for linux, written in python accessibility for desktop environments gnome accessibility - gnome accessibility project kde accessibility project - an equally important toolkit on linux apple accessibility - moving forward with os x. other resources trace c
enter - trace c
enter of the university of wisconsin (research on technology for persons with disabilities). home of lars (linux accessibility resource site) at university of toronto. dive into accessibility - another great, easy-to-understand resource on accessible website authoring. color contrast analyzer by juicy studio: an excellent tool for checking if webpages use/have sufficient color cont...
Debugging Frame Reflow
nd a count number. when the frame's reflow is finished the following information is displayed : reflow metric (desired) width, height max. element width maximum width frame status overflow area getting the log make sure that your build is a debug build (in short you need ac_add_options --enable-debug in your .mozconfig file). create a text file (for instance reflow_rules.txt).
enter this line in the text file * 1 this should look like: point the gecko_display_reflow_rules_file environment variable to the path of the reflow_rules.txt file. run the debug build, saving stdout to a file. on mac this is accomplished with: $ env dyld_library_path="`pwd`/obj-ff-dbg/dist/nightlydebug.app/contents/macos" \ ./obj-ff-dbg/dist/nightlydebug.app/cont...
...other reflow debug options gecko_display_reflow_flag_pixel_errors setting this option via set gecko_display_reflow_flag_pixel_errors = 1 enables a verification for each coordinate value that the coordinates are aligned at pixel boundaries. row 0268a594 r=0 a=uc,uc c=uc,20 cnt=870 value 20 is not a whole pix...
Eclipse CDT Manual Setup
equirements that this method of build option discovery imposes on us. first, eclipse needs build console output for a complete build, so that it can find compiler options for as many source files as possible. the build must be explicitly instructed to output information that allows the directory, where the compiler is being invoked from to be identified (i.e., 'make' must be instructed to output "
entering directory..."/"leaving directory..." lines). finally, the build must not be parallelized, since that would result in the interleaving of build output from different directories (breaking resolution of relative paths by interleaving the "
entering directory..."/"leaving directory..." lines), and the build must not be silenced/quietened. conversely, note this very carefully: if you configure ecl...
... console" and deselect "limit console output". if you want to increase the text size in the editor, select "general > appearance > colors and fonts", select "basic > text font", and edit the font size. creating an eclipse project to create an eclipse project for your mozilla source tree, select "file > new > makefile project with existing code". in the "import existing code" window that opens,
enter a meaningful project name that identifies your mozilla source tree, set the code location to the root of your source tree, select an appropriate toolchain (e.g., "macosx gcc"), and click finish. the status bar at the bottom right of the window should now show that eclipse is "refreshing the workspace" (gathering a list of all the files in the source tree). click on the little green button beside...
Obsolete Build Caveats and Tips
) builds used to be built against. features that depend on this sdk include: windows vista parental controls file associations and application registration on vista and above ability to display the uac shield icon in the ui thunderbird windows search integration text services framework support there are two ways to obtain it: download the windows vista sdk from the microsoft download c
enter. you may choose not to install the sample code and documentation to save space and download time. if you are using windows xp, you must have windows xp service pack 2 and .net framework 2.0 installed before installing the vista sdk. use visual studio 2008 professional. gecko 1.9.2 through 11: if you would like to use this sdk, add ac_add_options --with-windows-version=600 to you...
...)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this is your only option if you're on windows 2000. this also used to be necessary for building a default gecko 1.9.2 through 8 with visual c++ express editions (see atlbase.h for more). you can download the sdk from the microsoft download c
enter. you need to install at least the "windows core sdk", "web workshop (ie) sdk", and the "data access services (mdac) sdk". for all sdks, you may choose not to install sample code and documentation to save space and download time. gecko 1.9.2 through 11: if you're building with this sdk, you will need to add ac_add_options --with-windows-version=502 to your .mozconfig. for mozilla-1.9.1 and ...
Experimental features in Firefox
for more details. release channel version added enabled by default? nightly 50 no developer edition 50 no beta 50 no release 50 no preference name layout.css.initial-letter.enabled conic gradients conic gradients expand css gradients to allow the color transitions to be rendered circling around a c
enter point rather than radiating from it. see bug 1175958 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.webrender.all pseudo-class: :focus-visible allows focus s...
...see bug 1605154 and bug 1605153 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference name devtools.webconsole.input.context mobile gesture support in responsive design mode mouse gestures are ...
Storage access policy: Block cookies from trackers
the linked documentation includes a dropdown to select the appropriate firefox version). report broken sites if you find a website broken as a result of this change, file a bug under the tracking protection component within the firefox product on bugzilla. alternatively you can report broken sites directly in firefox by clicking "report a problem" in the content blocking section of the control c
enter (this shortcut may not be available in all versions of firefox). tracking protection explained how does firefox determine which resources are tracking resources? firefox uses the tracking protection list to determine which resources are tracking resources. the tracking protection list is maintained by disconnect. when the list is applied in firefox, we make two important changes: first, we ...
...:config in your address bar. if you are presented with a page that warns you "this may void your warranty!", click "i accept the risk!" search for the preference name "urlclassifier.trackingannotationtable.testentries". if the preference already exists, edit the preference value. if the preference does not exist, click "string" and then "+" to create a new preference. for the preference value
enter comma separated origins that you’d like to have classified as trackers. e.g. "example.net,example.org". warning: be sure to remove these entries after you have finished testing. faq this cookie policy has the potential to lead to site breakage, but has been designed to allow common third-party integrations to continue to work while preventing cross-site tracking. in this section we descri...
How to get a stacktrace for a bug report
r plugin is the cause of the crash. how to get a crash id with the mozilla crash reporter 1. crash and submit a report to the system. the mozilla crash reporter window should automatically come up after firefox crashes. if you have any additional information about the crash, such as additional detail on what you were doing at the time that may have triggered the crash, please
enter it into the comments box. be sure that you check the "tell mozilla about this crash" checkbox and click the restart button. the crash reporter should now submit the crash report and firefox should open again. the "details" button gives additional data about the incident, however this is not useful in a bug report. 2. tell us the id of the report you subm...
...tart button. the crash reporter should now submit the crash report and firefox should open again. the "details" button gives additional data about the incident, however this is not useful in a bug report. 2. tell us the id of the report you submitted. to access all of your submitted reports type "about:crashes" into the firefox address bar and press
enter. firefox should open a list of ids for your submitted crash reports. copy two or three of the ids for the appropriate crashes and paste them into your bugzilla report. please check the listed times to avoid copying the id of an unrelated crash report. you can prefix a "bp-" to the beginning of an id to make bugzilla turn it into a link: bp-a70759c6-1295-4160-aa30-bc4772090918 ...
CustomizableUI.jsm
panel the panel from which listeners should be removed. onwidgetdrag() notify listeners a widget is about to be dragged to an area. for use from customize mode only, do not use otherwise. parameters awidgetid the id of the widget that is being dragged to an area. aarea the id of the area to which the widget is being dragged. notifystartcustomizing() notify listeners that a window is
entering customize mode. for use from customize mode only, do not use otherwise. parameters awindow the window
entering customize mode notifyendcustomizing() notify listeners that a window is exiting customize mode. for use from customize mode only, do not use otherwise. parameters awindow the window exiting customize mode dispatchtoolboxevent() notify toolbox(es) of a particular event.
...ul', 'toolbaritem'); var image = adocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'image'); image.setattribute('src', 'chrome://branding/content/icon16.png'); var props = { id: 'navigator-throbber', //id in dom // should match id of that in cui.jsm (line #2) title: 'activity indicator', align: 'c
enter', pack: 'c
enter', mousethrough: 'always', removable: 'true', sdkstylewidget: 'true', overflows: false }; for (var p in props) { toolbaritem.setattribute(p, props[p]); } toolbaritem.appendchild(image); return toolbaritem; } }); when you want to remove this widget run this code: c...
Localizing without a specialized tool
detailed guidelines on compare-locale's page, but running the following command from the command line should be enough: $ sudo easy_install -u compare-locales to start, be sure to open your command line interface and change your directory to where you are keeping your localization files, the en-us sources $ cd /path/to/your/working/directory now, you will need run compare locales. to do this,
enter the following commands, keeping sure to change "x-testing" to the actual locale code of your locale. $ compare-locales mozilla-1.9.2/browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing for convenience, try saving the output of this command to a text file on your desktop so you can review it as you go. run: $ compare-locales mozilla-1.9.2/browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing > ...
...in directory where you want to be. you can always check the path by typing pwd once you are in the root working directory with both en-us source and the l10n base, copy the searchbar.dtd file by typing cp mozilla-1.9.2/browser/locales/chrome/browser/search.properties l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/ open that file and translate the strings that follow the "=". for instance,
enter the proper translation for the line "add %s" cmd_addfoundengine=add "%s" with these two string examples translated, you can now test your work to see immediately where you have translated. refer to the building and testing section of the create a new localization page. going one-by-one with your compare-locales output open for review, we will start with the first file with "// add and localize t...
Release phase
s/l10n-central/x-testing then you will need to edit the .hg/hgrc file (inside the x-testing local clone) to tell mercurial to push using ssh. ...
... there is a specific process to follow in bugzilla for requesting these reviews: file a bug requesting the review. attach your files to the bug. once attached, open the attachment details. in the attachment details, select the ? from the dropdown menu next to the review flag or the appropriate approval flags (see image). this will display a text box to assign the review to someone.
enter :pike as the requestee. we will perform a technical review of your work and provide you with feedback. we're happy to work with you to make sure that your work is fully functional. for more detailed information about reviews for new localizations and sign-offs for maintenance releases, visit the technical review and sign-off review pages. tah dah! once again, congratulations! you've arrived at t...
mozilla::Monitor
mozilla::monitor is a bare wrapper around prmonitor. please see introduction_to_nspr for a high-level summary of its semantics. methods
enter()
enter the monitor. exit() exit the monitor. wait() nsresult wait( in printervaltime interval = pr_interval_no_timeout ); wait on this monitor until it is notifyed. notify() nsresult notify(void); notify one thread waiting on this monitor. notifyall() nsresult notifyall(void); notify all threads waiting on this monitor. assertcurrentthreadin() assert that the current thread is in this monitor. does not incur a runtime penalty in optimized builds. ...
...ad waiting on this monitor. ...
Patches and pushes
image to data kitchen to obtain its uri id and add to the xml file within the image tag. in list.txt, add the search plugin's xml filename (without extensions) on a new line and save. note that if your team selects a local version of an already default plugin (e.g., wikipedia), the xml filename should include the locale code (e.g., wikipedia-es). create a patch of the searchplugins directory by
entering the following command in your command-line tool, where mypatch.diff is where you give your patch a name: $ hg add mozilla/browser/searchplugins/ $ hg diff mozilla/browser/searchplugins/ > mypatch.diff attach your patch file to the bug by clicking the "add an attachment" link. once attached and labeled as a patch, open the attachment details. in the attachment details, select the ? from th...
...ame: $ hg add mozilla/browser/searchplugins/ $ hg diff mozilla/browser/searchplugins/ > mypatch.diff attach your patch file to the bug by clicking the "add an attachment" link. once attached and labeled as a patch, open the attachment details. in the attachment details, select the ? from the dropdown menu next to the review flag. this will display a text box to assign the review to someone.
enter :flod as the requestee. review, commit, & land address any review comments made by the reviewers and update the patch until it receives an r+ rating. if the r+ is "with nits" (i.e., that's short for nit-picky requests), fix those before committing. also, no new patch attachment will be needed. commit the patch to your aurora repo. only commit the changes you have reviewed. use a com...
PR_CWait
timeout the amount of time (in printervaltime units) that the thread is willing to wait for an explicit notification before being rescheduled. ...
...e monitor was located and the calling thread was not the thread that held the monitor's mutex. description using the value specified in the address parameter to find a monitor in the monitor cache, pr_cwait waits for a notification that the monitor's state has changed. while the thread is waiting, it exits the monitor (just as if it had called pr_cexitmonitor as many times as it had called pr_c
entermonitor). when the wait has finished, the thread regains control of the monitor's lock with the same entry count as before the wait began. the thread waiting on the monitor resumes execution when the monitor is notified (assuming the thread is the next in line to receive the notify) or when the interval specified in the timeout parameter has been exceeded. when the thread resumes execution, it is...
PR_Wait
r because it was explicitly notified or because the time specified by the parameter ticks has expired. pr_failure means pr_wait encountered a system error (such as an invalid monitor reference) or the thread was interrupted by another thread. description a call to pr_wait causes the thread to release the monitor's lock, just as if it had called pr_exitmonitor as many times as it had called pr_
entermonitor. this has the effect of making the monitor available to other threads. when the wait is over, the thread regains control of the monitor's lock with the same entry count it had before the wait began. a thread waiting on the monitor resumes when the monitor is notified or when the timeout specified by the ticks parameter elapses. the resumption from the wait is merely a hint that a change o...
...programmer to evaluate the data and act accordingly. this is usually done by evaluating a boolean expression involving the monitored data. while the boolean expression is false, the thread should wait. the thread should act on the data only when the expression is true. the boolean expression must be evaluated while in the monitor and within a loop. in pseudo-code, the sequence is as follows: pr_
entermonitor(&ml); while (!expression) wait; ... act on the state change ... pr_exitmonitor(&ml); a thread can be resumed from a wait for a variety of reasons. the most obvious is that it was notified by another thread. if the value of timeout is not pr_interval_no_timeout, pr_wait resumes execution after the specified interval has expired. if a timeout value is used, the boolean expression must i...
FIPS Mode - an explanation
ed ("wrapped") in a special way. this makes it difficult to move keys from one device to another, and consequently, all crypto engines and key storage must be in a single device rather than being split up into several devices. how does this affect firefox users? these requirements have several implications for users. in fips mode, every user must have a good strong "master password", and must
enter it each time he starts or restarts firefox before he can visit any web sites that use cryptography (https). firefox can only use the latest version of ssl, known as "tls", and not the older ssl 2 or ssl 3.0 protocols, and firefox can only talk to those servers that use fips standard encryption algorithms such as aes or triple-des. servers that can only use non-fips-approved encryption, such as ...
...irefox can only talk to those servers that use fips standard encryption algorithms such as aes or triple-des. servers that can only use non-fips-approved encryption, such as rc4, cannot be used in fips mode. how is fips mode different from normal non-fips mode? in normal non-fips mode, the "master password" is optional and is allowed to be a weak short password. the user is only required to
enter his master password to use his own private keys (if he has any) or to access his stored web-site passwords. the user is not required to
enter the master password to visit ordinary https servers, nor to view certificates he has previously stored. in non-fips mode, nss is willing and able to use popular non-fips approved cryptographic algorithms, such as rc4 and md5, to communicate with older htt...
sslerr.html
d signature. sec_error_expired_certificate -8181 peer's certificate has expired. sec_error_revoked_certificate -8180 peer's certificate has been revoked. sec_error_unknown_issuer -8179 peer's certificate issuer is not recognized. sec_error_bad_key -8178 peer's public key is invalid sec_error_bad_password -8177 the password
entered is incorrect. sec_error_retry_password -8176 new password
entered incorrectly. sec_error_no_nodelock -8175 security library: no nodelock. sec_error_bad_database -8174 security library: bad database. sec_error_no_memory -8173 security library: memory allocation failure. sec_error_untrusted_issuer -8172 peer's certificate ...
.... unable to write the export file. sec_error_pkcs12_unable_to_read -8094 unable to import. unable to read the import file. sec_error_pkcs12_key_database_not_initialized -8093 unable to export. key database corrupt or deleted. sec_error_keygen_fail -8092 unable to generate public-private key pair. sec_error_invalid_password -8091 password
entered is invalid. sec_error_retry_old_password -8090 old password
entered incorrectly. sec_error_bad_nickname -8089 certificate nickname already in use. sec_error_not_fortezza_issuer -8088 peer fortezza chain has a non-fortezza certificate. sec_error_cannot_move_sensitive_key -8087 "a sensitive key cannot be moved to the slot where it is nee...
NSS Tools certutil
ed under standard x.509 v3 certificate extensions in appendix b.3 of thered hat certificate system administration guide. -4 add a crl distribution point extension to a certificate that is being created or added to a database. this extension identifies the url of a certificate's associated certificate revocation list (crl). the certificate database tool prompts you to
enter the url. crl distribution point extensions are described in standard x.509 v3 certificate extensions in appendix a.3 of thered hat certificate system administration guide. -5 add a netscape certificate type extension to a certificate that is being created or added to the database. netscape certificate type extensions are described in standard x.509 v3 certificate ext...
...if a ca key pair is not available, you can create a self-signed certificate (for purposes of illustration) with the -x argument. this example creates a new binary, self-signed ca certificate named myissuer, in the specified directory. certutil -s -s "cn=my issuer" -n m...
Rhino scopes and contexts
tion here, but more complicated embeddings can gain performance and flexibility from the techniques described below. contexts the rhino context object is used to store thread-specific information about the execution environment. there should be one and only one context associated with each thread that will be executing javascript. to associate the current thread with a context, simply call the
enter method of context: context cx = context.
enter(); once you are done with execution, simply exit the context: context.exit(); these calls will work properly even if there is already a context associated with the current thread. that context will be returned and an internal counter incremented. only when the counter reaches zero will it be disassociated from the thread. remember to put the ex...
...script objects. execution of scripts requires a scope for top-level script variable storage as well as a place to find standard objects like function and object. it's important to understand that a scope is independent of the context that created it. you can create a scope using one context and then evaluate a script using that scope and another context (either by exiting the current context and
entering another, or by executing on a different thread). you can even execute scripts on multiple threads simultaneously in the same scope. rhino guarantees that accesses to properties of javascript objects are atomic across threads, but doesn't make any more guarantees for scripts executing in the same scope at the same time. if two scripts use the same scope simultaneously, the scripts are responsib...
Getting SpiderMonkey source code
ill need to explicitly fetch the javascript shell sources even if you currently build another mozilla project, as there are files specific to the shell that are not normally found in a mozilla source tree. just like when you're fetching any other mozilla project from cvs, you need to log into the cvs server first. ...
...ecific to the shell that are not normally found in a mozilla source tree. just like when you're fetching any other mozilla project from cvs, you need to log into the cvs server first. to do this, cd into the base directory you'd like to check out the code into, then
enter the following command at your command line: cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot login when prompted,
enter the password anonymous. once you've logged in, cd into the root of your cvs tree and
enter the following command: cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l mozilla/js/src mozilla/js/src/config mozilla/js/src/editline mozilla/js/src/fdlibm this checks out all the files needed in order to build the javascript shell. if you also want the regression tests, add this command:...
Invariants
== obj->compartment(). when a new object is created, it is automatically created in cx->compartment, but its parent and prototype are often determined by examining the scope chain. the object and its proto and parent must be in the same compartment. so it is utterly crucially important that this invariant always be true if objects are being created. the public api for compartment-hopping, jsauto
entercompartment, and the internal api, js::autocompartment, both make sure the invariant is maintained. however, there is another internal api, js::switchtocompartment, that lets you break this invariant, and of course in xpconnect we use that from time to time when we know we aren't going to be creating any new objects (other than global objects, which have no parent or prototype) or doing anything ...
...e of all threads at a given time: either exactly one thread is "in gc" and no threads are in requests; or no thread is doing gc, in which case any number of threads may be in requests; or the gc lock is held. a thread that holds the gc lock never does anything that blocks. a thread that is in a request never does anything that blocks. there are the usual invariants regarding locks: we do not re
enter them (it would be nice to check this as there might be an exception or two); we do not wait on a condition variable unless the corresponding lock is held. there are the usual invariants regarding various fields: they are protected by certain locks or more complex locking schemes. in particular, native objects' fields are protected by property locking (below); and several things are protected by ...
JS_ClearNewbornRoots
newborn root in the context. these newborn roots help native code protect newly-created gc-things from gc invocations activated before those things can be rooted using local or global roots. however, the newborn roots can also entrain great gobs of garbage, so the js_gc entry point clears them for the context on which gc is being forced. embeddings may need to do likewise for all contexts. ...
...entry point clears them for the context on which gc is being forced. embeddings may need to do likewise for all contexts. see js_
enterlocalrootscope for a better way to manage newborns in cases where native hooks (functions, getters, setters, etc.) create many gc-things, potentially without connecting them to predefined local roots such as *rval or argv[i] in an active jsnative function. using js_
enterlocalrootscope disables updating of the context's per-gc-thing-type newborn roots, until control flow unwinds and leaves the outermost nesting local root scope. see also bug 572057 bug 659462 ...
JS_LeaveCompartment
this article covers features introduced in spidermonkey 24 note: the preferred way of changing a context's current compartment is using jsautocompartment. leave a the compartment, returning to the compartment active before the corresponding js_
entercompartment. syntax void js_leavecompartment(jscontext *cx, jscompartment *oldcompartment); name type description cx jscontext * the context in which to leave the compartment. oldcompartment jscompartment * value returned by previous call to js_
entercompartment. description every jscontext has a current compartment. any access to an object in a different compartment must be bracketed by calls to js_
entercompartment and js_leavecompartment. see also mxr id search for js...
...t * the context in which to leave the compartment. oldcompartment jscompartment * value returned by previous call to js_
entercompartment. description every jscontext has a current compartment. ...
JS_SetInterruptCallback
bool (* jsinterruptcallback)(jscontext *cx); name type description cx jscontext * pointer to a jscontext in which this callback was installed. the callback may use this context to call jsapi functions, but it should first use js_setinterruptcallback to set the context's interrupt callback to null. otherwise the engine may call the interrupt callback again, re
entering it. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an active request on cx. the callback does not need to call js_beginrequest()). description these functions allow setting an interrupt callback that will be called from the js thread some time after any thread triggered the callback using js_requestinterruptcallback. to ...
...at will be called from the js thread some time after any thread triggered the callback using js_requestinterruptcallback. to schedule the gc and for other activities the engine internally triggers interrupt callbacks. the embedding should thus not rely on callbacks being triggered through the external api only. important note: additional callbacks can occur inside the callback handler if it re-
enters the js engine. the embedding must ensure that the callback is disconnected before attempting such re-entry. js_setinterruptcallback sets a callback that can be called asynchronously. some common uses for an interrupt callback are: to run garbage collection periodically, by calling js_maybegc; to periodically take a break from script execution to update the ui (though note that mozilla does...
JS_SetOperationCallback
jsbool (*jsoperationcallback)(jscontext *cx); name type description cx jscontext * pointer to a jscontext in which this callback was installed. the callback may use this context to call jsapi functions, but it should first use js_setoperationcallback to set the context's operation callback to null. otherwise the engine may call the operation callback again, re
entering it. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an active request on cx. the callback does not need to call js_beginrequest()). applications must not use both the operation callback api and the older branch callback api. description these functions allow setting an operation callback that will be called from the js ...
...at will be called from the js thread some time after any thread triggered the callback using js_triggeroperationcallback. to schedule the gc and for other activities the engine internally triggers operation callbacks. the embedding should thus not rely on callbacks being triggered through the external api only. important note: additional callbacks can occur inside the callback handler if it re-
enters the js engine. the embedding must ensure that the callback is disconnected before attempting such re-entry. js_setoperationcallback sets a callback that can be called asynchronously. some common uses for an operation callback are: to run garbage collection periodically, by calling js_maybegc; to periodically take a break from script execution to update the ui (though note that mozilla does...
Web Replay
tercepted and nop'ed to avoid interference with the dirty memory mechanism, and munmap is intercepted with no actual unmapping performed, so that memory does not need to be remapped when restoring a snapshot (a set of free regions is maintained to allow reusing this memory). all snapshots are taken from the main thread. before taking the snapshot, all threads participating in the recording must
enter an idle state, waiting on a thread-specific condition variable. threads
enter this state whenever they are waiting to acquire a lock or perform an atomic action that is part of the recording. while recording, threads may make blocking calls to libraries (e.g. kevent). to allow these threads to be snapshotted, the call is instead performed on a separate thread that does not participate in the r...
...fic condition variable. threads
enter this state whenever they are waiting to acquire a lock or perform an atomic action that is part of the recording. while recording, threads may make blocking calls to libraries (e.g. kevent). to allow these threads to be snapshotted, the call is instead performed on a separate thread that does not participate in the recording, so that the calling thread may
enter the correct idle state even while its progress is blocked on the call completing. once all thread are idle, the main thread computes the memory diff, reads the stacks from each thread and their register state (which each thread recorded by calling setjmp before idling). restoring snapshots is also done from the main thread. as for taking a snapshot, all other threads
enter an idle state. the ...
Gecko events
a pop-up menu has been closed. is supported: yes event_capture_start a window has received mouse capture. is supported: no event_capture_end a window has lost mouse capture. is supported: no event_movesize_start a window is being moved or resized. ...
...d: no event_movesize_start a window is being moved or resized. ...
Gecko Roles
x that provides a set of predefined choices. role_droplist represents the calendar control. role_progressbar represents a progress bar, dynamically showing the user the percent complete of an operation in progress. role_dial represents a dial or knob whose purpose is to allow a user to set a value. role_hotkeyfield represents a hot-key field that allows the user to
enter a combination or sequence of keystrokes. role_slider represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values. role_spinbutton represents a spin box, which is a control that allows the user to increment or decrement the value displayed in a separate "buddy" control associated with the spin box. role_diagram repre...
... role_paragraph a paragraph of text. role_ruler a ruler such as those used in word processors. role_autocomplete a text entry having dialog or list containing items for insertion into an entry widget, for instance a list of words for completion of a text entry. role_editbar an editable text object in a toolbar. role_entry an control whose textual content may be
entered or modified by the user. role_caption a caption describing another object. role_document_frame a visual frame or container which contains a view of document content. document frames may occur within another document instance, in which case the second document may be said to be embedded in the containing instance. html frames are often role_document_frame. either this object, or ...
Observer Notifications
will not always appear. download manager these topics indicate that events related to the download manager have occurred. topic description download-manager-ui-done called when the list of downloads in the download manager windows finishes updating. this can happen multiple times, such as when the window first opens, when multiple items are removed, and when
entering private browsing mode. download-manager-remove-download called when a download of the list is removed or all the list is cleared. the subject will be the download id wrapped in nsisupportspruint32, for one download removed, or null for multi download remove, for example when the download list is cleared. extension manager note: these notifications are no longer available s...
... sent immediately before the session store data is written to disk. sessionstore-state-write-complete sent immediately after the session store data is written to disk. sessionstore-state-purge-complete private browsing these topics indicate when actions related to private browsing occur. topic data description private-browsing
enter sent when private browsing mode is activated. private-browsing exit sent when private browsing mode is deactivated. bookmarks these topics indicate when actions related to bookmarks occur. topic data description bookmarks-restore-begin json sent just before bookmarks are restored from json. bookmarks-restore-begin html sent j...
mozIPlacesAutoComplete
rl 1 << 4 search the url of pages. behavior_typed 1 << 5 search for typed pages. behavior_javascript 1 << 6 search javascript: urls. behavior_openpage 1 << 7 search for pages that have been marked as being opened, such as a tab in a tabbrowser. methods registeropenpage() mark a page as being currently open. ...
...therefore, consumers must unregister or register themselves. void unregisteropenpage( in nsiuri auri ); parameters auri the uri to unregister as an open page. ...
mozIVisitInfoCallback
o the information that was unable to be processed. handleresult() called for each visit added, title change, or guid change when passed to moziasynchistory.updateplaces(). if more than one operation is done for a given visit, this method is only called once (for all changes at once). void handleresult( in moziplaceinfo aplaceinfo ); parameters aplaceinfo the information that was
entered into the database. oncomplete() obsolete since gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) called for each visit added, title change, or guid change when passed to moziasynchistory.updateplaces(). void oncomplete( in nsresult aresultcode, in moziplaceinfo aplaceinfo ); parameters aresultcode nsresult of the change indicating success or fail...
...since gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) called for each visit added, title change, or guid change when passed to moziasynchistory.updateplaces(). void oncomplete( in nsresult aresultcode, in moziplaceinfo aplaceinfo ); parameters aresultcode nsresult of the change indicating success or failure reason. aplaceinfo the information that was being
entered into the database. notes this method was replaced by the separate handleresult() and handleerror() methods in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5). see also mozivisitinfo moziasynchistory ...
nsIAccessibleRole
he calendar control. it is used for date xforms:input. role_progressbar 48 represents a progress bar, dynamically showing the user the percent complete of an operation in progress. it is used for xul:progressmeter, role="progressbar". role_dial 49 represents a dial or knob whose purpose is to allow a user to set a value. role_hotkeyfield 50 represents a hot-key field that allows the user to
enter a combination or sequence of keystrokes. role_slider 51 represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values. it is used by xul:scale, role="slider", xforms:range. role_spinbutton 52 represents a spin box, which is a control that allows the user to increment or decrement the value displayed in a separate "buddy" control associat...
...of text. role_ruler 99 a ruler such as those used in word processors. role_autocomplete 100 a text entry having dialog or list containing items for insertion into an entry widget, for instance a list of words for completion of a text entry. it is used for xul:textbox@autocomplete. role_editbar 101 an editable text object in a toolbar. role_entry 102 an control whose textual content may be
entered or modified by the user. role_caption 103 a caption describing another object. role_document_frame 104 a visual frame or container which contains a view of document content. document frames may occur within another document instance, in which case the second document may be said to be embedded in the containing instance. html frames are often role_document_frame. either this object, or a si...
nsIAppShell
ers aqueue the queue in question. alisten pr_true for a new queue wanting hooking up. pr_false for a queue wanting to be unhooked. resumenative() resumes the use of additional platform-specific methods to run() gecko events on the main application thread. calls to suspendnative() and resumenative may be nested. on some platforms this will be a no-op. void resumenative(); parameters none. run()
enter an event loop. do not leave until exit() is called. void run(); parameters none. runinstablestate() allows running of a "synchronous section", in the form of an nsirunnable once the event loop has reached a "stable state". a stable state is reached when the currently executing task/event has finished, (see: webappapis.html#synchronous-section). in practice this runs arunnable once the currently ...
... none. spinup() obsolete since gecko 1.9 (firefox 3) prepare to process events. void spinup(); parameters none. suspendnative() suspends the use of additional platform-specific methods (besides the nsiappshell->run() event loop) to run gecko events on the main application thread. under some circumstances these "additional methods" can cause gecko event handlers to be re-
entered, sometimes leading to hangs and crashes. calls to suspendnative and resumenative() may be nested. on some platforms (those that do not use any "additional methods") this will be a no-op. does not (in itself) stop gecko events from being processed on the main application thread. but if the nsiappshell->run() event loop is blocked when this call is made, gecko events will stop being processed unt...
nsIHTMLEditor
lean which is true is the htmleditor has been instantiated with css knowledge and if the css pref is currently checked. returninparagraphcreatesnewparagraph boolean a boolean indicating if a return key pressed in a paragraph creates another paragraph or just inserts a <br> at the caret. constants constant value description eleft 0 ec
enter 1 eright 2 ejustify 3 methods adddefaultproperty() registers a default style property with the editor. void adddefaultproperty( in nsiatom aproperty, in astring aattribute, in astring avalue ); parameters aproperty the property to set by default. aattribute the attribute of the property, if applicable. may be null. example: aproper...
...erable so it can later be dropped. void dodrag( in nsidomevent aevent ); parameters aevent getalignment() returns what alignment is in the selection. void getalignment( out boolean amixed, out short aalign ); parameters amixed true if there is more than one type of list item, or if there is some list and non-list. aalign enum value for first encountered alignment (left/c
enter/right) getbackgroundcolorstate() getfontcolorstate() returns what font face is in the selection. astring getbackgroundcolorstate( out boolean amixed ); parameters amixed true if there is more than one font color. return value color string. "" is returned for none. getelementorparentbytagname() return the input node or a parent matching the given atagname, starting the search at t...
nsIParentalControlsService
the event was blocked or false if it was allowed. asource the uri source of the subject content. atarget optional the location to which the content was saved if it was not blocked. requesturioverride() requests that a blocked uri be allowed through parental control filters. this method may block while the operating system presents user interface to handle the override request (such as an "
enter an administrator's password" dialog box). boolean requesturioverride( in nsiuri atarget, in nsiinterfacerequestor awindowcontext optional ); parameters atarget the uri to be overridden. awindowcontext optional the window generating the event. return value true if the block was successfully overridden, otherwise false. requesturioverrides() requests that a set of uris be allowed ...
...ers atarget the uri to be overridden. awindowcontext optional the window generating the event. return value true if the block was successfully overridden, otherwise false. requesturioverrides() requests that a set of uris be allowed through the parental control filters. this method may block while the operating system presents user interface to handle the override request (such as an "
enter an administrator's password" dialog box). boolean requesturioverrides( in nsiarray atargets, in nsiinterfacerequestor awindowcontext optional ); parameters atargets an array of nsiuri objects, each representing a uri for which an override is desired. awindowcontext optional the window generating the event. return value true if the block was successfully overridden, otherwise false...
nsIPromptService
username.value, // password.value, and check.value are set if ok was pressed. promptpassword example promptpassword displays a dialog with a password field and an optional checkbox. var prompts = components.classes["@mozill...
...sword field and an optional checkbox. var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var password = {value: "pass"}; // default the password to pass var check = {value: true}; // default the checkbox to true var result = prompts.promptpassword(null, "title", "
enter password:", password, null, check); // result is true if ok was pressed, false if cancel was pressed. password.value is // set if ok was pressed. the checkbox is not displayed. select example select displays a dialog with a listbox of choices. var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice);...
nsISelection2
int after the method returns. avpercent how to align the frame vertically. a value of 0 means the frame's upper edge is aligned with the top edge of the visible area. a value of 100 means the frame's bottom edge is aligned with the bottom edge of the visible area. for values in between, the point "avpercent" down the frame is placed at the point "avpercent" down the visible area. a value of 50 c
enters the frame vertically. a value of -1 means move the frame the minimum amount necessary in order for the entire frame to be visible vertically (if possible). ahpercent how to align the frame horizontally. a value of 0 means the frame's left edge is aligned with the left edge of the visible area. a value of 100 means the frame's right edge is aligned with the right edge of the visible area. for v...
...vertically (if possible). ahpercent how to align the frame horizontally. a value of 0 means the frame's left edge is aligned with the left edge of the visible area. a value of 100 means the frame's right edge is aligned with the right edge of the visible area. for values in between, the point "ahpercent" across the frame is placed at the point "ahpercent" across the visible area. a value of 50 c
enters the frame horizontally . a value of -1 means move the frame the minimum amount necessary in order for the entire frame to be visible horizontally (if possible). see also nsiselectionprivate ...
nsISelectionPrivate
int after the method returns. avpercent how to align the frame vertically. a value of 0 means the frame's upper edge is aligned with the top edge of the visible area. a value of 100 means the frame's bottom edge is aligned with the bottom edge of the visible area. for values in between, the point "avpercent" down the frame is placed at the point "avpercent" down the visible area. a value of 50 c
enters the frame vertically. a value of -1 means move the frame the minimum amount necessary in order for the entire frame to be visible vertically (if possible). ahpercent how to align the frame horizontally. a value of 0 means the frame's left edge is aligned with the left edge of the visible area. a value of 100 means the frame's right edge is aligned with the right edge of the visible area. for v...
...vertically (if possible). ahpercent how to align the frame horizontally. a value of 0 means the frame's left edge is aligned with the left edge of the visible area. a value of 100 means the frame's right edge is aligned with the right edge of the visible area. for values in between, the point "ahpercent" across the frame is placed at the point "ahpercent" across the visible area. a value of 50 c
enters the frame horizontally . a value of -1 means move the frame the minimum amount necessary in order for the entire frame to be visible horizontally (if possible). native code only!setancestorlimiter void setancestorlimiter( in nsicontent acontent ); parameters acontent native code only!setpresshell internal utility method to set the pres shell on a newly created selection. void ...
nsISound
constant value description event_new_mail_received 0 the system receives email. event_alert_dialog_open 1 an alert dialog is opened. event_confirm_dialog_open 2 a confirm dialog is opened. event_prompt_dialog_open 3 a prompt dialog (one that allows the user to
enter data, such as an authentication dialog) is opened. event_select_dialog_open 4 a select dialog (one that contains a list box) is opened. event_menu_execute 5 a menu item is executed. event_menu_popup 6 a popup menu is shown. event_editor_max_len 7 more characters than the maximum all...
... _moz_mailbeep the system sound when the system receives email. _moz_alertdialog the system sound when an alert dialog is opened. _moz_confirmdialog the system sound when a confirm dialog is opened. _moz_promptdialog the system sound when a prompt dialog (one that allows the user to
enter data, such as an authentication dialog) is opened. _moz_selectdialog the system sound when a select dialog (one that contains a list box) is opened. _moz_menucommand the system sound when a menu item is executed. _moz_menupopup the system sound when a popup menu is shown. ...
XPCOM Thread Synchronization
deprecated code that is shown only to compare with approved code. ...
...zilla; concurrentmethod() { mutexautolock al(mlock); monitorauto
enter am(mmonitor); if (needexpensivecomputation()) { mutexautounlock au(mlock); } am.wait(); mcvar->notify(); } mozilla synchronization api reference the mozilla:: namespace exports the following synchronization primitives. ...
Autoconfiguration in Thunderbird
author: ben bucksch please do not change this document without consulting the author thunderbird 3.1 and later (and 3.0 to some degree) includes mail account autoconfiguration functionality. the goal of autoconfiguration is to make it very easy for users to configure the connection of thunderbird to their email servers. in many cases, people should be able to download and install thunderbird,
enter their real name, email address and password in the account setup wizard and have a fully functioning mail client and get and send their mail as securely as possible. see also: for instructions for users, see automatic account configuration on the thunderbird knowledge base. the configuration file description and definition the original project page on the mozilla wiki for background, design...
...is difficult to update the configuration file. guessing if all other mechanisms failed, thunderbird tries to guess the configuration, by trying common server names like imap.<domain>, smtp.<domain>, mail.<domain> etc., and, when a mail server answers, checking whether it supports ssl, starttls and encrypted passwords (cram-md5). manual configuration if guessing fails, the user must manually
enter the configuration information. users may also choose to manually modify the account settings, even if configuration information is successfully obtained by the methods described above. all the lookup mechanisms use the email address domain as base for the lookup. for example, for the email address fred@example.com , the lookup is performed as (in this order): tb-install-dir/isp/example.com.x...
Index
nderbird address books. address book interfaces provides an overview of the related interfaces. see an overview of thunderbird components for a general description of the thunderbird user interface and related programmatic interfaces. 9 address book sync client design by richard h. pizzarro <rhp@netscape.com> 10 autoconfiguration in thunderbird administration,
enterprise author: ben bucksch please do not change this document without consulting the author 11 autoconfig file format no summary! 12 autoconfig file format definition please see https://wiki.mozilla.org/thunderbird:autoconfiguration:configfileformat. 13 autoconfig: how to create a configuration file autoconfiguration, thunderbird ...
...e for nitty-gritty details or if this page seems to be wrong. glodaindexer provides the core indexing logic. glodamsgindexer has the message-specific stuff, although the actual attribute-providers are found in glodaexplicitattr and glodafundattr. glodaabindexer has the limited address book support. 32 index index found 72 pages: 33 ldap support administration,
enterprise, thunderbird this document is intended to "fill in the gaps" about how
enterprise customers can leverage and customize ldap support in mozilla thunderbird. it is not intended as an introduction to ldap and mozilla products. it assumes you are already familiar with configuring preferences for deployed builds in addition to setting up thunderbird to use an ldap directory. it should be no...
Thunderbird Configuration Files
n windows 95/98/me, the path is usually c:\windows\application data\thunderbird\profiles\xxxxxxxx.default\ on linux, the path is usually ~/.thunderbird/xxxxxxxx.default/ on mac os x, the path is usually ~/library/thunderbird/profiles/xxxxxxxx.default/ %appdata% is a shorthand for the application data path on windows 2000/xp/vista. to use it, click start > run... (use the search box on vista),
enter %appdata% and press
enter. you will be taken to the "real" folder, which is normally c:\documents and settings\[user name]\application data on windows xp/2000, c:\users\[user name]\appdata\roaming on windows vista. thunderbird is capable of handling more than one user and thus, more than one profile. the path examples above refers to the default profile that is automatically created when you sta...
... ...
Search - Firefox Developer Tools
if you are searching for a specific function within the current javascript file, you can use the outline tab in the debugger to find it quickly. the outline tab lists the functions in the current file. the default sort order is by the order in the file but you can simplify the search by click on "sort by name" at the bottom of the tab. you can further simplify the search by filtering the list.
enter text into the text input above the list to limit the results in the outline. for example, if i
enter "load" when viewing the above list, i get the following: only the functions with load in their name are shown. this feature may not seem terribly useful when searching a file with a handful of functions in it but when you are searching through a file with dozens of functions, it comes in handy...
...ame are shown. this feature may not seem terribly useful when searching a file with a handful of functions in it but when you are searching through a file with dozens of functions, it comes in handy. searching in all files you can also search for a string in all of the files included in the currently opened project. press shift + ctrl + f (windows and linux) or shift + cmd + f (macos) and then
enter the string you are trying to find. if the string exists in any of the files in the project, the search will return a list showing a list by file and line number. click on any entry in the list to go directly to the line in the file where the string occurs. ...
Debugger - Firefox Developer Tools
turn a resumption value specifying how the debuggee’s execution should proceed. however, note that a { return:value } resumption value is treated like undefined (“continue normally”);value is ignored. ondebuggerstatement(frame) debuggee code has executed adebugger statement inframe. this method should return a resumption value specifying how the debuggee’s execution should proceed. on
enterframe(frame) the stack frameframe is about to begin executing code. (naturally,frame is currently the youngest visible frame.) this method should return a resumption value specifying how the debuggee’s execution should proceed. spidermonkey only calls on
enterframe to report visible, non-"debugger" frames. onexceptionunwind(frame,value) the exceptionvalue has been thrown, and has propa...
... method should return a resumption value specifying how the debuggee’s execution should proceed. if it returns undefined, the exception continues to propagate as normal: if control in frame is in a try block, control jumps to the corresponding catch or finally block; otherwise,frame is popped, and the exception propagates toframe’s caller. when an exception’s propagation causes control to
enter a finally block, the exception is temporarily set aside. if the finally block finishes normally, the exception resumes propagation, and the debugger’s onexceptionunwind handler is called again, in the same frame. (the other possibility is for the finally block to exit due to a return, continue, or break statement, or a new exception. in those cases the old exception does not continue to propaga...
Eyedropper - Firefox Developer Tools
's rules view have color samples next to them: clicking the sample shows a color picker popup. from firefox 31, the popup contains an eyedropper icon: click this icon to activate the eyedropper. ...
...color samples next to them: clicking the sample shows a color picker popup. from firefox 31, the popup contains an eyedropper icon: click this icon to activate the eyedropper. ...
UI Tour - Firefox Developer Tools
to learn more about the structure of the html pane, see the guide to examining and editing html. rules view the rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific. see above. see examine and edit css ...
...to learn more about the structure of the html pane, see the guide to examining and editing html. ...
Web Console UI Tour - Firefox Developer Tools
essages were logged. group similar messages: when enabled, similar types of messages are grouped together, with an indicator of the number of occurrences. enable autocompletion: when enabled, the javascript interpreter attempts to autocomplete while you type. ...
...e autocompletion: when enabled, the javascript interpreter attempts to autocomplete while you type. instant evaluation: when enabled, the interpreter displays the evaluated results of an expression, when possible, before you press
enter to submit it. message display pane this is where the messages appear, both those generated by the code in the page, and those generated by the commands
entered on the command line. see console messages for a lot more detail on what the messages can contain. note: you can clear the contents of the console by
entering the keyboard command ctrl + shift + l (windows, macos, and linux) or cmd + k on macos. command line the command line starts with double angle brackets (>>). use it to
enter javascript expressions. in firefox 71 onwards, there is a n...
Background Tasks API - Web APIs
the cooperative scheduling of background tasks api (also referred to as the background tasks api or simply the requestidlecallback() api) provides the ability to queue tasks to be executed automatically by the user agent when it determines that there is free time to do so. concepts and usage the main thread of a web browser is c
entered around its event loop. this code draws any pending updates to the document currently being displayed, runs any javascript code the page needs to run, accepts events from input devices, and dispatches those events to the elements that should receive them. in addition, the event loop handles interactions with the operating system, updates to the browser's own user interface, and so forth. it's an extremely busy chunk of code, and your main javascript c...
...the goal: to be able to add requests to call functions to a queue, with an idle callback that runs those functions whenever the system is idle for long enough a ti...
Using the CSS Typed Object Model - Web APIs
a cssimagevalue. a <color> would return a cssstylevalue. a transform returns a csstransformvalue. a custom property returns a cssunparsedvalue. you can use a cssunitvalue or csskeywordvalue to create other objects. for example, the parameters for a csspositionvalue is one to two cssunitvalues or csskeywordvalues, or one of each: let position = new csspositionvalue( new csskeywordvalue("c
enter"), new cssunitvalue(10, "px")); cssstylevalue the cssstylevalue interface of the the css typed object model api is the base class of all css values accessible through the typed om api, including cssimagevalue, csskeywordvalue, cssnumericvalue, csspositionvalue, csstransformvalue, and cssunparsedvalue. it has two methods: cssstylevalue.parse() cssstylevalue.parseall() as noted above,...
... <button>styled button</button> // get the element const button = document.queryselector( 'button...
Basic animations - Web APIs
time :<span id="time">0</span> </div> <div>lousygames ©</div> <div> 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: c
enter; 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 d...
...ex; transition: .5s } .banner:hover { opacity: 1 } div#selector>div { flex-basis: 30% } @keyframes diss { from { opacity: 1 } to { opacity: 0 } } .keypress>div { border: dashed 3px #fff; height: 48%; width: 48%; display: flex; align-content: c
enter; justify-content: c
enter; align-self: c
enter; align-items: c
enter; 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; ...
Using channel messaging - Web APIs
nsfer between a page and an embedded <iframe>. secondly, have a look at our multimessaging demo (run this live), which shows a slightly more complex setup that can send multiple messages between the main page and an iframe. we'll be focusing on the latter example in this article. it looks like so: creating the channel in the main page of the demo, we have a simple form with a text input for
entering messages to be sent to an <iframe>. we also have a paragraph which we will use later on to display confirmation messages that we will receive back from the <iframe>. var input = document.getelementbyid('message-input'); var output = document.getelementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messag...
...xample it is set to 'init'. the origin the message is to be sent to. * means "any origin". an object, the ownership of which is transferred to the receiving browsing context. in this case, we are transferring messagechannel.port2 to the iframe, so it can be used to communicate with the main page. when our button is clicked, we prevent the form from submitting as normal and then send the value
entered in our text input to the iframe via the messagechannel. receiving the port and message in the iframe over in the iframe, we have the following javascript: var list = document.queryselector('ul'); var port2; // listen for the initial port transfer message window.addeventlistener('message', initport); // setup the transferred port function initport(e) { port2 = e.ports[0]; port2.onmessag...
DOMMatrix - Web APIs
x. this is equivalent to the dot product b⋅a, where matrix a is the source matrix and b is the matrix given as an input to the method. returns itself. dommatrix.translateself() modifies the matrix by applying the specified vector. the default vector is [0, 0, 0]. returns itself. dommatrix.scalenonuniformself() modifies the matrix by applying the specified scaling on the x, y, and z axes, c
entered at the given origin. by default, the y and z axes' scaling factors are both 1, but the scaling factor for x must be specified. the default origin is (0, 0, 0). returns itself. dommatrix.scaleself() modifies the matrix by applying the specified scaling factors, with the c
enter located at the specified origin. also returns itself. by default, the scaling factor is 1 for all three axes, and the ...
...returns itself. dommatrix.rotateself() modifies the matrix by rotating itself around each axis by the specified number of degrees. returns itself. ...
DOMMatrixReadOnly - Web APIs
s axes by the specified number of degrees. the original matrix is not altered. dommatrixreadonly.rotatefromvector() returns a new dommatrix created by rotating the source matrix by the angle between the specified vector and (1, 0). the original matrix is not modified. dommatrixreadonly.scale() returns a new dommatrix created by scaling the source matrix by the amount specified for each axis, c
entered on the given origin. by default, the x and z axes are scaled by 1 and the y axis has no default scaling value. the default origin is (0, 0, 0). the original matrix is not modified. dommatrixreadonly.scale3d() returns a new dommatrix created by scaling the source 3d matrix by the given factor along all its axes, c
entered on the specified origin point. the default origin is (0, 0, 0). the origi...
...by default, the y and z axes' scaling factors are both 1, but the scaling factor for x must be specified. the default origin is (0, 0, 0). the original matrix is not changed. ...
DataTransfer.dropEffect - Web APIs
hovers over a target drop element, the browser's cursor may indicate which type of operation will occur. when the datatransfer object is created, dropeffect is set to a string value. on getting, it returns its current value. on setting, if the new value is one of the values listed below, then the property's current value will be set to the new value and other values will be ignored. ...
... listed below, then the property's current value will be set to the new value and other values will be ignored. for the drag
enter and dragover events, dropeffect will be initialized based on what action the user is requesting. how this is determined is platform specific, but typically the user can press modifier keys such as the alt key to adjust the desired action. within event handlers for drag
enter and dragover events, dropeffect should be modified if a different action is desired than the action that the user is requesting. for the drop and dragend events, dropeffect will be set to the action that was desired, which will be the value dropeffect had after the last drag
enter or dragover event. in a dragend event, for instance, if the desired dropeffect is "move", then the data being dragge...
DataTransferItem.webkitGetAsEntry() - Web APIs
the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing". <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here. ...
... <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here. #dropzone { text-align: c
enter; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: c
enter; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function. this function takes as input a filesystementry representing an entry in the file system to be scanned and processed (the item parameter), and an element into which to insert the list of c...
Document: drag event - Web APIs
examples see this code in a jsfiddle demo or interact with it below. html <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.datatransfer.setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: c
enter; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; } javascript var dragged; /* events fired on the draggable target */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref. on the dragged elem dragged = event.target; // ...
...ake it half transparent event.target.style.opacity = .5; }, false); document.addeventlistener("dragend", function(event) { // reset the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("drag
enter", function(event) { // highlight potential drop target when the draggable element
enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it if (event.target.classname == "dropzone") { event...
Document.execCommand() - Web APIs
rnet explorer.) increasefontsize adds a <big> tag around the selection or at the insertion point. (not supported by internet explorer.) indent indents the line containing the selection or insertion point. in firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented. insertbronreturn controls whether the
enter key inserts a <br> element, or splits the current block element into two. (not supported by internet explorer.) inserthorizontalrule inserts a <hr> element at the insertion point, or replaces the selection with it. inserthtml inserts an html string at the insertion point (deletes selection). requires a valid html string as a value argument. (not supported by internet explorer.) insertimage ...
... insertparagraph inserts a paragraph around the selection or the current line. (internet explorer inserts a paragraph at the insertion point and deletes the selection.) inserttext inserts the given plain text at the insertion point (deletes selection). italic toggles italics on/off for the selection or at the insertion point. (internet explorer uses the <em> element instead of <i>.) justifyc
enter c
enters the selection or insertion point. justifyfull justifies the selection or insertion point. justifyleft justifies the selection or insertion point to the left. justifyright right-justifies the selection or the insertion point. outdent outdents the line containing the selection or insertion point. paste pastes the clipboard contents at the insertion point (replaces current selecti...
Document: fullscreenchange event - Web APIs
event is fired immediately after the browser switches into or out of full-screen mode. bubbles yes cancelable no interface event event handler property onfullscreenchange the event is sent to the element that is transitioning into or out of full-screen mode, and this event then bubbles up to the document. to find out whether the element is
entering or exiting full-screen mode, check the value of documentorshadowroot.fullscreenelement: if this value is null then the element is exiting full-screen mode, otherwise it is
entering full-screen mode. examples in this example, a handler for the fullscreenchange event is added to the document. document.addeventlistener('fullscreenchange', (event) => { // document.fullscreenelement will point...
...s example, a handler for the fullscreenchange event is added to the document. document.addeventlistener('fullscreenchange', (event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one. if there isn't one, // the value of the property is null. if (document.fullscreenelement) { console.log(`element: ${document.fullscreenelement.id}
entered full-screen mode.`); } else { console.log('leaving full-screen mode.'); } }); see element: fullscreenchange event for another example. specifications specification status fullscreen api living standard ...
Document: wheel event - Web APIs
heel event's delta* properties to get the scrolling direction. instead, detect value changes of scrollleft and scrolltop in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
...ies to get the scrolling direction. instead, detect value changes of scrollleft and scrolltop in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
DragEvent - Web APIs
atatransfer objects have a processing and security model that is coordinated by the browser during drag-and-drops. dragevent() creates a synthetic and untrusted dragevent. event types drag this event is fired when an element or text selection is being dragged. dragend this event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key). drag
enter this event is fired when a dragged element or text selection
enters a valid drop target. dragexit this event is fired when an element is no longer the drag operation's immediate selection target. dragleave this event is fired when a dragged element or text selection leaves a valid drop target. dragover this event is fired continuously when an element or text selection is being dragged and ...
...useover ). dragstart this event is fired when the user starts dragging an element or text selection. drop this event is fired when an element or text selection is dropped on a valid drop target. globaleventhandlers globaleventhandlers.ondrag a global event handler for the drag event. globaleventhandlers.ondragend a global event handler for the dragend event. globaleventhandlers.ondrag
enter a global event handler for the drag
enter event. globaleventhandlers.ondragexit a global event handler for the dragexit event. globaleventhandlers.ondragleave a global event handler for the dragleave event. globaleventhandlers.ondragover a global event handler for the dragover event. globaleventhandlers.ondragstart a global event handler for the dragstart event. globaleventhandlers.ondro...
Element: auxclick event - Web APIs
ce that in addition to capturing the auxclick event using onauxclick, the contextmenu event is also captured, and preventdefault() called on that event, in order to prevent the context menu from popping up after the color change is applied. ...
...capturing the auxclick event using onauxclick, the contextmenu event is also captured, and preventdefault() called on that event, in order to prevent the context menu from popping up after the color change is applied. html <button><h1>click me!</h1></button> css html { height: 100%; overflow: hidden; } body { height: inherit; display: flex; justify-content: c
enter; align-items: c
enter; margin: 0; } button { border: 0; background-color: white; font-size: 8vw; display: block; width: 100%; height: 100%; } h1 { letter-spacing: 0.5rem; } result note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when any of the non-left mouse buttons are clicked (usually including any "special" buttons on gaming mice). specificatio...
Element.innerHTML - Web APIs
ng mouse events inside this container..."); the log() function creates the log output by getting the current time from a date object using tolocaletimestring(), and building a string with the timestamp and the message text. then the message is appended to the box with the class "log". ...
... <div class="box"> <div><strong>log:</strong></div> <div class="log"></div> </div> the <div> with the class "box" is just a container for layout purposes, presenting the contents with a box around it. the <div> whose class is "log" is the container for the log text itself. css th...
Element.releasePointerCapture() - Web APIs
lanation invalidpointerid pointerid does not match any of the active pointers. example this example sets pointer capture on a <div> when you press down on it. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. ...
...idpointerid pointerid does not match any of the active pointers. example this example sets pointer capture on a <div> when you press down on it. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. ...
Element.scrollIntoViewIfNeeded() - Web APIs
nt.scrollintoviewifneeded() method scrolls the current element into the visible area of the browser window if it's not already within the visible area of the browser window. if the element is already within the visible area of the browser window, then no scrolling takes place. this method is a proprietary variation of the standard element.scrollintoview() method. syntax todo parameters opt_c
enter is an optional boolean value with a default value of true: if true, the element will be aligned so it is c
entered within the visible area of the scrollable ancestor. if false, the element will be aligned to the nearest edge of the visible area of the scrollable ancestor. depending on which edge of the visible area is closest to the element, either the top of the element will be aligned to ...
...lable ancestor. depending on which edge of the visible area is closest to the element, either the top of the element will be aligned to the top edge of the visible area, or the bottom edge of the element will be aligned to the bottom edge of the visible area. example var element = document.getelementbyid("my-el"); element.scrollintoviewifneeded(); element.scrollintoviewifneeded(true); // c
enters the element in the visible area specifications not part of any specification. this is a proprietary, webkit-specific method. ...
Element: wheel event - Web APIs
elta* properties to get the scrolling direction. instead, detect value changes of scrollleft and scrolltop of the target in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
... scrolling direction. instead, detect value changes of scrollleft and scrolltop of the target in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
Element - Web APIs
46.0 and firefox since version 48.0. properties included from slotable the element interface includes the following property, defined on the slotable mixin. slotable.assignedslotread only returns a htmlslotelement representing the <slot> the node is inserted in. event handlers element.onfullscreenchange an event handler for the fullscreenchange event, which is sent when the element
enters or exits full-screen mode. this can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is running in the background. element.onfullscreenerror an event handler for the fullscreenerror event, which is sent when an error occurs while attempting to change into full-screen mode. methods inherits methods from its parents nod...
...perty. dblclick fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element. also available via the ondblclick property. domactivate occurs when an element is activated, for instance, through a mouse click or a keypress. mousedown fired when a pointing device button is pressed on an element. also available via the onmousedown property. mouse
enter fired when a pointing device (usually a mouse) is moved over the element that has the listener attached. also available via the onmouse
enter property. mouseleave fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it. also available via the onmouseleave property. mousemove fired when a pointing device (usually a mouse) ...
FileSystemDirectoryReader.readEntries() - Web APIs
the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing". <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here. ...
... <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here. #dropzone { text-align: c
enter; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: c
enter; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function. this function takes as input a filesystementry representing an entry in the file system to be scanned and processed (the item parameter), and an element into which to insert the list of c...
Fullscreen API - Web APIs
e you provide, somewhere in your user interface, appropriate user interface elements that inform the user that this option is available to them. note: navigating to another page, changing tabs, or switching to another application using any application switcher (or alt-tab) will likewise exit full-screen mode. example in this example, a video is presented in a web page. pressing the return or
enter key lets the user toggle between windowed and full-screen presentation of the video. view live examples watching for the
enter key when the page is loaded, this code is run to set up an event listener to watch for the
enter key. document.addeventlistener("keypress", function(e) { if (e.keycode === 13) { togglefullscreen(); } }, false); toggling full-screen mode this code is called ...
... function togglefullscreen() { if (!document.fullscreenelement) { document.documentelement.requestfullscreen(); } else { if (document.exitfullscreen) { document.exitfullscreen(); } } } this starts by looking at the value of the document's fullscreenelement attribute. ...
GlobalEventHandlers.onanimationcancel - Web APIs
iv id="box" onanimationcancel="handlecancelevent(event);"> <div id="text">box</div> </div> </div> <div class="button" id="togglebox"> hide the box </div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { width: 300px; height: 300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: c
enter; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: c
enter; align-self: c
enter; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter fo...
...es, including animation, defined. we go ahead and describe the animation in-place here because the animation is intended to begin as soon as the page loads, rather than based on an event. #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: c
enter; animation: 5s ease-in-out 0s infinite alternate both slidebox; } the animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner. @keyframes slidebox { from { left:0; top:0; } to { left:calc(100% - var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } since the animation is described as taking ...
GlobalEventHandlers.onanimationend - Web APIs
le html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: c
enter; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: c
enter; align-self: c
enter; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter ...
...ayout. 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: c
enter; } the animation sequence is described next. 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. the 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. .slideanima...
GlobalEventHandlers.onanimationstart - Web APIs
le html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: c
enter; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: c
enter; align-self: c
enter; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter ...
...ayout. 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: c
enter; } the animation sequence is described next. 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. the 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. .slideanima...
GlobalEventHandlers.oncontextmenu - Web APIs
=> { e.preventdefault(); } result pausing an animation this example pauses a spinning shape whenever you open the context menu. ...
...} result pausing an animation this example pauses a spinning shape whenever you open the context menu. ...
GlobalEventHandlers.onwheel - Web APIs
ntax target.onwheel = functionref; value functionref is a function name or a function expression. the function receives a wheelevent object as its sole argument. examples this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
...tionref; value functionref is a function name or a function expression. the function receives a wheelevent object as its sole argument. examples this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
HTMLElement: change event - Web APIs
esult; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus. ...
...nge', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus. try
entering something into the field below, and then click somewhere else to trigger the event. ...
HTMLElement: input event - Web APIs
t should fire whenever a user toggles the control, per the html5 specification. however, historically this has not always been the case. check compatibility, or use the change event instead for elements of these types. note: the input event is fired every time the value of the element changes. ...
...d for elements of these types. note: the input event is fired every time the value of the element changes. this is unlike the change event, which only fires when the value is committed, such as by pressing the
enter key, selecting a value from a list of options, and the like. examples this example logs the value whenever you change the value of the <input> element. ...
HTMLElement - Web APIs
0959). htmlelement.onpaste returns the event handling code for the paste event (bug 280959). toucheventhandlers.ontouchstart returns the event handling code for the touchstart event. toucheventhandlers.ontouchend returns the event handling code for the touchend event. toucheventhandlers.ontouchmove returns the event handling code for the touchmove event. toucheventhandlers.ontouch
enter returns the event handling code for the touch
enter event. toucheventhandlers.ontouchleave returns the event handling code for the touchleave event. toucheventhandlers.ontouchcancel returns the event handling code for the touchcancel event. methods inherits methods from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventh...
...tercapture(). also available via the ongotpointercapture property. lostpointercapture fired when a captured pointer is released. also available via the onlostpointercapture property. pointercancel fired when a pointer event is canceled. also available via the onpointercancel property. pointerdown fired when a pointer becomes active. also available via the onpointerdown property. pointer
enter fired when a pointer is moved into the hit test boundaries of an element or one of its descendants. also available via the onpointer
enter property. pointerleave fired when a pointer is moved out of the hit test boundaries of an element. also available via the onpointerleave property. pointermove fired when a pointer changes coordinates. also available via the onpointermove property. poin...
HTMLMediaElement - Web APIs
not enough information to determine whether the media will play or not, or an empty string if the media cannot be played. htmlmediaelement.fastseek() directly seeks to the given time. htmlmediaelement.load() resets the media to the beginning and selects the best available source from the sources provided using the src attribute or the <source> element. htmlmediaelement.mozcapturestream() [
enter description] htmlmediaelement.mozcapturestreamuntilended() [
enter description] htmlmediaelement.mozgetmetadata() returns object, which contains properties that represent metadata from the playing media resource as {key: value} pairs. a separate copy of the data is returned each time the method is called. this method must be called after the loadedmetadata event fires. htmlmediaelement.pa...
...eo>) is reached or because no further data is available. error fired when the resource could not be loaded due to an error. loadeddata fired when the first frame of the media has finished loading. loadedmetadata fired when the metadata has been loaded loadstart fired when the browser has started to load a resource. pause fired when a request to pause play is handled and the activity has
entered its paused state, most commonly occurring when the media's htmlmediaelement.pause() method is called. play fired when the paused property is changed from true to false, as a result of the htmlmediaelement.play() method, or the autoplay attribute playing fired when playback is ready to start after having been paused or delayed due to lack of data progress fired periodically as the browser ...
Dragging and Dropping Multiple Items - Web APIs
method. this ...
...method. this allows a drop to occur on that element. the dodrop event hander is called when dropping an item. it checks the mozitemcount property to check how many items have been dropped and iterates over them. ...
MediaStreamConstraints.audio - Web APIs
in the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: c
enter; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ ...
...in the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: c
enter; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ ...
MediaStreamConstraints.video - Web APIs
in the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: c
enter; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ ...
...in the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: c
enter; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ ...
MouseEvent() - Web APIs
"region", optional and defaulting to null, of type domstring, is the id of the hit region affected by the event. the absence of any hit region is affected, is represented by the null value. in some implementations, passing anything other than a number for the screen and client fields will throw a typeerror. the mouseeve...
... "region", optional and defaulting to null, of type domstring, is the id of the hit region affected by the event. the absence of any hit region is affected, is represented by the null value. in some implementations, passing anything other than a number for the screen and client fields will throw a typeerror. the mouseeventinit dictionary also acc...
Path2D - Web APIs
adds a cubic bézier curve to the path. it requires three points. the first two points are control points and the third one is the end point. the starting point is the last point in the current path, which can be changed using moveto() before creating the bézier curve. path2d.quadraticcurveto() adds a quadratic bézier curve to the current path. ...
... path2d.rect() creates a path for a rectangle at position (x, y) with a size that is determined by width and height. ...
PayerErrors.email - Web APIs
il = payererrors.email; value if validation of the payer's email address (paymentresponse.payeremail) found problems, this property should be set to a domstring that explains the validation problem and how to correct it. if the email address is valid, this property should be omitted from the payererrors object. ...
...omstring that explains the validation problem and how to correct it. if the email address is valid, this property should be omitted from the payererrors object. example function validatepayment(response) { const correctionpromises let paym
enterrors = {}; let payererrors = {}; // check payer details if (!validemail(response.payeremail)) { payererrors.email = "please make sure you
enter a valid email address." } if (!validname(response.payername)) { payererrors.email = "please
enter a valid name, using only <appropriate characters>." } if (!validphone(response.payerphone)) { payererrors.phone = "please
enter a valid phone number in the form ###-###-####." } // check everything else too... // } specifications specification status comment ...
PayerErrors.name - Web APIs
ererrors object, the payer's name couldn't be successfully validated, and the name property's value is a domstring explaining the error. this string will be displayed to the user by the user agent's payment handling user interface. if the payer's name is valid, this property is left out of the payererrors object. ...
...e displayed to the user by the user agent's payment handling user interface. if the payer's name is valid, this property is left out of the payererrors object. example function validatepayment(response) { const correctionpromises let paym
enterrors = {}; let payererrors = {}; // check payer details if (!validemail(response.payeremail)) { payererrors.email = "please make sure you
enter a valid email address." } if (!validname(response.payername)) { payererrors.email = "please
enter a valid name, using only <appropriate characters>." } if (!validphone(response.payerphone)) { payererrors.phone = "please
enter a valid phone number in the form ###-###-####." } // check everything else too... // } specifications specification status comment ...
PayerErrors.phone - Web APIs
r's phone number couldn't be successfully validated, and the phone property's value is a domstring explaining the error. this string will be displayed to the user by the user agent's payment handling user interface as appropriate. if the phone number is valid, this property is omitted from the payererrors object. ...
...he user by the user agent's payment handling user interface as appropriate. if the phone number is valid, this property is omitted from the payererrors object. example function validatepayment(response) { const correctionpromises let paym
enterrors = {}; let payererrors = {}; // check payer details if (!validemail(response.payeremail)) { payererrors.email = "please make sure you
enter a valid email address." } if (!validname(response.payername)) { payererrors.email = "please
enter a valid name, using only <appropriate characters>." } if (!validphone(response.payerphone)) { payererrors.phone = "please
enter a valid phone number in the form ###-###-####." } // check everything else too... // } specifications specification status comment ...
PaymentCurrencyAmount.value - Web APIs
ts between 0 and 9 with up to one optional decimal point. an optional leading minus sign ("-") can be included to indicate a negative value, such as to represent a refund or discount. important note: the number given in this string is always specified using the period (".") as the decimal point, rather than the comma (","), even if the user's locale normally uses the comma. you must convert the
entered text to this form or it will not be valid. syntax value = paymentcurrencyamount.value; value a domstring indicating the numeric value of the payment. this must be a valid decimal number, with an optional leading minus sign ("-"), then one or more decimal digits 0 through 9, optionally with a decimal point (".") with at least one digit following it to represent fractional units. there must ...
... specifications specification stat...
PointerEvent - Web APIs
perty. note: it's important to note that in many cases, both pointer and mouse events get sent (in order to let non-pointer-specific code still interact with the user). if you use pointer events, you should call event.preventdefault() to keep the mouse event from being sent as well. pointerover this event is fired when a pointing device is moved into an element's hit test boundaries. pointer
enter this event is fired when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown). this event type is similar to pointerover, but differs in that it does not bubble. pointerdown the event is fired when a pointer becomes active. for mouse, it is fired ...
...this event is fired when the stylus leaves the hover range detectable by the digitizer. gotpointercapture this event is fired when an element receives pointer capture. lostpointercapture this event is fired after pointer capture is released for a pointer. globaleventhandlers globaleventhandlers.onpointerover a global event handler for the pointerover event. globaleventhandlers.onpointer
enter a global event handler for the pointer
enter event. globaleventhandlers.onpointerdown a global event handler for the pointerdown event. globaleventhandlers.onpointermove a global event handler for the pointermove event. globaleventhandlers.onpointerup a global event handler for the pointerup event. globaleventhandlers.onpointercancel a global event handler for the pointercancel event. gl...
Pointer Lock API - Web APIs
(from https://w3c.github.io/pointerlock/#extensions-to-the-element-interface) pointerlockelement and exitpointerlock() the pointer lock api also extends the document interface, adding both a new property and a new method. the new property is used...
... 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 mouse is unlocked, the system cursor can exit and re-
enter the browser window. if that happens, movementx and movementy could be set to zero. simple example walkthrough we've written a simple pointer lock demo to show you how to use it to set up a simple control system (see source code). the demo looks like this: this demo uses javascript to draw a ball on top of an <canvas> element. when you click the canvas, pointer lock is then used to remove the...
SVGTransform - Web APIs
c=0 and d=1). for svg_transform_scale, a and d represent the scale amounts (b=0, c=0, e=0 and f=0). for svg_transform_skewx and svg_transform_skewy, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0). for svg_transform_rotate, a, b, c, d, e and f together represent the matrix which will result in the given rotation. when the rotation is around the c
enter point (0, 0), e and f will be zero. methods name & arguments return description setmatrix(in svgmatrix matrix) void sets the transform type to svg_transform_matrix, with parameter matrix defining the new transformation. note that the values from the parameter matrix are copied. exceptions: a domexception with code no_modifica...
...ons: a domexception with code no_modification_allowed_err is raised when attempting to modify a read only attribute or when the object itself is read only. setrotate(in float angle, in float cx , in float cy) void sets the transform type to svg_transform_rotate, with parameter angle defining the rotation angle and parameters cx and cy defining the optional c
enter of rotation. exceptions: a domexception with code no_modification_allowed_err is raised when attempting to modify a read only attribute or when the object itself is read only. setskewx(in float angle) void sets the transform type to svg_transform_skewx, with parameter angle defining the amount of skew. exceptions: a domexception with co...
ScrollToOptions.behavior - Web APIs
gle jump. this is actually defined on the scrolloptions dictionary, which is implemented by scrolltooptions. syntax behavior: scrollbehavior value an enum, the value of which can be one of the following: smooth: the scrolling animates smoothly. auto: the scrolling happens in a single jump. ...
...pens in a single jump. examples in our scrolltooptions example (see it live) we include a form that allows the user to
enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
ScrollToOptions.left - Web APIs
the left property of the scrolltooptions dictionary specifies the number of pixels along the x axis to scroll the window or element. syntax left: double value a double. examples in our scrolltooptions example (see it live) we include a form that allows the user to
enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
...ouble value a double. examples in our scrolltooptions example (see it live) we include a form that allows the user to
enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
ScrollToOptions.top - Web APIs
the top property of the scrolltooptions dictionary specifies the number of pixels along the y axis to scroll the window or element. syntax top: double value a double. examples in our scrolltooptions example (see it live) we include a form that allows the user to
enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
...ouble value a double. examples in our scrolltooptions example (see it live) we include a form that allows the user to
enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
ScrollToOptions - Web APIs
pecifies the number of pixels along the x axis to scroll the window or element. scrolltooptions.behavior specifies whether the scrolling should animate smoothly, or happen instantly in a single jump. this is actually defined on the scrolloptions dictionary, which is implemented by scrolltooptions. ...
...ed by scrolltooptions. examples in our scrolltooptions example (see it live) we include a form that allows the user to
enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not. ...
SubtleCrypto.unwrapKey() - Web APIs
er. */ function bytestoarraybuffer(bytes) { const bytesasarraybuffer = new arraybuffer(bytes.length); const bytesuint8 = new uint8array(bytesasarraybuffer); bytesuint8.set(bytes); return bytesasarraybuffer; } /* get some key material to use as input to the derivekey method. the key material is a password supplied by the user. */ function getkeymaterial() { let password = window.prompt("
enter your password"); let enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* derive an aes-kw key using pbkdf2. */ async function getunwrappingkey() { // 1. get the key material (user-supplied password) const keymaterial = await getkeymaterial(); // 2 initialize the s...
...er. */ function bytestoarraybuffer(bytes) { const bytesasarraybuffer = new arraybuffer(bytes.length); const bytesuint8 = new uint8array(bytesasarraybuffer); bytesuint8.set(bytes); return bytesasarraybuffer; } /* get some key material to use as input to the derivekey method. the key material is a password supplied by the user. */ function getkeymaterial() { let password = window.prompt("
enter your password"); let enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* derive an aes-gcm key using pbkdf2. */ async function getunwrappingkey() { // 1. get the key material (user-supplied password) const keymaterial = await getkeymaterial(); // 2 initialize the ...
ValidityState.typeMismatch - Web APIs
tring, a single valid url, or one or more comma separated urls if the multiple attribute is present, there is a typemismatch. ...
...ere is a typemismatch. type attribute conformance input type value expected value email x@y or x@y.z email address, with or without tld url x: or x://y.z protocol or full url with protocol examples given the following: <p> <label>
enter an email address: <input type="email" value="example.com"/> </label> </p> <p> <label>
enter a url: <input type="url" value="example.com"/> </label> </p> input:invalid { border: red solid 3px; } the above each produce a typemismatch because the email address is just a domain and the url has no protocol the typemismatch occurs when there is a disconnect between the value expected via the type attribute and the data that is actually present. the typemismatch is only one of th...
WebGLRenderingContext - Web APIs
vas to the values of the clientwidth and 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. ...
...are in the c
enter 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. ...
Canvas size and WebGL - Web APIs
vas to the values of the clientwidth and 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. ...
...e in the c
enter 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. ...
WebGL model view projection - Web APIs
ints and polygons in space in webgl are handled by the basic transformation matrices like translation, scale, and rotation. these matrices can be composed together and grouped in special ways to make them useful for rendering complicated 3d scenes. these composed matrices ultimately move the original model data around into a special coordinate space called clip space. this is a 2 unit wide cube, c
entered at (0,0,0), and with corners that range range from (-1,-1,-1) to (1,1,1). this clip space is compressed down into a 2d space and rasterized into an image. the first matrix discussed below is the model matrix, which defines how you take your original model data and move it around in 3d world space. the projection matrix is used to convert world space coordinates into clip space coordinates. a c...
... off and not rendered. however, if a triangle straddles the border of this space then it is chopped up into new triangles, and only the parts of the new triangles that are in clip space are kept. the above graphic is a visualization of the clip space that all of the points must fit into. it is a cube two units on each side, with one corner at (-1,-1,-1) and the opposite corner at (1,1,1). the c
enter of the cube is the point (0,0,0). this 8 cubic meter coordinate system used by clip space is known as normalized device coordinates (ndc). you may encouter that term from time to time while researching and wokring with webgl code. for this section we will put our data into the clip space coordinate system directly. normally model data is used that is in some arbitrary coordinate system, and is t...
Writing a WebSocket server in C# - Web APIs
ite(byte[] buffer, int offset, int size) writes bytes from buffer, offset and size determine length of message. read(byte[] buffer, int offset, int size) reads bytes to buffer. offset and size determine the length of the message. let us extend our example. tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); networkstream stream = client.getstream(); //
enter to an infinite cycle to be able to handle every change in stream while (true) { while (!stream.dataavailable); byte[] bytes = new byte[client.available]; stream.read(bytes, 0, bytes.length); } handshaking when a client connects to a server, it sends a get request to upgrade the connection to a websocket from a simple http request. this is known as handshaking. this sample code ca...
...g ip = "127.0.0.1"; int port = 80; var server = new tcplistener(ipaddress.parse(ip), port); server.start(); console.writeline("server has started on {0}:{1}, waiting for a connection...", ip, port); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); networkstream stream = client.getstream(); //
enter to an infinite cycle to be able to handle every change in stream while (true) { while (!stream.dataavailable); while (client.available < 3); // match against "get" byte[] bytes = new byte[client.available]; stream.read(bytes, 0, client.available); string s = encoding.utf8.getstring(bytes); if (regex.ismatch(s, "^get...
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
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 c
enter 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 image into a webgl texture's buffer, then redraw the texture to refresh the screen. this essentially uses the texture as a backbuffer for performing multiple buffering in your 2d graphics application. cameras in gaming there are m...
...de. reminder: even though we use phrases like "move the camera," what we're really doing is moving the entire world around the camera. this affects the way certain values work, which will be noted as they come up below. zooming among the best known camera effects is the zoom. zooming is performed in a physical camera by altering the focal length of the lens; this is the distance between the c
enter of the lens itself and the camera's light sensors. thus, zooming doesn't actually involve moving the camera at all. instead, a zoom shot changes the magnification of the camera over time to make the area of focus seem closer to or farther away from the viewer, without actually physically moving the camera. a slow move can bring a sense of movement, ease, or focus to a scene, while a rapid zoom ca...
Inputs and input sources - Web APIs
argeting ray, determine what's being pointed at, do hit testing, and so forth. grip space the input source's gripspace property is an xrspace you can use to render objects so they appear to be held in the viewer's hand. the coordinate system for the left hand's grip space. the coordinate system for the right hand's grip space. the grip space's native origin, located around the c
enter of the player's fist, is (0, 0, 0) within the input source's local coordinate system, while the xrspace specified by gripspace can be used at any time to convert coordinates or vectors from the input source's space into world coordinates (or vice-versa). this means that if you use a 3d model to represent your controller, your player's avatar's hands, or anything else representative of the contro...
... this space is intended to be used when drawing a model of the handheld webxr input controller represented by the objecxrinputsource, but can just as well be used to draw any object, such as a ball, a tool, or a weapon. we covered the grip space above, but let's see how it can be used to draw objects representative of the hand or in the hand. since the origin of the grip space is located at the c
enter of the hand's grip, you can use it as a starting point for rendering your object. simply apply any needed offset transform to shift the origin to the start point for rendering your object as you apply any rotation needed to orient your model correctly to align with the grip space's orientation. <<<--- diagram needed: applying transform to grip space to position/orient object --->>> advanced con...
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
ce is the origin of the webgl coordinate system underlying the entire 3d canvas. the player, avatar, or camera; the origin of this space is used as the camera position for rendering the scene to be displayed to the user. the hand and/or hand controller; each of these represents one of the user's hands, either in the form of the hand itself or a controller (or both). the origin is generally the c
enter of the user's fisted hand. the target ray; each controller or other handheld device may have a targeting ray associated with it, which is represented by a space whose origin is at the point on the controller at which the ray is emitted, and is oriented so that -z extends in the direction of the target it's pointing at. because each of these is defined using a reference space as its foundation,...
...or a time, resulting in the user's movements not being properly tracked for a while. upon recovery of tracking, a reset means tracking has been restored and the new position information represents the actual position information provided by the xr hardware, rather than cached or "best-guess" data. another reason reset may be sent is because the user has exited the bounds of a reference space and
entered another reference space, or because the user has been transitioned programmatically from one reference space to another. any time the bounds geometry of the user's space changes, a reset is sent. reset is only used for signficant jumps or transitions; minor things will just be absorbed automatically. the event is always sent to every affected reference space, including those created using geto...
Starting up and shutting down a WebXR session - Web APIs
() the name of the type of reference space we want; in this case, unbounded. you might just as easily specify local or viewer, depending on your needs. to understand how to select the right reference space for your needs, see selecting the reference space type in geometry and reference spaces in webxr. the reference space returned by requestreferencespace() places the origin (0, 0, 0) in the c
enter of the space. this is great—if your player's viewpoint starts in the exact c
enter of the world. but most likely, that's not the case at all. if that's so, you call getoffsetreferencespace() on the initial reference space to create a new reference space which offsets the coordinate system so that (0, 0, 0) is located at the position of the viewer, with the orientation likewise shifted to face in...
...le a callback to be executed when it's time to render the next frame of animation for the webxr session. the returned value is an id we can use later to cancel the request if need be, so we save that into worlddata as well. in the end, the worlddata object is returned to the caller to allow the main code to reference the data it needs later. at this point, the setup process is complete and we've
entered the rendering stage of our application. to learn more about rendering, see the article rendering and the webxr frame animation callback. on operational details obviously, this was a just an example. you don't need a worlddata object to store everything; you can store the information you need to maintain any way you want to. you may need different information or have different specific require...
Example and tutorial: Simple synth keyboard - Web APIs
t> </div> </div> css .container { overflow-x: scroll; overflow-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: c
enter; 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: c
enter; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { backgrou...
...set["pressed"] = "yes"; } } } we start by checking whether the primary mouse button is pressed, for two reasons. first, we want to only allow the primary mouse button to trigger notes playing. second, and more importantly, we are using this to handle mouseover for cases where the user is dragging from note to note, and we only want to start playing the note if the mouse is pressed when it
enters the element. if the mouse button is in fact down, we get the pressed key's dataset attribute; this makes it easy to access the custom data attributes on the element. we look for a data-pressed attribute; if there isn't one (which indicates that the note isn't already playing), we call playtone() to start playing the note, passing in the value of the element's data-frequency attribute. the retur...
Window.prompt() - Web APIs
parameters message optional a string of text to display to the user. can be omitted if there is nothing to show in the prompt window. default optional a string containing the default value displayed in the text input field. note that in internet explorer 7 and 8, if you do not provide this parameter, the string "undefined" is the default value. return value a string containing the text
entered by the user, or null. example let sign = prompt("what's your sign?"); if (sign.tolowercase() == "scorpio") { alert("wow! i'm a scorpio too!"); } // there are many ways to use the prompt feature sign = window.prompt(); // open the blank prompt window sign = prompt(); // open the blank prompt window sign = window.prompt('are you feeling lucky'); // open the window with text "are you ...
...ompt feature sign = window.prompt(); // open the blank prompt window sign = prompt(); // open the blank prompt window sign = window.prompt('are you feeling lucky'); // open the window with text "are you feeling lucky" sign = window.prompt('are you feeling lucky', 'sure'); // open the window with text "are you feeling lucky" and default value "sure" when the user clicks the ok button, text
entered in the input field is returned. if the user clicks ok without
entering any text, an empty string is returned. if the user clicks the cancel button, this function returns null. the above prompt appears as follows (in chrome on os x): notes a prompt dialog contains a single-line textbox, a cancel button, and an ok button, and returns the (possibly empty) text the user
entered into that textb...
Window - Web APIs
t window by a specified amount. window.moveto() moves the window to the specified coordinates. window.open() opens a new window. window.postmessage() provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first. window.print() opens the print dialog to print the current document. window.prompt() returns the text
entered by the user in a prompt dialog. window.requestanimationframe() tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. window.requestidlecallback() enables the scheduling of tasks during a browser's idle periods. window.resizeby() resizes the current window by a certain amount. window.resizeto() dyn...
...ssage is an eventhandler representing the code to be called when the message event is raised. globaleventhandlers.onmousedown called when any mouse button is pressed. globaleventhandlers.onmousemove called continously when the mouse is moved inside the window. globaleventhandlers.onmouseout called when the pointer leaves the window. globaleventhandlers.onmouseover called when the pointer
enters the window globaleventhandlers.onmouseup called when any mouse button is released windoweventhandlers.onoffline called when network connection is lost. see offline event. windoweventhandlers.ononline called when network connection is established. see online event. windoweventhandlers.onpagehide called when the user navigates away from the page, before the onunload event. see pagehide eve...
XRInputSource.gripSpace - Web APIs
the read-only xrinputsource property gripspace returns 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 c
enter 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...
...e 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 at the centroid—the c
enter 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 han...
XRSystem: devicechange event - Web APIs
granted permission to do so through the xr-spatial-tracking feature policy. you can use this event to, for example, monitor for the availability of a webxr-compatible device so that you can enable a ui element which the user can use to activate immersive mode. this is shown in the example below. example the example shown here handles the devicechange event by toggling the availability of the "
enter xr" button based on whether or not any immersive devices are currently available. if (navigator.xr) { navigator.xr.addeventlistener("devicechange", event => { navigator.xr.issessionsupported("immersive-vr") .then(immersiveok) => { if (immersiveok) { enablexrbutton.disabled = false; } else { enablexrbutton.disabled = true; } }); }); } when devi...
...e-vr") .then(immersiveok) => { if (immersiveok) { enablexrbutton.disabled = false; } else { enablexrbutton.disabled = true; } }); }); } when devicechange is received, the handler set up in this code calls the xr method issessionsupported() to find out if there's a device available that can handle immersive vr presentations. if there is, the button to
enter xr mode is enabled; otherwise it's disabled. you can also use the ondevicechange event handler property to set a single handler for devicechange events: if (navigator.xr) { navigator.xr.ondevicechange = event => { /* ... etc ... */ }; } specifications specification status comment webxr device apithe definition of 'devicechange event' in that specification. ...
XRSystem: isSessionSupported() - Web APIs
jection handler a domexception whose name is one of the following strings. securityerror the document's origin does not have permission to use the xr-spatial-tracking feature policy. examples in this example, we see issessionsupported() used to detect whether or not the device supports vr mode by checking to see if an immersive-vr session is supported. if it is, we set up a button to read "
enter xr", to call a method onbuttonclicked(), and enable the button. if no session is already underway, we request the vr session and, if successful, set up the session in a method called onsessionstarted(), not shown. if a session is already underway when the button is clicked, we call the xrsession object's end() method to shut down the webxr session. if (navigator.xr) { navigator.xr.issessionsu...
... in a method called onsessionstarted(), not shown. if a session is already underway when the button is clicked, we call the xrsession object's end() method to shut down the webxr session. if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { userbutton.addeventlistener('click', onbuttonclicked); userbutton.innerhtml = '
enter xr'; userbutton.disabled = false; } }); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity. onsessionstarted(xrsession); }); } else { // button is a toggle button. xrsession.end(); } } speci...
Using the alert role - Accessibility
ogy. the alert role is used to communicate an important and usually time-sensitive message to the user. when this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it. the alert role is most useful for information that requires the user's immediate attention, for example: an invalid value was
entered into a form field the user's login session is about to expire the connection to the server was lost, local changes will not be saved because of its intrusive nature, the alert role must be used sparingly and only in situations where the user's immediate attention is required. dynamic changes that are less urgent should use a less aggressive method, such as aria-live="polite" or other live ...
...ument.body); example 3: adding alert role to an existing element sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element. this allows the developer to reiterate information that has become more relevant or urgent to the user. for example, a form control may have instruction about the expected value. if a different value is
entered, role="alert can be added to the instruction text so that the screen reader announces it as an alert. the pseudo code snippet below illustrates this approach: <p id="forminstruction">you must select at least 3 options</p> // when the user tries to submit the form with less than 3 checkboxes selected: document.getelementbyid("forminstruction").setattribute("role", "alert"); example 4: making...
Using the aria-invalid attribute - Accessibility
aria-invalid can also be used to indicate that a required field has not been filled in.the attribute should be programmatically set as a result of a validation process. this attribute can be used with any typical html form element; it is not limited to elements that have an aria role assigned. ...
... simple form validation the following snippet shows a simplified version of two form fields with a validation function attached to the blur event. note that since the default value for aria-required is false, it is not strictly necessary to add the attribute to input. <input name="name" id="name" aria-required="true" aria-invalid="false" onblur="checkvalidity('name', ' ', 'invalid name
entered (requires both first and last name)');"/> <br /> <input name="email" id="email" aria-required="true" aria-invalid="false" onblur="checkvalidity('email', '@', 'invalid e-mail address');"/> note that it is not necessary to validate the fields immediately on blur; the application could wait until the form is submitted (though this is not necessarily recommended). the snippet below sh...
Using the link role - Accessibility
this technique demonstrates how to use the link role and describes the effect it has on browsers and assistive technology. the link role is used to identify an element that creates a hyperlink to a resource that is in the application or external. when this role is added to an element, tab can be used to change focus to the link, and
enter used to execute the link. note: where possible, it is recommended that you use a native <a> element rather than the link role, as native elements are more widely supported by older user agents and assistive technology. native <a> elements also support keyboard and focus requirements by default, without need for additional customization. the tabindex attribute may optionally be used with this role to directly specify the position of the element in th...
...e.target : e.srcelement; if (ref) { window.open(ref.getattribute('data-href'), '_blank'); } } } spanelem.addeventlistener('click', navigatelink); spanelem.addeventlistener('keydown', navigatelink); result notes if pressing the link triggers an action but does not change browser focus or navigate to a new page, you might...
ARIA: application role - Accessibility
element type. such elements usually include headings, form fields, lists, tables, links, graphics, or landmark regions. for all of this to work, ats intercept almost all keyboard input and consume it themselves, letting nothing through to the browser or other user agent. to be able to interact with a web page, a standard set of widgets is recognized that, when pressing a certain key (usually the
enter key) this mode is switched off. the screen reader mode, often called forms mode or focus mode, lets all keyboard input go through to the browser again. escape is the most common way of switching back to browse mode. the application role is designed to provide a means for widgets that are not part of the standard set to be accessible for direct interaction in ats that use both browse and focus mo...
...or's control and can be anything associated with the particular widget being implemented. in a slides application, for example, a widget could be created that uses the arrow keys to position elements on the slide, and uses audio feedback via an aria live region to communicate the position and overlap status with other objects. focus is being managed via aria-activedescendant. the tab , space and
enter keys, as well as escape , must be handled by the application. the one exception is if focus is set to a standard widget inside the application that supports keyboard navigation from the browser, for example an input element. required javascript features keypress used to handle keyboard input and control the focus click, touch handle as appropriate for your widget as well changing attribut...
ARIA: grid role - Accessibility
col); } break; case "pageup": var i = 0; var result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "
enter": alert(event.target.textcontent); break; } event.preventdefault(); }); html <table role="grid" aria-labelledby="calendarheader"> <caption id="calendarheader">september 2018</caption> <thead role="rowgroup"> <tr role="row"> <td></td> <th role="columnheader" aria-label="sunday">s</th> <th role="columnheader" aria-label="monday">m</th> <th role=...
...make sure that the functionality and interaction needed can be best achieved usin...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
ument or ui, and allow the user to track where they navigate. the screen reader user can navigate the web page using screen reader commands or browser commands, and the two pieces of software must remain in sync. some screen readers can even show information on a refreshable braille display. screen magnifiers will zoom to the focus, keeping it on the screen at all times, or even allow the user to
enter a special low vision document reading mode, with a variety of features such as ticker mode where text is streamed on a single line. finally, voice dictation software needs to know what's in the current document or ui in order to implement "say what you see" kinds of features. on microsoft windows, these kinds of assistive technology acquire this necessary information via a combination of hacks, ...
... child of an iaccessible. [important] get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu item. try to use unique names for each item in a dialog so that voice dictation software doesn't have to deal with extra ambiguity.[important] get_accvalue: get the "value" of the iaccessible, for example a number in a slider, a url for a link, the text a user
entered in a field. [important] get_accdescription: get a long description of the current iaccessible. this is not really too useful. get_accrole: get an enumerated value representing what this iaccessible is used for, for example. is it a link, static text, editable text, a checkbox, or a table cell, etc. [important] get_accstate: a 32 bit field representing possible on/off states, such as focuse...
Web Accessibility: Understanding Colors and Luminance - Accessibility
re also the most "sensitive" to color. put another way, as humans, the color blue is perceived differently than other colors, for multiple reasons. first, because the blue cones are actually the most sensitive of the three, second, we have fewer blue cones than red or green, and third, it so happens that these "blue sensitive" cones tend to be located at the rims of our eyeballs, away from the c
enter (fovea centralis) of the back of the eyeball, where the red and green cones tend to cluster. there is software that actually takes advantage of that fact. because we do not perceive the color "blue" as well as other colors, for example, some algorithms for compressing image sizes remove the parts of the image with "blue" in them more heavily than other parts of an image. this fact is also used b...
...ase of animation, certain color combinations are more likely to cause photosensitive seizures to those who are susceptible to them than others. for example, alternating flashes between red and blue is more problematic than alternating flashes between green and blue. it has been theorized that this is because the "red" sensitive cones of our eyes, which tend to cluster around the fovea (near the c
enter) are physically located at a different location than the "blue" sensitive cones of our eyes, which are located away from the fovea and towards the rims. the electrical signals that go from eye to brain have much to resolve between them as the information is processed in our brains. in the article, certain colors more likely to cause epileptic fits, researchers find, the authors noted that "..com...
Color contrast - Accessibility
ass="bad">bad contrast</div> div { /* general div styles here */ } .good { background-color: #fae6fa; } .bad { background-color: #400064; } both pieces of text have their default black color. ...
...make the color contrast as good as it can be within your design constraints — ideally go for the ...
:invalid - CSS: Cascading Style Sheets
<form> element whose contents fail to validate. /* selects any invalid <input> */ input:invalid { background-color: pink; } this pseudo-class is useful for highlighting field errors for the user. syntax :invalid examples this example presents a simple form that colors elements green when they validate and red when they don't. ...
...pink; } this pseudo-class is useful for highlighting field errors for the user. syntax :invalid examples this example presents a simple form that colors elements green when they validate and red when they don't. ...
@page - CSS: Cascading Style Sheets
:blank :first :left :right :recto :verso specifications ...
... :blank :first :left :right :recto :verso specifications specification status comment css logical properties and values level...
Box alignment in Flexbox - CSS: Cascading Style Sheets
flexbox 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. basic example in this example, three flex items are aligned on the main axis using justify-content and on the cross axis using align-items. the first item overrides the align-items values set on the group by setting align-self to c
enter. the axes and flex-direction flexbox respects the writing mode of the document, therefore if you are working in english and set justify-content to flex-end this will align the items to the end of the flex container. if you are working with flex-direction set to row, this alignment will be in the inline direction. however, in flexbox you can change the main axis by setting flex-direction to c...
...n be moved to the start and end. alignment and auto margins there is a specific use case in flexbox where we might think that a justify-self property is what we need, and this is when we want to split a set of flex items, perhaps to create a split navigation pattern. for this use case, we can use an auto margin. a margin set to auto will absorb all available space in its dimension. this is how c
entering a block with auto margins works. by setting the left and right margin to auto, both sides of our block try to take up all of the available space and so push the box into the c
enter. by setting a margin of auto on one item in a set of flex items all aligned to start, we can create a split navigation. this works well with flexbox and the alignment properties. as soon as there is no space availa...
Basic Shapes - CSS: Cascading Style Sheets
anges. circle() the circle() value for shape-outside can accept two possible arguments. the first is the shape-radius. both circle() and ellipse() values for shape-outside are specified as accepting this argument of <shape-radius>. this argument can be a length or percentage but can also be one of the keywords closest-side or farthest-side. the keyword closest-side uses the length from the c
enter of the shape to the closest side of the 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 c
enter 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 radiu...
...however you can use any valid position here to indicate the position of the centre of the circle. ...
CSS reference - CSS: Cascading Style Sheets
nline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-c
enterbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<cou...
...t-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-c
entertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()user-zoom (@viewport)v:validvar()vertical-alignvh@viewportviewport-fit (@viewport)visibility:visit...
animation - CSS: Cascading Style Sheets
button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: c
enter; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z...
...; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left c
enter; } window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.animation')); var button = array.from(document.queryselectorall('button')); function togglebutton (btn, type) { btn.classlist.remove('play', 'pause', 'restart'); btn.classlist.add(type); btn.title = type.touppercase(type); } function playpause (i) { var btn = bu...
backdrop-filter - CSS: Cascading Style Sheets
]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
...5px; font-family: sans-serif; text-align: c
enter; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: c
enter c
enter; background-repeat: no-repeat; background-size: cover; } .container { align-items: c
enter; display: flex; justify-content: c
enter; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div> result specifications specification status comment filter effects module leve...
clip-path - CSS: Cascading Style Sheets
adius> ]? [ at <position> ]? )<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )<path()> = path( [ <fill-rule>, ]? <string> )<shape-box> = <box> | margin-boxwhere <length-percentage> = <length> | <percentage><shape-radius> = <length-percentage> | closest-side | farthest-side<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<fill-rule> = nonzero | evenodd<box> = border-box | padding-box | content-box examples comparison of html and svg <svg class="defs"> <defs> <clippath id="mypath" cl...
... </div> </div> </div> html,body { height: 100%; box-sizing: border-box; background: #eee; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .col { flex: 1 auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: c
enter; flex: 1; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { display: inline-block; border: 1px dotted grey; position:relative; } .container:before { content: 'margin'; position: absolute; top: 2px; left: 2px; font: italic .6em sans-...
<color> - CSS: Cascading Style Sheets
n's speed is determined by the timing function. accessibility considerations some people have difficulty distinguishing colors. the wcag 2.0 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. see color and color contrast for more information. examples color value tester in this example we provide a <div> and a text input. ...
...strongly advises against using color as the only means of conveying a specific message, action, or result. see color and color contrast for more information. examples color value tester in this example we provide a <div> and a text input.
entering a valid color into the input causes the <div> to adopt that color, allowing you to test our color values. ...
font - CSS: Cascading Style Sheets
ss="propinputcont"> <input type="text" class="curcss mandatory" id="input_font_family"> <br/> font-family <br/> mandatory </div> </div> </form> <div class="fontshorthand"> this is some sample text. ...
... text. ...
margin-left - CSS: Cascading Style Sheets
alue of position computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto. in this case, it is set to the value c
entering the element inside its parent. block layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any,...
...tatic or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto. in this case, it is set to the value c
entering the border area inside the available width, if fixed. absolutely positioned layout mode flex, inline-flex any any 0, except if there is any positive horizontal free space. in this case, it is evenly distributed to all horizontal auto margins. flexbox layout mode formal definition initial value0applies toall elements, except elements with table disp...
margin-right - CSS: Cascading Style Sheets
alue of position computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto. in this case, it is set to the value c
entering the element inside its parent. block layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any,...
...tatic or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto. in this case, it is set to the value c
entering the border area inside the available width, if fixed. absolutely positioned layout mode flex, inline-flex any any 0, except if there is any positive horizontal free space. in this case, it is evenly distributed to all horizontal auto margins. flexbox layout mode formal definition initial value0applies toall elements, except elements with table disp...
mask - CSS: Cascading Style Sheets
ts mask-origin and the second sets mask-clip. <geometry-box> | no-clip sets the area that is affected by the mask image. see mask-clip. <compositing-operator> sets the compositing operation used on the current mask layer. see mask-composite. ...
...ze: repeatable list of simple list of length, percentage, or calcmask-composite: discretecreates stacking contextyes formal syntax <mask-layer>#where <mask-layer> = <mask-reference> | <position> [ / <bg-size> ]? | <repeat-style> | <geometry-box> | [ <geometry-box> | no-clip ] | <compositing-operator> | <masking-mode>where <mask-reference> = none | <image> | <mask-source><position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<geometry-box> = <shape-box...
mix-blend-mode - CSS: Cascading Style Sheets
ox-sizing: border-box; background: #eee; } .grid { width: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; height: auto; } .col { display: flex; flex: 1 auto; flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: c
enter; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 15...
... margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; } .r { transform-origin: c
enter; transform: rotate(-30deg); fill: url(#red); } .g { transform-origin: c
enter; transform: rotate(90deg); fill: url(#green); } .b { transform-origin: c
enter; transform: rotate(210deg); fill: url(#blue); } .isolate .group { isolation: isolate; } .normal .item { mix-blend-mode: normal; } .multiply .item { mix-blend-mode: multiply; } .screen .item { mix-blend-mode: scr...
perspective - CSS: Cascading Style Sheets
is applied. description each 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 c
enter 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 leng...
...px; 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: c
enter; } /* 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); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) t...
rotate - CSS: Cascading Style Sheets
around the z axis. equivalent to a rotate() (2d rotation) function. x, y, or z axis name plus angle value the name of the axis you want to rotate the affected element around ("x", "y", or "z"), plus an <angle> specifying the angle to rotate the element through. equivalent to a rotatex()/rotatey()/rotatez() (3d rotation) function. vector plus angle value three <number>s representing an origin-c
entered vector that defines a line around which you want to rotate the element, plus an <angle> specifying the angle to rotate the element through. equivalent to a rotate3d() (3d rotation) function. none specifies that no rotation should be applied. formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking cont...
... editor's draft initial definition. ...
scroll-snap-stop - CSS: Cascading Style Sheets
st snap to the first of this elements' snap positions. formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | always examples snapping in different axes this example is duplicated from scroll-snap-type with minor variances. ...
...top: always; } .proximity-scroll-snapping > div { scroll-snap-stop: normal; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container > div { text-align: c
enter; scroll-snap-align: c
enter; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 256px; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { backgr...
scroll-snap-type - CSS: Cascading Style Sheets
r y mandatory-scroll-snapping" dir="rtl"> <div>y mand. rtl</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container y proximity-scroll-snapping" dir="rtl"> <div>y prox. ...
... .container.y { width: 256px; height: 256px; flex-flow: column nowrap; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container > div { text-align: c
enter; scroll-snap-align: c
enter; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { backgro...
shape-outside - CSS: Cascading Style Sheets
<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <length-percentage> = <length> | <percentage><shape-radius> = <length-percentage> | closest-side | farthest-side<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<fill-rule> = nonzero | evenodd<image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | current...
... candidate recommendation initial definition. css shapes module level 2the definition of 'shape-outside' in that specification. editor's draft adds the path() value ...
transform-box - CSS: Cascading Style Sheets
the viewbox attribute. formal definition initial valueview-boxapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax content-box | border-box | fill-box | stroke-box | view-box examples svg transform-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <g> <circle id="c
enter" fill="red" r="1" transform="translate(25 25)" /> <circle id="boxc
enter" fill="blue" r=".5" transform="translate(15 15)" /> <rect id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> in the css we have an animation that uses a transform to rotate the rectangle infinitely. transform-box: fill-box is used to make the the transform-origin t...
...ll="red" r="1" transform="translate(25 25)" /> <circle id="boxc
enter" fill="blue" r=".5" transform="translate(15 15)" /> <rect id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> in the css we have an animation that uses a transform to rotate the rectangle infinitely. transform-box: fill-box is used to make the the transform-origin the c
enter of the bounding box, so the rectangle spins in place. without it, the transform origin is the c
enter of the svg canvas, and so you get a very different effect. svg{ width:80vh; border:1px solid #d9d9d9; position:absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } #box{ transform-origin:50% 50%; /*+++++++++++++++++++++++++++*/ /* if i remove this rule the pen wo...
Orientation and motion data explained - Developer guides
ides details about the coordinate systems at play and how you use them. about coordinate frames a coordinate frame is a system whereby the orientation of the three axes (x, y, and z) are defined in reference to an object. there are two coordinate frames to consider when using orientation and motion events: earth coordinate frame the earth coordinate frame is the coordinate frame fixed on the c
enter of the earth; that is, the axes are aligned based on the pull of gravity and the standard magnetic north orientation. we use upper-case letters ("x", "y", and "z") to describe the axes of the earth coordinate frame. the x axis follows along the ground plane, perpendicular to the y axis and positive toward the east (and therefore negative toward the west). the y axis follows along the ground p...
...x axis follows along the ground plane, perpendicular to the y axis and positive toward the east (and therefore negative toward the west). the y axis follows along the ground plane, and is positive toward true north (that is, the north pole, not magnetic north) and negative toward true south. the z axis is perpendicular to the ground plane; think of it as a line drawn between the device and the c
enter of the earth. the value of the z coordinate is positive upward (away from the c
enter of the earth) and negative downward (toward the c
enter of the earth). device coordinate frame the device coordinate frame is the coordination frame fixed on the c
enter of the device. we use lower-case letters ("x", "y", and "z") to describe the axes of the device coordinate frame. the x axis is in the pla...
Making content editable - Developer guides
g a link) or affect an entire line (indenting). when using contenteditable, calling execcommand() will affect the currently active editable element. differences in markup generation use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers. for example, even something as simple as what happens when you press
enter/return to create a new line of text inside an editable element was handled differently across the major browsers (firefox inserted <br> elements, ie/opera used <p>, chrome/safari used <div>). fortunately, in modern browsers things are somewhat more consistent. as of firefox 60, firefox will be updated to wrap the separate lines in <div> elements, matching the behavior of chrome, modern opera, ed...
...erline');" src="data:image/gif;base64,r0lgodlhfgawakecaaaaaf9vj////////yh5baeaaaialaaaaaawabyaaairli+py+0po5zugasezveel4ea15eijj5psqjmuwkbekgxvuxwtun+dwxccga7" /> <img class="intlink" title="left align" onclick="formatdoc('justifyleft');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jmgelkgyxo+qzl4nkyxaaaow==" /> <img class="intlink" title="c
enter align" onclick="formatdoc('justifyc
enter');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaifhi+py+0po5y02ouz3jl4d4jogi7kaz5bqn4sycvbaqa7" /> <img class="intlink" title="right align" onclick="formatdoc('justifyright');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jqgdlkgyxouqzl43jyvgaaow==" /> <img class="intl...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
outside edge of the element. this border is a solid line, 6 pixels wide, in the color mediumturquoise. our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties: .box { width: 290px; height: 100px; margin: 0; padding: 4px 6px; font: 28px "marker felt", "zapfino", cursive; display: flex; justify-content: c
enter; align-items: c
enter; } in brief, .box establishes the size of each box, as well as the configuration of the font used within. we also take advantage of css flexbox to easily c
enter the contents of each box. we enable flex mode using display: flex, and set both justify-content and align-items to c
enter. then we can create a class for each of the two boxes that defines the properties that diffe...
...e color we choose. using an eyedropper tool, we identify a color we like and determine that the color in question is #d79c7a, which is an appropriate rusty orange-red color that's so stereotypical of the martian surface. having selected our base color, we need to build out our palette. we decide to use paletton to come up with the other colors we need. upon opening paletton, we see: next, we
enter our color's hex code (d79c7a) into the "base rgb" box at the bottom-left corner of the tool: we now see a monochromatic palette based on the color we picked from the mars photo. if you need a lot of related colors for some reason, those are likely to be good ones. but what we really want is an accent color. something that will pop along side the base color. to find that, we click the "add comp...
HTML attribute: maxlength - HTML: Hypertext Markup Language
the maxlength attribute defines the maximum number of characters (as utf-16 code units) the user can
enter into an <input> or <textarea>. this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the input or textarea has no maximum length. any maxlength value must be greater than or equal to the value of minlength, if present and valid. the input will fail constraint validation if the length of the text value of the field is greater than maxlength utf-16 code units long. constraint validation is only applied when the value is changed by the user. ...
...m length. any maxlength value must be greater than or equal to the value of minlength, if present and valid. the input will fail constraint validation if the length of the text value of the field is greater than maxlength utf-16 code units long. constraint validation is only applied when the value is changed by the user. constraint validation while the browser will generally prevent user from
entering more text than the maxlength attribute allows, should the length be longer than the maxlength allows, the read-only toolong property of a validitystate object will be true. examples <input type="password" maxlength="4"/> specifications specification status html living standardthe definition of 'maxlength attribute' in that specification. living standard ...
HTML attribute: minlength - HTML: Hypertext Markup Language
this must be an integer value 0 or higher. if no minlength is specified, or an invalid value is specified, the input has no minimum length. this value must be less than or equal to the value of maxlength, otherwise the value will never be valid, as it is impossible to meet both criteria. the input will fail constraint validation if the length of the text value of the field is less than minlength utf-16 code units long, with validitystate.tooshort returning true. constraint validation is only applied when the value is changed by the user. ...
...16 code units long, with validitystate.tooshort returning true. constraint validation is only applied when the value is changed by the user. once submission fails, some browsers will display an error message indicating the minimum length required and the current length. examples by adding minlength="5", the value must either be empty or five characters or longer to be valid. <label for="fruit">
enter a fruit name that is at least 5 letters long</label> <input type="text" minlength="5" id="fruit"> we can use pseudoclasses to style the element based on whether the value is valid. the value will be valid as long as it is either null (empty) or five or more characters long. lime is invalid, lemon is valid. input { border: 2px solid currentcolor; } input:invalid { border: 2px dashed red; } i...
HTML attribute: size - HTML: Hypertext Markup Language
default width based on the user agent. if css targets the element with properties impacting the width, css takes precedence. the size attribute has no impact on constraint validation. examples by adding size on some input types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. ...
...acting the width, css takes precedence. the size attribute has no impact on constraint validation. examples by adding size on some input types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. ...
HTML attribute: step - HTML: Hypertext Markup Language
ded, step defaults to 1 for number and range, and 1 unit type (minute, week, month, day) for the date/time input types. the value can must be a positive number - integer or float -- or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as min and max). the default stepping value for number inputs is 1, allowing only integers to be
entered, unless the stepping base is not an integer. the default stepping value for time is 1 second, with 900 being equal to 15 minutes. default values for step input type value example date 1 (day) <input type="date" min="2019-12-25" step="1"> month 1 (month) <input type="month" min="2019-12" step="12"> week 1 (week) <input type="week"...
...defaults to 1. <input id="mynumber" name="mynumber" type="number" step="2" min="1.2"> valid values include 1.2, 3.2, 5.2, 7.2, 9.2, 11.2, and so on. integers and even numbers follwed by .2 are not valid. as we included an invalid value, supporting browsers will show the value as invalid. the number spinner, if present, will only show valid float values of 1.2 and greater note: when the data
entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and stepmismatch for more information. specifications specification status comment html living standardthe definition of 'step attribute' in that specification. ...
<colgroup> - HTML: Hypertext Markup Language
oup>. deprecated attributes the following attributes are deprecated and should not be used. they are documented below for reference when updating existing code and for historical interest only. align this enumerated attribute specifies how horizontal alignment of each column cell content will be handled. possible values are: left, aligning the content to the left of the cell c
enter, c
entering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes. if this attribute is not set, the left value is assumed. the descendant <col> el...
... column. possible values for this attribute are: baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. if characters are all of the size, this has the same effect as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will c
enter the text in the cell; and top, which will put the text as close to the top of the cell as it is possible. note: do not try to set the vertical-align property on a selector giving a <colgroup> element. because <td> elements are not descendant of the <colgroup> element, they won't inherit it. if the table doesn't use a colspan attribute, use the td:nth-child(an+b) css selector per col...
<input type="color"> - HTML: Hypertext Markup Language
<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by
entering the color into a text field in #rrggbb hexadecimal format. only simple colors (without alpha channel) are allowed though css colors has more formats, e.g. color names, functional notations and a hexadecimal format with an alpha channel. the element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is
entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window. the source for this interactive example is stored in a github repository. if you'd like to ...
...if the browser instead uses a color well, select() does nothing. you should be aware of this behavior so your code can respond appropriately in either case. colorwell.select(); appearance variations as previously mentioned, when a browser doesn't support a color picker interface, its i...
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
this element has the distinction of being the first element to become one of the "lost tags" by being eliminated from the official public dtd's of the html versions. it is also probably one of the least understood of all of the early html elements. ...
... also forbids such constructs as nesting a header (<h*> element) within a link (<a> element), or having a forms <input> element which is not within a block level element such as <p> html version 3.2 <nextid> has vanished altogether, never to be heard from again. attributes like all other html elements, this element accepts the global attributes. n reference to anchor. example the user
enters four section headings into the table of contents (and presumably also writing paragraph material within these sections). the heading for each of the four sections would be assigned name values of "z0", "z1", "z2", and "z3". the first of these would produce an entry in the table of contents like this: <a name="z0" href="#z4">first section name</a> and the section header would be marked like this:...
<samp>: The Sample Output element - HTML: Hypertext Markup Language
le, a paragraph includes an example of the output of a program. <p>when the process is complete, the utility will output the text <samp>scan complete. found <em>n</em> results.</samp> you can then proceed to the next step.</p> the resulting output looks like this: sample output including user input you can nest the <kbd> element within a <samp> block to present an example that includes text
entered by the user. for example, consider this text presenting a transcript of a linux (or macos) console session: html <pre> <samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "hello world"</kbd> md5 ("hello world") = 3e25960a79dbc69b674cd4ec67a72c62 <span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre> note the use of <span> to allow customizatio...
...bz:~$</span> <kbd>md5 -s "hello world"</kbd> md5 ("hello world") = 3e25960a79dbc69b674cd4ec67a72c62 <span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre> note the use of <span> to allow customization of the appearance of specific portions of the sample text such as the shell prompts and the cursor. note also the use of <kbd> to represent the command the user
entered at the prompt in the sample text. css the css that achieves the appearance we want is: .prompt { color: #b00; } samp > kbd { font-weight: bold; } .cursor { color: #00b; } this simply gives the prompt and cursor fairly subtle colorization and emboldens the keyboard input within the sample text. result the resulting output is this: specifications specification status...
<table>: The Table element - HTML: Hypertext Markup Language
a role table permitted aria roles any dom interface htmltableelement attributes this element includes the global attributes. deprecated attributes align this enumerated attribute indicates how the table must be aligned inside the containing document. it may have the following values: left: the table is displayed on the left side of the document; c
enter: the table is displayed in the c
enter of the document; right: the table is displayed on the right side of the document. set margin-left and margin-right to auto or margin to 0 auto to achieve an effect that is similar to the align attribute. bgcolor the background color of the table. it is a 6-digit hexadecimal rgb code, prefixed by a '#'. one of the predefined color kewords can als...
...t to void. to achieve a similar effect, use the css border shorthand property. cellpadding this attribute defines the space between the content of a cell and its border, displayed or not. if the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. if the length is defined using a percentage value, the content will be c
entered and the total vertical space (top and bottom) will represent this value. the same is true for the total horizontal space (left and right). to achieve a similar effect, apply the border-collapse property to the <table> element, with its value set to collapse, and the padding property to the <td> elements. cellspacing this attribute defines the size of the space between two cells in a p...
<tbody>: The Table Body element - HTML: Hypertext Markup Language
implicit aria role rowgroup permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. deprecated attributes align this enumerated attribute specifies how horizontal alignment of each cell content will be handled. possible values are: left, aligning the content to the left of the cell c
enter, c
entering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes. if this attribute is not set, the left value is assumed. as this attribute is ...
... header. possible values for this attribute are: baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. if characters are all of the size, this has the same effect as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will c
enter the text in the cell; and top, which will put the text as close to the top of the cell as it is possible. as this attribute is deprecated, use the css vertical-align property instead. usage notes if the table includes a <thead> block (to semantically identify header rows), the <tbody> block must come after it. if you use <tbody>, you can't also have table rows (<tr> elements) which ...
HTML elements reference - HTML: Hypertext Markup Language
<progress> the html <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar. <select> the html <select> element represents a control that provides a menu of options <textarea> the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to
enter a sizeable amount of free-form text, for example a comment on a review or feedback form. interactive elements html offers a selection of elements which help to create interactive user interface objects. element description <details> the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is togg...
...nd file to play in the background while the page is used; use <audio> instead. <big> the obsolete html big element (<big>) renders the enclosed text at a font size one level larger than the surrounding text (medium becomes large, for example). <blink> the html blink element (<blink>) is a non-standard element which causes the enclosed text to flash slowly. <c
enter> the obsolete html c
enter element (<c
enter>) is a block-level element that displays its block-level or inline contents c
entered horizontally within its containing element. <command> the html command element (<command>) represents a command which the user can invoke. commands are often used as part of a context menu or toolbar. <content> the html <content> element—...
inputmode - HTML: Hypertext Markup Language
it can have the following values: none no virtual keyboard. for when the page implements its own keyboard input control. text (default value) standard input keyboard for the user's current locale. decimal fractional numeric input keyboard containing the digits and decimal separator for the user's locale (typically . or ,). devices may or may not show a minus key (-). numeric numeric input keyboard, but only requires the digits 0–9. devices may or may not show a minus key. ...
...*), and the pound (#) key. inputs that require a telephone number should typically use <input type="tel">instead. search a virtual keyboard optimized for search input. for instance, the return/submit key may be labeled "search", along with possible other optimizations. inputs that require a search query should typically use <input type="search"> instead. email a virtual keyboard optimized for
entering email addresses. typically includes the @ character as well as other optimizations. inputs that require email addresses should typically use <input type="email"> instead. url a keypad optimized for
entering urls. this may have the / key more prominent, for example. enhanced features could include history access and so on. inputs that require a url should typically use <input type="url"> inst...
Control flow and error handling - JavaScript
// this condition evaluates to true if (b == true) // this condition evaluates to false example in the following example, the function checkdata returns true if the number of characters in a text object is three. otherwise, it displays an alert and returns false. function checkdata() { if (document.form1.threechar.value.length == 3) { return true; } else { alert( '
enter exactly three characters. ' + `${document.form1.threechar.value} is not valid.`); return false; } } switch statement a switch statement allows a program to evaluate an expression and attempt to match the expression's value to a case label. if a match is found, the program executes the associated statement. a switch statement looks like this: switch (expression) { case label_1...
...you can use a catch block to handle all exceptions that may be generated in the try block. catch (catchid) { statements } the catch block specifies an identifier (catchid in the preceding syntax) that holds the value specified by the throw statement. you can use this identifier to get information about the exception that was thrown. javascript creates this identifier when the catch block is
entered. the identifier lasts only for the duration of the catch block. once the catch block finishes executing, the identifier no longer exists. for example, the following code throws an exception. when the exception occurs, control transfers to the catch block. try { throw 'myexception'; // generates an exception } catch (err) { // statements to handle any exceptions logmyerrors(err); // p...
Regular expressions - JavaScript
of the start or end of the entire string. examples note: several examples are also available in: the reference pages for exec(), test(), match(), matchall(), search(), replace(), split() this guide articles': character classes, assertions, groups and ranges, quantifiers, unicode property escapes using special characters to verify input in the following example, the user is expected to
enter a phone number. when the user presses the "check" button, the script checks the validity of the number. if the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. if the number is invalid, the script informs the user that the phone number is not valid. within non-capturing parentheses (?: , ...
...followed by three digits \d{3}, followed by a close parenthesis \), (end non-capturing parenthesis )), followed by one dash, forward slash, or decimal point and when found, remember the character ([-\/\.]), followed by three digits \d{3}, followed by the remembered match of a dash, forward slash, or decimal point \1, followed by four digits \d{4}. the change event activated when the user presses
enter sets the value of regexp.input. html <p>
enter your phone number (with area code) and then click "check". <br> the expected format is like ###-###-####. </p> <form action="#"> <input id="phone"> <button onclick="testinfo(document.getelementbyid('phone'));">check</button> </form> javascript var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/; function testinfo(phoneinput) { var o...
Inheritance and the prototype chain - JavaScript
ve properties. all functions have a special property named prototype. please note that the code below is free-standing (it is safe to assume there is no other javascript on the webpage other than the below code). for the best learning experience, it is highly recommended that you open a console, navigate to the "console" tab, copy-and-paste in the below javascript code, and run it by pressing the
enter/return key. (the console is included in most web browser's developer tools. more information is available for firefox developer tools, chrome devtools, and edge devtools.) function dosomething(){} console.log( dosomething.prototype ); // it does not matter how you declare the function, a // function in javascript will always have a default // prototype property. // (ps: there is one exceptio...
... of dosomeinstancing is looked through. however, there is a problem: the __proto__ of the __proto__ of the __proto__ of dosomeinstancing does not exist. then, and only then, after the entire prototype chain of __proto__'s is looked through, and there are no more __proto__s does the browser assert that the property does not exist and conclude that the value at the property is undefined. ...
WeakRef - JavaScript
ed by the specification. when, how, and whether garbage collection occurs is down to the implementation of any given javascript engine. any behavior you observe in one engine may be different in another engine, in another version of the same engine, or even in a slightly different situation with the same version of the same engine. garbage collection is a hard problem that javascript engine implem
enters are constantly refining and improving their solutions to. here are some specific points that the authors of the weakref proposal included in its explainer document: garbage collectors are complicated. if an application or library depends on gc cleaning up a weakref or calling a finalizer [cleanup callback] in a timely, predictable manner, it's likely to be disappointed: the cleanup may happen...
...at is, you can only "see" an object get reclaimed between turns of the event loop. this is primarily to avoid making the behavior of any given javascript engine's garbage collector apparent in code — because if it were, people would write code relying on that behavior, which would break when the garbage collector's behavior changed. (garbage collection is a hard problem; javascript engine implem
enters are constantly refining and improving how it works.) if multiple weakrefs have the same target, they're consistent with one another. the result of calling deref on one of them will match the result of calling deref on another of them (in the same job), you won't get the target object from one of them but undefined from another. if the target of a weakref is also in a finalizationregistry, the ...
<mfrac> - MathML
by side and separated by a slash (/). otherwise, if set to false (which is the default value), numerator and denominator are on top of each other. this attribute is deprecated and will be removed in the future. use u+2044 (fraction slash) instead. class, id, style provided for use with stylesheets. denomalign the alignment of the denominator under the fraction. possible values are: left, c
enter (default), and right. this attribute is deprecated and will be removed in the future. use css text-align instead. href used to set a hyperlink to a specified uri. linethickness the thickness of the horizontal fraction line. this attributes accepts any length values. the values medium, thin, and thick are deprecated and will be removed in the future. mathbackground the background color. yo...
...accepts any length values. the values medium, thin, and thick are deprecated and will be removed in the future. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color and also the fraction line color. you can use #rgb, #rrggbb and html color names. numalign the alignment of the numerator over the fraction. possible values are: left, c
enter (default), and right. this attribute is deprecated and will be removed in the future. use css text-align instead. examples sample rendering: your browser rendering: a b c d <math> <mfrac bevelled="true"> <mfrac> <mi> a </mi> <mi> b </mi> </mfrac> <mfrac> <mi> c </mi> <mi> d </mi> </mfrac> </mfrac> </math> specificat...
<mtd> - MathML
the mathml <mtd> element represents a cell in a table or a matrix. it may only appear in a <mtr> element. this element is similar to the <td> element of html. attributes class, id, style provided for use with stylesheets. columnalign specifies the horizontal alignment of this cell and overrides values specified by <mtable> or <mtr>. possible values are: left, c
enter and right. columnspan a non-negative integer value that indicates on how many columns does the cell extend. groupalign unimplemented href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign specifies the vertical alignment of this cell and overrides value...
.... groupalign unimplemented href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign specifies the vertical alignment of this cell and overrides values specified by <mtable> or <mtr>. possible values are: axis, baseline, bottom, c
enter and top. rowspan a non-negative integer value that indicates on how many rows does the cell extend. specifications specification status comment mathml 3.0the definition of 'mtd' in that specification. recommendation current specification mathml 2.0the definition of 'mtd' in that specification. recommendation initial specification ...
OpenSearch description format
s the base url for the search query. firefox supports three url types: type="text/html" specifies the url for the actual search query. type="application/x-suggestions+json" specifies the url for fetching search suggestions. in firefox 63 onwards, type="application/json" is accepted as an alias of this. type="application/x-moz-keywordsearch" specifies the url used when a keyword search is
entered in the location bar. this is supported only in firefox. for these url types, you can use {searchterms} to substitute the search terms
entered by the user in the search bar or location bar. other supported dynamic search parameters are described in opensearch 1.1 parameters. for search suggestions, the application/x-suggestions+json url template is used to fetch a suggestion list in json f...
...ns, the application/x-suggestions+json url template is used to fetch a suggestion list in json format. for details on how to implement search suggestion support on a server, see supporting search suggestions in search plugins. param the parameters that must be passed in along with the search query as key/value pairs. when specifying values, you can use {searchterms} to insert the search terms
entered by the user in the search bar. moz:searchform the url for the site's search page for which the plugin. this lets firefox users visit the web site directly. note: since this element is firefox-specific, and not part of the opensearch specification, we use the moz: xml namespace prefix in the example above to ensure that other user agents that don't support this element can safely ignore it.
SVG Event Attributes - SVG: Scalable Vector Graphics
each elements. all event attribute are not animatable. ...
...t, onpaste global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondrag
enter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouse
enter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...
alignment-baseline - SVG: Scalable Vector Graphics
nment-baseline can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <tspan>, <tref>, <altglyph>, and <textpath> usage notes value auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | top | c
enter | bottom default value auto animatable yes auto the value is the dominant-baseline of the script to which the character belongs - i.e., use the dominant-baseline of the parent. baseline uses the dominant baseline choice of the parent. matches the box’s corresponding baseline to that of its parent. before-edge the alignment-point of the object being alig...
...ine to that of its parent. alphabetic matches the box’s alphabetic baseline to that of its parent. hanging the alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element. mathematical matches the box’s mathematical baseline to that of its parent. top aligns the top of the aligned subtree with the top of the line box. c
enter aligns the c
enter of the aligned subtree with the c
enter of the line box. bottom aligns the bottom of the aligned subtree with the bottom of the line box. svg 2 introduces some changes to the definition of this property. in particular: the values auto, before-edge, and after-edge have been removed. for backwards compatibility, text-before-edge may be mapped to text-top and text-after-edge to...
cx - SVG: Scalable Vector Graphics
the cx attribute define the x-axis coordinate of a c
enter point. three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the c
enter of the shape. value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry property...
... value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for ellipses. ...
cy - SVG: Scalable Vector Graphics
the cy attribute define the y-axis coordinate of a c
enter point. three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the c
enter of the shape. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry pr...
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for ellipses. ...
d - SVG: Scalable Vector Graphics
x="120" /> </g> </svg> elliptical arc curve elliptical arc curves are curves defined as a portion of an ellipse. it is sometimes easier to draw highly regular curves with an elliptical arc than with a bézier curve. command parameters notes a (rx ry angle large-arc-flag sweep-flag x y)+ draw an arc curve from the current point to the coordinate x,y. the c
enter of the ellipse used to draw the arc is determined automatically based on the other parameters of the command: rx and ry are the two radii of the ellipse; angle represents a rotation (in degrees) of the ellipse relative to the x-axis; large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. ...
... the coordinate x,y becomes the new current point for the next command. all subsequent sets of parameters are considered implicit absolute arc curve (a) commands. a (rx ry angle large-arc-flag sweep-flag dx dy)+ draw an arc curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. the c
enter of the ellipse used to draw the arc is determined automatically based on the other parameters of the command: rx and ry are the two radii of the ellipse; angle represents a rotation (in degrees) of the ellipse relative to the x-axis; large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. ...
stroke-linecap - SVG: Scalable Vector Graphics
nk" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> round the round value indicates that at the end of each subpath the stroke will be extended by a half circle with a diameter equal to the stroke width. on a zero length subpath, the stroke consists of a full circle c
entered at the subpath's point. example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "round" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="round" /> <!-- effect of the "round" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="round" /> <!-- the following pink...
... cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> square the square value indicates that at the end of each subpath the stroke will be extended by a rectangle with a width equal to half the width of the stroke and a height equal to the width of the stroke. on a zero length subpath, the stroke consists of a square with its width equal to the stroke width, c
entered at the subpath's point. example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "square" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="square" /> <!-- effect of the "square" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="square" /> <!-- the following ...
hotkeys - Archive of obsolete content
of 'modifier-key': "accel-s" "meta-shift-i" "control-alt-d" all hotkeys require at least one modifier as well as the key. these are the possible modifiers you can supply: shift: the shift key. alt: the alt key. on the macintosh, this is the option key. on macintosh this can only be used in conjunction with another modifier, since alt-letter combinations are reserved for
entering special characters in text. meta: the meta key. on the macintosh, this is the command key. control: the control key. accel: the key used for keyboard shortcuts on the user's platform, which is control on windows and linux, and command on mac. usually, this would be the value you would use. pageup: the page up key. pagedown: the page down key. onpress ...
notifications - Archive of obsolete content
here's a typical example. when the message is clicked, a string is logged to the console. var notifications = require("sdk/notifications"); notifications.notify({ title: "jabberwocky", text: "'twas brillig, and the slithy toves", data: "did gyre and gimble in the wabe", onclick: function (data) { console.log(data); // console.log(this.data) would produce the same result. ...
tabs - Archive of obsolete content
ent.readystate. it has one of four possible values: "uninitialized": the tab's document is not yet loading "loading": the tab's document is still in the process of loading "interactive": the tab's document has loaded and is parsed, but resources such as images and stylesheets may still be loading "complete": the tab's document and all resources are fully loaded once a tab's readystate has
entered "interactive", you can retrieve properties such as the document's url. events close this event is emitted when the tab is closed. it's also emitted when the tab's window is closed. arguments tab : listeners are passed the tab object. ready this event is emitted when the dom for the tab's content is ready. it is equivalent to the domcontentloaded event for the given content page. at this ...
Overview - Archive of obsolete content
between the different sdk objects. we could represent the basic interactions between the main module and the various content scripts like this: user interface the annotator's main user interface consists of a widget and three panels. the widget is used to switch the annotator on and off, and to display a list of all the stored annotations. the annotation-editor panel enables the user to
enter a new annotation. the annotation-list panel shows a list of all stored annotations. the annotation panel displays a single annotation. additionally, we use the notifications module to notify the user when the add-on's storage quota is full. working with the dom we'll use two page-mods to interact with the doms of pages that the user has opened. the selector enables the user to choose ...
Annotator - Archive of obsolete content
pi is deprecated from firefox 29 onwards. please see the ui module for replacements. in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis. in this tutorial we'll build an add-on that uses many of the sdk's high-level apis. the add-on is an annotator: it enables the user to select elements of web pages and
enter notes (annotations) associated with them. the annotator stores the notes. whenever the user loads a page containing annotated elements these elements are highlighted, and if the user moves the mouse over an annotated element its annotation is displayed. next we'll give a quick overview of the annotator's design, then go through the implementation, step by step. if you want to refer to the compl...
Getting Started (jpm) - Archive of obsolete content
refox, you'll need to use the old cfx tool. see instructions for getting started with cfx. the command-line jpm tool. see the instructions for installing jpm. once you've done that, you'll be looking at a command prompt. install firefox developer version for testing your add-on. initializing an empty add-on in the command prompt, create a new directory. navigate to it, type jpm init, and hit
enter: mkdir my-addon cd my-addon jpm init you'll then be asked to supply some information about your add-on: this will be used to create your add-on's package.json file. for now, just press
enter to accept the default for each property. for more information on jpm init, see the jpm command reference. once you've supplied a value or accepted the default for these properties, you'll be shown the com...
Getting started (cfx) - Archive of obsolete content
isites to create add-ons for firefox using the sdk, you'll first need to follow the instructions to install and activate the sdk. once you've done that, you'll be looking at a command prompt. initializing an empty add-on in the command prompt, create a new directory. the directory doesn't have to be under the sdk root: you can create it anywhere you like. navigate to it, type cfx init, and hit
enter: mkdir my-addon cd my-addon cfx init you'll see some output like this: * lib directory created * data directory created * test directory created * doc directory created * readme.md written * package.json written * test/test-main.js written * lib/main.js written * doc/main.md written your sample add-on is now ready for testing: try "cfx test" and then "cfx run". have fun!" implementing the a...
Downloading Files - Archive of obsolete content
astatus) { // do something } } persist.saveuri(obj_uri, null, null, null, "", targetfile, privacy); downloading files that require credentials before calling nsiwebbrowserpersist.saveuri(), you need to set the progresslistener property of the nsiwebbrowserpersist instance to an object that implements nsiauthprompt. normally, nsiauthprompt expects a prompt to be displayed so the user can
enter credentials, but you can return a username and password credentials directly without prompting the user. if you want to open a login prompt, you can use the default prompt by calling the window watcher's getnewauthprompter() method. components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbr...
Adding Events and Commands - Archive of obsolete content
r most elements. these are some notable events you should keep in mind: oncommand. this is one of the most important and commonly used events in xul. it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes. for a button, it represents the action of the user clicking on it, or focusing it with the keyboard and then pressing the
enter key. it's an abstraction of the main way to interact with a control element. onselect. fired when the selection in a tree or listbox changes. onclick. triggered when the user clicks on the element, including right clicks. you shouldn't normally use this event to trigger actions on input controls such as buttons. use oncommand instead. onfocus and onblur. used when an element receives or loses ...
Intercepting Page Loads - Archive of obsolete content
firefox, usually several dozen per page visit. in the previous example, one of the first things we do is check if the url is of interest to us, otherwise we let it go. avoid heavy, time-consuming operations, or the user's browsing experience will become exasperating. . you have to take into account that a page load may involve several http requests, specially when redirects are involved. if you
enter gmail.com in your browser, you will probably be redirected a few times before reaching the page that actually displays any content. all of these "hops" will involve a call to your observer. . the aforementioned observer notifications page has more information about these notifications and links to other useful documentation. webprogresslisteners when used in the chrome, this is a more sophist...
Mozilla Documentation Roadmap - Archive of obsolete content
mation can be a daunting task. knowing where to look is critical and non trivial. this tutorial was aimed at compiling all the right resources for extension development and putting them in the right context, but there's much more to learn, and knowing how to find it is part of what we felt was necessary to teach. let's look into the resources that have helped us the most. the mozilla developer c
enter this is the official and most extensive guide to everything related to mozilla. mdc is where this tutorial is hosted, and where most of its links point to. it encompasses firefox, other mozilla products, javascript, css, xul, web and extension development guidelines, accessibility, usability, best practices... the list goes on. it's incredibly comprehensive, and its underlying wiki technology ma...
The Box Model - Archive of obsolete content
ment xul, unlike html, provides an easy way to align elements both horizontally and vertically. you can either use the align and pack attributes, or the -moz-box-align and -moz-box-pack css properties. packing determines the positioning of the child elements in the direction of the container's orientation. alignment determines the positioning in the other direction. so, in a flexed hbox, having c
enter alignment and end packing results in this: one important thing to notice is that aligment and flexibility can't be mixed in some cases. if you add flexibility to one of the buttons, the packing will no longer be useful, but the alignment still makes a difference. it also wouldn't make sense to use flexibility or packing in the hbox if it didn't have any available horizontal space; the containe...
User Notifications and Alerts - Archive of obsolete content
ifications. there's a catch, though: these notifications are inside the current tab, so switching tabs will make a notification disappear. the notification shows up again when you come back to the tab that displayed it. this means that these notifications make the most sense when they are related to the page currently being displayed, such as a page trying to install an add-on, or a site you just
entered a password on. notification boxes are very easy to create, and are very customizable: let nb = gbrowser.getnotificationbox(); let acceptbutton = new object(); let declinebutton = new object(); let message = this._bundle.getstring("xulschoolhello.friendmessage.label"); let that = this; acceptbutton.label = this._bundle.getstring("xulschoolhello.acceptbutton.label"); acceptbutton.accessk...
Performance best practices in extensions - Archive of obsolete content
never use synchronous xmlhttprequests. netutils.jsm provides helpers for asynchronous reading and copying of files. never access a sqlite database synchronously. use the asynchronous api instead. performing sequential, asynchronous operations can often be greatly simplified using promises. avoid mouse movement events avoid using mouse event listeners, including mouseover, mouseout, mouse
enter, mouseexit, and especially mousemove. these events happen with high frequency, so their listeners can trivially create very high cpu overhead. when these events cannot be avoided, computation during the listeners should be kept to a minimum and real work throttled. the listeners should be added to the most specific element possible, and removed when not immediately necessary. avoid animated ima...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
e. the basic implementation uses a resource such as the web page or the web application to control the navigation system. in other words, the page is the browsing device during the experience, and the user is "immersed" in that browsing device. what does this mean, practically speaking? what does it look like? good candidates for inner-browsing include a spell check application, in which the text
entered in a web page is checked as it is typed; a webmail application that uses the inner-browsing model to display the separate messages and message lists in an integrated way, much like a client mail app; and a stock ticker that spools the information across the web page. see the table below for a description of how applications like this exemplify inner-browsing and how they might be implemented us...
List of Former Mozilla-Based Applications - Archive of obsolete content
to another technology name description additional information angelsoft tools for startups, vcs, and angel investors switched from xulrunner-based client to a web application autodesk maya 3d modeling tool switched off of gecko for help browser in version 8.5 blam feed reader switched to webkit in version 1.8.6 boxee media c
enter software switched to webkit in version 1.0 epiphany browser switched from gecko to webkit flock social browsing flock switched from being firefox-based to chromium-based when it released a new beta on june 16, 2010 jolicloud web operating system as of march 2010, rw/w reports jolicloud is on chrome/chrome os joost tv over internet swi...
MMgc - Archive of obsolete content
jects. so, some kind of reference counting is still attractive to lower the amount of work the gc has to do, and to get more immediacy on memory reclamation. however, reference counting is also slow because the reference counts need to be constantly maintained. so, it's attractive to find some form of reference counting that doesn't require maintaining reference counts for every single reference.
enter deferred reference counting in deferred reference counting, a distinction is made between heap and stack references. stack references to objects tend to be very temporary in nature. stack frames come and go very quickly. so, performance can be gained by not performing reference counting on the stack references. heap references are different since they can persist for long periods of time. so, in ...
Source Navigator - Archive of obsolete content
mozilla.) remember to ensure that "include subdirectories" and "build cross-reference database" are checked. then click "ok". the snavigator then begins to scan your source directories. this takes a few minutes. now you can enjoy searching the mozilla code in a faster speed. using source navigator (more later) opening a project open a terminal. type <tt>snavigator</tt> followed by striking
enter. this shows the "source-navigator projects" dialog. choose the project file that you've just created and then click "open...". source navigator then loads the database and then display the following symbols window: searching a method by typing in the method name viewing the definition/declaration by highlighting the method in the code ... displaying a inheritance hierarchy ... searching a stri...
Editor Embedding Guide - Archive of obsolete content
" "courier new, courier, monospace" any string is acceptable. the above strings should be considered examples of base functionality and in no way imply that this command won't handle other fonts. cmd_align sets the alignment for the lines contained in the current selection. getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) "left", "right", "c
enter", "justify" cmd_inserthtml cmd_insertlinknoui cmd_insertimagenoui cmd_inserthr cmd_charset sets the charset for the document. getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) note there must be a clear undo stack or this will not work. cmd_copy copies current selection. getcommandstate "state_enabled" (boolean) docommand no parameter note ...
Layout System Overview - Archive of obsolete content
ipulated by the user (via the dom) and the resulting visual impacts must be shown as quickly as possible, without disconcerting flicker or other artifacts that might bother the user. consider a text entry field: the user types text into a form on the web. as the user types a new character it is inserted into the content model. this causes layout to be notified that a new piece of content has been
entered, which causes layout to create a new frame and format it. this must happen very fast, so the user's typing is not delayed. in the case of the wysiwyg html editor, the user expects that the modifications they make to the document will appear immediately, not seconds later. this is especially critical when the user is typing into the document: it would be quite unusable if typing a character at t...
Repackaging Firefox - Archive of obsolete content
ing an extension makes it far easier to keep track of your changes easily when the time comes to upgrade to new versions of firefox, and also ensures, when set-up correctly, that users are able to safely receive firefox updates from mozilla. more about this below. while the aim of this article is not to fully document how to make an extension (for that, try this section of the mozilla developer c
enter), here is a basic tutorial to get you started, and some tips specific for creating a dex. if you already have an extension that you want to bundle with firefox, and don't want to bundle an extra extension solely to set a few defaults, you can do everything you need to do in your existing extension. however, it's still recommended that you look through this tutorial, as it contains tips specific ...
Me - Archive of obsolete content
chanism is independent of the first-run page; in particular, the callback is not a load event listener or jquery ready callback. onfirstrun() may be called anywhere in your jetpack, but if it is called as the result of some asynchronous operation such as a timeout or xmlhttprequest, it is ignored. if you call it multiple times, all but the final call are ignored. funca function. it takes no param
enters. inside the function, this is the jetpack's content.function example jetpack.me.onfirstrun(function(){ jetpack.notifications.show("oh boy, i'm installed!");}); ...
Hacking wiki - Archive of obsolete content
checking out first, check out the <tt>developer.mozilla.org</tt> project from svn. for anonymous access use: svn co http://svn.mozilla.org/projects/deve...lla.org/trunk/ to see the skins properly, you'll need to also check out <tt>mozilla-org/css</tt> to get the css files needed: export cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/www cvs login cvs co mozilla-org/css (when prompted to
enter a password, type <tt>anonymous</tt>) setting up copy the contents of the <tt>trunk</tt> folder and the <tt>css</tt> folder (note: the folder itself) into the <tt>www</tt> directory on your server. the contents of the <tt>trunk</tt> directory you just checked out is a slightly modified mediawiki install, so you can follow the mediawiki install instructions. the <tt>css</tt> folder contains file...
Remotely debugging Firefox for Metro - Archive of obsolete content
connecting on the desktop on the desktop, open the web developer menu and select "connect...". you'll see a page that looks like this: if you are running firefox for metro on the same computer with the default settings, use the default host (localhost) and port (6000), and press the "connect" button. if you are connecting to firefox for metro on a different computer or a different port,
enter the appropriate hostname and port number and then press "connect." in the windows 8 (metro) browser next you'll see a dialog in firefox for metro asking you to confirm the connection. press the "ok" button to continue. tip: if the remote connection times out, flip to the desktop via the desktop tile and check if windows firewall has thrown up an incoming connection permissions prompt. on the...
Supporting per-window private browsing - Archive of obsolete content
t-exiting notification and set the data field of the nsisupportsprbool subject to true. var os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); os.addobserver(function (asubject, atopic, adata) { asubject.queryinterface(components.interfaces.nsisupportsprbool); // if another extension has not already canceled
entering the private mode if (!asubject.data) { /* you should display some user interface here */ asubject.data = true; // cancel the operation } }, "last-pb-context-exiting", false); forcing a channel into private mode usually, network channels inherit the privacy status of the document that created them, which means that they work correctly most of the time. however, sometimes you ...
Tamarin build documentation - Archive of obsolete content
ons of asc.jar and avmshell for more details. running tamarin tests see running tamarin acceptance tests and running tamarin performance tests building tamarin windows mobile utilities the tamarin windows mobile utilities allows the existing acceptance and performance testsuites to be run on a windows mobile device connected to a windows desktop machine by activesync or windows mobile device c
enter (for windows vista and windows 7). setup and run activesync or windows mobile device c
enter. you should be connected and able to see the devices file system in windows explorer in tamarin repository go to the utils/wmremote directory, open the ceremoteshell2008.sln file in visual studio 2008 build all targets in release mode (for more information see utils/wmremote/readme.txt) copy rele...
Tamarin Build System Documentation - Archive of obsolete content
change is built including all checkins since the last build each sandbox build occurs in the order they were submitted, the submitter may cancel a build. how do i build a sandbox build? create a user repository, instructions are https://developer.mozilla.org/en/publishing_mercurial_clones go to the request a sandbox build page http://tamarin-builds.mozilla.org/build_trigger/requestbuild.cfm
enter the repository url, revision number, email address, and description. the description appears in the buildbot status page, please describe what you are trying to build and test after submitting a sandbox build view the build status page or the queue (if buildbot is busy) how do i view and change the queue? if buildbot is busy the queue is displayed http://tamarin-builds.mozilla.org/build_tri...
The new nsString class implementation (1999) - Archive of obsolete content
l need include an nsistring interface onto the nsstrimpl/nsstring classes. i won't repeat it's interface here since it is basically a restatement (in xpcom terms) of the nsstring interface. usage patterns how to use these classes to increase the portability, thread and process safety of gecko, i suggest the following rules regarding the use of each of our string class derivatives: <c
enter> string class</c
enter> <c
enter> where to use</c
enter> nsstrimpl use to pass strings between modules who have linked the nsstrimpl function library. nsstring use these locally in objects who span of control is known to live within your own process. these should typically not be exposed to objects in other modules. nsautostring use these...
Anonymous Content - Archive of obsolete content
he css :focus pseudo-element is hierarchical. style rules can be written with the assumption that they will match (in the above example) both the file control and the element focused inside the file control. in other words, an arbitrary chain of elements can be in the :focus state at the same time. mouseover and mouseout events mouseover and mouseout events are retargeted if the mouse genuinely
enters or exits the bound element (in addition to
entering or exiting some anonymous content). if, however, the user has simply moved the mouse from one anonymous element to another, without
entering or exiting the bound element itself, then the event is stopped. for example, if the user
enters the html file upload control from the left, a mouseover event is generated for the anonymous textfield. beca...
Elements - Archive of obsolete content
ombinations, such as alt-x or control-altx. key="x" modifiers="control any shift" - the handler will match if the shift key is pressed, whether or not the control key is pressed. this will match shift-x or control-shift-x, but no other combinations. keycode - the keycode attribute imposes a filter on key handlers. its value is a key identifier for a specific keycode, e.g., vk_
enter. [editor's note: a forthcoming dom events specification will presumably outline the list of valid keycode strings.] if this attribute is present, then its value must match the keycode field of the dom key event object in order for the handler to fire. charcode - the charcode attribute imposes a filter on key handlers. its value is a single character, e.g., "z". if this attribute is present, ...
Using XPInstall to Install Plugins - Archive of obsolete content
ice). the initinstall method is polymorphic, but here is a recommended invocation mechanism: initinstall("my plugin software", "@myplugin.com/myplugin,version=2.5", "2.5.0.0"); in the code snippet above, the initinstall method is invoked with three parameters: a string for the name of the application a string signifying the plugin identifier associated with the plugin. this value is actually
entered in the client version registry upon installation, a mozilla-browser file that stores metadata about the software that has just been installed. this value can be queried via web-page delivered javascript, and is useful for initiating xpinstall downloads via trigger scripts. you can determine the version of the software that has been installed, and determine whether to update it, all via javascri...
accesskey - Archive of obsolete content
l always be appended as described above. for consistency, this occurs for languages such as japanese even if the labels have their accesskey characters. ...
autoFillAfterMatch - Archive of obsolete content
« xul reference home autofillaftermatch obsolete since gecko 1.9.1 type: boolean if set to true, the entire text of the best match will be displayed at the end of the input. if false, only the text that hasn't been
entered yet will be filled in. the textbox.autofill attribute must be set to true to use this feature. as of gecko 1.9.1, this attribute is superseded by the completedefaultindex attribute. ...
autocompletesearch - Archive of obsolete content
s suggestions are searched. places-tag-autocomplete requires seamonkey 2.1 the user's places tags are searched. mydomain new in thunderbird 3 requires seamonkey 2.0 the user's email domain is suggested. history requires seamonkey 2.0 the user's url history is searched. form-history requires seamonkey 2.0 search the values that the user has
entered into form fields. file (linux only) the local file system is searched. gloda new in thunderbird 3 addrbook new in thunderbird 3 requires seamonkey 2.0 the user's address book is searched. ldap new in thunderbird 25 requires seamonkey 2.22 the user's ldap directory is searched. ...
XML Assignments - Archive of obsolete content
e assign element. this element allows the use of additional xpath expressions to get more data from the xml data. here is an example: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"> <assign var="?namelength" expr="string-length(@name)"/> <assign var="?siblings" expr="count(../*) - 1"/> </query> <action> <hbox uri="?" align="c
enter"> <button label="?name"/> <label value="?gender"/> <label value="?namelength"/> <label value="?siblings"/> </hbox> </action> </template> </vbox> two assign elements are placed as children of the query element. it allows us to declare additional variables that may be used in the action body. the expr attribute specifies the xpath expression and the var ...
XML Templates - Archive of obsolete content
tributes in the original xml data above. this substitution occurs for any attribute within the action body, so you can also set other attributes with this technique. in this example, an hbox element containing a button and a label is generated for each result. <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <hbox uri="?" align="c
enter"> <button label="?name"/> <label value="?gender"/> </hbox> </action> </template> </vbox> note how two attributes are substituted here, the label on the button and the value on the label. the query does not have to be as simple as the one used here. any xpath expression may be used. for instance, the following query returns only those results for female people. <que...
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
eb development – javascript console. copy the following code. it is one very long line ending in path—make sure that you get all of it: components.classes["@mozilla.org/file/directory_service;1"].getservice( components.interfaces.nsiproperties).get("achrom", components.interfaces.nsifile).path in the javascript console window, paste the code in the field near the top. presss the return or
enter key, or the evaluate button. the console displays the location of seamonkey's chrome directory. explanation: the chrome directory contains program files that are part of seamonkey itself, together with other files that are provided by extensions. your toolbar button will be an extension. 2. delete these two files: chrome.rdf overlays.rdf explanation: seamonke...
Adding Event Handlers - Archive of obsolete content
he 'command' event. the command event is fired when a user activates an element, for example by pressing a button, changing a checkbox or selecting an item from a menu. the command event is a useful event since it automatically handles different ways of activating the element. for example, the command event will occur regardless of whether the user uses the mouse to click a button, or presses the
enter key. there are two ways to attach an event listener to an element. first, by using an attribute with a script as its value. second, by calling an element's addeventlistener method. the former may only handle bubbling events but tends to be simpler to write. the latter can handle events at any phase and may also be used to attach multiple listeners for an event to an element. using the attribute ...
Adding Properties to XBL-defined Elements - Archive of obsolete content
replace the onset attribute with a setter element. the example below shows this: <property name="number"> <getter> return this.getattribute('number'); </getter> <setter> var v = parseint(val,10); if (!isnan(v)) { this.setattribute('number', '' + v); } </setter> </property> the property in this example will only be able to hold integer values. if other characters are
entered, they are stripped off. if there are no digits, the value is not changed. this is done in the code inside the setter element. the real value of the property is stored in the number attribute. you can use either syntax for creating get and set handlers. readonly attribute you can make a field or property read-only by adding a readonly attribute to the field tag or property tag and setting it to ...
Anonymous Content - Archive of obsolete content
t elements need the xul namespace (they appear preceded with xul:), because they are xul elements and aren't valid in xbl. this namespace was declared on the bindings tag. if you don't use the namespace on xul elements, mozilla will assume that the elements are xbl, not understand them, and your elements won't work correctly. filename input field example another example, this time for a field for
entering a filename: <binding id="fileentry"> <content> <textbox/> <button label="browse..."/> </content> </binding> attaching this binding to an element will cause it to contain a field for
entering text, followed by a browse button. this inner content is created anonymously and cannot be seen using the dom. override the bound element the anonymous content is created automatically wheneve...
Box Objects - Archive of obsolete content
the dir attribute, or the -moz-box-direction css property. if this is set to reverse, all of the children in the box are displayed in reverse order. in a horizontal box, the elements will be displayed from right to left; in a vertical box, the elements will be displayed from bottom to top. here is an example: example 5 : source view <hbox dir="reverse"> <button label="left"/> <button label="c
enter"/> <button label="right"/> </hbox> navigation through the nodes using the box object ordering will return the elements in the order they are displayed accounting for the ordinal adjustments made. thus, if you change the ordinal of an element, it will have a different position in the box order. reversing the direction, however, does not change the box order. next, we'll find out how to use xpco...
Creating a Window - Archive of obsolete content
hrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300"); if you are using firefox, try below: window.open("chrome://browser/content/places/places.xul", "bmarks", "chrome,width=600,height=300"); you can test lines of javascript like these in the error console. choose tools – error console, type a line of javascript, and press the evaluate button, or the return or
enter key. the findfile.xul example let's begin by creating the basic file for the find file dialog. create a file called findfile.xul and put it in the content directory specified in the findfile.manifest file (we've created in the previous section). add the xul template shown at the top of this page to the file and save it. you can use the command-line parameter '-chrome' to specify the xul file ...
Cross Package Overlays - Archive of obsolete content
we'll do it anyway. mozilla allows you to add a list of overlays to the contents.rdf file that you use to list chrome packages, skins and locales. once you have created an overlay, you can add it to the contents.rdf file. then add items, one for each window that you want the overlay to apply to. our find files example first, let's create a simple overlay. it will just have a few elements for
entering a filename and directory to search. call the file foverlay.xul and add it to the findfile directory along with findfile.xul. our foverlay.xul example source <?xml version="1.0"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="browser-toolbox"> <toolbar id="findfile_toolbar"> <label control="findfile_filename" value="search for fil...
Features of a Window - Archive of obsolete content
d argument to the window.open function. your operating system may not support all of them. you can also use any of the pre-existing flags, which you should find in a javascript reference. you may disable a feature by setting it to 'no', for example 'dialog=no'. alwayslowered the window will always appear behind other windows. alwaysraised the window will always appear above other windows. c
enterscreen the window will be c
entered on the screen when it is opened. dependent the window will always appear relative to the window that opened it. if the window that opened the new window is moved, the new window is moved relative to it. dialog the window is a dialog box, which may appear differently. modal the dialog is modal. the window that opened the modal window can't be interacted wit...
Introduction - Archive of obsolete content
installed by the user. mozilla applications such as firefox provide an extension manager which allows packages to be installed without having to write a lot of complex code. what do i need to know to use this tutorial? you should have an understanding of html and at least a basic understanding of xml and css. here are some guidelines to keep in mind: xul elements and attributes should all be
entered in lowercase as xml is case-sensitive (unlike html). attribute values in xul must be placed inside quotes, even if they are numbers. xul files are usually split into four files, one each for the layout and elements, for style declarations, for entity declarations (used for localization) and for scripts. in addition, you may have extra files for images or for platform specific data. xul is s...
Localization - Archive of obsolete content
l "copy"> <!entity pastecmd.label "paste"> <!entity cutcmd.accesskey "t"> <!entity copycmd.accesskey "c"> <!entity pastecmd.accesskey "p"> <!entity cutcmd.commandkey "x"> <!entity copycmd.commandkey "c"> <!entity pastecmd.commandkey "v"> <!entity opencmdtoolbar.label "open"> <!entity savecmdtoolbar.label "save"> <!entity searchtab "search"> <!entity optionstab "options"> <!entity finddescription "
enter your search criteria below and select the find button to begin the search."> <!entity findcriteria "search criteria"> <!entity type.name "name"> <!entity type.size "size"> <!entity type.date "date modified"> <!entity mode.is "is"> <!entity mode.isnot "is not"> <!entity casesensitive "case sensitive search"> <!entity matchfilename "match entire filename"> <!entity results.filename "filename"> <!en...
Manifest Files - Archive of obsolete content
he directory where mozilla is installed. exit mozilla before you do this. next, you are going to register the new application with mozilla so it will know where to find it. add a line at the end of installed-chrome.txt pointing to the new directory you created in step 1. change the highlighted text to the file url below of the directory. make sure that it url ends with a slash and that you press
enter at the end of the line. if you aren't sure what the url is, open the directory created in step 1 into a mozilla browser and copy the url from the location field. note that the reference should always be a directory, not a file. delete the file <mozilla-directory>/chrome/chrome.rdf. start mozilla. you should be able to view any xul files you put into the directory using a url of the form: chrome...
Modifying a XUL Interface - Archive of obsolete content
y. example 4 : source view <button label="add" oncommand="this.nextsibling.value += '1';"/> <textbox/> this example adds a '1' to the textbox each time the button is pressed. the nextsibling property navigates from the button (this) to the next element, the textbox. the += operator is used to add to the current value so a 1 will be added onto the end of the existing text. note that you can still
enter text into the textbox. you can also retrieve the current label or value using these properties, as in the following example: example 5 : source view <button label="hello" oncommand="alert(this.label);"/> toggling a checkbox checkboxes have a checked property which may be used to check or uncheck the checkbox. it should be easy to determine how this is used. in this next example, we reverse the s...
Open and Save Dialogs - Archive of obsolete content
the user has selected a file. the function returns one of three constants: returnok - the user selected a file and pressed ok. the file the user selected will be stored in the file picker's file property. returncancel - the user pressed cancel. returnreplace - in the save mode, this return value identifies that the user selected a file to be replaced. (returnok will be returned when the user
entered the name of a new file.) you should check the return value and then get the file object from the file picker using the file property. var res = fp.show(); if (res != nsifilepicker.returncancel){ var thefile = fp.file; // --- do something with the file here --- } next, we'll see how to create a wizard. « previousnext » ...
Splitters - Archive of obsolete content
d="content-4" width="60" height="20" src="w4.html"/> </hbox> here, four iframes have been created and a splitter has been placed in-between the first and second one. the collapse has been set to a value of before, meaning that if the splitter grippy is clicked on, the first frame would disappear and the splitter and the remaining frames would shuffle to the left. the splitter grippy is drawn c
entered inside the splitter. the splitter has been given a resizeafter value of farthest. this means that when the splitter is dragged, the farthest element after it will change size. in this case, frame 4 will change size. a value has not been specified for resizebefore so it will default to a value of closest. in this case, there is only one frame before the splitter, so frame 1 will change size. ...
Tabboxes - Archive of obsolete content
the top and the search criteria box will need to go on the first tab. we'll add some options on the second tab. the progress bar and the buttons can stay on the main dialog, outside of the tabs. <vbox flex="1"> <tabbox selectedindex="1"> <tabs> <tab label="search"/> <tab label="options"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical"> <description>
enter your search criteria below and select the find button to begin the search. </description> <spacer style="height: 10px"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup...
Templates - Archive of obsolete content
t displays a hierarchy such as a tree or menu. this example and any others that reference internal rdf datasources will only work if you load them from a chrome url. for security reasons, mozilla doesn't allow access to them from other sources. to view this example, you will need to create a chrome package and load the file from there (you can do this easily, see manifest files). you can then
enter the chrome url into the browser url field. example 1 : source <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <button uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </template> </vbox> here, a vertical box has been created that will contain a column of buttons, one for each top-level bookmark. you can see that the template contains a sin...
The Box Model - Archive of obsolete content
y use the grid element here to fix this which we'll learn about in a later section. our find files dialog example let's add some boxes to the find files dialog. a vertical box will be added around all of the elements, and a horizontal box with be added around the textbox and the buttons. the result will be that the buttons will appear below the textbox. <vbox flex="1"> <description>
enter your search criteria below and select the find button to begin the search. </description> <hbox> <label value="search for:" control="find-text"/> <textbox id="find-text"/> </hbox> <hbox> <spacer flex="1"/> <button id="find-button" label="find"/> <button id="cancel-button" label="cancel"/> </hbox> </vbox> the vertical box causes the main text, the bo...
The Chrome URL - Archive of obsolete content
fic directory. chrome://messenger/content/messenger.xul chrome://messenger/content/attach.js chrome://messenger/skin/icons/folder-inbox.gif chrome://messenger/locale/messenger.dtd to refer to subdirectories, you can just add them to the end of the chrome url. the following url will refer to the bookmarks window, listed for firefox: chrome://browser/content/bookmarks/bookmarksmanager.xul you can
enter chrome urls anywhere normal urls can be used. you can even
enter them directly into the url bar in a firefox browser window. if you
enter the url mentioned above into the browser's address bar, you should see that window appear like a web page might do and for the most part will function as if it was a separate window. some dialog boxes may not work right, however, as they may be expecting argume...
XBL Attribute Inheritance - Archive of obsolete content
textbox with a text description beside it) out of a label and a textbox element, the label will need to inherit its text from the value attribute and the textbox will also need to inherit its default value from the value attribute as well. to solve this, we will need to use a different attribute and map it to the same one. the following demonstrates this: xul: <box class="labeledtextbox" title="
enter some text:" value="ok"/> css: box.labeledtextbox { -moz-binding: url('chrome://example/skin/example.xml#labeledtextbox'); } xbl: <binding id="labeledtextbox"> <content> <xul:label xbl:inherits="value=title"/> <xul:textbox xbl:inherits="value"/> </content> </binding> the textbox inherits the value attribute directly. to set the value attribute on the label, we need to use a di...
XBL Example - Archive of obsolete content
rom the selectedindex attribute. <constructor> var totalpages=this.childnodes.length; document.getanonymousnodes(this)[0].childnodes[1].childnodes[1] .setattribute("value",(this.page+1)+" of "+totalpages); </constructor> additional features we can add some additional features as well. some keyboard shortcuts could be used for the previous and next buttons, (say backspace and the
enter key). first and last buttons could be added to go to the first and last pages. the label element could be changed to a field where the user could
enter the page to go to, or a popup could be added to allow selection of the page from a menu. we could also add a border around the deck with css to make it look a bit nicer. the final code the final code is as follows: example 2 : source <binding ...
Using Remote XUL - Archive of obsolete content
tem label="get the source" value="https://www.mozilla.org/source.html" /> <menuitem label="build it" value="https://www.mozilla.org/build/" /> </menupopup> </menu> <menu label="testing"> <menupopup> <menuitem label="download" value="https://www.mozilla.org/releases/" /> <menuitem label="report a bug" value="https://bugzilla.mozilla.org/
enter_bug.cgi?format=guided" /> <menuitem label="bugzilla" value="https://www.mozilla.org/bugs/" /> <menuitem label="bug writing" value="https://www.mozilla.org/quality/bug-writing-guidelines.html" /> </menupopup> </menu> <menu label="tools"> <menupopup> <menuitem label="view source" value="https://lxr.mozilla.org/seamonkey/" /> <menuit...
button - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
caption - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
checkbox - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
colorpicker - Archive of obsolete content
selected color. this is modified when the user selects a color. you can assign a string of the form #rrggbb to this property to change the selected color. overview an onchange attribute is an event listener to the object for the event change. a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when
enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-st...
description - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
dialogheader - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
listitem - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
menu - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
menuitem - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
menupopup - Archive of obsolete content
e word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should be aligned. 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). the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftc
enter, rightc
enter, topc
enter or bottomc
enter. the popup value (ie, the second word) can be one of topleft, topright, bottomleft or bottomright. positions specified as a single word string are shortcuts for the values above. valid single-word values are after_start, after_end, before_start, before_end, end_after, end_before, start_after, start_before, overlap, at_pointer or after_pointer. for mor...
menuseparator - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
panel - Archive of obsolete content
e word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should be aligned. 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). the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftc
enter, rightc
enter, topc
enter or bottomc
enter. the popup value (ie, the second word) can be one of topleft, topright, bottomleft or bottomright. positions specified as a single word string are shortcuts for the values above. valid single-word values are after_start, after_end, before_start, before_end, end_after, end_before, start_after, start_before, overlap, at_pointer or after_pointer. for mor...
preference - Archive of obsolete content
name type: string the name of the preference to change. for example, the browser's home page is set with the preference browser.startup.homepage. overview an onchange attribute is an event listener to the object for the event change. a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when
enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-st...
radio - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
<statusbarpanel> - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
tab - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
toolbarbutton - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
treecol - Archive of obsolete content
-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text will be cropped on its left side. right the text will be cropped on its right side. c
enter the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum...
window - Archive of obsolete content
d" title="register online!" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox> <hbox> <image src="application_form.png"/> <description>register online!</description> </hbox> <groupbox align="start"> <caption label="your information"/> <radiogroup> <vbox> <hbox> <label control="your-fname" value="
enter first name:"/> <textbox id="your-fname" value="johan"/> </hbox> <hbox> <label control="your-lname" value="
enter last name:"/> <textbox id="your-lname" value="hernandez"/> </hbox> <hbox> <button oncommand="alert('save!')"> <description>save</description> </button> </hbox> ...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
lled on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /library/frameworks/xul.framework directory. installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer c
enter. save the application archive to your desktop or another convenient place. windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.1\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x ...
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
ed on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /library/frameworks/xul.framework directory. installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer c
enter. save the application archive to your desktop or another convenient place. windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac ...
XULRunner 1.9.1 Release Notes - Archive of obsolete content
lled on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /library/frameworks/xul.framework directory. installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer c
enter. save the application archive to your desktop or another convenient place. windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.1\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x ru...
XULRunner 1.9.2 Release Notes - Archive of obsolete content
l.framework directory. you also need to remove the receipt, especially if you plan on reinstalling a different version. type sudo rm /var/db/receipts/org.mozilla.xulrunner.* installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer c
enter. save the application archive to your desktop or another convenient place. windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.2\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run ...
XULRunner 1.9 Release Notes - Archive of obsolete content
ed on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /library/frameworks/xul.framework directory. installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer c
enter. save the application archive to your desktop or another convenient place. windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x...
XULRunner 2.0 Release Notes - Archive of obsolete content
talled on mac os x, it is not possible to uninstall only one version. to remove all installed versions of xulrunner, remove the /library/frameworks/xul.framework directory. installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the extension .xulapp or .xpi. sample applications are available from the mozilla developer c
enter. save the application archive to your desktop or another convenient place. windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\2.0\xulrunner\xulrunner.exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run th...
XULRunner Hall of Fame - Archive of obsolete content
e. zotero reference manager with firefox, chrome, and safari integration. both firefox extension and xulrunner-based standalone application available. source applications based on xulrunner 1.9 or earlier buzzbird xul-based desktop twitter client. github bluegriffon the next-generation web editor based on the rendering engine of firefox. build instructions convertigo
enterprise mashup server a web integrator and web clipper tool to build
enterprise mashups nightingale nightingale is a communtiy fork of the songbird media player, bringing back linux support and much more. build instructions kirix strata a new specialty browser for accessing and manipulating data from the web telekast an open source teleprompter and script editor. source ...
Mozprofile - Archive of obsolete content
eate profiles, set preferences in profiles, or install addons into profiles. the profile to be operated on may be specified with the --profile switch. if a profile is not specified, one will be created in a temporary directory which will be echoed to the terminal: (mozmill)> mozprofile /tmp/tmp4q1ieu.mozrunner (mozmill)> ls /tmp/tmp4q1ieu.mozrunner user.js to run mozprofile from the command line
enter: mozprofile --help for a list of options. api usage to use mozprofile as an api you can import mozprofile.profile and/or the addonmanager. mozprofile.profile features a generic profile class. in addition, subclasses firefoxprofile and thundebirdprofile are available with preset preferences for those applications. installing addons addons may be installed individually or from a manifest. example: ...
nsIContentPolicy - Archive of obsolete content
called to let your content policy implementation decide whether or not the resource at a given location should be loaded. this method is called before loading the resource specified by acontentlocation to determine whether or not to start loading the requested resource. shouldload() can be called while the dom and layout of the document involved is in an inconsistent state. this means that implem
enters of this method must not do any of the following: modify the dom in any way (e.g., setting attributes is a no-no). query any dom properties that depend on layout (e.g., offset* properties). query any dom properties that depend on style (e.g., computed style). query any dom properties that depend on the current state of the dom outside the "context" node (e.g., lengths of node lists). [java...
reftest opportunities files - Archive of obsolete content
parser/htmlparser/tests/html/col009.html parser/htmlparser/tests/html/col008.html parser/htmlparser/tests/html/col007.html parser/htmlparser/tests/html/col006.html parser/htmlparser/tests/html/col005.html parser/htmlparser/tests/html/col004.html parser/htmlparser/tests/html/col003.html parser/htmlparser/tests/html/col002.html parser/htmlparser/tests/html/col001.html parser/htmlparser/tests/html/c
enter002.html parser/htmlparser/tests/html/c
enter001.html parser/htmlparser/tests/html/button002.html parser/htmlparser/tests/html/button001.html parser/htmlparser/tests/html/bug991.html parser/htmlparser/tests/html/bug9563.html parser/htmlparser/tests/html/bug9536.html parser/htmlparser/tests/html/bug8996.html parser/htmlparser/tests/html/bug8913.html parser/htmlparser/tests/html/bug8771.html parser/h...
2006-10-27 - Archive of obsolete content
erbird rewrite: "is thunderbird destined to become a hybrid of the existing code and eudora?". jonathan pritchard has clarified that announcement does not mean thunderbird will be changing direction, just certain areas of development that are of interest to the eudora developers will have more attention paid to them. calling tb with a specific message to be displayed there's a new question by gu
enter about calling tb from an external program (eg. firefox) to display a message. meetings none for this week. ...
2006-11-10 - Archive of obsolete content
bugs: thunderbird ignores the smtp protocol state machine by ignoring the 501 response codes. this has been filed as bug 360118. thunderbird doesn't seem to have an option to set the client domain name (elho/helo). this is already addressed in bug 244030. interfacing with thunderbird mark bannister is looking for directions on interfacing thunderbird with their project management database. gu
enter has provided some sample code using the 'mailto:' method. meetings calendar project weekly status meeting - 2006/11/08 17:00 utc (meeting notes) calendar project weekly qa chat - 2006/11/09 16:30 utc (meeting notes) ...
2006-12-24 - Archive of obsolete content
summary: mozilla.dev.tech.layout november 24 -december 1, 2006 announcements none this week. discussions [reset issue for overflow='hidden' in ie and opera there is a very modest horizontal shift of the document due to reflow associated with the removal of the vertical scroll bar (because the document content is using a horizontal c
entering style). but in firefox the document is reset (shifted both horizontally and vertically) to its 0,0 position before being c
entered horizontally. ...
2006-12- 02 - Archive of obsolete content
summary: mozilla.dev.tech.layout - november 24 2006 - december 2, 2006 announcements none this week. discussions [reset issue for overflow='hidden' in ie and opera there is a very modest horizontal shift of the document due to reflow associated with the removal of the vertical scroll bar (because the document content is using a horizontal c
entering style). but in firefox the document is reset (shifted both horizontally and vertically) to its 0,0 position before being c
entered horizontally. ...
Adobe Flash - Archive of obsolete content
le example below shows how input into an html text box in a form field can be transferred to a flash animation (the grey text box below). example 2: javascript to flash communication note: javascript to flash communication may not work with flash player versions older than version 8 if the user has installed multiple mozilla based browsers onto the same machine (see bug 284057 and bug 233533).
enter some text in the html form field below and then click outside the field, or hit the
enter key, to send the text to the flash movie below: the example is missing. example 2 shows the use of macromedia flash's setvariable method being invoked from javascript. in general, to invoke a macromedia-defined method on a flash animation in netscape gecko browsers: use dom methods to get a handle to t...
title - Archive of obsolete content
?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss item element</td> <td><item></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss text input element</td> <td><textinput></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> </table> </c
enter> see also none rss element</td> <th colspan="9" style="text-align:c
enter">rss version ...
Create Your Own Firefox Background Theme - Archive of obsolete content
the width of the browser window, the browser reveals more of the right-hand side of the image. submitting your theme images to get started submitting your images, go to the theme submission page: name your theme — pick a unique name for your theme. duplicate names are not allowed, so you may need to try a few times to find a unique name. pick a category and tags — select a category and
enter some tags that best describe your theme. keep in mind that a reviewer may reject your theme if it is obvious that your category and/or tags are unrelated to your theme. describe your theme — write a short description of your theme. keep in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme. select a license for your theme — decide ...
Theme changes in Firefox 3.5 - Archive of obsolete content
o your theme. affected files details scrollbar.xml, xulscrollbars.css the <gripper> element was removed from the scrollbar thumb button by bug 448704. for the windows and linux native default themes, the gripper is now drawn as a part of the background of the scrollbar thumb widget. third-party themes can still draw a gripper for the scrollbar thumb button by applying a c
entered background image to the scrollbar's thumb button. global/checkbox.css, global/radio.css since bug 394892, radio buttons and checkboxes no longer have a minimum size on mac os x. if your theme uses native checkboxes or radiobuttons (-moz-appearance: radio / checkbox), this can result in distorted controls. you might have to set the width and height of .checkbox-check and .radio-check...
Developing cross-browser and cross-platform pages - Archive of obsolete content
functions that check the browser type string value and browser version string value and that search for certains characters or sub-strings in the navigator.useragent property string. once "detected", the web author then uses different functions (aka code branching) or points the user to different pages (aka site branching) or web content. site branching can be particularly dangerous as people may
enter a page through a link, bookmark, search engine or cache with a "wrong" browser. let's see a basic example of this approach. // bad sample if (navigator.appversion.charat(0) == "8") { if (navigator.appname == "netscape") { isns8 = true; alert("netscape 8"); }; } else if (navigator.appversion.indexof("msie") != -1) { isie = true; alert("internet explorer"); }; while this kind of ...
Troubleshooting XForms Forms - Archive of obsolete content
ht-click on the 's' icon on the status bar and select 'options...') and select the advanced tab. the xss sub-tab has the following options: turn cross-site post requests into data-less get requests anti-xss protection exceptions you can temporarily fix the problem by unchecking the turn cross-site post requests into data-less get requests check box. alternatively, for a long term fix you can
enter an exception pattern in the anti-xss protection exceptions text area. if you are developing on your local machine using apache tomcat for example then add the following regular expression on a new line: ^http://localhost:8080/.* use the xforms buddy to view instance data the xforms buddy extension allows you to dynamically view model instance data while the xforms is running in the firefox br...
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
s to use proprietary methods, software, code, or standards. following a proprietary path has led many organizations down disastrous paths. case in point: xerox corporation. xerox was clearly ahead of their time in the early 1980’s when they designed and developed the star office system. it was an elegant workstation with an iconic desktop developed by the engineers at parc (palo alto research c
enter). the star office system offered functionality that neither microsoft nor apple has been able to match with their current offerings. the engineers developed star on a proprietary development operating system known as pilot. pilot had a highly-integrated debugging tool called co-pilot that allowed the xerox development organization to quickly and easily debug issues. however, what xerox neglected...
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
look and act like javascript-driven "rollovers." however, advancing css support in browsers has caused some unexpectedly aggressive hovering behavior on some pages. hover and non-link elements section 5.11.3 of css2 defines the three dynamic pseudo-classes (:hover, :active, and :focus) and then goes on to say: css doesn't define which elements may be in the above states, or how the states are
entered and left. scripting may change whether elements react to user events or not, and different devices and uas may have different ways of pointing to, or activating elements. thus, although authors are used to thinking of these states as applying exclusively to hyperlinks, they are not so restricted by css2. any element can, in theory, be in any of the three states, and thus can be styled based on...
RDF in Fifty Words or Less - Archive of obsolete content
xmlns:rdf="http://www.w3.org/tr/wd-rdf-syntax#" xmlns:sm="http://www.mozilla.org/smart-mail/schema#"> <rdf:description about="http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&folder=inbox"> <sm:message id="4025293"> <sm:recipient> chris waterson "waterson@netscape.com" </sm:recipient> <sm:sender> aunt helga "helga@netc
enter.net" </sm:sender> <sm:received-by>x-wing.mcom.com</sm:received-by> <sm:subject>great recipe for yam soup!</sm:subject> <sm:body> http://www.mozilla.org/smart-mail/get-body.cgi?id=4025293 </sm:body> </sm:message> <sm:message id="4025294"> <sm:recipient> chris waterson "waterson@netscape.com" </sm:recipient> ...
The Business Benefits of Web Standards - Archive of obsolete content
d standards compliant way, the content base becomes a perennially reusable asset without any additional costs in the future. extensibility using strict html and separating structure from content paves the way to xhtml, an xml-compatible version of html. using xhtml will enable web authors to leverage tools from the xml world, such as xslt, to easily manipulate xml data. using xhtml is a way to
enter a set of standards composed of xml-based technologies, such as xml, xslt (transforming data), svg (animated graphics), mathml (describing mathematic expressions)... such technologies have been designed to be interoperable, are the base of web services. this goes much further than just web authoring. reduce costs of maintenance and site operations what is maintenance anyway? one of the most impo...
Common causes of memory leaks in extensions - Extensions
observers for too long is another problem. observers that use strong references are a common cause of leaking whole chrome windows or javascript code modules; it is possible to leak content windows, too, but that is less common. consider the following example: var myobserver = { observe: function(subject, topic, data) { window.document.documentelement.setattribute( "pbm", (data == "
enter") ? "private" : "normal"); } }; services.obs.addobserver(myobserver, "private-browsing", /* ownsweak */ false); the ownsweak = false parameter causes the observer service to use a strong reference to the observer object, which will cause it to hold onto the whole window. to avoid this problem explicitly call nsiobserverservice.removeobserver() in an unload event listener. you may also specif...
Examples - Game development
script another retro style first person shooter. the wizard a turn-based, dungeon puzzle game. hextris tetris-like hexagonal puzzle game. 2048 a sliding number tiles puzzle game. bananabread a multiplayer, 3d first-person shooter game developed using emscripten, webgl, and webrtc. monster madness a webgl and asm.js-based multiplayer online shooter, developed by nom nom games and trendy
entertainment. auralux webgl and asm.js-based strategy game: capture all the suns to win! browserquest a mmorpg created by the little workshop and mozilla. shoot the rocks a canvas 2d single-player shooter in the style of atari's classic asteroids arcade game from 1979. star citadel a new take on star castle, cinematronics' classic 1980 arcade game, built with canvas 2d. classic platformer c...
Index - Game development
mes, javascript, phaser, tutorial in this step-by-step tutorial, we create a simple mobile mdn breakout game written in javascript, using the phaser framework. 43 animations and tweens 2d, animation, beginner, canvas, games, javascript, phaser, tutorial, tween to make the game look more juicy and alive we can use animations and tweens. this will result in a better, more
entertaining experience. let's explore how to implement phaser animations and tweens in our game. 44 bounce off the walls 2d, beginner, canvas, games, javascript, phaser, tutorial, bouncing now that physics have been introduced, we can start implementing collision detection into the game — first we'll look at the walls. 45 build the brick field 2d, beginner, canvas...
Game monetization - Game development
the term "pay to win" was coined and this approach is disliked by many players and devs. if you want to implement iaps try to add value to the game with something players will enjoy instead of taking it out and then charging for it. add-ons and dlcs add-ons and downloadable content are a good way to provide extra value to an already released game, but remember that you'll have to offer decent,
entertaining content to attract people to buy it. a totally new set of levels with new characters, weapons and story is a good material for dlc, but to have enough sales the game itself has to be popular, or else there won't be any players interested in spending their hard earned money on it. advertisements instead of actively selling the games you can also try to get yourself a passive income — sh...
Building up a basic demo with the PlayCanvas engine - Game development
e 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 positioned to be 7 units away from the c
enter of the scene on the z axis. this allows us to make some space to visualize the objects that we will create later on. note: the distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you. try saving the file and loading it in your browser. you should now see a gray windo...
3D games on the Web - Game development
main browsers are all supporting webgl and all you need to focus on is optimizing the performance on the devices you use. there's an ongoing effort on releasing webgl 2.0 (based on opengl es 3.0) in the near future, which will bring many improvements and will help developers build games for the modern web using current, powerful hardware. explaining the basic 3d theory the basics of 3d theory c
enters around shapes represented in a 3d space, with a coordinate system being used to calculate their positions. see our explaining basic 3d theory article for all the information you need. advanced concepts you can do a lot more with webgl. there are some advanced concepts which you should dive into and learn more about — like shaders, collision detection, or the latest hot topic: virtual reality...
Desktop mouse and keyboard controls - Game development
h just the keyboard and nothing else. the built in this.game.input.keyboard object manages the input from the keyboard and has a few helpful methods like addkey() and isdown(). there's also the phaser.keycode object, which contains all the available keyboard keys: in the main menu of the game we can add an extra way to begin playing. the start button can be clicked to do so, but we can use the
enter key to do the same: var key
enter = this.game.input.keyboard.addkey(phaser.keycode.
enter); var key
enter.ondown.add(this.clickstart, this); you can use addkey() to add any key the phaser.keycode object has to offer. the ondown() function is executed whenever the
enter key is pressed — it will launch the clickstart() method, which starts a new game. it's useful to provide an option to play the ...
Create the Canvas and draw on it - Game development
adding this to the bottom of your javascript, saving and refreshing: ctx.beginpath(); ctx.arc(240, 160, 20, 0, math.pi*2, false); ctx.fillstyle = "green"; ctx.fill(); ctx.closepath(); as you can see we're using the beginpath() and closepath() methods again. between them, the most important part of the code above is the arc() method. it takes six parameters: x and y coordinates of the arc's c
enter arc radius start angle and end angle (what angle to start and finish drawing the circle, in radians) direction of drawing (false for clockwise, the default, or true for anti-clockwise.) this last parameter is optional. the fillstyle property looks different than before. this is because, just as with css, color can be specified as a hexadecimal value, a color keyword, the rgba() function, or ...
Game over - Game development
as.height-ballradius) { alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } letting the paddle hit the ball the last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area. the easiest thing to do is to check whether the c
enter of the ball is between the left and right edges of the paddle. update the last bit of code you modified again, to the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { if(x > paddlex && x < paddlex + paddlewidth) { dy = -dy; } else { alert("game over"); document.location.reload(); clearinterval(interval);...
Move the ball - Game development
ginpath(); 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 c
enter 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 shown in the following highlighted line: function draw() { ctx.
Extra lives - Game development
lost, click to continue', { font: '18px arial', fill: '#0095dd' }); lifelosttext.anchor.set(0.5); lifelosttext.visible = false; the livestext and lifelosttext objects look very similar to the scoretext one — they define a position on the screen, the actual text to display, and the font styling. the former is anchored on its top right edge to align properly with the screen, and the latter is c
entered, both using anchor.set(). the lifelosttext will be shown only when the life is lost, so its visibility is initially set to false. making our text styling dry as you probably noticed we're using the same styling for all three texts: scoretext, livestext and lifelosttext. if we ever want to change the font size or color we will have to do it in multiple places. to make it easier for us to main...
Randomizing gameplay - Game development
dle, by modifying the x velocity each time the ballhitpaddle() function is run using a line along the lines of the below. add this new line to your code now, and try it out. function ballhitpaddle(ball, paddle) { ball.animations.play('wobble'); ball.body.velocity.x = -1*5*(paddle.x-ball.x); } it's a little bit of magic — the new velocity is higher, the larger the distance between the c
enter of the paddle and the place where the ball hits it. also, the direction (left or right) is determined by that value — if the ball hits the left side of the paddle it will bounce left, whereas hitting the right side will bounce it to the right. it ended up that way because of a little bit of experimentation with the given values, you can do your own experimentation and see what happens. it's not...
Scaling - Game development
t, so you have to place the objects inside your game dynamically; this is more of an advanced mode. user_scale — allows you to have custom dynamic scaling, calculating the size, scale and ratio on your own; again, this is more of an advanced mode the other two lines of code in the preload() function are responsible for aligning the canvas element horizontally and vertically, so it is always c
entered on screen regardless of size. adding a custom canvas background colour we can also add a custom background color to our canvas, so it won't stay black. the stage object has a backgroundcolor property for this purpose, which we can set using css color definition syntax. add the following line below the other three you added earlier: game.stage.backgroundcolor = '#eee'; compare your code yo...
2D maze game with device orientation - Game development
te. 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 the anchor point on the button for which all the calculations of the position are applied. in our case it's anchored half the way from the left edge and at the start of the top edge, so it can be easily horizontally c
entered on the screen without the need to know its width. when the start button is pressed, instead of jumping directly into the action the game will show the screen with the information on how to play the game. howto.js ball.howto = function(game) { }; ball.howto.prototype = { create: function() { this.buttoncontinue = this.add.button(0, 0, 'screen-howtoplay', this.startgame, this); ...
Game development
you will find many useful tutorials and technique articles in the main menu on the left, so feel free to explore. ...
Callback function - MDN Web Docs Glossary: Definitions of Web-related terms
a callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. here is a quick example: function greeting(name) { alert('hello ' + name); } function processuserinput(callback) { var name = prompt('please
enter your name.'); callback(name); } processuserinput(greeting); the above example is a synchronous callback, as it is executed immediately. note, however, that callbacks are often used to continue code execution after an asynchronous operation has completed — these are called asynchronous callbacks. a good example is the callback functions executed inside a .then() block chained onto the end of a promise after that promise fulfills or rejects. this structure is use...
Java - MDN Web Docs Glossary: Definitions of Web-related terms
usable functions, the java software development kit (sdk). programs are compiled only once ahead of time into a proprietary byte code and package format that runs inside the java virtual machine (jvm). the jvm is available across many platforms, which allows java programs to run almost everywhere without the need to be compiled or packaged again. this makes it a preferred language in many large
enterprises with heterogenous landscapes, but may be perceived "heavy". learn more general knowledge java on wikipedia ...
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
view-controller) is a pattern in software design commonly used to implement user interfaces, data, and controlling logic. it emphasizes a separation between the software’s business logic and display. this "separation of concerns" provides for a better division of labor and improved maintenance. some other design patterns are based on mvc, such as mvvm (model-view-viewmodel), mvp (model-view-pres
enter), and mvw (model-view-whatever). the three parts of the mvc software-design pattern can be described as follows: model: manages data and business logic. view: handles layout and display. controller: routes commands to the model and view parts. model view controller example imagine a simple shopping list app. all we want is a list of the name, quantity and price of each item we need to bu...
Microsoft Internet Explorer - MDN Web Docs Glossary: Definitions of Web-related terms
microsoft edge is currently the default windows browser. microsoft first bundled ie with windows in 1995 as part of the package called "microsoft plus!". by around 2002, internet explorer had become the most used browser in the world, but has since lost ground to chrome, firefox, edge, and safari. ie has gone through many releases and currently stands at version 11.0.12, with desktop, mobile, and xbox console versions available. formerly available on mac and unix, microsoft discontinued those versions in 2003 and 2001 respectively. ...
Progressive web apps - MDN Web Docs Glossary: Definitions of Web-related terms
y via search engines, being linkable via urls, and working across multiple form factors — and supercharging them with modern apis (such as service workers and push) and features that confer other benefits more commonly attributed to native apps. these features include being installable, working offline, and being easy to sync with and re-engage the user from the server. learn more the app c
enter on mdn progressive web apps on google developers ...
TURN - MDN Web Docs Glossary: Definitions of Web-related terms
turn (traversal using relays around nat) is a protocol enabling a computer to receive and send data from behind a network address translator (nat) or firewall. turn is used by webrtc to allow any two devices on the internet to
enter a peer-to-peer connection. learn more general knowledge turn on wikipedia webrtc protocols technical reference specification specification update for ipv6 ...
Thread - MDN Web Docs Glossary: Definitions of Web-related terms
s at the same time. each unit capable of executing code is called a thread. the main thread is the one used by the browser to handle user events, render and paint the display, and to run the majority of the code that comprises a typical web page or app. because these things are all happening in one thread, a slow website or app script slows down the entire browser; worse, if a site or app script
enters an infinite loop, the entire browser will hang. this results in a frustrating, sluggish (or worse) user experience. however, modern javascript offers ways to create additional threads, each executing independently while possibly communicating between one another. this is done using technologies such as web workers, which can be used to spin off a sub-program which runs concurrently with the mai...
A cool-looking box - Learn web development
assessment or further help section at the bottom of this page. project brief your task is to create a cool, fancy box and explore the fun we can have with css. general tasks apply the css to the html. styling the box we'd like you to style the provided <p>, giving it the following: a reasonable width for a large button, say around 200 pixels. a reasonable height for a large button, c
entering the text vertically in the process. c
entered text. a slight increase in font size, to around 17-18 pixel computed style. use rems. write a comment about how you worked out the value. a base color for the design. give the box this color as its background color. the same color for the text; make it readable using a black text shadow. a fairly subtle border radius. a 1-pixel solid border wi...
Creating fancy letterheaded paper - Learn web development
s to the html. add a background declaration to the letter that: fixes the top image to the top of the letter fixes the bottom image to the bottom of the letter adds a semi-transparent gradient over the top of both of the previous backgrounds that gives the letter a bit of texture. make it slightly dark right near the top and bottom, but completely transparent for a large part of the c
enter. add another background declaration that just adds the top image to the top of the letter, as a fallback for browsers that don't support the previous declaration. add a white background color to the letter. add a 1mm top and bottom solid border to the letter, in a color that is inkeeping with the rest of the color scheme. the logo to the <h1>, add the logo as a background image. add...
Fundamental CSS comprehension - Learn web development
nt), we need to give it a specific height. set the <article>'s height to 120px, but expressed in ems. also give it a background color of semi-transparent black, resulting in a slightly darker shade that lets the background red color shine through a bit too. write a ruleset that gives the <h2> an effective font size of 20px (but expressed in ems) and an appropriate line height to place it in the c
enter of the header's content box. recall from earlier that the content box height should be 30px — this gives you all the numbers you need to calculate the line height. write a ruleset that gives the <p> inside the footer an effective font size of 15px (but expressed in ems) and an appropriate line height to place it in the c
enter of the footer's content box. recall from earlier that the content bo...
Images, media, and form elements - Learn web development
uts, through to more complex fields added in html5 such as color and date pickers. there are some additional elements, such as <textarea> for multiline text input, and also elements used to contain and label parts of forms such as <fieldset> and <legend>. html5 also contains attributes that enable web developers to indicate which fields are required, and even the type of content that needs to be
entered. if the user
enters something unexpected, or leaves a required field blank, the browser can show an error message. different browsers are inconsistent in how much styling and customization they allow for such items. styling text input elements elements that allow for text input, such as <input type="text">, specific types such as <input type="email">, and the <textarea> element are quite easy...
Organizing your CSS - Learn web development
bem bem stands for block element modifier. in bem a block is a standalone entity such as a button, menu, or logo. an element is something like a list item or a title that is tied to the block it is in. a modifier is a flag on a block or element that changes the styling or behavior. you will be able to recognise code that uses bem ...
Test your skills: backgrounds and borders - Learn web development
he starting point for this task to work in your own editor or in an online editor. backgrounds and borders 2 in this task we want you to add background images, a border, and some other styling to a decorative box: give the box a 5px lightblue border, and round the top left corner 20px and the bottom right corner 40px the heading uses the star.png image as a background image, with a single c
entered star on the left and a repeating pattern of stars on the right. make sure that the heading text does not overlay the image, and that it is c
entered — you will need to use techniques learned in previous lessons to achieve this. the finished example should look like the image below: try updating the live code below to recreate the finished example: download the starting point for this...
Test your skills: values and units - Learn web development
<p> elements should be 16 pixels. a <p> element that is directly after an <h1> should be 120%. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task three in this task you need move the background image so that it is c
entered horizontally, and 20% from the top of the box. try updating the live code below to recreate the example as displayed in the image: 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 you can practice these examples in the interactive editors mentioned above. if you would like ...
Test your skills: Flexbox - Learn web development
xample: additional questions: can you now make the first item twice the size of the other items? for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. flex layout three there are two elements in the html below, a div with a class of .parent which contains another div with a class of .child. use flexbox to c
enter the child inside the parent. 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. flex layout four in this final task arrange these items into rows as in the image. try updating the live code below to recreate the finished example: fo...
How CSS is structured - Learn web development
0px); background-color: rebeccapurple; color: white; } this renders as: a function consists of the function name, and parentheses to enclose the values for the function. in the case of the calc() example above, the values define the width of this box to be 90% of the containing block width, minus 30 pixels. the result of the calculation isn't something that can be computed in advance and
entered as a static value. another example would be the various values for transform, such as rotate(). <div class="box"></div> .box { margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn) } the output from the above code looks like this: look up different values of properties listed below. write css rules that apply styling to differe...
Typesetting a community school homepage - Learn web development
e nice. use a suitable service to generate bulletproof @font-face code for these two fonts. apply your body font to the whole page, and your heading font to your headings. general text styling: give the page a site-wide font-size of 10px. give your headings and other element types appropriate font-sizes defined using a suitable relative unit. give your body text a suitable line-height. c
enter your top level heading on the page. give your headings a little bit of letter-spacing to make them not too too squashed, and allow the letters to breathe a bit. give your body text some letter-spacing and word-spacing, as appropriate. give the first paragraph after each heading in the <section> a little bit of text-indentation, say 20px. links: give the link, visited, focus, and hover sta...
How can we design for all types of users? - Learn web development
ody, thus 32 pixels */ span.subheading { font-size:0.5em; } /* half the size of the h1, thus 16 pixels to come back to the original size */ as you can see, the math quickly gets daunting when you have to keep track of the parent, the parent's parent, the parent's parent's parent, and so on. (most designs are done in pixel-based software, so the math has to be done by the person coding the css).
enter rem. this unit is relative to the root element's size and not to any other parent. the css can be rewritten thus: body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */ h1 { font-size:2rem; } /* twice the size of the body, thus 32 pixels */ span.subheading { font-size:1rem; } /* original size */ easier, isn't it? this works as of...
What are hyperlinks? - Learn web development
u want to access a document. this is where hyperlinks revolutionized everything. links can correlate any text string with a url, such that the user can instantly reach the target document by activating the link. links stand out from the surrounding text by being underlined and in blue text. tap or click a link to activate it, or if you use a keyboard, press tab until the link is in focus and hit
enter or spacebar. links are the breakthrough that made the web so useful and successful. in the rest of this article, we discuss the various types of links and their importance to modern web design. deeper dive as we said, a link is a text string tied to a url, and we use links to allow easy jumping from one document to another. that said, there are some nuances worth considering: types of links...
What is a URL? - Learn web development
ix file system world — to tell the browser we want to go up from one directory. here we want to reach this url: https://developer.mozilla.org/docs/learn/../css/display, which can be simplified to: https://developer.mozilla.org/docs/css/display semantic urls despite their very technical flavor, urls represent a human-readable entry point for a web site. they can be memorized, and anyone can
enter them into a browser's address bar. people are at the core of the web, and so it is considered best practice to build what is called semantic urls. semantic urls use words with inherent meaning that can be understood by anyone, regardless of their technical know-how. linguistic semantics are of course irrelevant to computers. you've probably often seen urls that look like mashups of random charac...
Example 2 - Learn web development
e { 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 : c
enter; 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; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : ...
Example 3 - Learn web development
e { 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 : c
enter; 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; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : ...
Example 4 - Learn web development
e { 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 : c
enter; 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; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : ...
Example 5 - Learn web development
e { 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 : c
enter; 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; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : ...
How to build custom form controls - Learn web development
e sure to set a charset meta tag */ position: absolute; z-index : 1; /* this will be important to keep the arrow from overlapping the list of options */ top : 0; right : 0; box-sizing : border-box; height : 100%; width : 2em; padding-top : .1em; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; text-align : c
enter; } next, let's style the list of options: .select .optlist { z-index : 2; /* we explicitly said the list of options will always be on top of the down arrow */ /* this will reset the default style of the ul element */ list-style: none; margin : 0; padding: 0; box-sizing : border-box; /* if the values are smaller than the control, the list of options will be as wide as the c...
Sending form data - Learn web development
form data that has been encoded into url parameters." if you want to send files, you need to take three extra steps: set the method attribute to post because file content can't be put inside url parameters. set the value of enctype to multipart/form-data because the data will be split into multiple parts, one for each file plus one for the text data included in the form body (if text is also
entered into the form). include one or more <input type="file"> controls to allow your users to select the file(s) that will be uploaded. for example: <form method="post" action="https://www.foo.com" enctype="multipart/form-data"> <div> <label for="file">choose a file</label> <input type="file" id="file" name="myfile"> </div> <div> <button>send the file</button> </div> </form> ...
Styling web forms - Learn web development
type="submit">, and <button>. the right column on the other hand shows the same elements with our above rule applied to them. notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform's default rules for each kind of widget. what may not be apparent via the screenshot is that the radio and checkbox controls still look the same, but they are c
entered in the 150px of horizontal space provided by the width property. other browsers may not c
enter 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. to position it somewhere el...
Test your skills: Advanced styling - Learn web development
, and now we want you to come up with your own solution. what we'd like you to do is make use of some advanced pseudo-classes to provide some useful indicators of validity. first of all, we want you to provide some specific styling to visually indicate which inputs have to be filled in — they cannot be left empty. second, we want you to provide a useful visual indicator of whether the data
entered inside each input is valid or not. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you c...
Example - Learn web development
type="text" id="name" name="user_name"> </div> <div> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </div> <div> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">send your message</button> </div> </form> css content form { /* just to c
enter the form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div + div { margin-top: 1em; } label { /* to make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text f...
The web and web standards - Learn web development
before it (i.e. old web sites will still continue to work), and forwards compatible (future technologies in turn will be compatible with what we currently have). as you go through the learning material presented here, you'll start to learn how this is made possible with some very clever design and implementation work. being a web developer is good the web industry is a very attractive market to
enter if you are looking for a job. recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. and at the same time, there is a skill shortage in the industry — so what better time to learn web development? it isn't all fun and games however — building web sites is a more complicated proposition t...
Getting started with the Web - Learn web development
o be black or red? where should content be drawn on the screen? what background images and colors should be used to decorate your website? css basics takes you through what you need to get started. javascript basics javascript is the programming language that you use to add interactive features to your website. some examples could be games, things that happen when buttons are pressed or data is
entered in forms, dynamic styling effects, animation, and much more. javascript basics gives you an idea of what is possible with this exciting language, and how to get started. publishing your website once you have finished writing the code and organizing the files that make up your website, you need to put it all online so people can find it. publishing your sample code describes how to get your si...
Add a hitmap on top of an image - Learn web development
the visual order of hotspots. <area> elements are empty elements, but do require four attributes: shape coords shape takes one of four values: circle, rect, poly, and default. (a default <area> occupies the entire image, minus any other hotspots you’ve defined.) the shape you choose determines the coordinate information you’ll need to provide in coords. for a circle, provide the c
enter's x and y coordinates, followed by the length of the radius. for a rectangle, provide the x/y coordinates of the upper-left and bottom-right corners. for a polygon, to provide the x/y coordinates of each corner (so, at least six values). coordinates are given in css pixels. in case of overlap, source order carries the day. href the url of the resource you’re linking to. you may le...
What’s in the head? Metadata in HTML - Learn web development
lowing the information given above, add <link> and <script> elements to your html, so that your css and javascript are applied to your html. if done correctly, when you save your html and refresh your browser you should be able to see that things have changed: the javascript has added an empty list to the page. now when you click anywhere on the list, a dialog box will pop up asking you to
enter some text for a new list item. when you press the ok button, a new list item will be added to the list containing the text. when you click on an existing list item, a dialog box will pop up allowing you to change the item's text. the css has caused the background to go green, and the text to become bigger. it has also styled some of the content that the javascript has added to the page (the red ...
Adding vector graphics to the Web - Learn web development
supporting browsers will load the svg — older browsers will load the png instead: <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"> you can also use svgs as css background images, as shown below. in the below code, older browsers will stick with the png that they understand, while newer browsers will load the svg: background: url("fallback.png") no-repeat c
enter; background-image: url("image.svg"); background-size: contain; like the <img> method described above, inserting svgs using css background images means that the svg can't be manipulated with javascript, and is also subject to the same css limitations. if your svgs aren't showing up at all, it might be because your server isn't set up properly. if that's the problem, this article will point you i...
From object to iframe — other embedding technologies - Learn web development
er very popular, due to a number of reasons (see the case against plugins, below), pdfs tend to be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or
enterprise projects. if you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum: <embed> <object> url of the embedded content src data accurate media type of the embedded content type type height and width (in css pixels) of the box controlled by the plugin height width height ...
HTML table advanced features and accessibility - Learn web development
serif; } table { border-collapse: collapse; border: 4px solid rgb(200,200,200); letter-spacing: 1px; font-size: 0.8rem; } td, th { border: 2px solid rgb(190,190,190); padding: 10px 20px; } th { background-color: rgb(235,235,235); } td { text-align: c
enter; } tr:nth-child(even) td { background-color: rgb(250,250,250); } tr:nth-child(odd) td { background-color: rgb(245,245,245); } caption { padding: 10px; } tbody { font-size: 90%; font-style: italic; } tfoot { font-weight: bold; } </style> </h...
HTML table basics - Learn web development
like headers. note: you can find our finished example at dogs-table-fixed.html on github (see it live also). why are headers useful? we have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better. note: table headings come with some default styling — they are bold and c
entered even if you don't add your own styling to the table, to help them stand out. tables headers also have an added benefit — along with the scope attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. screenreaders are then able to read out a whole row or column of data at onc...
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
frame. grab a basic html template (such as this one). put an empty <div> element inside the <body>, then add a ↻ character inside it. this circular arrow character will act as our spinner for this example. apply the following css to the html template (in whatever way you prefer). this sets a red background on the page, sets the <body> height to 100% of the <html> height, and c
enters the <div> inside the <body>, horizontally and vertically. html { background-color: white; height: 100%; } body { height: inherit; background-color: red; margin: 0; display: flex; justify-content: c
enter; align-items: c
enter; } div { display: inline-block; font-size: 10rem; } insert a <script> element just above the closing </body> tag. insert the following ja...
Build your own function - Learn web development
der.com, and designed by nazarrudin ansyari — thanks! (the actual icon pages were since moved or removed.) next, find the css inside your html file. we'll make a few changes to make way for the icons. first, update the .msgbox width from: width: 200px; to width: 242px; next, add the following lines inside the .msgbox p { ... } rule: padding-left: 82px; background-position: 25px c
enter; background-repeat: no-repeat; now we need to add code to our displaymessage() function to handle displaying the icons. add the following block just above the closing curly brace (}) of your function: if (msgtype === 'warning') { msg.style.backgroundimage = 'url(icons/warning.png)'; panel.style.backgroundcolor = 'red'; } else if (msgtype === 'chat') { msg.style.backgroundimage = 'url(i...
Test your skills: Conditionals - Learn web development
fail!" score of 20 to 39 — "you know some things, but it's a pretty bad score. needs improvement." score of 40 to 69 — "you did a passable job, not bad!" score of 70 to 89 — "that\'s a great score, you really know your stuff." score of 90 to 100 — "what an amazing score! did you cheat? are you for real?" try updating the live code below to recreate the finished example. after you've
entered your code, try changing machineactive to true, to see if it works. download the starting point for this task to work in your own editor or in an online editor. conditionals 3 in this task you need to take the code you wrote for the second task, and rewrite the inner if...else if...else to use a switch statement instead. try updating the live code below to recreate the finished example: ...
Fetching data from the server - Learn web development
the assets that made the web page would be downloaded and displayed on your computer. the trouble with this model is that whenever you want to update any part of the page, for example, to display a new set of products or load a new page, you've got to load the entire page again. this is extremely wasteful and results in a poor user experience, especially as pages get larger and more complex.
enter ajax this led to the creation of technologies that allow web pages to request small chunks of data (such as html, xml, json, or plain text) and display them only when needed, helping to solve the problem described above. this is achieved by using apis like xmlhttprequest or — more recently — the fetch api. these technologies allow web pages to directly handle making http requests for specif...
Working with JSON - Learn web development
equesturl); request.responsetype = 'text'; // now we're getting a string! request.send(); request.onload = function() { const superheroestext = request.response; // get the string from the response const superheroes = json.parse(superheroestext); // convert it to an object populateheader(superheroes); showheroes(superheroes); } as you might guess, stringify() works the opposite way. try
entering the following lines into your browser's javascript console one by one to see it in action: let myjson = { "name": "chris", "age": "38" }; myjson let mystring = json.stringify(myjson); mystring here we're creating a javascript object, then checking what it contains, then converting it to a json string using stringify() — saving the return value in a new variable — then checking it again. ...
Aprender y obtener ayuda - Learn web development
it down further, for example, "implement horizontal navigation menu" could be written out as: make a list of menu items sit horizontally in a line. remove unneeded defaults, like list spacing and bullet points. style hover/focus/active states of menu items appropriately. make the menu items equally spaced along the line. give the menu items enough vertical spacing. make sure the text is c
entered inside each menu item etc. each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially. now you've just got to go through and solve them all! learn and recognise the patterns as we said before, web design/programming is mostly about problem solving and patterns. once you have written out what you'll need to do to solve a specific problem, you c...
Measuring performance - Learn web development
s that remove all whitespace from your code to make the files smaller. we'll talk about both categories in this course. and as well as talking about performance metrics we will of course talk about the metrics that you'll use to measure whether your site's performance is improving. general performance reporting tools tools like pagespeed insights can measure a website’s performance. you can
enter a url and get a performance report in seconds. the report contains scores about how your website is performing, both for mobile and desktop. this is a good start for getting an idea about what you are already doing well and what could be improved. at the time of writing, mdn's performance report summary looks similar to the following: a performance report contains information about things lik...
Perceived performance - Learn web development
nteraction. however, you don't have to know the ins and outs of how everything, including how the human mind works, to improve the perception of speed. how fast or slow something feels like it's taking depends a lot on whether the user is actively or passively waiting for this thing to happen. waits can have an active and passive phase. when the user is active - moving the mouse, thinking, being
entertainted, they are in an active phase. the passive phase occurs when the user is passively waiting, like staring at a monochrome screen. if both the passive and active waits time were objectively equal, users would estimate that the passive waiting period was longer than the active. if a load, render, or response time can not be objectively minimized any further, turning the wait into an active wai...
What is web performance? - Learn web development
es per second, and time to interactive, and subjective experiences of how long it felt like it took the content to load. how content is rendered to effectively understand web performance, the issues behind it, and the major topic areas we mentioned above, you really should understand some specifics about how browsers work. this includes: how the browser works. when you request a url and hit
enter / return, the browser finds out where the server is that holds that website's files, establishes a connection to it, and requests the files. see populating the page: how the browser works for a detailed overview. source order. your html index file's source order can significantly affect performance. the download of additional assets linked to from the index file is generally sequential, based on...
Introduction to the server side - Learn web development
rally millions of returned values. using a database allows these to be stored and shared efficiently, and it allows the presentation of the information to be controlled in just one place. customised user experience servers can store and use information about clients to provide a convenient and tailored user experience. for example, many sites store credit cards so that details don't have to be
entered again. sites like google maps can use saved or current locations for providing routing information, and search or travel history to highlight local businesses in search results. a deeper analysis of user habits can be used to anticipate their interests and further customize responses and notifications, for example providing a list of previously visited or popular locations you may want to look...
Server-side web frameworks - Learn web development
number of web servers and databases) or scale "geographically" because some of your customers are based a long way away from your server. the web framework you choose can make a big difference on how easy it is to scale your site. web security: some web frameworks provide better support for handling common web attacks. django for example sanitises all user input from html templates so that user-
entered javascript cannot be run. other frameworks provide similar protection, but it is not always enabled by default. there are many other possible factors, including licensing, whether or not the framework is under active development, etc. if you're an absolute beginner at programming then you'll probably choose your framework based on "ease of learning". in addition to "ease of use" of the langu...
Server-side website programming - Learn web development
w a different product on amazon. in the modern world of web development, learning about server-side development is highly recommended. learning pathway getting started with server-side programming is usually easier than client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-
entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy. basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. similarly, expertise in client-side coding is not required, but a basic knowledge will help y...
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
of our footer functionality. connecting the behavior in the footer to get the footer working, we need to implement the following thre areas of functionality: a pending todo counter. filters for all, active, and completed todos. a button to clear the completed todos. because we need access to our service from the footer component, we need to generate a class for the footer. ...
Getting started with Ember - Learn web development
if you don't have one configured already, the ember atlas has some guides on how to set up various editors. installing the shared assets for todomvc projects installing shared assets, as we're about to do, isn't normally a required step for new projects, but it allows us to use existing shared css so we don't need to try to guess at what css is needed to create the todomvc styles. first,
enter into your todomvc directory in the terminal, for example using cd todomvc in macos/linux. now run the following command to place the common todomvc css inside your app: npm install --save-dev todomvc-app-css todomvc-common next, find the ember-cli-build.js file inside the todomvc directory (it's right there inside the root) and open it in your chosen code editor. ember-cli-build.js...
Accessibility in React - Learn web development
or that the browser is currently focused on this element. press the tab key, and you will see the outline appear around the "add" button beneath the input. this shows you that the browser's focus has moved. press tab a few more times, and you will see this dashed focus indicator move between each of the filter buttons. keep going until the focus indicator is around the first "edit" button. press
enter. the <todo /> component will switch templates, as we designed, and you'll see a form that lets us edit the name of the task. but where did our focus indicator go? when we switch between templates in our <todo /> component, we completely remove the elements that were there before to replace them with something else. that means the element that we were focused on vanishes, and nothing is in focu...
React interactivity: Events and state - Learn web development
d add our object at the end. we then pass this array into settasks() to update the state. putting that all together, your addtask() function should read like so: function addtask(name) { const newtask = { id: "id", name: name, completed: false }; settasks([...tasks, newtask]); } now you can use the browser to add a task to our data! type anything into the form and click "add" (or press the
enter key) and you'll see your new todo item appear in the ui! however, we have another problem: our addtask() function is giving each task the same id. this is bad for accessibility, and makes it impossible for react to tell future tasks apart with the key prop. in fact, react will give you a warning in your devtools console — "warning: encountered two children with the same key..." we need to fix...
React interactivity: Editing, filtering, conditional rendering - Learn web development
props.name}</span> </button> with this code in place, you should be able to press the "edit" and "cancel" buttons in your todo items to toggle between templates. the next step is to actually make the editing functionality work. editing from the ui much of what we're about to do will mirror the work we did in form.js: as the user types in our new input field, we need to track the text they
enter; once they submit the form, we need to use a callback prop to update our state with the new name of the task. we'll start by making a new hook for storing and setting the new name. still in todo.js, put the following underneath the existing hook: const [newname, setnewname] = usestate(''); next, create a handlechange() function that will set the new name; put this underneath the hooks but befo...
TypeScript support in Svelte - Learn web development
tuptypescript.js. you can even use degit to download the script. that's what we will do to start porting our application to typescript. note: remember that you can run npx degit opensas/mdn-svelte-tutorial/07-typescript-support svelte-todo-typescript to get the complete to-do list application in javascript before you start porting it to typescript. go to the root directory of the project and
enter these commands: npx degit sveltejs/template/scripts scripts # download script file to a scripts folder node scripts/setuptypescript.js # run it converted to typescript. you will need to re-run your dependency manager to get started. npm install # download new dependencies npm run dev # start t...
Deployment and next steps - Learn web development
ys to deploy a svelte application is using vercel. vercel is a cloud platform specifically tailored for static sites, which has out-of-the-box support for most common front-end tools, svelte being one of them. to deploy our app, follow these steps. register for an account with vercel. navigate to the root of your app and run npx vercel; the first time you do it, you'll be prompted to
enter your email address, and follow the steps in the email sent to that address, for security purposes. run npx vercel again, and you'll be prompted to answer a few questions, like this: > npx vercel vercel cli 19.1.2 ? set up and deploy “./mdn-svelte-tutorial”? [y/n] y ? which scope do you want to deploy to? opensas ? link to existing project? [y/n] n ? what’s your project’s name? md...
Creating our first Vue component - Learn web development
kboxes. to fix this, we can programmatically set the id in the component data. we can use the lodash package's uniqueid() method to help keep the index unique. this package exports a function that takes in a string and appends a unique integer to the end of the prefix. this will be sufficient for keeping component ids unique. let’s add the package to our project with npm; stop your server and
enter the following command into your terminal: npm install --save lodash.uniqueid note: if you prefer yarn, you could instead use yarn add lodash.uniqueid. we can now import this package into our todoitem component. add the following line at the top of todoitem.vue’s <script> element: import uniqueid from 'lodash.uniqueid'; next, add add an id field to our data property, so the component obje...
Focus management with Vue refs - Learn web development
r keyboard and non-visual users. to understand what's currently happening: reload your page, then press tab. you should see a focus outline on the input for adding new to-do items. press tab again. the focus should move to the "add" button. hit it again, and it'll be on the first checkbox. one more time, and focus should be on the first "edit" button. activate the "edit" button by pressing
enter. the checkbox will be replaced with our edit component, but the focus outline will be gone. this behavior can be jarring. in addition, what happens when you press tab again varies depending on the browser you're using. similarly, if you save or cancel your edit, focus will disappear again as you move back to the non-edit view. to give users a better experience, we'll add code to control the fo...
Rendering a list of Vue components - Learn web development
r id is being taken from the data inside app.vue and passed into todoitem as a prop, just like everything else, so things are now more logical and consistent. summary and that brings us to the end of another article. we now have sample data in place, and a loop that takes each bit of data and renders it inside a todoitem in our app. what we really need next is the ability to allow our users to
enter their own todo items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. we'll get to these in the next article. previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framewor...
Understanding client-side JavaScript frameworks - Learn web development
ok at adding a set of todo item data to our app.vue component, which we'll then loop through and display inside todoitem components using the v-for directive. 4. adding a new todo form: vue events, methods, and models we now have sample data in place and a loop that takes each bit of data and renders it inside a todoitem in our app. what we really need next is the ability to allow our users to
enter their own todo items into the app, and for that, we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. this is what we'll cover in this article. 5. styling vue components with css the time has finally come to make our app look a bit nicer. in this article, we'll explore the...
Understanding client-side web development tools - Learn web development
d where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools. 2. command line crash course in your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). this article provides an introduction to the terminal, the essential commands you'll need to
enter into it, how to chain commands together, and how to add your own command line interface (cli) tools. 3. package management basics in this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more. 4. introducing a complete toolchain in the final couple of articles in the ...
Learn web development
n your machine. this is the underlying version control system software that github works on top of. open your computer's command prompt (windows) or terminal (linux, macos). to copy the learning area repo to a folder called learning-area in the current location your command prompt/terminal is pointing to, use the following command: git clone https://github.com/mdn/learning-area you can now
enter the directory and find the files you are after (either using your finder/file explorer or the cd command). you can update the learning-area repository with any changes made to the master version on github with the following steps: in your command prompt/terminal, go inside the learning-area directory using cd. for example, if you were in the parent directory: cd learning-area update th...
Accessibility Features in Firefox
owledge base for some of this information): adblock plus removes ads (and other objects, like banners) from web pages greasemonkey lets you add bits of javascript ("user scripts") to any web page to change its behavior. in much the same way that user css lets you take control of a web page's style, user scripts let you easily control any aspect of a web page's design or interaction. we expect
enterprising script writers will eventually fix annoying accessibility issues in popular web pages, and (hopefully) share their tricks with everyone! fire vox extension by charles l. chen is a screen reader extension built just for firefox which can read mathml community contributions the real reason behind firefox's success is the great community of volunteers and organizations that realize they h...
CSUN Firefox Materials
wledge base for some of this information): adblock plus removes ads (and other objects, like banners) from web pages greasemonkey lets you add bits of javascript ("user scripts") to any web page to change its behavior. in much the same way that user css lets you take control of a web page's style, user scripts let you easily control any aspect of a web page's design or interaction. we expect
enterprising script writers will eventually fix annoying accessibility issues in popular web pages, and (hopefully) share their tricks with everyone! ie tab allows you to embed internet explorer into firefox tabs. this extension is useful for making ie specific sites, or site that read better in ie, open directly in firefox, while using the internet explorer engine tab mix plus completely enhances ...
Multiprocess on Windows
en forward them in a thread-safe way to gecko's main thread. unfortunately, crossing apartment boundaries using com incurs the exact same problem as crossing process boundaries: if we directly use com's built in marshaling capabilities to forward an rpc from the mta to the main thread sta, com will still use the sta's message queue, thus defeating the purpose of using the mta in the first place!
enter the interceptor to achieve the best of both worlds, we wrote our own code to facilitate the safe handing off of an inbound rpc from the content process's mta to the content main thread's sta. this uses a com technology called the interceptor. interceptors are, essentially, wrapper objects which implement the same interfaces as the object that they are wrapping. when an incoming rpc invokes a met...
Lightweight themes
hop — tweak, rotate and touch up photos with photoshop® express, a free online photo editor. submitting your theme image to get started submitting your images, go to the theme submission page: name your theme — pick a unique name for your theme. duplicate names are not allowed, so you may need to try a few times to find a unique name. pick a category and tags — select a category and
enter some tags that best describe your theme. keep in mind that a reviewer may reject your theme if it is obvious that your category and/or tags are unrelated to your theme. describe your theme — write a short description of your theme. keep in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme. select a license for your theme — decide ...
Add-ons
kshop the firefox extension workshop can help you develop extensions for firefox and give your users simple, yet powerful ways to customize their browsing experience. you’ll find: overview of the firefox extension features tools and processes for developing and testing how to publish your extension on addons.mozilla.org or distribute it yourself how to manage your published extension an
enterprise guide for developing and using extensions how to develop themes for firefox firefox developer communities extensions for firefox for android in 2020, mozilla will release a new firefox for android experience. this new, high-performance browser for android has been rebuilt from the ground up using geckoview, mozilla’s mobile browser engine. we are currently building support for the web...
How Mozilla's build system works
xplains how the build system works. note: this document is not intended for developers who just want to build mozilla. for that, see the build documentation. phases when you type mach build to build the tree, three high-level phases occur within the build system: system detection and validation preparation of the build backend invocation of the build backend phase 1: configure phase 1 c
enters around the configure script. the configure script is a bash shell script. the file is generated from a file called configure.in, which is written in m4 and processed using autoconf 2.13 to create the final configure script. you don't have to worry about how you obtain a configure file: the build system does this for you. the primary job of configure is to determine characteristics of the system...
Simple Sunbird build
tory, run these commands: # get the latest source python client.py checkout then just re-run the "make -f client.mk" command above. make will only recompile files that changed, but it's still a long haul. ...
Windows SDK versions
(vs2010) express download and install the windows 7 sdk. older versions some of the older version are no longer supported, further information is available at obsolete build caveats and tips [en-us] under the windows sdk article. windows 8 sdk (official) features that depend on this sdk include: metro firefox front end gamepad api support you can download the sdk from the microsoft download c
enter [web setup]. windows 7 sdk features that depend on this sdk include: windows 7 taskbar previews windows 7 download taskbar progress windows 7 jump lists you can download the sdk (v7.0 [web setup or iso image] or unsupported v7.1 [web setup or iso image]) from the microsoft download c
enter. note that if you're running a 64 bit version of windows you may require the "amd" version of the sdk ev...
pymake
~ (without quotes). type touch .profile using any appropriate text editor open .profile and add the following line in the file (assuming your mozilla-central is at c:/mozilla-central, if not, adjust your path accordingly.) alias pymake=c:/mozilla-central/build/pymake/make.py save your .profile edit and close the shell, then restart the shell. try typing just pymake into the shell and press
enter. this should come back with "no makefile found." if it does, your pymake alias is connected and you are ready to type in pymake -f client.mk to start the build. unlike gmake on windows, pymake is capable of doing parallel builds, so you can set a moz_make_flags=-jn in your .mozconfig without risk of deadlocks. note: on windows, if using an absolute path moz_objdir in your .mozconfig, it must ...
The Firefox codebase: CSS Guidelines
: 0px; use expanded syntax it is often harder to understand what the shorthand is doing and the shorthand can also hide some unwanted default values. it is good to privilege expanded syntax to make your intentions explicit. do this: border-color: red; not this: border: red; put multiple selectors on different lines do this: h1, h2, h3 { font-family: sans-serif; text-align: c
enter; } not this: h1, h2, h3 { font-family: sans-serif; text-align: c
enter; } naming standards for class names lower-case-with-dashes is the most common. but camelcase is also used sometimes. try to follow the style of existing or related code. other tips assume ="true" in attribute selectors. example: use option[checked], not option[checked="true"]. avoid id selectors unl...
Customizing Firefox
firefox
enterprise documentation is now located on support.mozilla.org. ...
Commenting IDL for better documentation
rns something then this should be included. @throws error description the error should be the actual name of the error constant, in all caps. @note description used to include a note styled paragraph. @remarks remark a remark paragraph to be included in the remarks section of the documentation. note: this is not yet supported by our documentation tool. using it will make it easier for docum
enters. @see description either an interface or a html link. note: this is not yet supported by our documentation tool. using it will make it easier for docum
enters. - or . used at the beginning of a comment line to indicate an unordered list item. there must be a space between the list marker and the item. nested lists should be indented from the previous level by two spaces. -# used at the beg...
mach
in arch when octopi does what you want and even has a gui? those makepkg scripts named pkgbuild are (typically) simple bash scripts that are easy to maintain and modify. python based mach tends to involve more complexity and potential for breakage. another possible reason: mach gives you an error, while running, say bootstrap.py directly (that is to type in a bash shell: python2 ./bootstrap.py
enter-key ) in an otherwise empty ..../subdir/ may work for you! less may be better! and mach's error messages tend to be cryptic and not utterly helpful. that above bootstrap.py will download and setup everything so you can build a mozilla app such as firefox etcetera, so it is a nice starting point. why should i use mach? you should use mach because it provides a better and more unified developer ...
Cross Process Object Wrappers
perty of the message. the chrome script can get and set the wrapped object's properties and call its functions: // chrome script windowmm.addmessagelistener("my-e10s-extension-message", handlemessage); function handlemessage(message) { let wrapper = message.objects.clicked; console.log(wrapper.innerhtml); wrapper.innerhtml = "<h2>modified by chrome!</h2>" wrapper.setattribute("align", "c
enter"); } auto-generated cpows add-ons that have not declared themselves multiprocess compatible are set up with a number of compatibility shims. one of these shims provides the following behavior: whenever chrome code tries to access content directly (for example, through window.content or browser.contentdocument), it is given back a cpow that wraps the content object. this means that examples like...
Firefox and the "about" protocol
wing a message from "the book of mozilla" about:networking displays networking information about:newtab start page when opening a new tab about:performance displays memory and performance information about firefox subprocesses/add-ons/tabs about:plugins displays information about installed plugins about:policies lists out the firefox for
enterprise policies about:preferences firefox settings (also available through firefox menu > options) about:privatebrowsing start page when opening a private window about:profiles display and manage firefox profiles about:protections privacy protections report consisting of enhanced tracking protection, firefox monitor and firefox lockwise data ...
mozbrowsererror
h) unknownprotocolfound filenotfound dnsnotfound connectionfailure netinterrupt nettimeout cspblocked phishingblocked malwareblocked unwantedblocked offline malformeduri redirectloop unknownsockettype netreset notcached isprinting deniedportaccess proxyresolvefailure proxyconnectfailure contentencodingfailure remotexul unsafecontenttype corruptedcont
enterror certerror other example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow ...
Gecko SDK
sion of mozilla you wish to target. for gecko versions 2.0 and higher, you must recompile your component for each release as cross-version compatibility is no longer supported. in addition to the below versions, you can find other versions (including beta) here: xulrunner releases (files include "sdk" in the name). the sdk follows the same release schedule as firefox/thunderbird. once the sdk
enters beta, it is suitable for building extensions; your component should work with release builds of the sdk without any modifications. due to the rapid release process, it may be a good idea to target the sdk in beta. download link latest gecko (latest firefox) gecko 1.9.2 (firefox 3.6) gecko 1.9.1 (firefox 3.5) gecko 1.9 (firefox 3.0) gecko 1.8 (firefox 1.5 and 2.0) ...
HTML parser threading
ocated when creating the tree op and delete[]d by the destructor of nshtml5treeoperation. hence, data gets copied to and from these arrays. executing tree ops when the executor flushing runnable fires on the main thread, it calls nshtml5treeopexecutor::runflushloop(). this method returns immediately if another invocation of it is already on the call stack (nested event loop case). the method then
enters a loop that has a bunch of return conditions (including parser termination). the loop first flushes speculative loads (creation discussed later). if the executor is reading from a stage (i.e. the ops are coming from the parser thread), the executor moves the tree ops from the staging queue into its own queue. (again, here we get to move a bunch of tree ops by obtaining a mutex once instead of ha...
Getting Started with Chat
#qa a channel for qa discussion #developers a channel for mozilla development discussion #sumo a channel for support with firefox for more information about the mozilla irc network and more channels, go here. commands the following is a list of commands you should be familiar with. simply type them into the message box at the bottom of the screen and press
enter: /join #channel joins you to the specified channel until you quit your irc client or quit the channel /leave leave the current channel /mode #channel +k password sets a password for the channel. if #channel is not specified, the command is executed for the current channel. /mode #channel +o nickname sets specified user as an owner or moderator of t...
DeferredTask.jsm
ng and the timer is not armed, the method returns a resolved promise. promise finalize(); example firefox 28 note this section describes about deferredtask.jsm in firefox 28.0 or higher. set up a function or an asynchronous task whose execution can be triggered after a defined delay. multiple attempts to run the task before the delay has passed are coalesced. the task cannot be re-
entered while running, but can be executed again after a previous run finished. a common use case occurs when a data structure should be saved into a file every time the data changes, using asynchronous calls, and multiple changes to the data may happen within a short time: let savedeferredtask = new deferredtask(function* () { yield os.file.writeatomic(...); // any uncaught exception will be rep...
OS.File for the main thread
true); // loop end. } let promise = file.write(view.subarray(pos, chunksize)); // write a subset of |data| return promise.then(function onsuccess(bytes) { return loop(pos + bytes); // ... and loop. }); }; let promise = loop(0); //
enter the loop. promise = promise.then(function onsuccess() { // once loop is complete, finalize. file.close(); }, function onerror(reason) { file.close(); throw reason; }); return promise; } or a variant using task.js (or at least the subset already present on mozilla-central): let writestream = function writestream(data, outfile, chunksize) { return...
Application Translation with Mercurial
. thunderbird, lightning or seamonkey: download the comm-<branch>.hg file (e.g. comm-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/thunderbird/bundles/ in the next step, we will unpack the source code: open an input shell, e.g. by pressing the windows key and r on the keyboard or by calling the "run..." command from the windows "start" button, and then typing cmd and pressing the
enter key. launch the installed mozillabuild toolset by launching it with its path, e.g. c:\mozilla\coding\buildtools\mozillabuild\start-shell-msvc2010.bat you can autocomplete the file path after typing a few characters and then pressing the tabulator key. if you launch the start-shell-l10n.bat, compiling features will be disabled. you can create translation patches, but creating language packs for...
Bootstrapping a new locale
t account, send the l10n-drivers the details to be added as a "writer". with that level of authority, you will be able to push and pull and manage the repository remotely. it will be just like working on hg with mozilla, yet you will use the bit bucket platform to start. after your new bit bucket repository is created by the l10n-drivers, please visit the url for your repo. you can do this by
entering the following url into your browser: $ https://bitbucket.org/mozillal10n/ab-cd/overview/ (where ab-cd will be replaced by your locale code) at that main page of your newly created bit bucket repo, you'll see the hg commands, $ hg clone http://bitbucket.org/mozillal10n/ab-cd/ ... $ hg pull -u # to pull changes and update $ hg push # to push changes to this repo import existing data? $ c...
Localizing XLIFF files for iOS
e raw xliff file is also rather easy, especially if you're already familiar with xml. this tutorial will walk you through the steps you need to take to translation strings within an xliff file. string repository for firefox on ios the firefox-ios.xliff file is located in svn. decide where on your local computer you will store your copy of the github repo and navigate there in your terminal.
enter the command git clone https://github.com/mozilla-l10n/firefoxios-l10n/your-locale-code/ you should now see the firefox-ios project in your selected directoy with the firefox-ios.xliff file in it. translating the xliff file open the firefox-ios.xliff file in your favorite text editor. in the <file> tag, add the target-language attribute with your locale code as the value (e.g., target-langu...
Localization sign-off reviews
it is as ready as it can be. there is a specific process to follow in bugzilla for requesting these reviews: file a bug requesting the review. attach your files to the bug. once attached, open the attachment details. in the attachment details, select the ? from the dropdown menu next to the appropriate approval flags (see image). this will display a text box to assign the review to someone.
enter :pike as the requestee. once you have made the formal request in bugzilla and you have pushed your work into your l10n repo, refer to the dashboards to follow your review's progress. sign-off dashboards to the right, you'll see the current sign-offs page for a german localization. sign-offs are approved using the buttons in the farthest column to the right. you can work with the l10n-drivers to...
Localization technical reviews
ical review, be sure that it is as ready as it can be. there is a specific process to follow in bugzilla for requesting these reviews: file a bug requesting the review. attach your files to the bug. once attached, open the attachment details. in the attachment details, select the ? from the dropdown menu next to the review flag. this will display a text box to assign the review to someone.
enter :pike as the requestee. we will perform a technical review of your work and provide you with feedback. we're happy to work with you to make sure that your work is fully functional. tracking your progress you can track your reviews progress two ways: within the bug and through your team's dashboard. if your work is approved, you'll see a + review flag next to your attached revision in your re...
Fonts for Mozilla 2.0's MathML engine
by the eula for the product in which this font is included to display and print content", so consulting your lawyer is recommended if considering installing this on systems without the associated product. reset old preferences if users have previously changed the "font.mathfont-family" preference for a previous version of mozilla, then it is best to reset this to the default value. to do this,
enter the url "about:config", "filter" for "mathfont", and "reset" to the default value through the context menu on the preference. mathml font selection with css you can get these fonts from the mathml-fonts add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command: wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xp...
MathML Demo: <mo> - operator, fence, separator, or accent
binary operators and relations the following table contains instances of all operators found on the swp binary operations and binary relations panels. the symbols occur in the context of a simple expression. in general, the lspace and rspace around the relation should be greater than that around the operation. operator and relations c
enter vertically on the math axis. a ± b ≤ c a ∓ b ≺ c a × b ⪯ c a ⋅ b ≪ c a * b ⊂ c a ∪ b ⊆ c a ∩ b ⊏ c a ∘ b ⊑ c a • b ∈ c a ÷ b ⊢ c a ⊔ b ⌣ c a ⊓ b ⌢ c a ○ b ≡ c a ∖ b ∼ c ...
Using the viewport meta tag to control layout on mobile browsers
le screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space. this is done because many pages are not mobile optimized, and break (or at least look bad) when rendered at a small viewport width. this virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.
enter viewport meta tag however, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques. to mitigate this problem, apple introduced the "viewport meta tag" in safari ios to ...
Mozilla Web Developer FAQ
on or by using the web sniffer. class names and ids are case-sensitive. the element selectors are case-sensitive with xml. style sheet processing instructions are only allowed in the prolog of xml documents. also, they only work in xml documents—not in documents served as text/html. width and height do not apply to non-replaced inline elements such as (by default) <span>. text-align: c
enter; c
enters inline content within a block. it does not (and should not) c
enter the block box itself. a block is c
entered by setting its margin-left and margin-right to auto and its width to a value that makes the block narrower than its containing block. it is also possible, although not very likely, that you are seeing a bug. javascript doesn’t work! why? some proprietary document objects suc...
Mozilla Quirks Mode Behavior
le layout strategy ignores padding (on what) in quirks mode. obsolete since gecko 1.9 (firefox 3) the basic table layout strategy handles widths differently in some way. obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in quirks mode absmiddle (handled incorrectly?) and middle (perhaps incorrectly as well?) are accepted as values of align on table cells, and absmiddle, absc
enter, and middle are supported on tables (treated the same as c
enter). removed in bug 559834 and bug 573322, though middle and absmiddle in table cells work in all modes now. in quirks mode, percentage values are supported on the cellspacing attribute, but treated as pixels (bug 106336). obsolete since gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) this quirk has been adopted in st...
mozilla::MutexAutoLock
an mozilla::mutex. the mozilla::mutexautolock constructor will lock() the underlying mozilla::mutex automatically. when the mozilla::mutexautolock goes out of scope, its destructor will unlock() the underlying mozilla::mutex. because of mozilla::mutexautounlock, the rule for determining if your code owns the mutex underlying the mutexautolock is slightly more complicated than that for monitorauto
enter. this is because mutexautounlocks can be nested within mutexautolocks and vice versa, indefinitely deeply. important: when a mozilla::mutexautolock is the mutex raii wrapper most recently pushed on the stack, your code is guaranteed to own the underlying mozilla::mutex. constructors mutexautolock( in mozilla::mutex& lock; ); this parameter is a reference so as to guarantee that your code has...
mozilla::MutexAutoUnlock
:mutex. the mozilla::mutexautounlock constructor will unlock() the underlying mozilla::mutex automatically. when the mozilla::mutexautounlock goes out of scope, its destructor will lock() the underlying mozilla::mutex. because of mozilla::mutexautolock, the rule for determining if your code does not own the mutex underlying the mutexautounlock is slightly more complicated than that for monitorauto
enter. this is because mutexautounlocks can be nested within mutexautolocks and vice versa, indefinitely deeply. important: when a mozilla::mutexautounlock is the mutex raii wrapper most recently pushed on the stack, your code is guaranteed not to own the underlying mozilla::mutex. constructors mutexautounlock( in mozilla::mutex& lock; ); this parameter is a reference so as to guarantee that your ...
Mozilla
stuff about the mozilla namespace. we need real content added here. ...
Namespace
below, find links to articles about c++ classes mozilla uses within various namespaces, primarily the mozilla namespace. mozillamozilla::condvarmozilla::monitormozilla::monitorauto
entermozilla::mutexmozilla::mutexautolockmozilla::mutexautounlock ...
DMD
with the recommended "--es env0" method for setting environment variables when launching fennec, note that you cannot use this method here because those are processed too late in the startup process. if you are not familiar with that method, you can ignore this parenthetical note.) first make the executable wrapper on your host machine using the editor of your choice. name the file dmd_fennec and
enter this as the contents: #!/system/bin/sh export moz_replace_malloc_lib=/sdcard/libdmd.so exec "$@" if you want to use other dmd options, you can
enter additional environment variables above. you will need to push this to the device and make it executable. since you cannot mark files in /sdcard/ as executable, we will use /data/local/tmp for this purpose: adb push dmd_fennec /data/local/tmp adb ...
Gecko Profiler FAQ
r threads with the profiler. bug 1341811 suggests hooking platform thread spawning functions but nobody has looked at it yet. profiling all nsthreads - how bad is the overhead? [mstange] i don’t know. i think julian seward has done some measurements on this, i think. [ehsan] try clicking the toolbar icon for the extension, expanding the settings section, and
enter the secret cheat code “,” in the threads field and click on “apply (restart profiler)”. this will capture all of the threads that the gecko profiler has been hooked to. this mode is usually recommended when you want to find a thread you want to do more focused profiling on, so that you can find its name and then construct a more useful thread filter string based on the found ...
about:memory
sume that you want to measure firefox's memory usage. perhaps you want to investigate it yourself, or perhaps someone has asked you to use about:memory to generate "memory reports" so they can investigate a problem you are having. follow these steps. at the moment of interest (e.g. once firefox's memory usage has gotten high) open a new tab and type "about:memory" into the address bar and hit "
enter". if you are using a communication channel where files can be sent, such as bugzilla or email, click on the "measure and save..." button. this will open a file dialog that lets you save the memory reports to a file of your choosing. (the filename will have a .json.gz suffix.) you can then attach or upload the file appropriately. the recipients will be able to view the contents of this file withi...
javascript.options.strict
javascript warnings are generated when code is executed that doesn't cause a run-time error, but is non-standard, poorly written, or prone to cause logic errors. this preference controls whether javascript warnings are logged to the javascript console. example : <html> <head> <title>sample</title> </head> <body> <label id="name">
enter you first name</label> <p id ="sample"></p> <script> "use strict" name1= "john" ; // this will cause and an error as variable not declared . var name2= "peter"; document.getelementbyid("sample").innerhtml = name1; </script> </body> </html> possible values and their effects: true: show javascript errors and warnings. false: show javascript errors only. (default) see also: http://kb.mozillazine.org/javascript.options.strict ...
Preferences system
height (in em) for platforms where the window size does not change as the selected panel is changed (e.g. windows). usage in xulrunner applications when calling opendialog() to open a preferences dialog, "toolbar" should be included in the features string. ...
McCoy
ckup, there is no way to recover your private keys if they are lost! running mccoy to run mccoy simply run the mccoy executable (or the mccoy application on os x). the first time it runs it will ask you to create a master password. it is strongly recommended that you use a password to protect your mccoy data. once you have a password set you can change it from the keys menu and you will have to
enter it each time you run mccoy. signing from command line currently there is no support to run mccoy from command line under windows, but it is planned to add this support in the future. however, there are several external and unofficial tools which enable signing from command line: uhura - part of the mxtools package from softlights http://www.softlights.net/projects/mxtools/uhura.html signont...
Midas
, the numbered item becomes a bulleted item. insertparagraph inserts a new paragraph. italic if there is no selection, the insertion point will set italic for subsequently typed characters. if there is a selection and all of the characters are already italic, the italic will be removed. otherwise, all selected characters will become italic. justifyc
enter c
enter-aligns the current block. justifyfull fully-justifies the current block. justifyleft left-aligns the current block. justifyright right aligns the current block. outdent outdent the block where the caret is located. if the block is not indented prior to calling outdent, nothing will happen. if the caret is in a list ...
About NSPR
ffered by the various platform providers. where it's headed nspr is applicable as a platform on which to write threaded applications that need to be ported to multiple platforms. the current implementation supports macintosh (ppc), win-32 (winnt, win9x) and 20 versions of unix and is still expanding. the basic api is stable and expected to remain that way. nspr is functionally complete and has
entered a mode of sustaining engineering. as operating system vendors issue new releases of their operating systems, nspr will be moved forward to these new releases by interested players. original document information author: larryh@netscape.com last updated date: 2000 (portions of the introduction moved to the history section in 2012) ...
Cached Monitors
ut uncached monitors. cached monitors functions cached monitors allow the client to associate monitoring protection and state change synchronization in a lazy fashion. the monitoring capability is associated with the protected object only during the time it is required, allowing the monitor object to be reused. this additional flexibility comes at the cost of a small loss in performance. pr_c
entermonitor
enters the lock associated with a cached monitor. pr_cexitmonitor decrements the entry count associated with a cached monitor. pr_cwait waits for a notification that a monitor's state has changed. pr_cnotify notifies a thread waiting for a change in the state of monitored data. pr_cnotifyall notifies all the threads waiting for a change in the state of monitored data. ...
PR_CExitMonitor
returns the function returns one of the following values: if successful, pr_success. if unsuccessful, pr_failure. ...
PR_CNotify
r_cnotify(void *address); parameter the function has the following parameter: address the address of the monitored object. the calling thread must be in the monitor defined by the value of the address. returns pr_success indicates that the calling thread is the holder of the mutex for the monitor referred to by the address parameter. pr_failure indicates that the monitor has not been
entered by the calling thread. description using the value specified in the address parameter to find a monitor in the monitor cache, pr_cnotify notifies single a thread waiting for the monitor's state to change. if a thread is waiting on the monitor (having called pr_cwait), then that thread is made ready. as soon as the thread is scheduled, it attempts to re
enter the monitor. ...
PR_CNotifyAll
ead was in the monitor. pr_failure indicates that the referenced monitor could not be located or that the calling thread was not in the monitor description using the value specified in the address parameter to find a monitor in the monitor cache, pr_cnotifyall notifies all threads waiting for the monitor's state to change. all of the threads waiting on the state change are then scheduled to re
enter the monitor. ...
PR_CreateThread
the most favorable machine-specific stack size. returns the function returns one of the following values: if successful, a pointer to the new thread. this pointer remains valid until the thread returns from its root function. if unsuccessful, (for example, if system resources are unavailable), null. description if you want the thread to start up waiting for the creator to do something,
enter a lock before creating the thread and then have the thread's root function
enter and exit the same lock. when you are ready for the thread to run, exit the lock. for more information on locks and thread synchronization, see introduction to nspr. if you want to detect the completion of the created thread, make it joinable. you can then use pr_jointhread to synchronize the termination of another t...
PR_ExitMonitor
on.h> prstatus pr_exitmonitor(prmonitor *mon); parameter the function has the following parameter: mon a reference to an existing structure of type prmonitor. the monitor object referenced must be one for which the calling thread currently holds the lock. returns the function returns one of the following values: if successful, pr_success. if unsuccessful (the calling thread has not
entered the monitor), pr_failure. description if the decremented entry count is zero, pr_exitmonitor releases the monitor's lock. threads that were blocked trying to
enter the monitor will be rescheduled. ...
An overview of NSS Internals
cates. there is a classic engine that is very stable and works fine in all simple scenarios, for example if all (b) candidate issuer certificates have the same subject and issuer names and differ by validity period; however, it works only in a limited amount of more advanced scenarios. unfortunately, the world of certificates has become more complex in the recent past. new certificate authorities
enter the global pki market, and in order to get started with their business, they might make deals with established cas and receive so-called cross-signing-certificates. as a result, when searching for a trust path from (a) to a trusted anchor (root) certificate (z), the set of candidate issuer certificates might have different issuer names (referring to the second or higher issuer level). as a conseq...
NSS 3.12.4 release notes
the bug fixes in nss 3.12.4 are described in the "bugs fixed" section below. nss 3.12.4 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information this release is built from the source, at the cvs repository rooted at cvs.mozilla.org:/cvsroot, with the cvs tag nss_3_12_4_rtm. nss 3.12.4 requires nspr 4.8. this is not a hard requirement. our qa tested nss 3.12.4 with nspr 4.8, but it should work with nspr 4.7.1 or later. you can check out the source from cvs by cvs co -r nspr_4_8_rtm nspr cvs co -r nss_3_12_4_rtm nss see the documentation section for the build instructions. ...
NSS 3.12.9 release notes
the bug fixes in nss 3.12.9 are described in the "bugs fixed" section below. nss 3.12.9 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1. distribution information the cvs tag for the nss 3.12.9 release is nss_3.12.9_rtm. nss 3.12.9 requires nspr 4.8.7. see the documentation section for the build instructions. nss 3.12.9 source distribution is also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3.12.9_rtm/src/. ...
NSS_3.12_release_notes.html
ate [[@ secitem_compareitem_util] [[@ memcmp] bug 396256: certutil and pp do not print all the generalnames in a crldp extension bug 398019: correct confusing and erroneous comments in der_asciitotime bug 422866: vfychain -pp command crashes in nss_shutdown bug 345779: useless assignment statements in ec_gf2m_pt_mul_mont bug 349011: please stop exporting these crmf_ symbols bug 397178: crash when
entering chrome://pippki/content/resetpassword.xul in url bar bug 403822: pkix_pl_ocsprequest_create can leave some members uninitialized bug 403910: cert_findusercertbyusage() returns wrong certificate if multiple certs with same subject available bug 404919: memory leak in sftkdb_readsecmoddb() (sftkmod.c) bug 406120: allow application to specify ocsp timeout bug 361025: support for camellia cipher ...
NSS 3.14.2 release notes
is available for download from https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_2_rtm/src/ for the primary nss documentation pages please visit /docs/nss new in nss 3.14.2 nss will now make use of the intel aes-ni and avx instruction sets for hardware-accelerated aes-gcm on 64-bit linux systems. note: the new assembly code requires gnu as version 2.19 or newer. on red hat
enterprise linux 5.x systems, install the binutils220 package and add /usr/libexec/binutils220 to the beginning of your path environment variable. initial manual pages for some nss command line tools have been added. they are still under review, and contributions are welcome. the documentation is in the docbook format and can be rendered as html and unix-style manual pages using an optional build tar...
NSS 3.19.3 release notes
sha1 fingerprint: 61:57:3a:11:df:0e:d8:7e:d5:92:65:22:ea:d0:56:d7:44:b3:23:71 cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı sha1 fingerprint: 79:98:a3:08:e1:4d:65:85:e6:c2:1e:15:3a:71:9f:ba:5a:d3:4a:d9 cn = sg trust services racine sha1 fingerprint: 0c:62:8f:5c:55:70:b1:c9:57:fa:fd:38:3f:b0:3d:7b:7d:d7:b9:c6 cn = tc trustc
enter universal ca i sha-1 fingerprint: 6b:2f:34:ad:89:58:be:62:fd:b0:6b:5c:ce:bb:9d:d9:4f:4e:39:f3 cn = tc trustc
enter class 2 ca ii sha-1 fingerprint: ae:50:83:ed:7c:f4:5c:bc:8f:61:c6:21:fe:68:5d:79:42:21:15:6e the following ca certificate had the websites trust bit turned off cn = comsign secured ca sha1 fingerprint: f9:cd:0e:2c:da:76:...
NSS 3.21 release notes
nings as errors (bug 1182667) the following ca certificates were removed cn = verisign class 4 public primary certification authority - g3 sha1 fingerprint: c8:ec:8c:87:92:69:cb:4b:ab:39:e9:8d:7e:57:67:f3:14:95:73:9d cn = utn-userfirst-network applications sha1 fingerprint: 5d:98:9c:db:15:96:11:36:51:65:64:1b:56:0f:db:ea:2a:c2:3e:f1 cn = tc trustc
enter universal ca iii sha1 fingerprint: 96:56:cd:7b:57:96:98:95:d0:e1:41:46:68:06:fb:b8:c6:11:06:87 cn = a-trust-nqual-03 sha-1 fingerprint: d3:c0:63:f2:19:ed:07:3e:34:ad:5d:75:0b:32:76:29:ff:d5:9a:f2 cn = usertrust legacy secure server ca sha-1 fingerprint: 7c:2f:91:e2:bb:96:68:a9:c6:f6:bd:10:19:2c:6b:52:5a:1b:ba:48 friendly name: digi...
NSS 3.32 release notes
were removed: cn = addtrust public ca root sha-256 fingerprint: 07:91:ca:07:49:b2:07:82:aa:d3:c7:d7:bd:0c:df:c9:48:58:35:84:3e:b2:d7:99:60:09:ce:43:ab:6c:69:27 cn = addtrust qualified ca root sha-256 fingerprint: 80:95:21:08:05:db:4b:bc:35:5e:44:28:d8:fd:6e:c2:cd:e3:ab:5f:b9:7a:99:42:98:8e:b8:f4:dc:d0:60:16 cn = china internet network information c
enter ev certificates root sha-256 fingerprint: 1c:01:c6:f4:db:b2:fe:fc:22:55:8b:2b:ca:32:56:3f:49:84:4a:cf:c3:2b:7b:e4:b0:ff:59:9f:9e:8c:7a:f7 cn = cnnic root sha-256 fingerprint: e2:83:93:77:3d:a8:45:a6:79:f2:08:0c:c7:fb:44:a3:b7:a1:c3:79:2c:b7:eb:77:29:fd:cb:6a:8d:99:ae:a7 cn = comsign secured ca sha-256 fingerprint: 50:79:41:c7:44:60:a0:b4:70:86...
NSS 3.37 release notes
ropy(), instead of reading from /dev/urandom directly, if the build and runtime linux platform supports it. the ca certificates list was updated to version 2.24. ...
NSS API Guidelines
eparate component of the api should live in its own layer. the functions in these apis should never call api layers above them. in addition, some low-level apis may be completely opaque to higher level layers. that is, access to these functions should only be provided by the api directly above them. the nss apis are layered, as shown in this diagram: the boxes in the gray section, towards the c
enter, are exported only through pkcs #11. pkcs #11 is only exported through the wrappers. the areas which need the most work (both here and throughout the code) is: the relationship of the certificate library with just about every other component (most noticeably pkcs #12, pkcs #7, and pkcs #11) splitting low key and high key components more clearly the crypto wrappers (pkcs #11 wrappers) and hi...
NSS Sample Code sample6
illustrate generation of a secret symmetric key ring * that persists in the nss database. the symmetric keys can then be used * without ever exposing them in the clear. * * to encrypt, you need the id of the key to use. * to decrypt, you need the ciphertext and the id of the key that was used * to encrypt * * before running this example, create the nss database * certutil -n -d . * (
enter "test" when prompted for password) */ #include "nss.h" #include "pk11pub.h" /* the key id can be any sequence of bytes. this example happens to use an * integer */ void genkey(int id); /* this callback is responsible for returning the password to the nss * key database. for example purposes, this function hardcodes the password. * in a real app, this function should obtain the password us...
Overview of NSS
lowing: mozilla products, including firefox, thunderbird, seamonkey, and firefox os. aol instant messenger (aim) open source client applications such as evolution, pidgin, apache openoffice, and libreoffice. server products from red hat: red hat directory server, red hat certificate system, and the mod_nss ssl module for the apache web server. server products from oracle (formerly sun java
enterprise system), including oracle communications messaging server and oracle directory server
enterprise edition. suse linux
enterprise server supports nss and the mod_nss ssl module for the apache web server. nss includes a framework to which developers and oems can contribute patches, such as assembler code, to optimize performance on their platforms. nss 3.x has been certified on 18 platforms.
PKCS11 FAQ
back and fetch it from a web page once the ca notifies you of the arrival of the new certificate). nss uses the public key to search all its tokens for the private key that matches that certificate. the certificate is then written to the token where that private key resides, and the certificate's cka_id is set to match the private key. why does firefox require users to authenticate themselves by
entering a pin at the keyboard? why not use a pin pad or a fingerprint reader located on the token or reader? pkcs #11 defines how these kinds of devices work. there is an outstanding bug in firefox to implement this support. ...
PKCS11 module installation
ation in this article is specific to firefox 3.5 and newer. older versions of firefox may support the window.pkcs11 property for installing pkcs #11 modules. using the firefox preferences to install pkcs #11 modules save the pkcs #11 module to a permanent location on your local computer open the firefox preferences dialog. choose "advanced" > "encryption" > "security devices" choose "load"
enter a name for the security module, such as "my client database". note: there is currently a bug in firefox where international characters may cause problems. choose "browse..." to find the location of the pkcs #11 module on your local computer, and choose "ok" when done. provisioning pkcs #11 modules using the pkcs11 api starting with firefox 58, extensions can use the pkcs11 browser extension a...
NSS PKCS11 Functions
he callback has previously returned the wrong password. arg a pointer supplied by the application that can be used to pass state information. can be null. this callback function returns one of these values: if successful, a pointer to the password. this memory must have been allocated with pr_malloc or pl_strdup. if unsuccessful, returns null. many tokens keep track of the number of attempts to
enter a password and do not allow further attempts after a certain point. therefore, if the retry argument is pr_true, indicating that the password was tried and is wrong, the callback function should return null to indicate that it is unsuccessful, rather than attempting to return the same password again. failing to terminate when the retry argument is pr_true can result in an endless loop. several fu...
NSS tools : ssltab
sltap command with no options other than hostname:port, the information you get in this way is not very useful. for example, assume your development machine is called intercept. the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 1924. in your browser window,
enter the url http://intercept:1924. the browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the browser by the debugging tool on intercept. on its way to the browser, the data is printed to the command shell from which you issued the command. data sent from the client to the server is surrounded by the following symbols: --> [ data ] d...
NSS tools : ssltap
sltap command with no options other than hostname:port, the information you get in this way is not very useful. for example, assume your development machine is called intercept. the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 1924. in your browser window,
enter the url http://intercept:1924. the browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the browser by the debugging tool on intercept. on its way to the browser, the data is printed to the command shell from which you issued the command. data sent from the client to the server is surrounded by the following symbols: --> [ data ] d...
pkfnc.html
arg a pointer supplied by the application that can be used to pass state information. can be null. this callback function returns one of these values: if successful, a pointer to the password. this memory must have been allocated with pr_malloc or pl_strdup. if unsuccessful, returns null. many tokens keep track of the number of attempts to
enter a password and do not allow further attempts after a certain point. therefore, if the retry argument is pr_true, indicating that the password was tried and is wrong, the callback function should return null to indicate that it is unsuccessful, rather than attempting to return the same password again. failing to terminate when the retry argument is pr_true can result in an endless loop. several f...
NSS Tools pk12util
the tool allows you to import certificates and keys from pkcs #12 files into nss or export them and also list certificates and keys in such files. availability see the release notes for the platforms this tool is available on. ...
NSS Tools ssltap
ap command with no options other than hostname:port, the information you get in this way is not very useful. for example, assume your development machine is called intercept. the simplest way to use the debugging tool is to execute the following command from a command shell: ssltap www.netscape.com:80 the program waits for an incoming connection on the default port 1924. in your browser window,
enter the url http://intercept:1924. the browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the browser by the debugging tool on intercept. on its way to the browser, the data is printed to the command shell from which you issued the command. data sent from the client to the server is surrounded by the following symbols: --> [ data ...
NSS tools : ssltap
no options other than hostname:port, the information you get in this way is not very useful. for example, assume your development machine is called intercept. the simplest way to use the debugging tool is to execute the following command from a command shell: $ ssltap www.netscape.com the program waits for an incoming connection on the default port 1924. in your browser window,
enter the url http://intercept:1924. the browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the browser by the debugging tool on intercept. on its way to the browser, the data is printed to the command shell from which you issued the command. data sent from the client to the server is surrounded by the following symbols:...
Rhino community
sed. please use the new group instead, but the old one may be of historical interest. the mozilla.dev.tech.js-engine newsgroup answers questions about the c implementation of javascript, and was also used for answering questions about rhino until september 27, 2007. to view archived messages earlier than september 27, 2007, try google group for the earlier newsgroup. bug system the best way to
enter rhino bugs to
enter an issue in github. if you have the inclination to fix it, you are also encouraged to fix it and submit a pull request. many older rhino issues were logged in bugzilla. there may be some bugs there of historical interest. note that rhino has its own product category. ...
SpiderMonkey compartments
l objects referenced from outside the compartment are live, and then walks the object graph inside the compartment. objects that are found to be disconnected from the graph are discarded. ...
JS::AutoSaveExceptionState
fe build, the caller must be in a request on this jscontext. description js::autosaveexceptionstate saves and later restores the current exception state of a given jscontext. this is useful for implementing behavior in c++ that's like try/catch or try/finally in js. example // typical usage: bool ok = js::evaluate(cx, ...); autosaveexceptionstate savedexc(cx); ... cleanup that might re-
enter js ... return ok; see also mxr id search for js::autosaveexceptionstate js_saveexceptionstate js_restoreexceptionstate js_dropexceptionstate bug 972319 ...
JS_BeginRequest
syntax void js_beginrequest(jscontext *cx); void js_endrequest(jscontext *cx); name type description cx jscontext * the context in which the calling thread intends to call jsapi functions. description when your multithreaded application wants to use a jscontext, it must use js_beginrequest and js_endrequest to bracket maximal non-blocking hunks of native code that call the jsapi. this "request model" is necessary to interlock with the global garbage collector. in a js_threadsafe build, many jsapi functions must only be called from within a request. ...
JS_ForgetLocalRoot
pointer to the context in which the caller is running. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. thing void * pointer to the value to be unrooted. this must point to a jsobject, jsstring, jsfunction, or jsdouble. it must not be null. description this function is used to interact with scoped local root management. see js_
enterlocalrootscope for more on this topic. in case a native hook allocates many objects or other gc-things, but the native protects some of those gc-things by storing them as property values in an object that is itself protected, the hook can call js_forgetlocalroot to free the local root automatically pushed for the now-protected gc-thing. (here the term gc-thing refers to any value that is subject t...
JS_LeaveLocalRootScope
bsolete since javascript 1.8.5this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. leave a local root scope. syntax void js_leavelocalrootscope(jscontext *cx); name type description cx jscontext * pointer to the context. this must be the same context passed to js_
enterlocalrootscope(). requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. description see js_
enterlocalrootscope for an explanation of local root scopes. leaving a nested local root scope causes all objects created since the matching js_
enterlocalrootscope call to become subject to garbage collection. that is, they are not transferred to the enclosing l...
JS_LeaveLocalRootScopeWithResult
sers, its use is discouraged since it could be removed at any time. try to avoid using it. leave a local root scope, transferring the result value to the next enclosing root scope. syntax void js_leavelocalrootscopewithresult(jscontext *cx, jsval rval); name type description cx jscontext * pointer to the context. this must be the same context that was passed to js_
enterlocalrootscope. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. rval jsval the result value that should remain protected from garbage collection. description see js_
enterlocalrootscope for an explanation of local root scopes. the protection this function affords to rval is tenuous. if there is an enclosing local root scope, then r...
JS_NewScriptObject
jsscript. every jsscript object has an associated jsobject script object. as long as the script object is reachable, the jsscript and its components are protected from garbage collection; when the script object is collected, the jsscript and its contents are freed. once you have created a script, you should immediately ensure that its script object is reachable (perhaps by using js_addroot or js_
enterlocalrootscope). a script object has no properties, and its prototype is object.prototype. so a script object can be used to expose a jsscript to javascript code, but the code can't do much of anything with it. on success, js_newscriptobject returns a pointer to the script's object. otherwise it returns null. (the name "js_newscriptobject" suggests that the script object is freshly allocated; t...
JS_SetErrorReporter
eterrorreporter returns the value set by js_seterrorreporter. typically, the error reporting mechanism you define should log the error where appropriate (such as to a log file), and display an error to the user of your application. the error you log and display can make use of the information passed about the error condition in the jserrorreport structure. the error reporter callback must not re
enter the jsapi. like all other spidermonkey callbacks, the error reporter callback must not throw a c++ exception. note that js_seterrorreporter has no facility to directly pass a user data pointer to the error reporting function. you can work around this by using the js_setruntimeprivate and js_getruntimeprivate methods. example code with error handling omitted: class myrequest { public: ...
JS_SetFunctionCallback
ly use js_setcallhook in preference to this function, because it is invoked when the javascript stack is guaranteed to be in a consistent state (and therefore it is valid to inspect and modify local variables, generate stack traces, and set breakpoints.) callback syntax typedef void (* jsfunctioncallback)(const jsfunction *fun,const jsscript *scr, const jscontext *cx, int
entering); name type description fun const jsfunction * the javascript function being invoked or exited. scr const jsscript * the script being executed. cx jscontext * the javascript context in which the script is being run.
entering int true if the callback is being called because the specified function is being invoked or fa...
Exploitable crashes
keywords. if you're not sure what rating to give, err on the higher side so the bug will get more attention. explain in a comment why the issue seems exploitable. other tools apple has a tool called "crashwrangler" that are still being maintained as of 2012. there is little public information about it, and it is hard to find even on the apple developer site. to get them go to the mac developer c
enter downloads section -> other downloads -> search for "crashwrangler". microsoft released a debugger extension tool in 2009 called "!exploitable". it hasn't been updated since 2009. ...
Setting up an update server
etermine the update directory: const {fileutils} = chromeutils.import("resource://gre/modules/fileutils.jsm"); fileutils.getdir("updrootd", [], false).path once you have determined the update directory, close firefox, browse to the directory and remove the subdirectory called updates. next, you need to change the update url to point to the local xml file. this can be done most reliably with an
enterprise policy. the policy file location depends on the operating system you are using. windows/linux: <install dir>/distribution/policies.json macos: <install dir>/contents/resources/distribution/policies.json create the distribution directory, if necessary, and put this in policies.json: { "policies": { "appupdateurl": "http://127.0.0.1:8000/update.xml" } } now you are ready to update...
Animated PNG graphics
it is intended to be a replacement for simple animated images that have traditionally used the gif format, while adding support for 24-bit images and 8-bit transparency. apng is a simpler alternative to mng, providing a spec suitable for the most common usage of animated images on the internet. apng is backwards-compatible with png; any png decoder should be able to ignore the apng-specific chunks and display a single image. ...
XML Extras
object creation is different. some properties are not implemented. thad hoffman has written a document that shows how you can mimic xml data islands in mozilla. edmond woychowsky has also written articles on xml data islands in mozilla: "make xml data islands work in mozilla", "build cross-browser xml paging code" and "implement a flexible shopping cart with xml and asp". the mozilla developer c
enter has several pages for xmlhttprequest. below are some key differencies in "xml extras" between mozilla and microsoft software: difference microsoft mozilla member names case insensitive? begins with lower case letter xmlhttprequest creation new activexobject("msxml2.xmlhttp") new xmlhttprequest() xmlhttprequest.send("some string") ok ok...
How To Pass an XPCOM Object to a New Window
om object from a xul window's code, you can do so if you pass the xpcom object as one of the arguments to the window creation method. for example: var ww = components.classes["@mozilla.org/embedcomp/window-watcher;1"]. getservice(components.interfaces.nsiwindowwatcher); var win = ww.openwindow(null, "chrome://myextension/content/debug.xul", "debug history", "chrome,c
enterscreen,resizable", myobject); note in this example that myobject is passed to the openwindow() method; you can pass any xpcom object (or any other value, for that matter) in this way. to access the xpcom object from the window's code, you can access the window.arguments[] array, as shown in the example below: components.utils.reporterror(string(window.arguments[0])); this will produce output s...
Introduction to XPCOM for the DOM
ble through time. indeed, many interfaces in the mozilla code are frozen (this is indicated by the comment @frozen at the beginning of the interface definition). that means that the interface will never change anymore. the good thing is that your code will (in the best condition) last forever. the bad thing is that we have to find a way to improve those interfaces, and freezing them obliges implem
enters to create new interfaces. in summary, manipulate an interface rather than its implementation whenever possible! a pointer to an interface nsifoo implemented by nsfoo can be declared as follows nsifoo *fooptr = new nsfoo; a pointer such as fooptr is then called a "pointer to an interface nsifoo implemented by an instance of the nsfoo class", or "pointer to nsifoo" in short. from now on, when i...
XPCShell Reference
execute. [scriptarg…] these are arguments to be passed to the script. these arguments are only passed to “scriptfile” and not the scripts designated by –f options. these arguments appear on the global property arguments. for instance, assume that you have a file called test.js with the following contents: for (prop in arguments) { print(prop + "=" + arguments[prop]); }
entering the following at the command line should produce the following output: $ xpcshell test.js this is a test 0=this 1=is 2=a 3=test xpcshell extensions once you execute xpcshell without a script you'll be at the js> command line. the following are some useful functions that can be invoked from the command line: clear(object) clear() removes all properties from an object. for example, if y...
imgIDecoder
aload an imgiload object to receive the decoded image data. this object also implements the imgidecoderobserver interface; you should queryinterface() it to that interface and call its notification methods while handling the decode operation. you should always pass null as the first two parameters of the notification apis. writefrom() writes data into the stream from an input stream. implem
enter's note: this method is defined by this interface in order to let the output stream efficiently copy the data from the input stream into its internal buffer (if any). if this method was provided as an external facility, a separate char * buffer would need to be used in order to call the output stream's other write() method. unsigned long writefrom( in nsiinputstream instr, in unsigned long cou...
mozIRegistry
sid binding protocols this is a placeholder for potential encapsulations of particular idioms for storing clsid information in the registry and using that information, along with nsrepository, to implement some instance creation protocol on top of the core xpcom services. i think these things can be divided into two categories, according to the basic service they provide: identifying the implem
enters of a given interface. figuring out an appropriate implementation given some arbitrary desired properties. nsrepository this is basically the same as is provided today (see mozilla/xpcom/public/nsrepository.h). the primary change to this component is that we will modify it to utilize the new moziregistry interface versus the nsreg.h functions it calls today. in addition, it likely will have a...
mozITXTToHTMLConv
netwerk/streamconv/public/mozitxttohtmlconv.idlscriptable please add a summary to this article. ...
nsIAccessibleEvent
0x0018 a pop-up menu has been closed. event_capture_start 0x001c 0x0019 a window has received mouse capture. event_capture_end 0x001d 0x001a a window has lost mouse capture. event_movesize_start 0x001e 0x001b a window is being moved or resized. event_movesize_end 0x001f 0x001c the movement or resizing of a window has finished. event_contexthelp_start 0x0020 0x001d a window has
entered context-sensitive help mode. event_contexthelp_end 0x0021 0x001e a window has exited context-sensitive help mode. event_dragdrop_start 0x0022 0x001f an application is about to
enter drag-and-drop mode. event_dragdrop_end 0x0023 0x0020 an application is about to exit drag-and-drop mode. event_dialog_start 0x0024 0x0021 a dialog box has been displayed. event_dialog_end 0x0025 ...
nsIDOMChromeWindow
or is same as getattention method. maximize() maximizes the window. void maximize(); parameters none. minimize() minimizes the window. void minimize(); parameters none. notifydefaultbuttonloaded() when a document has been loaded, the document can notify the default button of the document to the window by using this method. when this method is called on windows, gecko moves the mouse cursor to c
enter of the button if the auto cursor snap setting is enabled on the system. however, when the window isn't active at that time, the cursor isn't moved. on other systems, this method doesn't have any reaction currently. this method is called automatically on dialog element or wizard element of xul. if some xul applications create a dialog like window which has a default button but it's not created by ...
nsIDOMNavigatorDesktopNotification
m/interfaces/notification/nsidomnavigatordesktopnotification.idlscriptable property that extends the navigator object. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) property that extends the navigator object. attributes attribute type description moznotification nsidomdesktopnotificationc
enter read only. see also nsidomdesktopnotificationc
enter ...
nsIDOMSimpleGestureEvent
receive a single event when the rotation gesture is complete, you only need to hook this event and can safely ignore the mozrotategesturestart and the mozrotategestureupdate events. the "delta" value is the cumulative amount of rotation represented by the user's gesture. moztapgesture - generated when the user executes a two finger tap gesture on the input device. client coordinates contain the c
enter point of the tap. (xxx not implemented on mac) mozpresstapgesture - generated when the user executes a press and tap two finger gesture (first finger down, second finger down, second finger up, first finger up) on the input device. client coordinates contain the c
enter pivot point of the action. (xxx not implemented on mac) default behavior: some operating systems support default behaviors for...
nsIDroppedLinkHandler
inherit); void droplinks(in nsidomdragevent aevent, [optional] in boolean adisallowinherit, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsidroppedlinkitem alinks); methods candroplink() determines if a link being dragged can be dropped. boolean candroplink( in nsidomdragevent aevent, in prbool aallowsamedocument ); parameters aevent a drag
enter or dragover event. aallowsamedocument if false, drops are only allowed if the document of the source of the drag is different from the destination. this check includes any parent, sibling and child frames in the same content tree. if true, the source is not checked. return value true if the link being dragged can be dropped. exceptions thrown missing exception missing description drop...
nsIFilePicker
s added to the operating system's "recent documents" list (if the operating system has one; nothing happens if there is no such concept on the user's platform). this attribute has no effect if private browsing mode is in effect. defaultextension astring the extension for the type of files you want to work with. on some platforms, this is automatically appended to filenames the user
enters, if required. specify it without a leading dot, for example "jpg". defaultstring astring the filename, including extension, that should be suggested to the user as a default. this should be set before calling open() or show(). exceptions thrown ns_error_failure if you try to read this attribute. displaydirectory nsilocalfile the directo...
nsIMsgFilterCustomAction
a particular filter type? * * @param type the filter type * @param scope the search scope * * @return true if valid */ boolean isvalidfortype(in nsmsgfiltertypetype type, in nsmsgsearchscopevalue scope); /** * after the user inputs a particular action value for the action, determine * if that value is valid. * * @param actionvalue the value
entered. * @param actionfolder folder in the filter list * @param filtertype filter type (manual, offlinemail, etc.) * * @return errormessage a localized message to display if invalid * set to null if the actionvalue is valid */ autf8string validateactionvalue(in autf8string actionvalue, in nsimsg...
nsIParserUtils
itizing css backgrounds, and so on., is not supported, so setting this together with sanitizerallowstyle doesn't make sense. at present, sanitizing css syntax in svg presentational attributes is not supported, so this option flattens out svg. sanitizerdropnoncsspresentation (1 << 3) flag for sanitizer: drops non-css presentational html elements and attributes, such as <font>, <c
enter>, and the bgcolor attribute. sanitizerdropforms (1 << 4) flag for sanitizer: drops forms and form controls (excluding <fieldset> and <legend>. sanitizerdropmedia (1 << 5) flag for sanitizer: drops <img>, <video>, <audio>, and <source>, and flattens out svg. sanitizerlogremovals (1 << 6) flag for sanitizer: log messages to the console for everything ...
nsISearchEngine
rameter to the search engine's submission data. this should only be called on engines created via nsibrowsersearchservice.addenginewithdetails(). void addparam( in astring name, in astring value, in astring responsetype ); parameters name the name of the parameter to add. value the value to pass. if value is "{searchterms}", it will be substituted with the user-
entered data when retrieving the submission. must not be null. responsetype since an engine can have several different request urls, differentiated by response types, this parameter selects a request to add parameters to. if null, will default to "text/html" exceptions thrown ns_error_invalid_arg if name or value are null. ns_error_failure if the search engin...
nsISelectionController
nts constant value description scroll_synchronous 1<<1 if set scrolls the selection into view before returning. if not set, posts a request which is processed at some point after the method returns. scroll_first_ancestor_only 1<<2 if set, only the first ancestor will be scrolled into view. scroll_c
enter_vertically 1<<4 if set, the specified location will be scrolled to the c
enter of the view. methods native code only!characterextendforbackspace will extend the selection one character cell backward in the document. this method is used internally for handling backspace key only when we're after utf-16 surrogates. void characterextendforbackspace(); parameters none. native c...
nsISpeculativeConnect
all this method to hint to the networking layer that a new transaction for the specified uri is likely to happen soon. the code implementing this method may use this information to start a tcp and/or ssl level handshake for that resource immediately so that it is ready (or at least in the process of becoming ready) when the transaction is actually submitted. no obligation is taken on by the implem
enter, nor is the submitter obligated to actually open the new channel. void speculativeconnect( in nsiuri auri, in nsiinterfacerequestor acallbacks, in nsieventtarget atarget ); parameters auri the uri of the hinted transaction. acallbacks any security callbacks for use with ssl for interfaces such as nsibadcertlistener. may be null. atarget the thread on which the release of the callbacks wil...
nsIURIFixup
nsiuri keywordtouri(in autf8string akeyword); nsiurifixupinfo getfixupuriinfo(in autf8string auritext, in unsigned long afixupflags); constants constant value description fixup_flag_none 0 no fixup flags. fixup_flag_allow_keyword_lookup 1 allow the fixup to use a keyword lookup service to complete the uri. the fixup object implem
enter should honour this flag and only perform any lengthy keyword (or search) operation if it is set. fixup_flags_make_alternate_uri 2 tell the fixup to make an alternate uri from the input uri, for example to turn foo into www.foo.com. fixup_flag_use_utf8 4 use utf-8 to encode the uri instead of the platform character set. fixup_flag_fix_scheme_typos 8 fi...
nsIWebNavigation
ffectively, this passes the stop_content flag to stop(), in addition to the stop_network flag. load_flags_from_external 4096 a hint this load was prompted by an external program: take care! load_flags_allow_third_party_fixup 8192 this flag specifies that the uri may be submitted to a third-party server for correction. this should only be applied to non-sensitive uris
entered by users. load_flags_first_load 16384 this flag specifies that this is the first load in this object. set with care, since setting incorrectly can cause us to assume that nothing was actually loaded in this object if the load ends up being handled by an external application. load_flags_allow_popups 32768 this flag specifies that the load should not be subject to po...
nsIWindowWatcher
this was fixed in bug 509124. registernotification() clients of this service can register themselves to be notified when a window is opened or closed (added to or removed from this service). this...
nsIWindowsShellService
a rgb value, where (r << 24 | g << 16 | b) obsolete since gecko 1.8 unreadmailcount unsigned long the number of unread mail messages for the current user. read only. constants valid starting keys for the windows registry. constant value description hkcr 0 hkey_classes_root. obsolete since gecko 1.8 hkcc 1 hkey_current_config. obsolete since gecko...
nsPIPromptService
inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) implemented by: the contract id isn't defined. this interface defines the meaning of each indexes of getint(), setint(), getstring() and setstring() of the nsidialogparamblock interface but they are defined on in c++. the indexes for getstring() and setstring() are: emsg the value is 0. this is the message text of the dialog. echeckboxmsg the value is 1. this is the label text of a checkbox on the dialog. ...
XPCOM Interface Reference
tnsicookiemanagernsicookiemanager2nsicookiepermissionnsicookiepromptservicensicookieservicensicookiestoragensicrashreporternsicryptohmacnsicryptohashnsicurrentcharsetlistenernsicyclecollectorlistenernsidbchangelistenernsidbfolderinfonsidnslistenernsidnsrecordnsidnsrequestnsidnsservicensidomcanvasrenderingcontext2dnsidomchromewindownsidomclientrectnsidomdesktopnotificationnsidomdesktopnotificationc
enternsidomelementnsidomeventnsidomeventgroupnsidomeventlistenernsidomeventtargetnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositionerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializerns...
Xptcall Porting Status
. bert's details <font color="white">done</font> mac ppc roger lawrence <rogerl@netscape.com>, patrick beard <beard@netscape.com> mac (passing tests and checked in) <font color="white">done</font> solaris sparc roger lawrence <rogerl@netscape.com>, chris mcafee <mcafee@netscape.com> unix this is checked in and working. <font color="white">done</font> solaris sparc v9 (64bit) stuart parm
enter <pavlov@netscape.com>, chris seawood <cls@seawood.org> unix this is checked in and (pavlov claims!) working. <font color="white">done</font> os/2 john fairhurst <mjf35@cam.ac.uk> i never heard exactly who did what. but mozilla has been working on os/2 for a long time now. <font color="white">done</font> openvms alpha colin r. blake <colin@theblakes.com> colin says this is passing all the t...
LDAP Support
it is not intended as an introduction to ldap and mozilla products. it assumes you are already familiar with configuring preferences for deployed builds in addition to setting up thunderbird to use an ldap directory. it should be noted that all of this information applies to both thunderbird and the seamonkey application suite. mail compose typedown in mail compose, when typing a partial mail address, a typedown window appears listing possible matches against address books and ldap directories. ...
Mail client architecture overview
butes in a folder such as the author and subject. finally, there are larger modules outside of the mail client that are mail-oriented. most of these modules have little dependancy on the mail reader itself: compose - the mail compose module is responsible for anything that has to do with sending mail. this includes the mail compose window, creation of rfc822 messages from the data a user has
entered, and sending the messages via smtp. address book - the address book contains lists of people and all attributes associated with them such as their e-mail address, phone number, etc. ...
Mailnews and Mail code review requirements
ui-reviews this reduces the chance that work is rejected due to needing further user experience changes, and hence is aimed at saving time for the developer and reviewers. all patches that affect user experience or interfaces on thunderbird should have ui-review on those patches in addition to the reviews required below. to obtained a ui-review on an attachment, set ui-review to '?' and
enter :bwinton (for blake winton) as the requestee. mike conley (:mconley) can also provide useful feedback, but blake is the current ultimate decider for ui choices in thunderbird. rules for all patches affecting mailnews/ and mail/ wherever possible, significant patches in a certain area should be reviewed by one of the listed sub-module owner/reviewers. peers may grant review in any area...
Using MAPI with Thunderbird's Windows 7 developer builds
f the bin directory, run these two commands: helper.exe /setasdefaultappglobal helper.exe /setasdefaultappuser create an elevated shell and register the mapi proxy.dll as a com server. (one way to create an elevated shell is to invoke the command prompt from the start menu, right click, and select run as administrator.) in the elevated shell, change to the objdir/mozilla/dist/bin directory and
enter this command: regsvr32 mapiproxy_inuse.dll ...
Using the Mozilla source server
l, you'll need cvs.exe, added to your path (the cvs.exe from mozillabuild has problems, use this one instead) note: do not use the cvs from mozillabuild, it will not work! set up symbols follow the instructions for using the mozilla symbol server. once the symbol path is set you must now enable source server. using the source server in windbg in the windbg command line, type .srcfix and hit
enter. this enables source server support. now, when you click on a frame in the "calls" window, windbg will prompt you about running cvs to download the associated source code. if you click "yes", windbg will display *busy* in the status bar while it downloads the source, and then it will automatically open the file and highlight the current line. using the source server in visual studio not...
Mozilla
ized windows installer of seamonkey preamble: not all of the programs listed below are necessary. some of them are simply the ones i use because i like them, while others are scripts that i've created to speed up the work. you can in every case choose the program you prefer to do some operations, and you can also decide not to use any of my scripts and manually
enter all of the commands by hand. it's your choice! creating a login manager storage module the login manager manages and stores user passwords. extensions can replace the built-in password storage with their own implementation. this can be useful if you want to integrate a gecko application's password management with an existing password mana...
Preferences System
height (in em) for platforms where the window size does not change as the selected panel is changed (e.g. windows). usage in xulrunner applications when calling opendialog() to open a preferences dialog, "toolbar" should be included in the features string. ...
Accessibility Inspector - Firefox Developer Tools
as described above. role — the item's role, as described above. actions — a list of actions that can be performed on the item, for example, a pushbutton would have "press" listed, while a link would have "jump" listed. value — the value of the item. this can mean different things depending on the type of the item; for example, a form input (role: entry) would have a value of whatever is
entered in the input, whereas a link's value would be the url in the corresponding <a> element's href. domnode — the type of dom node that the item in the accessibility tree represents. you can click on the "target" icon that comes after it to select the node in the page inspector. hovering over the "target" icon highlights the dom node in the page content. description — any further descriptio...
DOM Inspector FAQ - Firefox Developer Tools
from collapsing sequences of whitespace will not be hidden. i'm having trouble finding a specific node in the dom tree. isn't there is a faster way to find it than navigating the tree? sure. you can do a search via the node's name, id, or an attribute/value pair. choose the find nodes... menu item from the edit menu in an inspector window that is inspecting the document you wish to search, and
enter your search criteria there. the dom inspector's search uses javascript regexps to find nodes for tag and attribute searches, and will do partial matching. for example, if you search nodes' tags for "tab", you'll get matches for tabpanel and tabbox as well as tab. to restrict the search, you can use the beginning-of-string and end-of-string markers; e.g., searching nodes for "^tab$" will return on...
Introduction to DOM Inspector - Firefox Developer Tools
n this list. the dom inspector keeps track of all the windows that are open, so to inspect the dom of a particular window in the dom inspector, simply access that window as you would normally and then choose its title from this dynamically updated menulist. inspecting arbitrary urls you may also inspect the dom of arbitrary urls by using the inspect a url menuitem in the file menu, or by just
entering a url into the dom inspector's address bar and clicking inspect or pressing
enter. for example, you can
enter http://www.mozilla.org in the address bar and see the dom structure of the mozilla.org home page. you should not use this approach to inspect chrome documents. instead, ensure that the document loads via normal means and use the inspect chrome document menupopup to select it for inspe...
Browser Console - Firefox Developer Tools
nd modify the browser's ui by creating, changing and removing xul elements. controlling the browser the command line interpreter gets access to the tabbrowser object, through the gbrowser global, and that enables you to control the browser through the command line. ...
Examine, modify, and watch variables - Firefox Developer Tools
there: watch an expression watch expressions are expressions that are evaluated each time execution pauses. you can then examine the results of these expressions. these are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. to add a watch expression, click in the box that says "add watch expression" and
enter a javascript expression whose output you'd like to monitor as you step through code. then start running your code. the watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. at that point, a box showing your active watch expressions and their current values will appear: you can step through your code, watching the value of the...
Set watch expressions - Firefox Developer Tools
as you step through code, the debugger will watch the expression and return any results. to set a watch expression, expand the watch expressions sidebar, then click "add watch expression." type the expression you'd like to watch into the text field. the debugger will save the expression and watch it as you step through your code. ...
Set a breakpoint - Firefox Developer Tools
ertain value at the time. you can set a conditional breakpoint using the context menu (see above), or by highlighting the line you want to break at in the source pane and pressing ctrl + shift + b (windows/linux) or cmd + shift + b (macos). when you first choose to set a conditional breakpoint, a text entry line will appear into which you add the condition you want it to break on: once you've
entered your condition and pressed
enter/return, the line number will be highlighted in orange: breakpoints list once you've set some breakpoints, the breakpoints list in the right-hand column shows the filename and line number for each one: unsetting a breakpoint once a breakpoint has been set, you can unset it again in various ways: click on the line number highlight. highlight the line o...
Set a conditional breakpoint - Firefox Developer Tools
n evaluates to true. this makes it possible to debug specific scenarios, such as bugs that only happen on odd entries in a list, or errors that occur the last time through a loop, for example. to set a conditional breakpoint, activate the context menu in the source pane, on the line where you want the breakpoint, and select "add conditional breakpoint". you'll then see a textbox where you can
enter the expression. press return to finish. conditional breakpoints are shown as orange arrows laid over the line number. if you context-click on any breakpoint, you'll see a menu item "edit breakpoint". you can use this to modify an existing condition or to add a condition to a normal breakpoint. ...
Step through code - Firefox Developer Tools
when the debugger is stopped at a breakpoint, you can step through it using four buttons in the toolbar: in order, the buttons are: play: run to the next breakpoint step over: advance to the next line in the same function. ...
Set an XHR breakpoint - Firefox Developer Tools
t) breakpoint breaks code execution when an xhr request is dispatched so that you can examine the current state of the program. you can break on all requests or on those that include a specific url. to turn on the feature: open the debugger click on "pause on any url" which acts as a wild card, causing the code to pause on any call, or, click the plus sign next to the xhr breakpoints header,
enter the url in which you are interested, and press
enter. note: if you
enter a key word instead of a url, code execution will pause on any call to a url that contains that keyword. when your code breaks on an xhr request, the righthand pane will have two additional sections: call stack the list of functions that were executed in order ot get to the currently executing code. click on an ite...
Set event listener breakpoints - Firefox Developer Tools
ind and expand the event listener breakpoints section in the right hand column. to break when event listeners are hit, check the boxes next the events you are interested in. all of the standard events supported in your version of firefox are listed, arranged by which api or api area they're part of. now when a keydown, keyup, keypress, or input event occurs, execution will pause as soon as it
enters the listener code. when execution pauses, the source pane displays the highlighted line of the javascript code that is next to be executed, along with the surrounding code for context. in addition, you get a box overlaid on the viewport saying "paused on event breakpoint", with buttons to step over that line of code or resume execution. you could add regular breakpoints at the entry point of...
Debugger.Memory - Firefox Developer Tools
initially disabled in a new debugger. assignment is fallible: if the debugger cannot track allocation sites, it throws an error instance. you can retrieve the allocation site for a given object with the debugger.object.prototype.allocationsite accessor property. allocationsamplingprobability a number between 0 and 1 that indicates the probability with which each new allocation should be
entered into the allocations log. 0 is equivalent to “never”, 1 is “always”, and .05 would be “one out of twenty”. the default is 1, or logging every allocation. note that in the presence of multiple debugger instances observing the same allocations within a global’s scope, the maximum allocationsamplingprobability of all the debuggers is used. maxallocationsloglength the maximum ...
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
nfig, and set the devtools.chrome.enabled preference to true: setting the 'devtools.chrome.enabled' preference open a developer scratchpad (menu button > developer > scratchpad), and select "browser" from the "environment" menu. (this menu will not be present unless you have changed the preference as explained above.) selecting the 'browser' context in the scratchpad
enter the following code in the scratchpad: // this simply defines the 'debugger' constructor in this // scratchpad; it doesn't actually start debugging anything. components.utils.import('resource://gre/modules/jsdebugger.jsm'); adddebuggertoglobal(window); (function () { // the debugger we'll use to observe a tab's allocation. var dbg; // start measuring the selected tab's main window's mem...
Tutorial: Set a breakpoint - Firefox Developer Tools
scratchpad panel, which is not enabled by default. to enable it, click on the options gear at the upper right of the browser content toolbox, and make sure the “scratchpad” box in the “default developer tools” section the left is checked. the scratchpad panel should appear at the top of the toolbox alongside the console, debugger, and memory panels. click on the scratchpad panel and
enter the following code: components.utils.import("resource://gre/modules/jsdebugger.jsm"); components.utils.import("resource://gre/modules/console.jsm"); // this simply defines 'debugger' in this scratchpad; // it doesn't actually start debugging anything. adddebuggertoglobal(this); // create a 'debugger' instance. var dbg = new debugger; // make the tab's top window a debuggee, and get a // deb...
Debugger-API - Firefox Developer Tools
idered debuggees. a debugger observes only execution taking place in the scope of these global objects. you can set functions to be called when new stack frames are pushed; when new code is loaded; and so on. omitted from this picture are debugger.source instances, which represent javascript compilation units. a debugger.source can furnish a full copy of its source code, and explain how the code
entered the system, whether via a call to eval, a <script> element, or otherwise. a debugger.script points to the debugger.source from which it is derived. also omitted is the debugger’s debugger.memory instance, which holds methods and accessors for observing the debuggee’s memory use. all these types follow some general conventions, which you should look through before drilling down into any pa...
Deprecated tools - Firefox Developer Tools
ith javascript code. you can write, run, and examine the result of code that interacts with the web page. alternatives in firefox 71+, you can write multi-line javascript code in the web console editor mode, making it similar to the scratchpad. the editor mode can be triggered clicking on the icon on the right of the console input, or with ctrl + b (cmd + b on macos) when in editor mode, the
enter key adds a new line in the input, and you can evaluate the expression using ctrl +
enter (cmd +
enter on macos). when evaluating, the input isn't cleared, which makes it possible to quickly iterrate over a snippet of code. the results are displayed in the console output, to the right of the input, providing immediate feedback. unlike in scratchpad, errors are properly displayed in the output ...
Index - Firefox Developer Tools
es. a conditional breakpoint also has a condition associated with it, which is represented as an expression. when the program reaches the line, the debugger pauses only if the breakpoint's specified expression evaluates to true. 130 set watch expressions when debugging code, sometimes it's useful to watch expressions as executions are paused. the debugger features a pane for
entering expressions to be watched (watch expressions). as you step through code, the debugger will watch the expression and return any results. 131 step through code debugger, devtools, javascript, step through code when the debugger is stopped at a breakpoint, you can step through it using four buttons in the toolbar: 132 use a source map the javascript sour...
Edit CSS filters - Firefox Developer Tools
that filter on a separate line. you can edit these lines, remove them individually, or drag the effects to change the order in which they are applied. you can also add new effects by selecting an effect from the dropdown list at the bottom of the dialog. once you have selected the effect you want to add, click the plus sign (+) to the right of the dropdown list. once you have added an effect,
enter the settings you want and then press
enter to update the effect. the change will be apparent as soon as youpress
enter. saving filter presets from firefox 42 onwards, you can also add filters to a list of presets. the list of presets will be preserved between browser sessions, making it easy to apply the settings in the future. you can save the current filter to the preset list: click to edi...
Edit Shape Paths in CSS - Firefox Developer Tools
d by activating the shape path editor with a regular click on the icon, and you can use the context menu (ctrl/cmd + click) to access additional functionality. circle() if the value of shape-outside is circle(), you are creating a circle basic shape. clicking on the shapes icon next to the value of circle() will highlight the shape, and also give you the option to resize the circle or move its c
enter. if you move or resize the circle past the margin box, the edges become clipped by it. in the rules panel you can see the values for circle() change as you edit the shape. you can then copy these values back into your stylesheet to create the new, tweaked shape path. ellipse() if the value of shape-outside is ellipse() then you are using the ellipse basic shape. the ellipse() value works in ...
Responsive Design Mode - Firefox Developer Tools
(or cmd + opt + m on macos). controlling responsive design mode with responsive design mode enabled, the content area for web pages is set to the screen size for a mobile device. initially, it's set to 320 x 480 pixels. note: the device you select when in responsive design mode and the orientation (portrait or landscape) is saved between sessions. information for the selected device is c
entered over the display. from left to right, the display includes: name of the selected device - a drop-down list that includes whatever devices you have selected from the device settings screen. screen size - you can edit the width and height values to change the device size by editing a number directly or using the up and down keys to increase or decrease the value by 1 pixels on each keypress o...
Style Editor - Firefox Developer Tools
nsive design view for creating and debugging responsive layouts: from firefox 46 onwards, if an @media rule contains a screen size in a condition, then it is made clickable: clicking it then resizes the screen to that size using the responsive design view: creating and importing style sheets you can create a new style sheet by clicking the new button in the toolbar. then you can just start
entering css into the new editor and watch as the new styles are applied in real time just like changes to the other sheets. you can load a style sheet from disk and apply it to the page by clicking the import button. source map support web developers often create css files using a preprocessor like sass, less, or stylus. these tools generate css files from a richer and more expressive syntax. if ...
Web Audio Editor - Firefox Developer Tools
or example, here's what the oscillatornode looks like: with the violent theremin demo, the frequency parameter is modified as the user moves the mouse left and right, and you can see this reflected in the node inspector. however, the value isn't updated in real time: you have to click the node again to see the updated value. if you click on a value in the node inspector you can modify it: press
enter or tab and the new value takes effect immediately. bypassing nodes new in firefox 38. in the pane that shows you the node's details, there's an on/off button: click it, and the graph will be modified to bypass this node, so it will no longer have any effect. nodes that are bypassed are shown with a hatched background: ...
Console messages - Firefox Developer Tools
ges of that type are available. for example, "warnings (25)". network requests with response codes in the 400-499 (client error) or 500-599 (server error) ranges are considered errors. their display is controlled by the errors button, not the requests button. filtering by text to see only messages that contain a specific string, type in the text box labeled "filter output". for example, if you
entered the string img into the text box, you would have a list something like this: a small "x" icon appears at the right end of the text box when you have
entered a string on which to filter the output. click the "x" icon to clear the filter and show the entire list again. you can negate a text search by prefixing it with the - character. for example, -img shows only items that do not contain the...
Web Console Helpers - Firefox Developer Tools
css selector string selector, returning an array of dom nodes descended from element that match. if unspecified, element defaults to document. this is like for document.queryselectorall(), but returns an array instead of a nodelist. $0 the currently-inspected element in the page. $_ stores the result of the last expression executed in the console's command line. for example, if you type "2+2 <
enter>", then "$_ <
enter>", the console will print 4. $x(xpath, element, resulttype) evaluates the xpath xpath expression in the context of element and returns an array of matching nodes. if unspecified, element defaults to document. the resulttype parameter specifies the type of result to return; it can be an xpathresult constant, or a corresponding string: "number", "string", "bool", "node", or "no...
Web console keyboard shortcuts - Firefox Developer Tools
ugh command history/step backwards through matching commands f9 ctrl + r f9 step forward through matching command history (after initiating reverse search) shift + f9 ctrl + s shift + f9 move to the beginning of the line home ctrl + a ctrl + a move to the end of the line end ctrl + e ctrl + e execute the current expression
enter return
enter add a new line, for
entering multiline expressions shift +
enter shift + return shift +
enter autocomplete popup these shortcuts apply while the autocomplete popup is open: command windows macos linux choose the current autocomplete suggestion tab tab tab cancel the autocomplete popup esc esc esc ...
about:debugging - Firefox Developer Tools
ng in firefox for desktop. you can also reload the page by clicking the reload button next to the url bar, and (starting 79), navigate backward or forward in the browsing history with the back and forward buttons. connecting over the network you can connect to a firefox debug server on your network, or on your debugging machine using the network location settings of the about:debugging page.
enter the location and port on which the debugger server is running. when you do, it is added to the network locations list along with the devices, as shown below: this firefox the this firefox tab combines the features of extensions, tabs, and workers into a single tab with the following sections: temporary extensions displays a list of the extensions that you have loaded using the load tempor...
AddressErrors.recipient - Web APIs
an object based on addresserrors includes a recipient property when the address's recipient property couldn't be validated. the returned string explains the error and should offer suggestions for how to correct it. syntax var recipi
enterror = addresserrors.recipient; value if the value specified in the paymentaddress object's recipient property could not be validated, this property contains a domstring offering a human-readable explanation of the validation error and offers suggestions for correcting it. if the recipient value was validated successfully, this property is not included in the addresserrors object. specifications specification status comment payment request apithe definition of 'addresserrors.recipient' in that specification. candidate recommenda...
Animation.oncancel - Web APIs
the oncancel property of the web animations api's animation interface is the event handler for the cancel event. the cancel event can be triggered manually with animation.cancel() when the animation
enters the "idle" play state from another state, such as when the animation is removed from an element before it finishes playing creating a new animation that is initially idle does not trigger a cancel event on the new animation. syntax var cancelhandler = animation.oncancel; animation.oncancel = cancelhandler; value a function to be executed when the animation is cancelled, or null if there is no cancel event handler. examples if this animation is canceled, remove its element. animation.oncancel = function() { animation.effect.target.remove(); }; specifications specific...
Animation.ready - Web APIs
since the same promise is used for both pending play and pending pause requests, authors are advised to check the state of the animation when the promise is resolved. ...
BaseAudioContext.sampleRate - Web APIs
per second, used by all nodes in this audio context. this limitation means that sample-rate converters are not supported. syntax baseaudiocontext.samplerate; value a floating point number indicating the audio context's sample rate, in samples per second. example note: for a full web audio example implementation, see one of our web audio demos on the mdn github repo, like panner-node. try
entering audioctx.samplerate into your browser console. var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink browsers require a prefix ... console.log(audioctx.samplerate); specifications specification status comment web audio apithe definition of 'samplerate' in that specification. working draft ...
CSSImageValue - Web APIs
imagevalue object represents an <image> that involves an url, such as url() or image(), but not linear-gradient() or element() . properties none. methods none. examples we create an element <button>magic wand</button> we add some css, including a background image requesting a binary file: button { display: inline-block; min-height: 100px; min-width: 100px; background: no-repeat 5% c
enter url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we get the element's style map. we then get() the background-image from the stylemap and stringify it: // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // return the cssimagevalue example console.l...
CSSStyleDeclaration.setProperty() - Web APIs
</button> <button class="bgcolor">background</button> <button class="color">text</button> </div> <div class="box"> <p>box</p> </div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: c
enter; } div button { flex: 1; margin: 20px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: c
enter; align-items: c
enter; height: calc(100% - 70px); } .box p { width: 50%; text-align: c
enter; font-weight: bold; font-size: 40px; height: 150px; line-height: 150px; background: red; border: 5px solid purple; color: white; transition: all 1s; ...
CanvasRenderingContext2D.clip() - Web APIs
nding rule. path a path2d path to use as the clipping region. examples a simple clipping region this example uses the clip() method to create a clipping region according to the shape of a circular arc. two rectangles are then drawn; only those parts within the clipping region are rendered. html <canvas id="canvas"></canvas> javascript the clipping region is a full circle, with its c
enter at (100, 75), and a radius of 50. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(100, 75, 50, 0, math.pi * 2); ctx.clip(); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100); result ...
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
riate drawbutton(button2, 20, 80); if (ctx.ispointinpath(x, y)) { button2.focus(); } } function drawbutton(el, x, y) { const active = document.activeelement === el; const width = 150; const height = 40; // button background ctx.fillstyle = active ? 'pink' : 'lightgray'; ctx.fillrect(x, y, width, height); // button text ctx.font = '15px sans-serif'; ctx.textalign = 'c
enter'; ctx.textbaseline = 'middle'; ctx.fillstyle = active ? 'blue' : 'black'; ctx.filltext(el.textcontent, x + width / 2, y + height / 2); // define clickable area ctx.beginpath(); ctx.rect(x, y, width, height); // draw focus ring, if appropriate ctx.drawfocusifneeded(el); } result specifications specification status comment html living standardthe defi...
CanvasRenderingContext2D.ellipse() - Web APIs
the canvasrenderingcontext2d.ellipse() method of the canvas 2d api adds an elliptical arc to the current sub-path. syntax void ctx.ellipse(x, y, radiusx, radiusy, rotation, startangle, endangle [, anticlockwise]); the ellipse() method creates an elliptical arc c
entered at (x, y) with the radii radiusx and radiusy. the path starts at startangle and ends at endangle, and travels in the direction given by anticlockwise (defaulting to clockwise). parameters x the x-axis (horizontal) coordinate of the ellipse's c
enter. y the y-axis (vertical) coordinate of the ellipse's c
enter. radiusx the ellipse's major-axis radius. must be non-negative. radiusy the ellipse's minor-axis radius. must be non-negative. rotation the rotation of the ellipse, expressed in radians. startangle the angl...
CanvasRenderingContext2D.fill() - Web APIs
hod. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.fill(); result specifying a path and a fillrule this example saves some intersecting lines to a path2d object. the fill() method is then used to render the object to the canvas. a hole is left unfilled in the object's c
enter by using the "evenodd" rule; by default (with the "nonzero" rule), the hole would also be filled. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create path let region = new path2d(); region.moveto(30, 90); region.lineto(110, 20); region.lineto(240, 130); region.lineto(60, 130); region.lineto(190, 20); ...
CanvasRenderingContext2D.globalAlpha - Web APIs
property to 0.2 (20% opaque); this alpha level will apply to all of our transparent shapes. after that, we use a for loop to draw a series of circles with increasing radii. with each new circle, the opacity of the previous circles underneath is effectively increased. if we were to increase the step count (and thus draw more circles), the background would eventually disappear completely from the c
enter of the image. <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fil...
CanvasRenderingContext2D.lineJoin - Web APIs
oints at the exact same position) are also ignored. note: lines can be drawn with the stroke(), strokerect(), and stroketext() methods. syntax ctx.linejoin = "bevel" || "round" || "miter"; options there are three possible values for this property: "round", "bevel", and "miter". the default is "miter". "round" rounds off the corners of a shape by filling an additional sector of disc c
entered at the common endpoint of connected segments. the radius for these rounded corners is equal to the line width. "bevel" fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment. "miter" connected segments are joined by extending their outside edges to connect at a single point, with the effect of filli...
CanvasRenderingContext2D.stroke() - Web APIs
the stroke is drawn using the non-zero winding rule, which means that path intersections will still get filled. syntax void ctx.stroke(); void ctx.stroke(path); parameters path a path2d path to stroke. ...
CanvasRenderingContext2D - Web APIs
nedash() sets the current line dash pattern. canvasrenderingcontext2d.linedashoffset specifies where to start a dash array on a line. text styles the following properties control how text is laid out. canvasrenderingcontext2d.font font setting. default value 10px sans-serif. canvasrenderingcontext2d.textalign text alignment setting. possible values: start (default), end, left, right, c
enter. canvasrenderingcontext2d.textbaseline baseline alignment setting. possible values: top, hanging, middle, alphabetic (default), ideographic, bottom. canvasrenderingcontext2d.direction directionality. possible values: ltr, rtl, inherit (default). fill and stroke styles fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes. canvasr...
A basic ray-caster - Web APIs
round and sky are drawn, the camera position and/or orientation are updated, and the rays are cast out. as the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall. the height of the sliver is also modulated by the distance from the camera to the wall, and is drawn c
entered over the horizon line. the code i ended up with is a regurgitated amalgam of the raycaster chapters from an old andré lamothetricks of the game programming gurus book (isbn: 0672305070), and a java raycaster i found online, filtered through my compulsion to rename everything so it makes sense to me, and all the tinkering that had to be done to make things work well. results the canvas in sa...
Compositing and clipping - Web APIs
{ ctx.rotate(math.pi / 5); if (i % 2 === 0) { ctx.lineto((r / 0.525731) * 0.200811, 0); } else { ctx.lineto(r, 0); } } ctx.closepath(); ctx.fill(); ctx.restore(); } <canvas id="canvas" width="150" height="150"></canvas> draw(); in the first few lines of code, we draw a black rectangle the size of the canvas as a backdrop, then translate the origin to the c
enter. next, we create the circular clipping path by drawing an arc and calling clip(). clipping paths are also part of the canvas save state. if we wanted to keep the original clipping path we could have saved the canvas state before creating the new one. everything that's drawn after creating the clipping path will only appear inside that path. you can see this clearly in the linear gradient that's ...
Drawing text - Web APIs
the text a bit larger than the default size. there are some more properties which let you adjust the way the text gets displayed on the canvas: font = value the current text style being used when drawing text. this string uses the same syntax as the css font property. the default font is 10px sans-serif. textalign = value text alignment setting. possible values: start, end, left, right or c
enter. the default value is start. textbaseline = value baseline alignment setting. possible values: top, hanging, middle, alphabetic, ideographic, bottom. the default value is alphabetic. direction = value directionality. possible values: ltr, rtl, inherit. the default value is inherit. these properties might be familiar to you, if you have worked with css before. the following diagram from the...
CompositionEvent - Web APIs
the dom compositionevent represents events that occur due to the user indirectly
entering text. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86...
DOMError - Web APIs
error type names (see below). domerror.message read only returns a domstring representing a message or description associated with the given error type name. error types type description indexsizeerror the index is not in the allowed range (e.g. thrown in a range object). hierarchyrequesterror the node tree hierarchy is not correct. wrongdocum
enterror the object is in the wrong document. invalidcharactererror the string contains invalid characters. nomodificationallowederror the object can not be modified. notfounderror the object can not be found here. notsupportederror the operation is not supported invalidstateerror the object is in an invalid state. syntaxerror t...
DOMException - Web APIs
indicate the legacy code value and constant name that were used in the past. indexsizeerror the index is not in the allowed range. for example, this can be thrown by the range object. (legacy code value: 1 and legacy constant name: index_size_err) hierarchyrequesterror the node tree hierarchy is not correct. (legacy code value: 3 and legacy constant name: hierarchy_request_err) wrongdocum
enterror the object is in the wrong document. (legacy code value: 4 and legacy constant name: wrong_document_err) invalidcharactererror the string contains invalid characters. (legacy code value: 5 and legacy constant name: invalid_character_err) nomodificationallowederror the object cannot be modified. (legacy code value: 7 and legacy constant name: no_modification_allowed_err) notfounderror th...
DOMMatrixReadOnly.scale() - Web APIs
transformation. if no origin is supplied, this defaults to 0. originz optional a z-coordinate for the origin of the transformation. if no origin is supplied, this defaults to 0. if this value is anything other than 0, the resulting matrix will be 3d. return value returns a dommatrix containing a new matrix being the result of the matrix x and y dimensions being scaled by the given factor, c
entered on the origin given. the original matrix is not modified. if a scale is applied about the z-axis, the resulting matrix will be a 4x4 3d matrix. note: at time of writing, firefox still supports an older version of the specification that accepts either one or three values. dommatrix.scale(scale[, originx][, originy]) we'll show an example of how you can deal with the cross-browser support im...
DataTransfer.effectAllowed - Web APIs
copied from its present location to the drop location. the move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that some form of relationship or connection will be created between the source and drop locations. this property should be set in the dragstart event to set the desired drag effect for the drag source. within the drag
enter and dragover event handlers, this property will be set to whatever value was assigned during the dragstart event, thus effectallowed may be used to determine which effect is permitted. assigning a value to effectallowed in events other than dragstart has no effect. syntax datatransfer.effectallowed; values a domstring representing the drag operation that is allowed. the possible values are:...
DataTransfer.setDragImage() - Web APIs
used to set the custom image to be used. the image will typically be an <image> element but it can also be a <canvas> or any other visible element. the method's x and y coordinates define how the image should appear relative to the mouse pointer. these coordinates define the offset into the image where the mouse cursor should be. for instance, to display the image so that the pointer is at its c
enter, use values that are half the width and height of the image. this method must be called in the dragstart event handler. syntax void datatransfer.setdragimage(img | element, xoffset, yoffset); arguments img | element an image element element to use for the drag feedback image. if element is an img element, then set the drag data store bitmap to the element's image (at its intrinsic size)...
Document: DOMContentLoaded event - Web APIs
dosomething(); } live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: c
enter; justify-content: c
enter; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.locat...
Document: keydown event - Web APIs
ey is pressed. unlike the keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value. bubbles yes cancelable yes interface keyboardevent 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. 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).
Document: keyup event - Web APIs
for example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. an uppercase "a" is reported as 65 by all events. ...
Document.mozSetImageElement() - Web APIs
ent css function. imageelement is the new element to use as the background corresponding to that image element string. specify null to remove the background element. example this example changes the background of a <div> block each time the block is clicked by the user. view this example live. <style type="text/css"> #mybox { background-image: -moz-element(#canvasbg); text-align: c
enter; width: 400px; height: 400px; cursor: pointer; } </style> the css defined by the <style> block above is used by our <div> to use an element with the id "canvasbg" as its background. var c = 0x00; function clicked() { var canvas = document.createelement("canvas"); canvas.setattribute("width", 100); canvas.setattribute("height", 100); var ctx = canvas.getcontext('2d'); c...
Document.querySelector() - Web APIs
th that id is returned. css pseudo-elements will never return any elements, as specified in the selectors api. escaping special characters to match against an id or selectors that do not follow standard css syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash ("\"). ...
Document: readystatechange event - Web APIs
e examples live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: c
enter; justify-content: c
enter; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.locat...
Document.writeln() - Web APIs
note: document.writeln (like document.write) does not work in xhtml documents (you'll get a "operation is not supported" (ns_error_dom_not_supported_err) error on the error console). ...
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. bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="ex...
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. bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="examp...
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. bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label...
Element: error event - Web APIs
class="controls"> <button id="img-error" type="button">generate image error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: c
enter; justify-content: c
enter; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener('error', (event) => { log.textco...
Element: fullscreenchange event - Web APIs
een">toggle fullscreen mode</button> </div> javascript document.getelementbyid('fullscreen-div').addeventlistener('fullscreenchange', (event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one. if not, the value // of the property is null. if (document.fullscreenelement) { console.log(`element: ${document.fullscreenelement.id}
entered fullscreen mode.`); } else { console.log('leaving full-screen mode.'); } }); document.getelementbyid('toggle-fullscreen').addeventlistener('click', (event) => { if (document.fullscreenelement) { // exitfullscreen is only available on the document object. document.exitfullscreen(); } else { document.getelementbyid('fullscreen-div').requestfullscreen(); } }); specifica...
Element.getClientRects() - Web APIs
n>caption</caption> <thead> <tr><th>thead</th></tr> </thead> <tbody> <tr><td>tbody</td></tr> </tbody> </table> </div> css the css draws borders around the paragraph and the <span> inside each <div> block for the first example, around the <ol> and <li> for the second example, and around <table>, <th>, and <td> elements for the third example. strong { text-align: c
enter; } div { display: inline-block; width: 150px; } div p, ol, table { border: 1px solid blue; } span, li, th, td { border: 1px solid green; } javascript the javascript code draws the client rects for all html elements that have css class withclientrectsoverlay assigned. function addclientrectsoverlay(elt) { /* absolutely position a div over each client rect so that its border width ...
Element.hasAttributeNS() - Web APIs
calname) result is the boolean value true or false. namespace is a string specifying the namespace of the attribute. localname is the name of the attribute. ...
Element.insertAdjacentText() - Web APIs
ode is in a tree and has an element parent. example beforebtn.addeventlistener('click', function() { para.insertadjacenttext('afterbegin',textinput.value); }); afterbtn.addeventlistener('click', function() { para.insertadjacenttext('beforeend',textinput.value); }); have a look at our insertadjacenttext.html demo on github (see the source code too.) here we have a simple paragraph. you can
enter some text into the form element, then press the insert before and insert after buttons to insert it before or after the existing paragraph text using insertadjacenttext(). note that the existing text node is not added to — further text nodes are created containing the new additions. polyfill you can polyfill the insertadjacenttext() method in internet explorer 5.5 (maybe earlier) and higher w...
Element: keydown event - Web APIs
s pressed. unlike the keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value. bubbles yes cancelable yes interface keyboardevent 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. 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 compati...
Element: keyup event - Web APIs
for example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. an uppercase "a" is reported as 65 by all events. ...
Element: mouseout event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property onmouseout examples the following examples show the use of the mouseout event. ...
Element.removeAttributeNode() - Web APIs
the removeattributenode() method of the element object removes the specified attribute from the current element. syntax removedattr = element.removeattributenode(attributenode) attributenode is the attr node that needs to be removed. removedattr is the removed attr node. example // given: <div id="top" align="c
enter" /> var d = document.getelementbyid("top"); var d_align = d.getattributenode("align"); d.removeattributenode(d_align); // align is now removed: <div id="top" /> notes if the removed attribute has a default value, it is immediately replaced. the replacing attribute has the same namespace uri and local name, as well as the original prefix, when applicable. there is no removeattributenodens method; the removeattributenode method can remove both namespaced attributes and ...
Element.scrollIntoView() - Web APIs
ill be aligned to the bottom of the visible area of the scrollable ancestor. corresponds to scrollintoviewoptions: {block: "end", inline: "nearest"}. scrollintoviewoptions optional is an object with the following properties: behavior optional defines the transition animation. one of auto or smooth. defaults to auto. block optional defines vertical alignment. one of start, c
enter, end, or nearest. defaults to start. inline optional defines horizontal alignment. one of start, c
enter, end, or nearest. defaults to nearest. example var element = document.getelementbyid("box"); element.scrollintoview(); element.scrollintoview(false); element.scrollintoview({block: "end"}); element.scrollintoview({behavior: "smooth", block: "end", inline: "nearest"}); notes the...
Element.setAttributeNS() - Web APIs
value) namespace is a string specifying the namespace of the attribute. name is a string identifying the attribute by its qualified name; that is, a namespace prefix followed by a colon followed by a local name. value is the desired string value of the new attribute. ...
Comparison of Event Targets - Web APIs
listener('mouseover', handlemouseover, false); </script> </body> </html> use of target and relatedtarget the relatedtarget property for the mouseover event holds the node that the mouse was previously over. for the mouseout event, it holds the node that the mouse moved to. event type event.target event.relatedtarget mouseover the eventtarget which the pointing device
entered the eventtarget which the pointing device exited mouseout the eventtarget which the pointing device exited the eventtarget which the pointing device
entered todo: also needs descriptions for drag
enter and dragexit events. example <hbox id="outer"> <hbox id="inner" onmouseover="dump('mouseover ' + event.relatedtarget.id + ' > ' + event.target.id + '\n');" ...
Event.preventDefault() - Web APIs
> <input type="checkbox" id="id-checkbox"/> </form> <div id="output-box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault(). nowadays, you should usually use native html form validation instead. ...
FormData() - Web APIs
g line creates an empty formdata object: var formdata = new formdata(); // currently empty you could add a key/value pair to this using formdata.append: formdata.append('username', 'chris'); or you can specify the optional form argument when creating the formdata object, to prepopulate it with values from the specified form: <form id="myform" name="myform"> <div> <label for="username">
enter name:</label> <input type="text" id="username" name="username"> </div> <div> <label for="useracc">
enter account number:</label> <input type="text" id="useracc" name="useracc"> </div> <div> <label for="userfile">upload file:</label> <input type="file" id="userfile" name="userfile"> </div> <input type="submit" value="submit!"> </form> note: only successful form co...
GlobalEventHandlers.onkeypress - Web APIs
ide the <input> element. html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeypress = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result filter keys with a regular expression this example filters the characters typed into a form field using a regular expression. ...
GlobalEventHandlers.onpointerdown - Web APIs
the screen). in addition, the event's preventdefault() method is called to ensure that the mouseup event isn't triggered unnecessarily. html the html is extremely simple: <div id="target"> tap me, click me, or touch me! </div> css the css simply sets up the appearance of the target, and doesn't affect its functionality at all. #target { width: 400px; height: 30px; text-align: c
enter; font: 16px "open sans", "helvetica", sans-serif; color: white; background-color: blue; border: 2px solid darkblue; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } result the resulting output is shown below. try tapping, clicking, or touching the box and see what happens. for full effect, try it with a variety of...
HTMLDivElement - Web APIs
line="middle">htmldivelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmldivelement.align is a domstring representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context. the possible values are "left", "right", "justify", and "c
enter". methods no specific method; inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmldivelement' in that specification. living standard html5the definition of 'htmldivelement' in that specification. recommendation no change from document object model (dom) level 2 htm...
HTMLElement: beforeinput event - Web APIs
bubbles yes cancelable yes interface inputevent event handler property none sync / async sync composed yes default action update the dom element examples this example logs current value of the element immediately before replacing that value with the new one applied to the <input> element. ...
HTMLElement.hidden - Web APIs
lass="panel" hidden> <h1>thanks!</h1> <p>thank you <strong>so</strong> much for agreeing to be awesome today! now get out there and do awesome things awesomely to make the world more awesome!</p> </div> css the content is styled using the css below. .panel { font: 16px "open sans", helvetica, arial, sans-serif; border: 1px solid #22d; padding: 12px; width: 500px; text-align: c
enter; } .button { font: 22px "open sans", helvetica, arial, sans-serif; padding: 5px 36px; } h1 { margin-top: 0; font-size: 175%; } result specifications specification status comment html living standardthe definition of 'htmlelement.hidden' in that specification. living standard html 5.1the definition of 'htmlelement.hidden' in that specificatio...
HTMLEmbedElement - Web APIs
gnment-baseline="middle">htmlembedelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlembedelement.align is a domstring representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context. the possible values are "left", "right", "c
enter", and "justify". htmlembedelement.height is a domstring reflecting the height html attribute, containing the displayed height of the resource. htmlembedelement.name is a domstring representing the name of the embedded object. htmlembedelement.src is a domstring that reflects the src html attribute, containing the address of the resource. htmlembedelement.type is a domstring that reflect...
HTMLFormElement: submit event - Web APIs
t fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it. however, the submitevent which is sent to indicate the form's submit action has been triggered includes a submitter property, which is the button that was invoked to trigger the submit request. the submit event fires when the user clicks a submit button (<button> or <input type="submit">) or presses
enter while editing a field (e.g. <input type="text">) in a form. the event is not sent to the form when calling the form.submit() method directly. note: trying to submit a form that does not pass validation triggers an invalid event. in this case, the validation prevents form submission, and thus there is no submit event. examples this example uses eventtarget.addeventlistener() to listen for for...
HTMLHeadingElement - Web APIs
seline="middle">htmlheadingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlheadingelement.align is a domstring representing an enumerated attribute indicating alignment of the heading with respect to the surrounding context. the possible values are "left", "right", "justify", and "c
enter". methods no specific method; inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmlheadingelement' in that specification. living standard html5the definition of 'htmlheadingelement' in that specification. recommendation the align property is now obsolete. do...
HTMLImageElement.align - Web APIs
a domstring specifying one of the following strings which set the alignment mode for the image. baseline alignment these three values specify the alignment of the element relative to the text baseline. these should be replaced by using the css vertical-align property. bottom the bottom edge of the image is to be aligned vertically with the current text baseline. default value. middle the c
enter of the object should be aligned vertically with the current baseline. top the top edge of the object should be aligned vertically with the current baseline. it may be worth noting that vertical-align offers several additional options for its value; you may wish to consider these when changing your code to use it. floating images horizontally the left and right properties don't affect the ba...
HTMLImageElement.alt - Web APIs
y { margin: 0; padding: 0; } p { margin-block-start: 0; margin-block-end: 1em; margin-top: 0; margin-bottom: 1em; } .container { width: 100vh; height: 95vh; font: 16px arial,helvetica,sans-serif; } .left-margin { background-color: rgb(241, 240, 237, 255); width: 9em; height: 100%; float: left; margin-right: 5px; padding-right: 1em; display: flex; align-items: c
enter; justify-content: c
enter; } .left-margin img { width: 6em; } .contents { background-color: rgb(241, 240, 235, 255); height: 100%; margin-left: 2em; padding-top: 1em; padding-left: 2em; padding-right: 1em; } result images used as buttons when using an image as a button (by using it as the only visible child of an <a> element representing a hyperlink), the alt attribute must...
HTMLImageElement - Web APIs
t's containing block. htmlimageelement.y read only the integer vertical offset of the top border edge of the image's css layout box relative to the origin of the <html> element's containing block. obsolete properties htmlimageelement.align a domstring indicating the alignment of the image with respect to the surrounding context. the possible values are "left", "right", "justify", and "c
enter". this is obsolete; you should instead use css (such as text-align, which works with images despite its name) to specify the alignment. htmlimageelement.border a domstring which defines the width of the border surrounding the image. this is deprecated; use the css border property instead. htmlimageelement.hspace an integer value which specifies the amount of space (in pixels) to leave emp...
HTMLInputElement: invalid event - Web APIs
ment or its owner <form> is called. it is not checked on blur. examples if a form is submitted with an invalid value, the submittable elements are checked and, if an error is found, the invalid event will fire on the invalid element. in this example, when an invalid event fires because of an invalid value in the input, the invalid value is logged. ...
HTMLInputElement: search event - Web APIs
the search event is fired when a search is initiated usinng an <input> element of type="search". bubbles yes cancelable no interface event event handler property onsearch there are several ways a search can be initiated, such as by pressing
enter while the <input> is focused, or, if the incremental attribute is present, after a ua-defined timeout elapses since the most recent keystroke (with new keystrokes resetting the timeout so the firing of the event is debounced). current ua implementations of <input type="search"> have an additional control to clear the field. using this control also fires the search event. in that case the value of the <input> element will be the empty string. examples // addeventlistener version const input =...
HTMLObjectElement - Web APIs
middle">htmlobjectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlobjectelement.align is a domstring representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context. the possible values are "left", "right", "justify", and "c
enter". htmlobjectelement.archive is a domstring that reflects the archive html attribute, containing a list of archives for resources for this object. htmlobjectelement.border is a domstring that reflects the border html attribute, specifying the width of a border around the object. htmlobjectelement.code is a domstring representing the name of an applet class file, containing either the a...
HTMLParagraphElement - Web APIs
dle">htmlparagraphelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlparagraphelement.align a domstring representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context. the possible values are "left", "right", "justify", and "c
enter". methods no specific methods, inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmlparagraphelement' in that specification. living standard html5the definition of 'htmlparagraphelement' in that specification. recommendation the following property is now obsolete: a...
HTMLTableCellElement - Web APIs
es warning: these properties have been deprecated and should no longer be used. they are documented primarily to help understand older code bases. htmltablecellelement.align a domstring containing an enumerated value reflecting the align attribute. it indicates the alignment of the element's contents with respect to the surrounding context. the possible values are "left", "right", and "c
enter". htmltablecellelement.axis a domstring containing a name grouping cells in virtual. it reflects the obsolete axis attribute. htmltablecellelement.bgcolor a domstring containing the background color of the cells. it reflects the obsolete bgcolor attribute. htmltablecellelement.ch a domstring containing one single chararcter. this character is the one to align all the cell of a column ...
HTMLTableElement.align - Web APIs
the htmltableelement.align property represents the alignment of the table. syntax htmltableelement.align = alignment; var alignment = htmltableelement.align; parameters alignment domstring with one of the following values: left c
enter right example // set the alignmnet of a table var t = document.getelementbyid('tablea'); t.align = 'c
enter'; specification w3c dom 2 html specification htmltableelement .align. ...
HTMLTableElement - Web APIs
ally updated when the htmltableelement changes. obsolete properties warning: the following properties are obsolete. you should avoid using them. htmltableelement.align is a domstring containing an enumerated value reflecting the align attribute. it indicates the alignment of the element's contents with respect to the surrounding context. the possible values are "left", "right", and "c
enter". htmltableelement.bgcolor is a domstring containing the background color of the cells. it reflects the obsolete bgcolor attribute. htmltableelement.border is a domstring containing the width in pixels of the border of the table. it reflects the obsolete border attribute. htmltableelement.cellpadding is a domstring containing the width in pixels of the horizontal and vertical sapce be...
HTMLTableRowElement - Web APIs
t</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmltablerowelement.align is a domstring containing an enumerated value reflecting the align attribute. it indicates the alignment of the element's contents with respect to the surrounding context. the possible values are "left", "right", and "c
enter". htmltablerowelement.bgcolor is a domstring containing the background color of the cells. it reflects the obsolete bgcolor attribute. htmltablerowelement.cells read only returns a live htmlcollection containing the cells in the row. the htmlcollection is live and is automatically updated when cells are added or removed. htmltablerowelement.ch is a domstring containing one single chara...
HTMLTableSectionElement - Web APIs
ext></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmltablesectionelement.align is a domstring containing an enumerated value reflecting the align attribute. it indicates the alignment of the element's contents with respect to the surrounding context. the possible values are "left", "right", and "c
enter". htmltablesectionelement.rows read only returns a live htmlcollection containing the rows in the section. the htmlcollection is live and is automatically updated when rows are added or removed. htmltablesectionelement.ch is a domstring containing one single chararcter. this character is the one to align all the cell of a column on. it reflects the char and default to the decimal points as...
HTMLVideoElement.videoHeight - Web APIs
n the value of this property is 0, because neither video nor poster frame size information is yet available. about intrinsic width and height a user agent calculates the intrinsic width and height of the element's media by starting with the media's raw pixel width and height, then taking into account factors including: the media's aspect ratio. the media's clean aperture (the sub-rectangle c
entered within the media that matches the target aspect ratio). the target device's resolution. any other factors required by the media format. if the element is currently displaying the poster frame rather than rendered video, the poster frame's intrinsic size is considered to be the size of the <video> element. if at any time the intrinsic size of the media changes and the element's readystate i...
HTMLVideoElement.videoWidth - Web APIs
n the value of this property is 0, because neither video nor poster frame size information is yet available. about intrinsic width and height a user agent calculates the intrinsic width and height of the element's media by starting with the media's raw pixel width and height, then taking into account factors including: the media's aspect ratio. the media's clean aperture (the sub-rectangle c
entered within the media that matches the target aspect ratio). the target device's resolution. any other factors required by the media format. if the element is currently displaying the poster frame rather than rendered video, the poster frame's intrinsic size is considered to be the size of the <video> element. if at any time the intrinsic size of the media changes and the element's readystate i...
In depth: Microtasks and the JavaScript runtime environment - Web APIs
ues until the queue is empty—even if new ones are scheduled in the interim. in other words, microtasks can enqueue new microtasks and those new microtasks will execute before the next task begins to run, and before the end of the current event loop iteration. problems because your code runs in the same thread, using the same event loop, as the browser's user interface, if your code blocks or
enters an infinite loop, the browser itself will stall. even sluggish performance, whether caused by a bug or because of complex work being done by your code, can cause the user to suffer a sluggish browser. when multiple programs and multiple code objects within those programs start to try to work at once, alongside a browser which also needs processor time—let alone time to render and draw the sit...
Recommended Drag Types - Web APIs
xt/uri-list and text/plain types. these types should be added afterward so that the more specific application/x-moz-file type has higher priority. multiple files will be received during a drop as multiple items in the data transfer. see dragging and dropping multiple items for more details about this. ...
HTML Drag and Drop API - Web APIs
imes, such as the drag and dragover events. each drag event type has an associated global event handler: event on event handler fires when… drag ondrag …a dragged item (element or text selection) is dragged. dragend ondragend …a drag operation ends (such as releasing a mouse button or hitting the esc key; see finishing a drag.) drag
enter ondrag
enter …a dragged item
enters a valid drop target. (see specifying drop targets.) dragexit ondragexit …an element is no longer the drag operation's immediate selection target. dragleave ondragleave …a dragged item leaves a valid drop target. dragover ondragover …a dragged item is being dragged over a valid drop target, every few hund...
Ajax navigation example - Web APIs
it is shared between all ajax pages.</p> include/before_content.php: <p> [ <a class="ajax-nav" href="first_page.php">first example</a> | <a class="ajax-nav" href="second_page.php">second example</a> | <a class="ajax-nav" href="third_page.php">third example</a> | <a class="ajax-nav" href="u...
Browser storage limits and eviction criteria - Web APIs
<profile>/storage/default — default data storage repository note: after introducing storage api, the "permanent" folder can be considered obsolete; the "permanent" folder only stores indexeddb persistent-type databases. it doesn't matter if box mode is "best-effort" or "persistent" — data is stored under <profile>/storage/default. note: in firefox, you can find your profile folder by
entering about:support in the url bar, and pressing the show in... button (e.g., show in finder on mac os x) next to the profile folder title. note: if you are looking around in your profile at the data stored, you might see a fourth folder: persistent. basically, the persistent folder was renamed to permanent a while ago to keep upgrades/migration simpler. note: users shouldn’t add their own d...
Using IndexedDB - Web APIs
value.title + '</li>'); if (value.year != null) list_item.append(' - ' + value.year); if (value.hasownproperty('blob') && typeof value.blob != 'undefined') { var link = $('<a href="' + cursor.key + '">file</a>'); link.on('click', function() { return false; }); link.on('mouse
enter', function(evt) { setinviewer(evt.target.getattribute('href')); }); list_item.append(' / '); list_item.append(link); } else { list_item.append(" / no attached file"); } pub_list.append(list_item); }; // move on to the next object in store cursor.continue(); // this counter ser...
KeyboardEvent.charCode - Web APIs
, the code of the pressed key is stored in keycode. when one or more modifier keys are pressed, there are some complex rules for charcode. see gecko keypress event for details. charcode is never set in the keydown and keyup events. in these cases, keycode is set instead. to get the code of the key regardless of whether it was stored in keycode or charcode, query the which property. characters
entered through an ime do not register through keycode or charcode. actually with the chinese ime i'm using,
entering the ime results in a keypress event with keycode = 229 and no other key events fire until the ime exits (which may happen after multiple characters are inputted). i'm not sure if other ime's work this way. for a list of the charcode values associated with particular keys, run example 7...
KeyboardEvent.key - Web APIs
break; case "up": // ie/edge specific value case "arrowup": // do something for "up arrow" key press. break; case "left": // ie/edge specific value case "arrowleft": // do something for "left arrow" key press. break; case "right": // ie/edge specific value case "arrowright": // do something for "right arrow" key press. break; case "
enter": // do something for "
enter" or "return" key press. break; case "esc": // ie/edge specific value case "escape": // do something for "esc" key press. break; default: return; // quit when this doesn't handle the key event. } // cancel the default action to avoid it being handled twice event.preventdefault(); }, true); specification speci...
Location - Web APIs
l">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:c
enter; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; ...
MediaDevices.ondevicechange - Web APIs
ss="devicelist" id="audiolist"></ul> </div> <div class="right"> <h2>video devices:</h2> <ul class="devicelist" id="videolist"></ul> </div> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: c
enter; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } h2 { margin-bottom: 4px; } .left { float:left; width: 48%; margin-right: 2% } .right { float:right; width: 48%; margin-left: 2% } .devicelist { border: 1px solid black; list-style-type: none; margin-top: 2px; padding: 6px; } javascript content other code below is other code wh...
MediaRecorder - Web APIs
record.style.color = "black"; } stop.onclick = function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.color = ""; } mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var clipname = prompt('
enter a name for your sound clip'); var clipcontainer = document.createelement('article'); var cliplabel = document.createelement('p'); var audio = document.createelement('audio'); var deletebutton = document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.inn...
MediaStreamTrack: mute event - Web APIs
the source for the mediastreamtrack referenced by musictrack. musictrack.addeventlistener("mute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack
enters its muted state, the element with the id timeline-widget gets its background color changed to #aaa. when the track exits the muted state—detected by the arrival of an unmute event—the background color is restored to white. you can also use the onmute event handler property to set up a handler for this event; similarly, the onunmute event handler is available for setting up a handler for the...
MediaStreamTrack: unmute event - Web APIs
ce for the mediastreamtrack stored in the variable musictrack. musictrack.addeventlistener("mute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack
enters its muted state, the element with the id timeline-widget gets its background color changed to #aaa. when the track exits the muted state—detected by the arrival of an unmuted event—the background color is restored to white. you can also use the onunmute event handler property to set up a handler for this event; similarly, the onmute event handler is available for setting up a handler for th...
Media Session API - Web APIs
his is allowing users to know what's playing, and to control it, without opening the specific page that launched it. media session concepts and usage the mediametadata interface lets a web site provide rich metadata to the platform ui for media that is playing. this metadata includes the title, artist (creator) name, album (collection), and artwork. the platform can show this metadata in media c
enters, notifications, device lockscreens, etc. the mediasession interface lets users control playback of media through user-agent defined interface elements. interaction with these elements even trigger handlers in the web page, playing the media. since multiple pages may be simultaneously using this api, the user agent is responsible for calling the correct page's event handlers. the user agent prov...
Capabilities, constraints, and settings - Web APIs
ybutton"> apply constraints </div> </div> <video id="video" autoplay></video> <div class="button" id="stopbutton"> stop video </div> <div id="log"> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 150px; border: 1px solid black; font-size: 16px; text-align: c
enter; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } .wrapper { margin-bottom: 10px; width: 600px; } .trackrow { height: 200px; } .leftside { float: left; width: calc(calc(100%/2) - 10px); } .rightside { float: right; width: calc(calc(100%/2) - 10px); } textarea { padding: 8px; } h3 { margin-bottom: 3px; } #supportedconstraints { ...
MouseEvent.button - Web APIs
the mouseevent.button read-only property indicates which button was pressed on the mouse to trigger the event. this property only guarantees to indicate which buttons are pressed during events caused by pressing or releasing one or multiple buttons. as such, it is not reliable for events such as mouse
enter, mouseleave, mouseover, mouseout or mousemove. users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout. note: do not confuse this property with the mouseevent.buttons property, which indicates which buttons are pressed for all mouse events typ...
MouseEvent.pageX - Web APIs
p-left corner is the top-left corner of the frame, not the browser window. javascript var box = document.queryselector(".box"); var pagex = document.getelementbyid("x"); var pagey = document.getelementbyid("y"); function updatedisplay(event) { pagex.innertext = event.pagex; pagey.innertext = event.pagey; } box.addeventlistener("mousemove", updatedisplay, false); box.addeventlistener("mouse
enter", updatedisplay, false); box.addeventlistener("mouseleave", updatedisplay, false); the javascript code uses addeventlistener() to register the function updatedisplay() as the event handler for the mousemove, mouse
enter, and mouseleave events. updatedisplay() simply replaces the contents of the <span> elements meant to contain the x and y coordinates with the values of pagex and pagey. html <d...
NavigatorPlugins.plugins - Web APIs
specifications specification status comment html living standardthe definition of 'navigatorplugins.plugins' in that specification. living standard initial definition. ...
PannerNode.positionX - Web APIs
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 c
enter 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); spe...
PannerNode.positionY - Web APIs
alue 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 c
enter 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 +...
PaymentResponse.onpayerdetailchange - Web APIs
ax paymentresponse.onpayerdetailchange = eventhandlerfunction; value an event handler function which is called to handle the payerdetailchange event when the user makes changes to their personal information while editing a payment request form. examples in the example below, onpayerdetailchange is used to set up a listener for the payerdetailchange event in order to validate the information
entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping address, // payer email address, name, and phone number all be collected. const options = { requestshipping: true, requestpayeremail: true, requestpayername: true, requestpayerphone: true, }; const request = new paymentrequest(methods, details, options); const response = re...
PaymentResponse: payerdetailchange event - Web APIs
should be called on the paymentresponse to ask the user to update the invalid entries. bubbles no cancelable no interface paymentrequestupdateevent event handler property onpayerdetailchange examples in the example below, onpayerdetailchange is used to set up a listener for the payerdetailchange event in order to validate the information
entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping address, // payer email address, name, and phone number all be collected. const options = { requestshipping: true, requestpayeremail: true, requestpayername: true, requestpayerphone: true, }; const request = new paymentrequest(methods, details, options); const response = re...
PaymentResponse.retry() - Web APIs
rrors object. shippingaddress optional an addresserrors object which contains error messages for any of the fields in the shipping address that failed validation. return value a promise which is resolved when the payment is successfully completed. the promise is rejected with an appropriate exception value if the payment fails again. typically you will use this by calling show(), then
entering a loop or recursive function that checks the paymentresponse for errors or other reasons to retry the payment request. if a retry is needed, the loop calls retry(), then loops back to check the response when it comes in. the loop exits only when the user either cancels the payment request or the request is successful. see the example below for a thorough example, but the basic concept, in out...
Payment Request API - Web APIs
meant to reduce the number of steps needed to complete a payment online, potentially doing away with checkout forms. it aims to make the checkout process easier, by remembering a user's details, which are then passed along to a merchant hopefully without requiring a html form. advantages of using the payment request api with "basic-card" (card-based payments): fast purchase experience: users
enter their details once into the browser and are then ready to pay for goods and services on the web. they no longer have to fill out the same details repeatedly across different sites. consistent experience on every site (that supports the api): as the payment sheet is controlled by the browser, it can tailor the experience to the user. this can include localizing the ui into the user's preferred la...
PerformanceEventTiming - Web APIs
the performanceeventtiming interface of the event timing api provides timing information for the event types listed below. auxclick beforeinput click compositionend compositionstart compositionupdate contextmenu dblclick dragend drag
enter dragleave dragover dragstart drop input keydown keypress keyup mousedown mouse
enter mouseleave mouseout mouseover mouseup pointerover pointer
enter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started. performanceeventtiming.processingend returns the time at which the event dispatch ended. performanceeventtiming.cancelable returns t...
PerformanceNavigationTiming.type - Web APIs
reload navigation is through the browser's reload operation or location.reload(). back_forward navigation is through the browser's history traversal operation. prerender navigation is initiated by a prerender hint. this property is read only . ...
Web Push API Notifications best practices - Web APIs
rketers are using to get attention for their sites. searching the web for "web push notifications," you'll find articles from marketing experts who believe you should use push to re-engage people who have left your site so they can complete a purchase, or be sent the latest news, or receive links to recommended products. the dark side their novelty provides a new and unexploited opportunity for
enterprising sites to reach potential customers. has the customer switched tabs to answer an email? win them back with an expiring offer of free shipping that they can’t ignore! but really, is this the best use of push notifications? or is it a new iteration on the old and tired pop-up ad? “web push doesn’t risk ending up in the spam folder. nor can it be blocked by ad blockers. it shows right...
RTCDTMFToneChangeEvent - Web APIs
methods supports the methods defined in event. there are no additional methods. examples this snippet is derived loosely from the full, working example you'll find in when a tone finishes playing in using dtmf with webrtc. it appends each tone to a display box as it's played, and, once all tones have been sent, re-enabled a previously-disabled "send" button, allowing the next dmtf string to be
entered. dtmfsender.addeventlistener("change", function(event) { if (event.tone !== "") { dialstringbox.innertext += event.tone; } else { senddtmfbutton.disabled = false; } }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmftonechangeevent' in that specification. candidate recom...
RTCDataChannel.readyState - Web APIs
lt state of a new rtcdatachannel created by the webrtc layer when the remote peer created the channel and delivered to the site or app in a datachannel event of type rtcdatachannelevent. "closing" the process of closing the underlying data transport has begun. it is no longer possible to queue new messages to be sent, but previously queued messages may still be send or received before
entering the "closed" state. "closed" the underlying data transport has closed, or the attempt to make the connection failed. example var datachannel = peerconnection.createdatachannel("file transfer"); var sendqueue = []; function sendmessage(msg) { switch(datachannel.readystate) { case "connecting": console.log("connection not open; queueing: " + msg); sendqueue...
RTCIceTransport.onstatechange - Web APIs
ty to reference a function you provide that is called by the webrtc layer when the rtcicetransport object's state changes. the event handler receives as its sole input an event object describing the statechange event which occurred. to determine the new state, examine the value of state. example this snippet establishes a handler for the statechange event that looks to see if the transport has
entered the "failed" state, which indicates that the connection has failed with no chance of being automatically restored. var icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = function(event) { if (icetransport.state == "failed") { handlefailure(pc); } } specifications specification status comment webrtc 1.0: real-time commu...
RTCIceTransport: statechange event - Web APIs
valid candidate pair is prior to successfully connecting the two peers for webrtc communications. bubbles no cancelable no interface event event handler property rtcicetransport.onstatechange examples given an rtcpeerconnection, pc, the following code creates an event handler that calls a function named handlefailure() if the ice transport
enters a failure state. let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.addeventlistener("statechange", ev => { if (icetransport.state === "failed") { handlefailure(pc); } }, false); the same code, using the onstatechange event handler property, looks like this: let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = ev => { ...
cx - Web APIs
the cx read-only property of the svgcircleelement interface reflects the cx attribute of a <circle> element and by that defines the x-coordinate of the circleʼs c
enter. if unspecified, the effect is as if the value is set to 0. syntax var xcoordinate = element.cx; value an svganimatedlength representing the x-coordinate of the circleʼs c
enter. example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cx="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cx); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cx' in that specification. candidate recommendation...
cy - Web APIs
the cy read-only property of the svgcircleelement interface reflects the cy attribute of a <circle> element and by that defines the y-coordinate of the circleʼs c
enter. if unspecified, the effect is as if the value is set to 0. syntax var ycoordinate = element.cy; value an svganimatedlength representing the y-coordinate of the circleʼs c
enter. example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cy="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cy); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cy' in that specification. candidate recommendation...
SVGCircleElement - Web APIs
e="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcircleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement. svgcircleelement.cx read only this property defines the x-coordinate of the c
enter of the <circle> element. it is denoted by the cx attribute of the element. svgcircleelement.cy read only this property defines the y-coordinate of the c
enter of the <circle> element. it is denoted by the cy attribute of the element. svgcircleelement.r read only this property defines the radius of the <circle> element. it is denoted by the r of the element. methods this interfac...
Screen - Web APIs
properties screen.availtop specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features. screen.availleft returns the first available pixel available from the left side of the screen. ...
Using Service Workers - Web APIs
code, but also the image name, credits and alt text (see app.js lines 31-34). promises will only resolve with a single argument, so if you want to resolve with multiple values, you need to use an array/object. to access the resolved promise values, we then access this function as you’d then expect (see app.js lines 60-64). this may seem a bit odd at first, but this is the way promises work.
enter service workers note : we're using the es6 arrow functions syntax in the service worker implementation now let’s get on to service workers! registering your worker the first block of code in our app’s javascript file — app.js — is as follows. this is our entry point into using service workers. if ('serviceworker' in navigator) { navigator.serviceworker.register('./sw-test/sw.js', {...
Service Worker API - Web APIs
bility. interestingly, other specifications can and will start to make use of the service worker context, for example: background synchronization: start up a service worker even when no users are at the site, so caches can be updated, etc. reacting to push messages: start up a service worker to send users a message to tell them new content is available. reacting to a particular time & date.
entering a geo-fence. interfaces cache represents the storage for request / response object pairs that are cached as part of the serviceworker life cycle. cachestorage represents the storage for cache objects. it provides a master directory of all the named caches that a serviceworker can access, and maintains a mapping of string names to corresponding cache objects. client represents t...
Storage.setItem() - Web APIs
storage.setitem(keyname, keyvalue); parameters keyname a domstring containing the name of the key you want to create/update. keyvalue a domstring containing the value you want to give the key you are creating/updating. return value undefined. exceptions setitem() may throw an exception if the storage is full. particularly, in mobile safari (since ios 5) it always throws when the user
enters private mode. (safari sets the quota to 0 bytes in private mode, unlike other browsers, which allow storage in private mode using separate data containers.) hence developers should make sure to always catch possible exceptions from setitem(). example the following function creates three data items inside local storage. function populatestorage() { localstorage.setitem('bgcolor', 'red'); l...
Storage Access API - Web APIs
nces under which the browser may decide to inform the user are currently being worked through and will be announced once ready. user prompts when requeststorageaccess() is called by an embedded, cross-origin document, the user agent may choose to involve the user in the decision of whether to grant storage access to the requesting origin. prompting heuristics currently vary across the two implem
enters of the storage access api — safari shows prompts for all embedded tracking content that has not previously received storage access, while firefox only prompts users after a tracking origin has requested storage access on more than a threshold number of sites. see document.requeststorageaccess() for more details. safari implementation differences although the api surface is the same, websites...
SubtleCrypto.deriveBits() - Web APIs
secret(aliceskeypair.privatekey, bobskeypair.publickey); }); }); pbkdf2 in this example we ask the user for a password, then use it to derive some bits using pbkdf2. see the complete code on github. let salt; /* get some key material to use as input to the derivebits method. the key material is a password supplied by the user. */ function getkeymaterial() { const password = window.prompt("
enter your password"); const enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* derive some bits from a password supplied by the user. */ async function getderivedbits() { const keymaterial = await getkeymaterial(); salt = window.crypto.getrandomvalues(new uint8array(16)...
SubtleCrypto.deriveKey() - Web APIs
decrypt(bobssecretkey); }); } pbkdf2 in this example we ask the user for a password, then use it to derive an aes key using pbkdf2, then use the aes key to encrypt a message. see the complete code on github. /* get some key material to use as input to the derivekey method. the key material is a password supplied by the user. ...
TextTrack - Web APIs
zilian portuguese. texttrack.mode a domstring specifying the track's current mode. changing this property's value changes the track's current mode to match. permitted values are listed under text track mode constants. the default is disabled, unless the <track> element's default boolean attribute is specified, in which case the default mode is started. events cuechange fired when cues are
entered and exited. a given text cue appears when the cue is
entered and disappears when the cue is exited. also available via the oncuechange property. methods this interface also inherits methods from eventtarget. texttrack.addcue() adds a cue (specified as a texttrackcue object to the track's list of cues. texttrack.removecue() removes a cue (specified as a texttrackcue object from the tra...
TextTrackCue - Web APIs
that identifies the cue. texttrackcue.starttime a double that represents the video time that the cue will start being displayed, in seconds. texttrackcue.endtime a double that represents the video time that the cue will stop being displayed, in seconds. texttrackcue.pauseonexit a boolean for whether the video will pause when this cue stops being displayed. event handlers texttrackcue.on
enter the event handler for the
enter event. texttrackcue.onexit the event handler for the exit event. specifications specification status comment html living standardthe definition of 'texttrackcue' in that specification. living standard html5the definition of 'texttrackcue' in that specification. recommendation initial definition ...
Touch() - Web APIs
ly circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by rotationangle, in css pixels of the same scale as screeny; 0 if no value is known. the value must not be negative. "rotationangle", optional and defaulting to 0, of type float, that is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its c
enter; 0 if no value is known. the value must be greater than or equal to 0 and less than 90. if the ellipse described by radiusx and radiusy is circular, then rotationangle has no effect. the user agent may use 0 as the value in this case, or it may use any other value in the allowed range. (for example, the user agent may use the rotationangle value from the previous touch event, to avoid sudden chan...
Touch.radiusX - Web APIs
axis indicated by the touch point's touch.rotationangle. likewise, the touch.radiusy property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by touch.rotationangle. the touch.rotationangle is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its c
enter. the following simple code snippet, registers a single handler for the touchstart, touchmove and touchend events. when the src element is touched, the element's width and height will be calculate based on the touch point's radiusx and radiusy values and the element will then be rotated using the touch point's rotationangle. <div id="src"> ... </div> var src = document.getelementbyid("src"); ...
USBAlternateInterface - Web APIs
returns the alternate setting number of this interface. this is equal to the balternatesetting field of the interface descriptor defining this interface. usbalternateinterface.interfaceclassread only returns the class of this interface. this is equal to the binterfaceclass field of the interface descriptor defining this interface. standardized values for this field are defined by the usb implem
enters forum. a value of 0xff indicates a vendor-defined interface. usbalternateinterface.interfacesubclassread only returns the subclass of this interface. this is equal to the binterfacesubclass field of the interface descriptor defining this interface. the meaning of this value depends on the interfaceclass field. usbalternateinterface.interfaceprotocolread only returns the protocol supported ...
ValidityState.patternMismatch - Web APIs
s set by the element's pattern attribute. if the field supports the pattern attribute -- which means the <input> is of type text, tel, email, url, password, or search -- and the pattern value is set to a valid regular expression, if the value don't doesn't conform to the constraints set by the pattern value, the patternmismatch property will be true. ...
A basic 2D WebGL animation example - Web APIs
he coordinate system we use to represent our scene is the same as the canvas's coordinate system. that is, (0, 0) is at the top-left corner and the bottom-right corner is at (600, 460). 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 c
enter of the context and each axis extends from -1.0 to 1.0 regardless of the actual size of the context). <script id="vertex-shader" type="x-shader/x-vertex"> attribute vec2 avertexposition; uniform vec2 uscalingfactor; uniform vec2 urotationvector; void main() { vec2 rotatedposition = vec2( avertexposition.x * urotationvector.y + avertexposition.y * urotationvector.x,...
Basic scissoring - Web APIs
state. in this case, enabling the scissor test and establishing a rectangular mask. only when the webgl state has been satisfactorily tweaked, we execute the drawing command (in this case, clear()) that starts the processing of fragments down the graphics pipeline. ...
Boilerplate 1 - Web APIs
ull. finally, all javascript code will run within an immediate function, which is a common javascript technique (see function). the function declaration and invocation will also be hidden. html <p>[ some descriptive text about the example. ]</p> <button>[ optional button element. ...
Clearing by clicking - Web APIs
lls inside the event handler function. <p>a very simple webgl program that still shows some color and user interaction.</p> <p>you can repeatedly click the empty canvas or the button below to change color.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : c
enter; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves. the event handler removes // itself, because it...
Clearing with colors - Web APIs
bgl is usually in rgba format, that is four numerical components for red, green, blue and alpha (opacity). therefore, clearcolor() takes four arguments. <p>a very simple webgl program that shows some color.</p> <!-- text within a canvas element is displayed only if canvas is not supported. --> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : c
enter; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it, // and to not mess up the global scope. we are giving the event // handler a name (setupwebgl) so that we can refer to th...
Color masking - Web APIs
peline, and modifies the pixel color value, so the final result on the screen is that of the clear color, tinted by the color mask. ...
Detect WebGL - Web APIs
cs machine within a single context interface is not unique to webgl. this is also done in other graphics {̣{glossary("api")}}, such as the canvas 2d rendering context. however, the properties and variables you can tweak are different for each api. <p>[ here would go the result of webgl feature detection ]</p> <button>press here to detect webglrenderingcontext</button> body { text-align : c
enter; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it. window.addeventlistener("load", function() { var paragraph = document.queryselector("p"), button = document.queryselector("button"); // adding click event handler to ...
Hello GLSL - Web APIs
mains blank, you can check the output of the next example, which draws exactly the same thing. but remember to read through the explanations and code on this page, before moving on to the next. hello world program in glsl a very simple first shader program. ...
Hello vertex attributes - Web APIs
by sending user input to the shader using vertex attributes. hello world program in glsl how to send input to a shader program by saving data in gpu memory. <p>first encounter with attributes and sending data to gpu. ...
Raining rectangles - Web APIs
to integrate the webgl function calls within a game loop. the game loop is responsible for drawing the animation frames, and keeping the animation responsive to user input. here, the game loop is implemented using timeouts. <p>you caught <strong>0</strong>. ...
Textures from code - Web APIs
xturing with fragment shaders. that is, using code to generate textures for use in shading webgl objects. drawing textures with code texturing a point sprite with calculations done per-pixel in the fragment shader. <p>texture from code. ...
Matrix math for the web - Web APIs
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 c
entered on the page. the <div> has a transition set for the transform so that matrix is animated in making it easy to see what is being done. <div id='move-me' class='transformable'> <h2>move me with a matrix</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> finally, for each of the examples we will generate a 4x4 matrix, then update the <div>'s style to have a trans...
Adding 2D content to a WebGL context - Web APIs
near = 0.1; const zfar = 100.0; const projectionmatrix = mat4.create(); // note: glmatrix.js always has the first argument // as the destination to receive the result. mat4.perspective(projectionmatrix, fieldofview, aspect, znear, zfar); // set the drawing position to the "identity" point, which is // the c
enter of the scene. const modelviewmatrix = mat4.create(); // now move the drawing position a bit to where we want to // start drawing the square. mat4.translate(modelviewmatrix, // destination matrix modelviewmatrix, // matrix to translate [-0.0, 0.0, -6.0]); // amount to translate // tell webgl how to pull out the positions from the position /...
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
but once it receives the offer we just sent, so is the remote peer. this leaves both peers in a state in which the connection attempt cannot be completed. perfect negotiation with the updated api as shown in the section implementing perfect negotiation, we can eliminate this problem by introducing a variabl...
Lifetime of a WebRTC session - Web APIs
d use xmlhttprequest over https with polling, or any other combination of technologies you can come up with. you could even use email as the signaling channel. it’s also worth noting that the channel for performing signaling doesn’t even need to be over the network. one peer can output a data object that can be printed out, physically carried (on foot or by carrier pigeon) to another device,
entered into that device, and a response then output by that device to be returned on foot, and so forth, until the webrtc peer connection is open. it'd be very high latency but it could be done. information exchanged during signaling there are three basic types of information that need to be exchanged during signaling: control messages used to set up, open, and close the communication channel, an...
Signaling and video calling - Web APIs
r the signaling server the web server hosting the chat service imagine that naomi and priya are engaged in a discussion using the chat software, and naomi decides to open a video call between the two. here's the expected sequence of events: we'll see this detailed more over the course of this article. ice candidate exchange process when each peer's ice layer begins to send candidates, it
enters into an exchange among the various points in the chain that looks like this: each side sends candidates to the other as it receives them from their local ice layer; there is no taking turns or batching of candidates. as soon as the two peers agree upon one candidate that they can both use to exchange the media, media begins to flow. each peer continues to send candidates until it runs out of ...
A simple RTCDataChannel sample - Web APIs
e have a couple of buttons for establishing and closing the connection: <button id="connectbutton" name="connectbutton" class="buttonleft"> connect </button> <button id="disconnectbutton" name="disconnectbutton" class="buttonright" disabled> disconnect </button> then there's a box which contains the text input box into which the user can type a message to transmit, with a button to send the
entered text. this <div> will be the first peer in the channel. <div class="messagebox"> <label for="message">
enter a message: <input type="text" name="message" id="message" placeholder="message text" inputmode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> fin...
Using bounded reference spaces - Web APIs
should be prepared to fall back to some other type of reference space. understanding boundaries as mentioned previously, the boundary is defined as an array of points located at floor level, each defining a corner of the boundary area, going around the origin in a clockwise manner. this is demonstrated in the diagram below. this diagram defines the boundaries of room with the origin in the c
enter, as required, and a set of 12 points representing the vertices of the available physical space. there are two cut-out areas in the room, possibly representing a couch, sofa, or bench behind the user and a stand or table on which the computer or other hardware is located. as this suggests, the safe area is not required to be convex, but may have any number of indentations or extrusions, as long as...
WebXR application life cycle - Web APIs
imilar overall design pattern: check to see if the user's device and browser are both capable of presenting the xr experience you want to provide. make sure the webxr api is available; if navigator.xr is undefined, you can assume the user's browser and/or device doesn't support webxr. if it's not supported, disable any user interface used to activate xr features and abort any attempts to
enter xr mode. call navigator.xr.issessionsupported(), specifying the webxr experience mode you want to provide: inline, immersive-vr, or immersive-ar, in order to determine whether or not the type of session you wish to provide is available. if the session type you want to use is available, provide the appropriate interface to the user to allow them to activate it. when the user requests t...
Lighting a WebXR setting - Web APIs
feature of the light source in webgl and other lighting systems. between the law of reflection and the fact that the brightness of the light rays decreases with distance, the light emitted by a point source and reflected back tends to be brightest at the closest 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 c
enter, 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...
WebXR Device API - Web APIs
daries and extends infinitely in every direction. xrboundedreferencespace xrboundedreferencespace extends the xrreferencespace coordinate system to further include support for a finite world with set boundaries. unlike xrreferencespace, the origin must be located on the floor (that is, y = 0 at the floor). the x and z components of the origin are typically presumed to be located at or near the c
enter of the room or surface. xrview represents a single view into the xr scene for a particular frame. each xrview corresponds to the video display surface used to present the scene to the user. for example, a given xr device might have two views: one for the left eye and one for the right. each view has an offset used to shift the position of the view relative to the camera, in order to allow for c...
Background audio processing using AudioWorklet - Web APIs
uded the ability to use javascript code to create custom audio processors that would be invoked to perform real-time audio manipulations. the drawback to scriptprocessornode was simple: it ran on the main thread, thus blocking everything else going on until it completed execution. this was far less than ideal, especially for something that can be as computationally expensive as audio processing.
enter audioworklet. an audio context's audio worklet is a worklet which runs off the main thread, executing audio processing code added to it by calling the context's audioworklet.addmodule() method. calling addmodule() loads the specified javascript file, which should contain the implementation of the audio processor. with the processor registered, you can create a new audioworkletnode which passes th...
Using IIR filters - Web APIs
ter node in place of the two biquad filter nodes you would otherwise need for this. with the iirfilter node it's up to you to set what feedforward and feedback values the filter needs — this determines the characteristics of the filter. the downside is that this involves some complex maths. if you are looking to learn more there's some information about the maths behind iir filters here. this
enters the realms of signal processing theory — don't worry if you look at it and feel like it's not for you. if you want to play with the iir filter node and need some values to help along the way, there's a table of already calculated values here; on pages 4 & 5 of the linked pdf the an values refer to the feedforward values and the bn values refer to the feedback. musicdsp.org is also a great res...
Web Authentication API - Web APIs
ha-256 hash of the clientdatajson (only a hash is sent because the link to the authenticator may be a low-bandwidth nfc or bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with). authenticator creates new key pair and attestation - before doing anything, the authenticator will typically ask for some form of user verification. this could be
entering a pin, using a fingerprint, doing an iris scan, etc. to prove that the user is present and consenting to the registration. after the user verification, the authenticator will create a new asymmetric key pair and safely store the private key for future reference. the public key will become part of the attestation, which the authenticator will sign over with a private key that was burned into th...
Using Web Workers - Web APIs
addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null. dedicated workers as mentioned above, a dedicated worker is only accessible by the script that called it. in this section we'll discuss the javascript found in our basic dedicated worker example (run dedicated worker): this allows you to
enter two numbers to be multiplied together. the numbers are sent to a dedicated worker, multiplied together, and the result is returned to the page and displayed. this example is rather trivial, but we decided to keep it simple while introducing you to basic worker concepts. more advanced details are covered later on in the article. worker feature detection for slightly more controlled error handli...
Window.devicePixelRatio - Web APIs
ra pixel density). var scale = window.devicepixelratio; // change to 1 on retina screens to see blurry canvas. canvas.width = math.floor(size * scale); canvas.height = math.floor(size * scale); // normalize coordinate system to use css pixels. ctx.scale(scale, scale); ctx.fillstyle = "#bada55"; ctx.fillrect(10, 10, 300, 300); ctx.fillstyle = "#ffffff"; ctx.font = '18px arial'; ctx.textalign = 'c
enter'; ctx.textbaseline = 'middle'; var x = size / 2; var y = size / 2; var textstring = "i love mdn"; ctx.filltext(textstring, x, y); monitoring screen resolution or zoom level changes in this example, we'll set up a media query and watch it to see when the device resolution changes, so that we can check the value of devicepixelratio to handle any updates we need to. javascript the javascript...
Window: error event - Web APIs
ss="controls"> <button id="script-error" type="button">generate script error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: c
enter; justify-content: c
enter; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); window.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: ${event.m...
Window.getComputedStyle() - Web APIs
to syntactic validity, e.g. ::unsupported is considered valid, even though the pseudo-element itself is not supported. examples in this example we style a <p> element, then retrieve those styles using getcomputedstyle(), and print them into the text content of the <p>. ...
Window: load event - Web APIs
lly loaded'); }; live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: c
enter; justify-content: c
enter; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.locati...
Privileged features - Web APIs
minimizable this setting can only apply to dialog windows; minimizable requires dialog=yes. if minimizable is on, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. any non-dialog window is always minimizable and minimizable=no will be ignored. ...
Window.open() - Web APIs
or inexistent or if the user agent does not support opening of secondary window (like ms-web tv, text browsers, etc), then such user agents will still be able to load the referenced resource according to its default mode of opening/handling a referenced resource. this form of code also interferes with advanced features in tab-capable browsers: eg. middle-click on links, ctrl+click on links, ctrl+
enter on links, "mouse gestures" features. always identify links that will create (or will re-use) a new, secondary window identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly. the purpose is to warn users in advance of context changes to minimize conf...
Window.openDialog() - Web APIs
ull, delivery: null }; opendialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retvals); if you set the properties of the retvals object in the dialog code as described below, you can now access them via the retvals array after the opendialog() call returns. inside the dialog code, you can set the properties as follows: var retvals = window.arguments[2]; retvals.address =
enteredaddress; retvals.delivery = "immediate"; specification this is not part of any specification. browser compatibility the compatibility table in 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. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewch...
Window.showModalDialog() - Web APIs
specified by uri. uri is the url of the document to display in the dialog. arguments is an optional variant containing values passed to the dialog; these are made available in the window object's window.dialogarguments property. options is an optional string specifying window ornamentation for the dialog, using one or more semicolon delimited values: syntax description c
enter: {on | off | yes | no | 1 | 0 } if on, yes, or 1, the dialog window is c
entered on the desktop; otherwise it's hidden. default is yes. dialogheight: height the height of the dialog box in pixels. dialogleft: left distance of the dialog box from the left edge of the desktop. dialogwidth: width the width of the dialog box in pixels. dialogtop: top ...
WindowOrWorkerGlobalScope.setInterval() - Web APIs
intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: c
enter;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: c
enter;">[ <span class="intlink" onclick="otwexample1.play();">play</span> | <span class="intlink" onclick="otwexample1.pause();">pause</span> | <span class="intlink" onclick="otwexample1.terminate();">terminate</span> ]</p> <div id="info"> vi...
XRBoundedReferenceSpace.boundsGeometry - Web APIs
e origin offset. in other words, the bounds are the physical limitations of the available space, shifted so that the reference space's bounds points are all defined relative to the xrboundedreferencespace's effective origiin. usage notes bounded reference spaces always have their origin located at ground level, where y is 0. as a general rule, with the origin for x and z located in or near the c
enter of the space, and with the orientation set facing in a logical forward direction, as appropriate for the underlying platform or xr hardware. in order to reduce the risk of the room boundaries being used for fingerprinting purposes, each point in the boundsgeometry array may be rounded or adjusted by some amount. the specification recommends that browsers shift the points to the nearest 5 centime...
XRReferenceSpace: reset event - Web APIs
e 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 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 s...
XRSpace - Web APIs
xrspace interface. xrboundedreferencespace represents a reference space which may move within a region of space whose borders are defined by an array of points laid out in clockwise order along the floor to define the passable region of the space. the origin of an xrboundedreferencespace is always at floor level, with its x and z coordinates typically defaulting to a location near the room's c
enter. xrreferencespace represents a reference space which is typically expected to remain static for the duration of the xrsession. while objects may move within the space, the space itself remains fixed in place. there are exceptions to this static nature; most commonly, an xrreferencespace may move in order to adjust based on reconfiguration of the user's headset or other motion-sensitive device. ...
XRWebGLLayerInit.stencil - Web APIs
webgllayer() constructor to create a new webgl rendering layer for webxr, providing as the layerinit parameter an object whose stencil property is false requests that the new layer be created without a stencil buffer. the stencil buffer is an optional buffer which, just like the depth buffer, contains one entry for every pixel in the frame buffer. also just like the depth buffer, the value of an
enter in the stencil buffer directly affects how (or if) the corresponding pixel is drawn during rendering. you can store values into each entry in the stencil bufer, then specify an operation that determines which stencil buffer values correspond to pixels which should be drawn to the screen during each frame. syntax let layerinit = { stencil: false }; let gllayer = new xrwebgllayer(xrsession, gl,...
XSL Transformations in Mozilla FAQ - Web APIs
of your favorite system. msxml has an additional property. <xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt" test="system-property('msxsl:version')=3"> <!-- msxml3 specific markup --> </xsl:if> what about media="print"? when printing a document, mozilla tries to render the page on paper as closely to what you see as possible. this includes stuff like text
entered into textfields and other dynamic changes. this is achieved by printing the current dom tree. having xslt stylesheet specific to particular media would require to retransform the original xml source, which counteracts the expectations of the user. thus, using media in <?xml-stylesheet ?> is strongly discouraged. future builds might only load an xslt stylesheet if media is not specified, or if t...
Using the aria-describedby attribute - Accessibility
lose button in the example below, a link that functions as a 'close' button on a dialog is described elsewhere in the document. the aria-describedby attribute is used to associate the description with the link. <button aria-label="close" aria-describedby="descriptionclose" onclick="mydialog.close()">x</button> ... <div id="descriptionclose">closing this window will discard any information
entered and return you back to the main page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document. used by aria roles all elements of the base markup related aria...
ARIA Test Cases - Accessibility
- - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - list simple list expected at behavior: (mz) screen reader should indicate an aria list like any other static html list. normally, the number of items contained within the list, and the nesting level (if this is not the outermost list) is announced upon
entering. upon leaving the list, screen reader should give an indication. list items should be read as they appear. as the user navigates, any level changes should be read. 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-e...
ARIA: timer role - Accessibility
ria-live value of off. aria-describedby used to indicate the idref of an element that contains additional instructions for navigating or operating this element. aria-roledescription used to give the timer a more descriptive role text for screen readers to speak. this should be localized. keyboard interactions keyboard interaction is xxx. focus is being managed via xxx. the tab , space and
enter keys, as well as escape , must be handled by the application. the one exception is if focus xxx. required javascript features keypress used to handle keyboard input and control the focus click, touch handle as appropriate for your widget as well changing attribute values aria-activedescendant is used to manage the focus inside the application container. set in response to keyboard or oth...
ARIA: document role - Accessibility
g"> ... <div id="infotext" role="document" tabindex="0"> <p>some informational text goes here.</p> </div> ... <button>close</button> </div> this example shows a dialog widget with some controls and a section with some informational text that the assistive technology user can read when tabbing to it. description by default, web pages are treated as documents; assistive technologies (at)
enter browse or read mode when
entering a new web page. this mode can be altered through various roles, including the widget and application roles. the document role brings the at back into browse or read mode. generally placed within an application role or other interactive widget role, the document role is used to indicate a section of a complex composit widget that an assistive technology user sho...
ARIA: switch role - Accessibility
} else { el.setattribute("aria-checked", "true"); } } css the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm. ...
Basic form hints - Accessibility
his information from the presentation. aria provides attributes for indicating that form controls are required or invalid: the aria-required property can be applied to a form element, to indicate to an at that it is required to complete the form. the aria-invalid state can be programmatically applied, to indicate to an at which data fields have incorrect data, so that the user knows they have
entered invalid data. the example below shows a simple form with three fields. on lines 4 and 12, the aria-required attributes are set to true (in addition to the asterisks next to the labels), indicating that the name and email fields are required. the second part of the example, a snippet of javascript validates the email format, and sets the aria-invalid attribute of the email field (line 12 of th...
Accessibility documentation index - Accessibility
nique demonstrates how to use the aria-hidden attribute. the aria-hidden attribute can either expose or hide non-interactive content from the accessibility api. 20 using the aria-invalid attribute aria, accessibility, attribute, codingscripting, html, javascript, needscontent, role(2), agent, alert, user, useragent the aria-invalid attribute is used to indicate that the value
entered into an input field does not conform to the format expected by the application.this may include formats such as email addresses or telephone numbers. aria-invalid can also be used to indicate that a required field has not been filled in.the attribute should be programmatically set as a result of a validation process. 21 using the aria-label attribute aria, accessibility, codingsc...
Operable - Accessibility
) all functionality should be accessible using keyboard controls, unless it cannot be done using the keyboard (e.g. freehand drawing). built-in controls should be used where possible (e.g. tabbing through form controls), and you should only build in custom functionality where needed. see ui controls and building keyboard accessibility back in 2.1.2 no keyboard trap (a) when
entering a section of functionality using the keyboard, you should be able to get out of that section again using *only* the keyboard. for example, if you press
enter/return on a focused button to open an options window, you should be able to close that window again and return to the main content using the keyboard. this is very important so that keyboard users do not get trapped on specific secti...
-moz-image-rect - CSS: Cascading Style Sheets
ts 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. the container looks like this: #container { width:267px; height:272px; top:100px; left:100px; position:absolute; font-size:16px; text-shadow:white 0px 0px 6px; text-align:c
enter; } 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 t...
-webkit-box-reflect - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><...
:-moz-loading - CSS: Cascading Style Sheets
d loading, such as images that haven't started to arrive yet. note that images that are in the process of loading are not matched by this pseudo-class. note: this selector is mainly intended to be used by theme developers. syntax :-moz-loading examples setting a background for images that are loading :-moz-loading { background-color: #aaa; background-image: url(loading-animation.gif) c
enter no-repeat; } specifications not part of any standard. ...
::before (:before) - CSS: Cascading Style Sheets
ev.target.classlist.toggle('done'); } }, false); here is the above code example running live. note that there are no icons used, and the check-mark is actually the ::before that has been styled in css. go ahead and get some stuff done. result special characters as this is css; not html, you can not use markup entities in content values. if you need to use a special character, and can not
enter it literally into your css content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value. html <ol> <li>crack eggs into bowl</li> <li>add milk</li> <li>add flour</li> <li aria-current='step'>mix thoroughly into a smooth batter</li> <li>pour a ladleful of batter onto a hot, greased, flat frying pan</li> <li>fry until the top of the...
:first - CSS: Cascading Style Sheets
examples html <p>first page.</p> <p>second page.</p> <button>print!</button> css @page :first { margin-left: 50%; margin-top: 50%; } p { page-break-after: always; } javascript document.queryselector("button").addeventlistener('click', () => { window.print(); }); result press the "print!" button to print the example. the words on the first page should be somewhere around the c
enter, while other pages will have their contents at the default position. specifications specification status comment css paged media module level 3the definition of ':first' in that specification. working draft no change. css level 2 (revision 1)the definition of ':first' in that specification. recommendation initial definition. ...
:read-only - CSS: Cascading Style Sheets
class represents an element (such as input or textarea) that is not editable by the user. input:read-only, textarea:read-only { background-color: #ccc; } p:read-only { background-color: #ccc; } syntax :read-only examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have
entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provid...
:read-write - CSS: Cascading Style Sheets
class represents an element (such as input or textarea) that is editable by the user. input:read-write, textarea:read-write { background-color: #bbf; } p:read-write { background-color: #bbf; } syntax :read-write examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have
entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provid...
additive-symbols - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><...
negative - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><...
pad - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><...
prefix - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><...
suffix - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><...
symbols - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><...
shape - CSS: Cascading Style Sheets
ngle for which the traditional designs are appropriate. round the shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate. examples basic example html <h1>hello world!</h1> css h1 { text-align: left; } @media (shape: rect) { h1 { text-align: left; } } @media (shape: round) { h1 { text-align: c
enter; } } custom stylesheet this html will apply a special stylesheet for devices that have round screens. <head> <link rel="stylesheet" href="default.css" /> <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> </head> specifications specification status ...
CSS Animations tips and tricks - CSS: Cascading Style Sheets
at will play (or replay) the animation. <div class="box"> </div> <div class="runbutton">click me to run the animation</div> css content now we'll define the animation itself using css. some css that's not important (the style of the "run" button itself) isn't shown here, for brevity. .runbutton { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: c
enter; margin-top: 12px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } @keyframes colorchange { 0% { background: yellow } 100% { background: blue } } .box { width: 100px; height: 100px; border: 1px solid black; } .changing { animation: colorchange 2s; } there are two classes here. the "box" c...
Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
ds or, to make even a single item inside a container a flex item in order to use the alignment properties as specified in flexbox. alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. a margin of auto will absorb all available space in that dimension, therefore setting a left and right margin of auto, you can push a block into the c
enter: .container { width: 20em; margin-left: auto; margin-right: auto; } in table layout, you have access to the vertical-align property to align the contents of a cell inside that cell. for many use cases, turning the block container into a flex item will give you the alignment capability that you are looking for. in the example below, a container with a single item inside has been turned i...
Box alignment in grid layout - CSS: Cascading Style Sheets
ample in this example using grid layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. this space is distributed using justify-content. on the block (cross) axis the alignment of the items inside their grid areas is controlled with align-items. the first item overrides the align-items value set on the group by setting align-self to c
enter. grid axes as a two-dimensional layout method, when working with grid layout we always have two axes on which to align our items. we have access to all of the box alignment properties to help us achieve this. the inline axis is the axis that corresponds to the direction that words in a sentence would run in the writing mode used. therefore, in a horizontal language such as english or arabic ...
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
pplies. remove display: flex to see the fallback behavior. you'll see white space added between the items, which is what happens when using display: inine-block as it prefers white space like other inline items. display: table- the css table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical c
entering and work back as far as internet explorer 8. if you use display: table-cell on an item in your html it takes on the styling of an html table cell. css creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the html table row, and a second one to represent the table element itself, you can’t see or style these anonymous boxes; the...
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
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 position. in the example below i have 12 grid items. item 2 and item 5 have been placed using line based placement on the grid. you can see how those items are placed and the other items then auto-place in the spaces. the auto-placed items will place themselves before the placed...
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
the flexibility, you probably need to use css grid layout. an example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. in that case, a grid is likely to be a better choice. box alignment the feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. it made it easy to c
enter a box on the page. flex items can stretch to the height of the flex container, meaning that equal height columns were possible. these were things we have wanted to do for a very long time, and have come up with all kinds of hacks to accomplish, at least visually. the alignment properties from the flexbox specification have been added to a new specification called box alignment level 3. this mean...
Subgrid - CSS: Cascading Style Sheets
sh the subgrid tracks to have a different gap or no gap. this can be achieved by using the gap-* properties on the grid container of the subgrid. you can see this in the example below. the parent grid has a gap of 20px for rows and columns. the subgrid has row-gap set to 0. if you inspect this in the firefox grid inspector you can see how the line of the grid is in the correct place down the c
enter of the gap, so when we set the gap to 0, it acts in a similar way to applying a negative margin to an element, giving the space from the gap back to the item. named grid lines when using css grid you can name lines on your grid and then position items based on those names rather than the line number. the line names on the parent grid are passed into the subgrid, and you can place items using ...
Using z-index - CSS: Cascading Style Sheets
="rel1"> <b>div #2</b> <br />position: relative; <br />z-index: 3; </div> <div id="rel2"> <b>div #3</b> <br />position: relative; <br />z-index: 2; </div> <div id="abs2"> <b>div #4</b> <br />position: absolute; <br />z-index: 1; </div> <div id="sta1"> <b>div #5</b> <br />no positioning <br />z-index: 8; </div> css div { padding: 10px; opacity: 0.7; text-align: c
enter; } b { font-family: sans-serif; } #abs1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #900; background-color: #fdd; } #rel1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #rel2 { z-index: 2; height: 100px; p...
Stacking context example 1 - CSS: Cascading Style Sheets
t-weight: bold; font: 12px arial; } #div1, #div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: c
enter; } #div4 { opacity: 0.8; z-index: 2; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } result ...
Stacking context example 2 - CSS: Cascading Style Sheets
#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: c
enter; } #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 /> ...
Stacking without the z-index property - CSS: Cascading Style Sheets
ass="relative"> <b>div #2</b><br />position: relative;</div> <div id="rel2" class="relative"> <b>div #3</b><br />position: relative;</div> <div id="abs2" class="absolute"> <b>div #4</b><br />position: absolute;</div> <div id="sta1" class="static"> <b>div #5</b><br />position: static;</div> css b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-align: c
enter; } .static { position: static; height: 80px; background-color: #ffc; border-color: #996; } .absolute { position: absolute; width: 150px; height: 350px; background-color: #fdd; border-color: #900; opacity: 0.7; } .relative { position: relative; height: 80px; background-color: #cfc; border-color: #696; opacity: 0.7; } #abs1 { top: 10px; left: 10px; } #rel1 { ...
The stacking context - CSS: Cascading Style Sheets
v4, #div5 { border: 1px dashed #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15px; padding: 25px 10px 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 125px; border: 1px dashed #009; padding-top: 125px; background-color: #ddf; text-align: c
enter; } result ...
Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
much content is on the screen at any one time. the proximity value will only snap to a position when it is close by, the exact distance being left to the browser to decide. in the example below you can change the value between mandatory and proximity to see the effect this has on the scroll experience. using scroll-snap-align the scroll-snap-align property can take a value of start, end, or c
enter — indicating the point the content should snap to in the scroll container. in the below example you can change the value of scroll-snap-align to see how this changes the scroll behavior. padding the scroll container if you do not want the content to snap right to the edge of the scroll container you can use the scroll-padding property or its equivalent longhand values to set some padding. ...
Pagination - CSS: Cascading Style Sheets
pagination, where the user can move between pages of content such as search results. requirements the pagination pattern typically displays items in a row. to ensure that the pagination is understandable by people using a screenreader, we mark the items up as a list inside a <nav> element, and then use css to display the layout visually as a row. typically, the pagination component will be c
entered horizontally underneath the content. recipe download this example choices made this pattern is laid out using flexbox — one flex container nested inside another. the <nav> element is designated a flex container in order that we can c
enter the list inside using the justify-content property. the list itself also becomes a flex container to lay the items out as a row. to space the items...
Split Navigation - CSS: Cascading Style Sheets
mmon navigation pattern is to have one element pushed away from the others. we can use flexbox to achieve this, without needing to make the two sets of items into two separate flex containers. recipe download this example choices made this pattern combines auto margins with flexbox to split the items. an auto margin absorbs all available space in the direction it is applied. this is how c
entering a block with auto margins works — you have a margin on each side of the block trying to take up all of the space, thus pushing the block into the middle. in this case the left auto margin takes up any available space and pushes the item over to the right. you could apply the class push to any item in the list. ...
CSS Layout cookbook - CSS: Cascading Style Sheets
e recipes here. the recipes recipe description layout methods media objects a two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. css grid, float fallback, fit-content() sizing columns when to choose multi-column layout, flexbox or grid for your columns. css grid, multicol, flexbox c
enter an element how to c
enter an item horizontally and vertically. flexbox, box alignment sticky footers creating a footer which sits at the bottom of the container or viewport when the content is shorter. css grid, flexbox split navigation a navigation pattern where some links are visually separated from the others. flexbox, margin breadcrumb navigation ...
Mozilla CSS extensions - CSS: Cascading Style Sheets
ormal -moz-kannada -moz-khmer -moz-lao -moz-malayalam -moz-myanmar -moz-oriya -moz-persian -moz-simp-chinese-formal -moz-simp-chinese-informal -moz-tamil -moz-telugu -moz-thai -moz-trad-chinese-formal -moz-trad-chinese-informal -moz-urdu overflow -moz-scrollbars-none -moz-scrollbars-horizontal -moz-scrollbars-vertical -moz-hidden-unscrollable text-align -moz-c
enter -moz-left -moz-right text-decoration -moz-anchor-decoration -moz-user-select -moz-all -moz-none width, min-width, and max-width -moz-min-content -moz-fit-content -moz-max-content -moz-available pseudo-elements and pseudo-classes a – d ::-moz-anonymous-block eg@:- bug 331432 ::-moz-anonymous-positioned-block :-moz-any :-moz-any-link [matches :link a...
Cubic Bezier Generator - CSS: Cascading Style Sheets
ctx.closepath(); ctx.beginpath(); // draw the y axis label ctx.save(); ctx.rotate(-math.pi / 2); ctx.textalign = "left"; ctx.filltext("output (value ratio)", -cy(0), -3 * basic_scale_size + cx(0)); ctx.restore(); // draw the x axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(0), cy(1)); ctx.textalign = "c
enter"; for (i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(lx(i), basic_scale_size + cy(0)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(lx(i), 2 * basic_scale_size + cy(0)); ctx.filltext(math.round(i * 10) / 10, cx(i), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size }...
Value definition syntax - CSS: Cascading Style Sheets
r thin <length> bold but not <length> bold thin as bold, if not omitted, must be placed before or after the whole thin && <length> component. single bar separating two or more entities by a single bar, |, means that all entities are exclusive options: exactly one of these options must be present. this is typically used to separate a list of possible keywords. <percentage> | <length> | left | c
enter | right | top | bottom this example matches the following values: 3% 0 3.5em left c
enter right top bottom but not: c
enter 3%, as only one of the components must be present. 3em 4.5em, as a component must be present at most one time. note: the double bar has precedence over the single bar, meaning that bold | thin || <length> is equivalent to bold | [ thin || <length> ]. it des...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
em</div> safari list-button div{ color: black; -moz-appearance: list-button; -webkit-appearance: list-button; } <div>lorem</div> safari datalist listitem div { color: black; -moz-appearance: listitem; -webkit-appearance: listitem; } <div>lorem</div> firefox chrome safari edge media-
enter-fullscreen-button div{ color: black; -webkit-appearance: media-
enter-fullscreen-button; } <div>lorem</div> chrome safari media-exit-fullscreen-button div{ color: black; -webkit-appearance: media-exit-fullscreen-button; } <div>lorem</div> chrome safari media-fullscreen-volume-slider div{ color...
backface-visibility - CSS: Cascading Style Sheets
width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: c
enter; } /* 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); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) t...
background-image - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><...
<blend-mode> - CSS: Cascading Style Sheets
/option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat c
enter, linear-gradient(to bottom, blue, orange); } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); selectelem.addeventlistener('change', () => { divelem.style.backgroundblendmode = selectelem.value; }); result specifications specification status comment compositing and blending level 1the definition o...
border-bottom - CSS: Cascading Style Sheets
age> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a bottom border html <div> this box has a border on the bottom side. </div> css div { border-bottom: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: c
enter; } results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom' in that specification. candidate recommendation no direct changes, though the modification of values for the border-bottom-color do apply to it. css level 2 (revision 1)the definition of 'border-bottom' in that specific...
border-image-slice - CSS: Cascading Style Sheets
0" max="45" id="slice"> <output id="slice-output">30</output> </li> </ul> css .wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: solid; border-image: url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: c
enter; } javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = document.getelementbyid('slice-output'); const divelem = document.queryselector('div > div'); widthslider.addeventlistener('input', () => { const newvalue = widthslider.value + 'px'; divele...
border-image-source - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><...
border-image - CSS: Cascading Style Sheets
nd pattern to an element's borders. the source for the border image is a ".png" file of 81 by 81 pixels, with three diamonds going vertically and horizontally: html <div id="bitmap">this element is surrounded by a bitmap-based border image!</div> css to match the size of a single diamond, we will use a value of 81 divided by 3, or 27, for slicing the image into corner and edge regions. to c
enter the border image on the edge of the element's background, we will make the outset values equal to half of the width values. finally, a repeat value of round will make the border slices fit evenly, i.e., without clipping or gaps. #bitmap { width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.c...
border-left - CSS: Cascading Style Sheets
ercentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a left border html <div> this box has a border on the left side. </div> css div { border-left: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: c
enter; } results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left' in that specification. candidate recommendation no direct changes, though the modification of values for the border-left-color do apply to it. css level 2 (revision 1)the definition of 'border-left' in that specification.
border-right - CSS: Cascading Style Sheets
/ <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a right border to a div html <div> this box has a border on the right side. </div> css div { border-right: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: c
enter; } results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right' in that specification. candidate recommendation no direct changes, though the modification of values for the border-right-color do apply to it. css level 2 (revision 1)the definition of 'border-right' in that specificati...
border-spacing - CSS: Cascading Style Sheets
ding values are added to its border-spacing values. html <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> css table { border-spacing: 1em .5em; padding: 0 2em 1em 0; border: 1px solid orange; } td { width: 1.5em; height: 1.5em; background: #d2d2d2; text-align: c
enter; vertical-align: middle; } result specifications specification status comment css level 2 (revision 1)the definition of 'border-spacing' in that specification. recommendation initial definition. ...
border-top - CSS: Cascading Style Sheets
<percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a top border html <div> this box has a border on the top side. </div> css div { border-top: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: c
enter; } results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top' in that specification. candidate recommendation no direct changes, though the modification of values for the border-top-color do apply to it. css level 2 (revision 1)the definition of 'border-top' in that specification. ...
bottom - CSS: Cascading Style Sheets
e and fixed positioning this example demonstrates the difference in behavior of the bottom property, when position is absolute versus fixed. html <p>this<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> <div class="fixed"><p>fixed</p></div> <div class="absolute"><p>absolute</p></div> css p { font-size: 30px; line-height: 2em; } div { width: 48%; text-align: c
enter; background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } result specifications specification status comment css positioned layout module level 3the definition of 'bottom' in that specification. working draft adds behavior for sticky posit...
box-shadow - CSS: Cascading Style Sheets
ecomes bigger and lighter. negative values are not allowed. if not specified, it will be 0 (the shadow's edge is sharp). the specification does not include an exact algorithm for how the blur radius should be calculated, however, it does elaborate as follows: …for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and c
entered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it. <spread-radius> this is a fourth <length> value. positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. if not specified, it will be 0 (the shadow will be the same size as the e...
calc() - CSS: Cascading Style Sheets
() makes it easy to position an object with a set margin. in this example, the css creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window: .banner { position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: c
enter; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing form fields to fit their container another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin. let's look at some css: input { padding: 2px; display: block; width: cal...
color-adjust - CSS: Cascading Style Sheets
ason, this is the desired appearance in any rendering environment, including on paper, so we also use color-adjust: exact to tell the browser not to make color or style adjustments to the box when rendering it. css .my-box { background-color: black; background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: c
enter; font: 24px "helvetica", sans-serif; display: flex; align-items: c
enter; justify-content: c
enter; color-adjust: exact; } html <div class="my-box"> <p>need more contrast!</p> </div> result specifications specification status comment css color adjustment module level 1the definition of 'color-adjust' in that specification. editor's draft initial...
content - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop><counter-style-name> = <custom-ident>where <alpha-value> = <number> | <p...
cross-fade() - CSS: Cascading Style Sheets
color-stop-list> )<alpha-value> = <number> | <percentage><hue> = <number> | <angle>where <side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <linear-color-stop> = <color> <color-stop-length>?<linear-color-hi...
<easing-function> - CSS: Cascading Style Sheets
: 100px; } div > div { position: absolute; width: 50px; height: 50px; background-color: blue; background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: c
enter; justify-content: c
enter; margin-bottom: 20px; } javascript const selectelem = document.queryselector('select'); const startbtn = document.queryselector('button'); const divelem = document.queryselector('div > div'); startbtn.addeventlistener('click', () => { if(startbtn.textcontent === 'start animation') { divelem.style.animationname = 'move-right'; startbtn.textcontent = 'stop ...
<filter-function> - CSS: Cascading Style Sheets
acity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat c
enter; } li { display: flex; align-items: c
enter; justify-content: c
enter; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: c
enter; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); const slider = document.queryselector('input'); const output = docum...
flex-basis - CSS: Cascading Style Sheets
lex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb; color: white; font-size: 14px; text-align: c
enter; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 12px; } .flex1 { flex-basis: auto; } .flex1:after { content: 'auto'; } .flex2 { flex-basis: max-content; } .flex2:after { content: 'max-content'; } .flex3 { flex-basis: min-content; } .flex3:after { content: 'min-conte...
flex-wrap - CSS: Cascading Style Sheets
s="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:wrap-reverse </h4> <div class="content2"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> css /* common styles */ .content, .content1, .content2 { color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: c
enter; } .content div, .content1 div, .content2 div { height: 50%; width: 300px; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* flexbox styles */ .content { display: flex; flex-wrap: wrap; } .content1 { display: flex; flex-wrap: nowrap; } .content2 { display: flex; flex-wrap: wrap-reverse; } res...
font-smooth - CSS: Cascading Style Sheets
uivalents that turn on font-smoothing on macos. in both cases the smoothed font should look slightly lighter in weight. for those of you not on a macos system, here is a screenshot (the live version appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p> css html { background-color: black; color: white; font-size: 3rem; } p { text-align: c
enter; } .smoothed { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } result specifications not part of any standard. ...
<gradient> - CSS: Cascading Style Sheets
ed ratio. its concrete size will match the size of the element to which it applies. syntax the <gradient> data type is defined with one of the function types listed below. linear gradient linear gradients transition colors progressively along an imaginary line. they are generated with the linear-gradient() function. radial gradient radial gradients transition colors progressively from a c
enter point (origin). they are generated with the radial-gradient() function. repeating gradient repeating gradients duplicate a gradient as much as necessary to fill a given area. they are generated with the repeating-linear-gradient() and repeating-radial-gradient() functions. conic gradient conic gradients transition colors progressively around a circle. they are generated with the conic-gra...
ime-mode - CSS: Cascading Style Sheets
cus, so mac users may get grumpy when you use the disabled value. formal definition initial valueautoapplies totext fieldsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | normal | active | inactive | disabled examples disabling input method support this example disables input method support for a form field. in the past, this was commonly used on fields that
entered data into databases which didn't support extended character sets. <input type="text" name="name" value="initial value" style="ime-mode: disabled"> note: you shouldn't rely on disabling ime to prevent extended characters from passing through your form. even with ime disabled, users can still paste extended characters into your form's fields. specifications specification status ...
initial-letter-align - CSS: Cascading Style Sheets
c, and some indic languages to hanging. alphabetic as described above, the cap height of the initial letter aligns with the cap height of the first line of text. the baseline of the initial letter aligns with the baseline of the nth text baseline. hanging the hanging baseline of the initial letter aligns with the hanging baseline of the first line of text. ideographic the initial letter is c
entered in the n-line area. formal definition initial valueautoapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ auto | alphabetic | hanging | ideographic ] examples aligning initial letter html <p class="auto ">initial letter - auto</p> <p class="alphabetic">initial letter - alp...
line-height-step - CSS: Cascading Style Sheets
step. formal definition initial value0applies toblock containersinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples setting step unit for line box height in the following example, the height of line box in each paragraph is rounded up to the step unit. the line box in <h1> does not fit into one step unit and thus occupies two, but it is still c
entered within the two step unit. :root { font-size: 12pt; --my-grid: 18pt; line-height-step: var(--my-grid); } h1 { font-size: 20pt; margin-top: calc(2 * var(--my-grid)); } the result of these rules is shown below in the following screenshot: specifications specification status comment css rhythmic sizingthe definition of 'line-height-step' in that specifica...
linear-gradient() - CSS: Cascading Style Sheets
gradient a linear gradient is defined by an axis—the gradient line—and two or more color-stop points. each point on the axis is a distinct color; to create a smooth gradient, the linear-gradient() function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line. the gradient line is defined by the c
enter of the box containing the gradient image and by an angle. the colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points. the starting point is the location on the gradient line where the first color begins. the ending point is the point where the last color ends. each of these two points is defined by the inters...
mask-border-source - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><...
mask-image - CSS: Cascading Style Sheets
ntage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><...
mask-size - CSS: Cascading Style Sheets
taining 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 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 c
entered 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. th...
offset-path - CSS: Cascading Style Sheets
et( <length-percentage>{1,4} [ round <'border-radius'> ]? )<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )<shape-box> = <box> | margin-boxwhere <shape-radius> = <length-percentage> | closest-side | farthest-side<position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<box> = border-box | padding-box | content-box examples animating an element with offset-path the offset-path properties in the css code sample defines a motion path that ...
order - CSS: Cascading Style Sheets
ner this example uses css to create a classic two-sidebar layout surrounding a content block. the flexible box layout module automatically creates blocks of equal vertical size and uses as much horizontal space as available. html <header>...</header> <main> <article>article</article> <nav>nav</nav> <aside>aside</aside> </main> <footer>...</footer> css main { display: flex; text-align:c
enter; } main > article { flex:1; order: 2; } main > nav { width: 200px; order: 1; } main > aside { width: 200px; order: 3; } result specifications specification status comment css flexible box layout modulethe definition of 'order' in that specification. candidate recommendation initial definition initial value0applies toflex items and absol...
scroll-behavior - CSS: Cascading Style Sheets
href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container> css a { display: inline-block; width: 50px; text-decoration: none; } nav, scroll-container { display: block; margin: 0 auto; text-align: c
enter; } nav { width: 339px; padding: 5px; border: 1px solid black; } scroll-container { display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: flex; align-items: c
enter; justify-content: c
enter; height: 100%; font-size: 5em; } result specifications specification status comment css ob...
scroll-margin-inline-end - CSS: Cascading Style Sheets
ntents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: c
enter; justify-content: c
enter; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin values, a different one for the second and third ...
scroll-margin-inline-start - CSS: Cascading Style Sheets
ntents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: c
enter; justify-content: c
enter; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin-values, a different one for the second and t...
scroll-margin-inline - CSS: Cascading Style Sheets
ntents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: c
enter; justify-content: c
enter; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin values, a different one for the second and third ...
scroll-margin - CSS: Cascading Style Sheets
ntents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: c
enter; justify-content: c
enter; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin-values, a different one for the second and t...
perspective() - CSS: Cascading Style Sheets
lass="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> <p>with perspective (4cm):</p> <div class="perspective-box-closer"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> css .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; text-align: c
enter; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform...
rotate() - CSS: Cascading Style Sheets
the rotate() css function defines a transformation that rotates an element around a fixed point on the 2d plane, without deforming it. its result is a <transform-function> data type. the fixed point that the element rotates around — mentioned above — is also known as the transform origin. this defaults to the c
enter of the element, but you can set your own custom transform origin using the transform-origin property. syntax the amount of rotation created by rotate() is specified by an <angle>. if positive, the movement will be clockwise; if negative, it will be counter-clockwise. a rotation by 180° is called point reflection. rotate(a) values a is an <angle> representing the angle of the rotation. a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise...
<transform-function> - CSS: Cascading Style Sheets
0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; padding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: c
enter; justify-content: c
enter; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) transl...
transform-style - CSS: Cascading Style Sheets
div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="checkbox"> <label for="preserve"><code>preserve-3d</code></label> <input type="checkbox" id="preserve" checked> </div> css #example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: c
enter; justify-content: c
enter; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) transl...
vertical-align - CSS: Cascading Style Sheets
om of the entire line. for elements that do not have a baseline, the bottom margin edge is used instead. values for table cells baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>) aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned. top aligns the top padding edge of the cell with the top of the row. middle c
enters the padding box of the cell within the row. bottom aligns the bottom padding edge of the cell with the bottom of the row. negative values are allowed. formal definition initial valuebaselineapplies toinline-level and table-cell elements. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the line-height of the element itselfcomputed valuefor percentage and le...
will-change - CSS: Cascading Style Sheets
mal 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. ...
Getting Started - Developer guides
ment. you can see the test.xml here and the updated test script here. step 5 – working with data finally, let's send some data to the server and receive a response. our javascript will request a dynamic page this time, test.php, which will take the data we send and return a "computed" string - "hello, [user data]!" - which we'll alert(). ...
Setting up adaptive streaming media sources - Developer guides
s mpeg-4 (h.264 video and aac audio) and packaged into an mpeg-2 transport stream, which is then broken into segments and saved as one or more .ts media files. apple provides tools to convert media files to the appropriate format. hls encoding tools ther are a number of useful tools available for hls encoding for hls live stream encoding adobe provide a media encoder for mac. the stream segm
enter — provided by apple for mac platforms — takes a media stream from a local network and splits media into equally sized media files together with an index file. apple also provides a file segm
enter for mac — which takes a suitably encoded file, splits it up and produces a index file, in a similar fashion to the stream segm
enter. note: you can find more details about these tools at using h...
Creating a cross-browser video player - Developer guides
ideo.currenttime = pos * video.duration; }); this piece of code simply uses the clicked position to (roughly) work out where in the progress element the user has clicked, and to move the video to that position by setting its currenttime attribute. fullscreen the fullscreen api should be straight forward to use: the user clicks a button, if the video is in fullscreen mode: cancel it, otherwise
enter fullscreen mode. alas it has been implemented in browsers in a number of weird and wonderful ways which requires a lot of extra code to check for various prefixed versions of attributes and methods so as to call the right one. to detect if a browser actually supports the fullscreen api and that it is enabled, the following may be called: var fullscreenenabled = !!(document.fullscreenenabled ||...
Mouse gesture events - Developer guides
g of the gesture, you should also watch the mozmagnifygesturestart and mozmagnifygestureupdate events. the delta value is the cumulative change over the course of handling the entire sequence of magnify gesture events. mozrotategesturestart the mozrotategesturestart event is sent when the user begins performing a rotate gesture, by placing two fingers on the trackpad and rotating them around the c
enter of the trackpad. firefox uses this gesture to move backward and forward through the tabs in the current window. mozrotategestureupdate the mozrotategestureupdate event is sent periodically while processing a rotate gesture, to provide updated status information. the event's delta value represents the amount by which the gesture has moved since the mozrotategesturestart or mozrotategestureupdate e...
Rich-Text Editing in Mozilla - Developer guides
erline');" src="data:image/gif;base64,r0lgodlhfgawakecaaaaaf9vj////////yh5baeaaaialaaaaaawabyaaairli+py+0po5zugasezveel4ea15eijj5psqjmuwkbekgxvuxwtun+dwxccga7" /> <img class="intlink" title="left align" onclick="formatdoc('justifyleft');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jmgelkgyxo+qzl4nkyxaaaow==" /> <img class="intlink" title="c
enter align" onclick="formatdoc('justifyc
enter');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaifhi+py+0po5y02ouz3jl4d4jogi7kaz5bqn4sycvbaqa7" /> <img class="intlink" title="right align" onclick="formatdoc('justifyright');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jqgdlkgyxouqzl43jyvgaaow==" /> <img class="intl...
Constraint validation - Developer guides
. <input> <output> <select> submit buttons (created with either a <button> element with the submit type, or an input element with the submit type. other types of buttons do not participate in constraint validation. <textarea> the validitystate interface describes the object returned by the validity property of the element types listed above. it represents various ways that an
entered value can be invalid. together, they help explain why an element's value fails to validate, if it's not valid. ...
Introduction to HTML5 - Developer guides
orts on the main html5 page. for detailed information about multiple browsers' support of html5 features, refer to the caniuse website. declaring that the document contains html5 mark-up with the html5 doctype the doctype for html5 is very simple. to indicate that your html content uses html5, simply use: <!doctype html> doing so will cause even browsers that don't presently support html5 to
enter into standards mode, which means that they'll interpret the long-established parts of html in an html5-compliant way while ignoring the new features of html5 they don't support. this is much simpler than the former doctypes, and shorter, making it easier to remember and reducing the amount of bytes that must be downloaded. declaring the character set with the <meta charset> the first thing don...
A hybrid approach - Developer guides
silver bullets are hard to find in web development — you’re more likely to come across strategies that make the best use of a variety of techniques given the circumstances. this brings us to our third approach, which aims to avoid some of the shortcomings the separate sites and responsive design approaches by combining them. this hybrid approach c
enters around breaking down mobile development into its three goals, and then applying the best techniques available to tackle each goal individually. this article presents one potential combination of techniques as an example here, but different combinations will be appropriate under different circumstances. the most important concept to remember is that server-side and client-side techniques can be combined to fit your situation. the go...
HTML attribute: pattern - HTML: Hypertext Markup Language
nst the value, must have its start anchored to the start of the string and its end anchored to the end of the string, which is slightly different from javascript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end. ...
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
d parents any element that accepts embedded content. dom interface htmlappletelement attributes align this attribute is used to position the applet on the page relative to content that might flow around it. the html 4.01 specification defines values of bottom, left, middle, right, and top, whereas microsoft and netscape also might support absbottom, absmiddle, baseline, c
enter, and texttop. alt this attribute causes a descriptive text alternate to be displayed on browsers that do not support java. page designers should also remember that content enclosed within the <applet> element may also be rendered as alternative text. archive this attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce downloa...
<area> - HTML: Hypertext Markup Language
e alternative text. this attribute is required only if the href attribute is used. coords a set of values specifying the coordinates of the hot-spot region. the number and meaning of the values depend upon the value specified for the shape attribute. rect or rectangle: the value is two x,y pairs: left, top, right, bottom. circle: the value is x,y,r where x,y is a pair specifying the c
enter of the circle and r is a value for the radius. poly or polygon: the value is a set of x,y pairs for each point in the polygon: x1,y1,x2,y2,x3,y3, and so on. the values are numbers of css pixels. download this attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. see <a> for a full description of the download attribute. href the hype...
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
(because it consists of neutral and weak characters). the result will be garbled: 1 - embedded-textst place if you know the directionality of embedded-text in advance, you can fix this problem by wrapping embedded-text in a <span> with the dir attribute set to the known directionality. but if you don't know the directionality - for example, because embedded-text is being read from a database or
entered by the user - you should use <bdi> to prevent the directionality of embedded-text from affecting its surroundings. though the same visual effect can be achieved using the css rule unicode-bidi: isolate on a <span> or another text-formatting element, html authors should not use this approach because it is not semantic and browsers are allowed to ignore css styling. embedding the characters in ...
<input type="checkbox"> - HTML: Hypertext Markup Language
all <input>s). however, most of the validitystates will always be false. if the checkbox has the required attribute, but is not checked, then validitystate.valuemissing will be true. examples the following example is an extended version of the "multiple checkboxes" example we saw above — it has more standard options, plus an "other" checkbox that when checked causes a text field to appear to
enter a value for the "other" option. this is achieved with a simple block of javascript. the example also includes some css to improve the styling. html <form> <fieldset> <legend>choose your interests</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding"> <label for="coding">coding</label> </div> <div> <input type="checkbox" id="music" nam...
<input type="reset"> - HTML: Hypertext Markup Language
behaviour using javascript, you need to use <input type="button">, or better still, a <button> element. a simple reset button we'll begin by creating a simple reset button: <form> <div> <label for="example">type in some sample text</label> <input id="example" type="text"> </div> <div> <input type="reset" value="reset the form"> </div> </form> this renders like so: try
entering some text into the text field, and then pressing the reset button. adding a reset keyboard shortcut to add a keyboard shortcut to a submit button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute. in this example, r is specified as the access key (you'll need to press r plus the particular modifier keys for your browser/os combination...
<input type="submit"> - HTML: Hypertext Markup Language
so you should be in the habit of expressly specifying which button is the submit button. a simple submit button we'll begin by creating a form with a simple submit button: <form> <div> <label for="example">let's submit some text</label> <input id="example" type="text" name="text"> </div> <div> <input type="submit" value="send"> </div> </form> this renders like so: try
entering some text into the text field, and then submitting the form. upon submitting, the data name/value pair gets sent to the server. in this instance, the string will be text=usertext, where "usertext" is the text
entered by the user, encoded to preserve special characters. where and how the data is submitted depends on the configuration of the <form>; see sending form data for more details. addi...
<isindex> - HTML: Hypertext Markup Language
when sent, the server would return a list of pages matching the query. its support depended on both the browser and the server to react to the query. <isindex> is removed html standard. it was deprecated in html 4.01. the same behaviour can be achieved with an html form. all major browsers have now removed <isindex>. attributes like all other html elements, this element accepted the global attributes. ...
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
u items, or the names of buttons displayed on the screen. for example, you can explain how to choose the "new document" option in the "file" menu using html that looks like this: <p>to create a new file, choose the menu option <kbd><kbd><samp>file</samp></kbd>⇒<kbd><samp>new document</samp></kbd></kbd>.</p> <p>don't forget to click the <kbd><samp>ok</samp></kbd> button to confirm once you've
entered the name of the new file.</p> this does some interesting nesting. for the menu option description, the entire input is enclosed in a <kbd> element. then, inside that, both the menu and menu item names are contained within both <kbd> and <samp>, indicating an input which is selected from a screen widget. result specifications specification status comment html l...
<label> - HTML: Hypertext Markup Language
iating a <label> with an <input> element offers some major advantages: the label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. this means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be
entered. you can click the associated label to focus/activate the input, as well as the input itself. this increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device. to associate the <label> with an <input> element, you need to give the <input> an id attribute. the <label> then needs a for attribute whose value is the same as the inp...
<output>: The Output element - HTML: Hypertext Markup Language
to <form>s anywhere in the document, not just inside a <form>. it can also override an ancestor <form> element. name the element's name. used in the form.elements api. the <output> value, name, and contents are not submitted during form submission. examples in the following example, the form provides a slider whose value can range between 0 and 100, and an <input> element into which you can
enter a second number. the two numbers are added together, and the result is displayed in the <output> element each time the value of any of the controls changes. <form oninput="result.value=parseint(a.value)+parseint(b.value)"> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> = <output name="result" for="a b">60</output> </form> accessib...
<spacer> - HTML: Hypertext Markup Language
d block. size this attribute can be used for defining size of spacer in pixels when type is horizontal or vertical. width this attribute can be used for defining width of spacer in pixels when type is block. height this attribute can be used for defining height of spacer in pixels when type is block. align this attribute determines alignment of spacer. possible values are left, right and c
enter. example <span>just a text node</span> <spacer type="horizontal" size="10"></spacer> <span>just another text node</span> <spacer type="block" width="10" height="10"></spacer> specification not part of any specification. ...
autocapitalize - HTML: Hypertext Markup Language
the autocapitalize global attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is
entered/edited by the user. the attribute must take one of the following values: off or none: no autocapitalization is applied (all letters default to lowercase) on or sentences: the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words: the first letter of each word defaults to a capital letter; all other letters default to lowercase characters: all letters should default to uppercase the autocapitalize attribute doesn’t affect behavior when typing on a physical keyboard. instead, it affects the behavior of other input mechanisms, such as virtual keyboards on mobile devices and voice input. th...
Content negotiation - HTTP
ing to process. it is comma-separated lists of mime types, each combined with a quality factor, a parameter indicating the relative degree of preference between the different mime types. the accept header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an html page or an image, a video, or a script: it is different when fetching a document
entered in the address bar or an element linked via an <img>, <video> or <audio> element. browsers are free to use the value of the header that they think is the most adequate; an exhaustive list of default values for common browsers is available. the accept-ch header this is part of an experimental technology called client hints. initial support is in chrome 46 or later. the device-memory value i...
Feature-Policy: fullscreen - HTTP
this directive allows or prevents cross-origin frames from using fullscreen mode. this includes same-origin frames. if both this directive (i.e. ...
Feature-Policy - HTTP
e already stored public-key credentials, i.e. via navigator.credentials.get({publickey: ..., ...}). sync-xhr controls whether the current document is allowed to make synchronous xmlhttprequest requests. usb controls whether the current document is allowed to use the webusb api. wake-lock controls whether the current document is allowed to use wake lock api to indicate that device should not
enter power-saving mode. screen-wake-lock controls whether the current document is allowed to use screen wake lock api to indicate that device should not turn off or dim the screen. web-share controls whether or not the current document is allowed to use the navigator.share() of web share api to share text, links, images, and other content to arbitrary destiations of user's choice, e.g. mobile apps...
Sec-Fetch-Site - HTTP
examples todo specifications specification title fetch metadata request headers the sec-fetch-site http request header ...
HTTP Index - HTTP
ature-policy header vibrate directive controls whether the current document is allowed to trigger device vibrations via vibration api. 150 feature-policy: wake-lock directive, feature-policy, http, reference, wake lock api the http feature-policy header wake-lock directive controls whether the current document is allowed to use wake lock api to indicate that device should not
enter power-saving mode. 151 feature-policy: xr this feature policy directive was at one point defined as xr (but implemented only in chrome as vr), use xr-spatial-tracking instead. 152 feature-policy: xr-spatial-tracking the http feature-policy header xr-spatial-tracking directive controls whether the current document is allowed to use the webxr device api. ...
Expressions and operators - JavaScript
for example, you can override multiplication and division first, then addition and subtraction to evaluate addition first. var a = 1; var b = 2; var c = 3; // default precedence a + b * c ...
FinalizationRegistry - JavaScript
ed by the specification. when, how, and whether garbage collection occurs is down to the implementation of any given javascript engine. any behavior you observe in one engine may be different in another engine, in another version of the same engine, or even in a slightly different situation with the same version of the same engine. garbage collection is a hard problem that javascript engine implem
enters are constantly refining and improving their solutions to. here are some specific points that the authors of the weakref proposal that finalizationregistry is part of included in its explainer document: garbage collectors are complicated. if an application or library depends on gc cleaning up a finalizationregistry or calling a finalizer [cleanup callback] in a timely, predictable manner, it's...
Function.displayName - JavaScript
the function.displayname property returns the display name of the function. examples setting a displayname it is usually preferred by consoles and profilers over func.name to display the name of a function. ...
encodeURIComponent() - JavaScript
this will encode "&" symbols that may inadvertently be generated during data entry for special html entities or other characters that require encoding/decoding. for example, if a user writes "jack & jill", the text may get encoded as "jack & jill". without encodeuricomponent() the ampersand could be interpretted on the server as the start of a new fi...
this - JavaScript
this depends on how the function is called. since the following code is not in strict mode, and because the value of this is not set by the call, this will default to the global object, which is window in a browser. function f1() { return this; } // in a browser: f1() === window; // true // in node: f1() === globalthis; // true in strict mode, however, if the value of this is not set when
entering an execution context, it remains as undefined, as shown in the following example: function f2() { 'use strict'; // see strict mode return this; } f2() === undefined; // true in the second example, this should be undefined, because f2 was called directly and not as a method or property of an object (e.g. window.f2()). this feature wasn't implemented in some browsers when they first star...
async function - JavaScript
rejected, control moves back into foo. the result of the first promise fulfilment (if it was not rejected) is returned from the await expression. here 1 is assigned to result1. progress continues, and the second await expression is evaluated. again, progress through foo is suspended and control is yielded. some time later, when the second promise has either been fulfilled or rejected, control re-
enters foo. the result of the second promise resolution is returned from the second await expression. here 2 is assigned to result2. control moves to the return expression (if any). the default return value of undefined is returned as the resolution value of the current promise. async function foo() { const result1 = await new promise((resolve) => settimeout(() => resolve('1'))) const result2 =...
function* - JavaScript
enerator functions using the generatorfunction constructor, or the function expression syntax. syntax function* name([param[, param[, ... param]]]) { statements } name the function name. param optional the name of a formal parameter for the function. statements the statements comprising the body of the function. description generators are functions that can be exited and later re-
entered. their context (variable bindings) will be saved across re-entrances. generators in javascript -- especially when combined with promises -- are a very powerful tool for asynchronous programming as they mitigate -- if not entirely eliminate -- the problems with callbacks, such as callback hell and inversion of control. however, an even simpler solution to these problems can be achieved with asy...
Strict mode - JavaScript
use strict';) in the function's body before any other statements. function strict() { // function-level strict mode syntax 'use strict'; function nested() { return 'and so am i!'; } return "hi! i'm a strict mode function! " + nested(); } function notstrict() { return "i'm not strict."; } strict mode for modules ecmascript 2015 introduced javascript modules and therefore a 3rd way to
enter strict mode. the entire contents of javascript modules are automatically in strict mode, with no statement needed to initiate it. function strict() { // because this is a module, i'm strict by default } export default strict; changes in strict mode strict mode changes both syntax and runtime behavior. changes generally fall into these categories: changes converting mistakes into errors (...
Template literals (Template strings) - JavaScript
ge'} years old.`; //let t3closure = template(["i'm ", ". i'm almost ", " years old."], "name", "age"); t3closure('foo', {name: 'mdn', age: 30}); //"i'm mdn. i'm almost 30 years old." t3closure({name: 'mdn', age: 30}); //"i'm mdn. i'm almost 30 years old." raw strings the special raw property, available on the first argument to the tag function, allows you to access the raw strings as they were
entered, without processing escape sequences. function tag(strings) { console.log(strings.raw[0]); } tag`string text line 1 \n string text line 2`; // logs "string text line 1 \n string text line 2" , // including the two characters '\' and 'n' in addition, the string.raw() method exists to create raw strings—just like the default template function and string concatenation would create. let st...
MathML attribute reference - MathML
nimum space by which to shift the subscript below the baseline of the expression. 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 (c
entered 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> ...
Authoring MathML - MathML
ions. once you are done, you can save your document as a xhtml page. lyx is a graphical latex editor, which has built-in support for xhtml+mathml export and can be configured to use similar latex-to-(x)html converters. you can for example, you can configure it to use latexml html5/epub export. openoffice and libreoffice have an equation editor (file → new → formula). it is semi-wysiwyg: you
enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. the editor uses its own syntax "starmath" for the source but mathml is also generated when the document is saved. to get the mathml code, save the document as mml and open it with any text editor. alternatively, you can extract the odf file (which is actually a zip archive) and open an...
<mlabeledtr> - MathML
lement). child elements of <mlabeledtr> must be <mtd> elements. the first child is the label whereas all other children are representing row contents and are treated identically to children of <mtr> elements. attributes class, id, style provided for use with stylesheets. columnalign overrides the horizontal alignment of cells specified by <mtable> for this row. possible values are: left, c
enter and right. groupalign href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign overrides the vertical alignment of cells specified by <mtable> for this row. possible values are: axis, baseline, bottom, c
enter and top. examples ...
<mo> - MathML
effect for this attribute, but it specifies whether the operator is a separator (such as commas). allowed values are true or false. stretchy specifies whether the operator stretches to the size of the adjacent element. allowed values are true or false. symmetric if stretchy is true, this attribute specifies whether the operator should be vertically symmetric around the imaginary math axis (c
entered fraction line). the default value is true if stretchy is set to true and otherwise false. allowed values are true or false. examples <math> <mrow> <mn>5</mn> <mo>+</mo> <mn>5</mn> </mrow> <mrow> <mo> [ </mo> <!-- default form value: prefix --> <mrow> <mn> 0 </mn> <mo> ; </mo> <!-- default form value: infix --> <mn> 1 </mn> </mrow> <mo> ) </mo> <!-- default form v...
<mover> - MathML
mathml <mover> element is used to attach an accent or a limit over an expression. use the following syntax: <mover> base overscript </mover> attributes accent if true the over-script is an accent, which is drawn closer to the base expression. if false (default value) the over-script is a limit over the base expression. align the alignment of the over-script. possible values are: left, c
enter, and right. this attribute is deprecated and will be removed in the future. use css text-align instead. class, id, style provided for use with stylesheets. href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. examples sample renderi...
<mtr> - MathML
the mathml <mtr> element represents a row in a table or a matrix. it may only appear in a <mtable> element. this element is similar to the <tr> element of html. attributes class, id, style provided for use with stylesheets. columnalign overrides the horizontal alignment of cells specified by <mtable> for this row. possible values are: left, c
enter and right. groupalign unimplemented href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign overrides the vertical alignment of cells specified by <mtable> for this row. possible values are: axis, baseline, bottom, c
enter and top. specifications specification ...
<munder> - MathML
munder> element is used to attach an accent or a limit under an expression. it uses the following syntax: <munder> base underscript </munder> attributes accentunder if true, the element is an accent, which is drawn closer to the base expression. if false (default value), the element is a limit under the base expression. align the alignment of the underscript. possible values are: left, c
enter, and right. this attribute is deprecated and will be removed in the future. use css text-align instead. class, id, style provided for use with stylesheets. href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. examples sample renderi...
<munderover> - MathML
ccent, which is drawn closer to the base expression. if false (default value), the overscript is a limit over the base expression. accentunder if true, the underscript is an accent, which is drawn closer to the base expression. if false (default value), the underscript is a limit under the base expression. align the alignment of both underscript and overscript. possible values are: left, c
enter, and right. this attribute is deprecated and will be removed in the future. use css text-align instead. class, id, style provided for use with stylesheets. href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. examples sample renderi...
CSS and JavaScript animation performance - Web Performance
lback, also triggered before the next repaint. if both animations are made in the main ui thread, there is no difference performance-wise. in this section we'll walk you through a performance test, using firefox, to see what animation method seems better overall. enabling fps tools before going through the example, please enable fps tools first to see the current frame rate: in the url bar,
enter about:config; click the i’ll be careful, i promise! button to
enter the config screen. in the search bar, search for the layers.acceleration.draw-fps preference. double-click the entry to set the value to true. now you will be able to see three little purple boxes at the upper left corner of the firefox window. the first box represents fps. running the performance test initially ...
Performance fundamentals - Web Performance
tions and animations that adhere to these guidelines can be offloaded to the system compositor and run maximally efficiently. memory and power usage improving memory and power usage is a similar problem to speeding up startup: don't do unneeded work or lazily load uncommonly-used ui resources. do use efficient data structures and ensure resources like images are optimized well. modern cpus can
enter a lower-power mode when mostly idle. applications that constantly fire timers or keep unnecessary animations running prevent cpus from
entering low-power mode. power-efficient applications shouldn't do that. when applications are sent to the background, a visibilitychange event is fired on their documents. this event is a developer's friend; applications should listen for it. applications that d...
Populating the page: how browsers work - Web Performance
e available to handle user interactions. web performance can be improved by understanding the single-threaded nature of the browser and minimizing the main thread's responsibilities, where possible and appropriate, to ensure rendering is smooth and responses to interactions are immediate. navigation navigation is the first step in loading a web page. it occurs whenever a user requests a page by
entering a url into the address bar, clicking a link, submitting a form, as well as other actions. one of the goals of web performance is to minimize the amount of time a navigation takes to complete. in ideal conditions, this usually doesn't take too long, but latency and bandwidth are foes which can cause delays. dns lookup the first step of navigating to a web page is finding where the assets for...
Lazy loading - Web Performance
hat are within the visual viewport that haven't yet loaded. you can determine if a given image has finished loading by examining the value of its boolean complete property. polyfill include this polyfill to provide support for older and currently incompatible browsers: loading-attribute-polyfill intersection observer api intersection observers allow the user to know when an observed element
enters or exits the browser’s viewport. event handlers when browser compatibility is crucial, there are a few options: polyfill intersection observer fallback to scroll, resize or orientation change event handlers to determine if a specific element is in viewport specifications specification status comment html living standard living standard ...
Navigation and resource timings - Web Performance
deventstart, and loadeventend. with the metrics above, and a little bit of math, we can calculate many important metrics like time to first byte, page load time, dns lookup, and whether the connection is secure. to help measure the time it takes to complete all the steps, the performance timing api provides read only measurements of navigation timings. to view and capture our app's timing we
enter: let time = window.performance.timing we can then use the results to measure how well our app is performing. the order is: performance timings details navigationstart when the prompt for unload terminates on the previous document in the same browsing context. if there is no previous document, this value will be the same as performancetiming.fetchstart. s...
Media - Progressive web apps (PWAs)
it uses your browser's default style. print (or print preview) the document. the stylesheet places each section on a separate page, and it adds a ...
begin - SVG: Scalable Vector Graphics
n start time is defined relative to the time that the specified event is fired. a valid event-value consists of an element id followed by a dot and one of the supported events for that element. all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouse
enter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent. an optional offset value as defined in <offset-value> can be appended. <repeat-value> this value defines a qualified repeat event. the element animation sta...
end - SVG: Scalable Vector Graphics
on end time is defined relative to the time that the specified event is fired. a valid event-value consists of an element id followed by a dot and one of the supported events for that element. all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouse
enter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent . an optional offset value as defined in <offset-value> can be appended. <repeat-value> this value defines a qualified repeat event. the element animation en...
fill-rule - SVG: Scalable Vector Graphics
it is therefore considered outside the shape, and not filled. --> <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,35 102,35 179,90"/> </svg> usage notes value nonzero | evenodd default value nonzero animatable yes the fill-rule attri...
stroke-linejoin - SVG: Scalable Vector Graphics
following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- c
enter path: effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="round" /> <!-- upper right path: effect of the "bevel" value --> <path d="m13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- bottom left path: effect of the "miter-clip" value w...
viewBox - SVG: Scalable Vector Graphics
s of the viewbox` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox the circle looks large as it is using user units for the r attribute: 4 resolved against 10 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- the point of coordinate 0,0 is now in the c
enter of the viewport, and 100% is still resolve to a width or height of 10 user units so the rectangle looks shifted to the bottom/right corner of the viewport --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with the point of coordinate 0,0 in the c
enter of the viewport the value 50% is resolve to 5 which means the c
enter of the circle is in the bottom/right corner of the view...
SVG Attribute reference - SVG: Scalable Vector Graphics
lines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondrag
enter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouse
enter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, on...
<ellipse> - SVG: Scalable Vector Graphics
note: ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute. html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. value type: <length>|<percentage> ; default value: 0; animatable: yes cy the y position of the ellipse. ...
<marker> - SVG: Scalable Vector Graphics
is attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|slice)? ; default value: xmidymid meet; animatable: yes refx this attribute defines the x coordinate for the reference point of the marker. value type: left|c
enter|right|<coordinate> ; default value: 0; animatable: yes refy this attribute defines the y coordinate for the reference point of the marker. value type: top|c
enter|bottom|<coordinate> ; default value: 0; animatable: yes viewbox this attribute defines the bound of the svg viewport for the current svg fragment. value type: <list-of-numbers> ; default value: none; animatable: yes global attrib...
<mpath> - SVG: Scalable Vector Graphics
100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <!-- here is a triangle which will be moved about the motion path. it is defined with an upright orientation with the base of the triangle c
entered horizontally just above the origin. --> <path d="m-25,-12.5 l25,-12.5 l 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animatemotion> </path> </svg> result specifications specification status c...
<symbol> - SVG: Scalable Vector Graphics
the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|slice)? ; default value: xmidymid meet; animatable: yes refx this attribute determines the x coordinate of the reference point of the symbol. value type: <length>|<percentage>|left|c
enter|right ; default value: 0; animatable: yes refy this attribute determines the y coordinate of the reference point of the symbol. value type: <length>|<percentage>|top|c
enter|bottom ; default value: 0; animatable: yes viewbox this attribute defines the bound of the svg viewport for the current symbol. value type: <list-of-numbers> ; default value: none; animatable: yes width this attribute ...
SVG animation with SMIL - SVG: Scalable Vector Graphics
rcle> </svg> animating the transform attributes the <animatetransform> element let you animate transform attributes. this new element is necessary because we are not animating a simple attribute like x which is just a number. rotation attributes look like this: rotation(theta, x, y), where theta is the angle in degrees, and x and y are absolute positions. in the example below, we animate the c
enter of the rotation and the angle. <svg width="300" height="100"> <title>svg smil animate with transform</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"> <animatetransform attributename="transform" begin="0s" dur="20s" type="rotate" ...
Clipping and masking - SVG: Scalable Vector Graphics
o account. creating clips we create the above mentioned semicircle based on a circle element: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clippath id="cut-off-bottom"> <rect x="0" y="0" width="200" height="100" /> </clippath> </defs> <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> </svg> c
entered at (100,100) a circle with radius 100 is painted. the attribute clip-path references a <clippath> element with a single rect element. this rectangular on its own would paint the upper half of the canvas black. note, that the clippath element is usually placed in a defs section. the rect will not be painted, however. instead its pixel data will be used to determine, which pixels of the circle "...