Search completed in 1.45 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.
...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).
... example 1 <c
enter>this text will be c
entered.
...And 2 more matches
Element: mouseenter event - Web APIs
the mouse
enter event is fired at an element when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.
... bubbles no cancelable no interface mouseevent event handler property onmouse
enter usage notes though similar to mouseover, mouse
enter differs in that it doesn't bubble and it isn't sent to any descendants when the pointer is moved from one of its descendants' physical space to its own physical space.
... one mouse
enter event is sent to each element of the hierarchy when
entering them.
...And 8 more matches
JS_EnterCrossCompartmentCall
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.
...And 5 more matches
JS_EnterCompartment
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.
...this implicitly identifies the compartment to be
entered.
...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.
...And 4 more matches
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.
...And 4 more matches
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.
...And 4 more matches
mozilla::MonitorAutoEnter
mozilla::monitorauto
enter is an raii helper for mozilla::monitor.
...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.
...And 3 more matches
JS_EnterLocalRootScope
enter a local root scope.
... syntax jsbool js_
enterlocalrootscope(jscontext *cx); name type description cx jscontext * pointer to the context.
...calling js_
enterlocalrootscope and js_leavelocalrootscope around the body of the native hook protects each object, double, and string created using the same jscontext from gc.
...And 3 more matches
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.
... 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.
... 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.
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.
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.
... 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.
Document: dragenter event - Web APIs
the drag
enter event is fired when a dragged element or text selection
enters a valid drop target.
... 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.
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).
... bubbles no cancelable no interface pointerevent event handler property onpointer
enter examples using addeventlistener(): document.addeventlistener('pointer
enter', (event) => { console.log('pointer
entered element'); }); using the onpointer
enter event handler property: document.onpointer
enter = (event) => { console.log('pointer
entered element'); }; specifications specification status pointer events obsolete ...
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).
... bubbles no cancelable no interface pointerevent event handler property onpointer
enter examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointer
enter', (event) => { console.log('pointer
entered element'); }); using the onpointer
enter event handler property: const para = document.queryselector('p'); para.onpointer
enter = (event) => { console.log('pointer
entered element'); }; specifications specification status pointer events obsolete ...
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...
...>≤</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> <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="texbook, 18.23-18.24" /></td> <td> <math display="block"> <mover> <mrow> <mi>x</mi> <mo>+</mo> <mo>...</mo> <mo>+</mo> <mi>x</mi> </mrow> <mover> <mo>&overbrace;</mo> <mrow><mi>k</mi> <mspace width="thinmathspace"/> <mtext>times</mtext></mrow> </mover> </m...
...And 44 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="color" name="color"/> html5 date a control for
entering a date (year, month, and day, with no time).
... <input type="date" name="date"/> html5 datetime-local a control for
entering a date and time, with no time zone.
... <input type="image" name="image" src="" alt="image input"/> month a control for
entering a month and year, with no time zone.
...And 31 more matches
<input type="tel"> - HTML: Hypertext Markup Language
<input> elements of type tel are used to let the user
enter and edit a telephone number.
... 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.
...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 26 more matches
<input type="email"> - HTML: Hypertext Markup Language
<input> elements of type email are used to let the user
enter and edit an e-mail address, or, if the multiple attribute is specified, a list of e-mail addresses.
...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.
...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 25 more matches
<input type="url"> - HTML: Hypertext Markup Language
<input> elements of type url are used to let the user
enter and edit a url.
...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.
... maxlength the maximum number of characters (as utf-16 code units) the user can
enter into the url input.
...And 25 more matches
Index - Archive of obsolete content
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.
... 365 automatic mozilla configurator administration, configuration management,
enterprise no summary!
... 366 enabling quicklaunch for all users administration, configuration management,
enterprise no summary!
...And 20 more matches
<input type="number"> - HTML: Hypertext Markup Language
<input> elements of type number are used to let the user
enter a number.
...if the value
entered into the element exceeds this, the element fails constraint validation.
... 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.
...And 19 more matches
Index
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.
... 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.
... 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.
...And 18 more matches
<input type="text"> - HTML: Hypertext Markup Language
value the value attribute is a domstring that contains the current value of the text
entered into the text field.
... maxlength the maximum number of characters (as utf-16 code units) the user can
enter into the text input.
... minlength the minimum number of characters (as utf-16 code units) the user can
enter into the text input.
...And 18 more matches
<input type="search"> - HTML: Hypertext Markup Language
<input> elements of type search are text fields designed for the user to
enter search queries into.
... maxlength the maximum number of characters (as utf-16 code units) the user can
enter into the search field.
... 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.
...And 16 more matches
HTML documentation index - HTML: Hypertext Markup Language
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.
... 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.
... 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>.
...And 15 more matches
A first splash into JavaScript - Learn web development
we'll tell you if your guess was too high or too low.</p> <div class="form"> <label for="guessfield">
enter a guess: </label><input type="text" id="guessfield" class="guessfield"> <input type="submit" value="submit guess" class="guesssubmit"> </div> <div class="resultparas"> <p class="guesses"></p> <p class="lastresult"></p> <p class="loworhi"></p> </div> <script> // your javascript goes here let randomnumber = math.floor(math.random() * 100) + 1; const guess...
... stop the player from being able to
enter more guesses (this would mess the game up).
... allow them to
enter another guess.
...And 14 more matches
<input type="password"> - HTML: Hypertext Markup Language
<input> elements of type password provide a way for the user to securely
enter a password.
...tributes autocomplete, inputmode, maxlength, 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 ("").
...And 14 more matches
Release notes - Archive of obsolete content
this will not include any uplifts made after this release
entered aurora.
...this will not include any uplifts made after this release
entered aurora.
...this will not include any uplifts made after this release
entered aurora.
...And 13 more matches
Index - Web APIs
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.
... 649 compositionevent api, compositionevent, dom, event, reference the dom compositionevent represents events that occur due to the user indirectly
entering text.
... 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.
...And 13 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 13 more matches
Client-side form validation - Learn web development
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.
... "please
enter your phone number in the format xxx-xxxx" (a specific data format is required for it to be considered valid).
... "please
enter a valid email address" (the data you
entered is not in the right format).
...And 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...
...ider-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 { height: inherit; padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown list */ .ui-dropdown-list { width: 100%; height: 150px; max-height: 150px; margin: 0; padding: 0 0.3em; border: 3px solid #3490d2; border-color: #208b20; background: #666; background-color: ...
...And 12 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
<input> elements of type datetime-local create input controls that let the user easily
enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.
...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.
... methods select(), stepdown(), stepup() value a domstring representing the value of the date
entered into the input.
...And 12 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...
...pup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontext
entered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... form-history requires seamonkey 2.0 search the values that the user has
entered into form fields.
...And 11 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...
... form-history requires seamonkey 2.0 search the values that the user has
entered into form fields.
...if false, only the text that hasn't been
entered yet will be filled in.
...And 11 more matches
textbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an input field where the user can
enter text.
...mbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange style classes plain examples <vbox> <label control="your-name" value="
enter your name:"/> <textbox id="your-name" value="john"/> </vbox> attributes cols type: integer for multiline textboxes, the number of columns to display.
... maxlength type: integer the maximum number of characters that the textbox allows to be
entered.
...And 11 more matches
JavaScript basics - Learn web development
as your javascript skills grow, your websites will
enter a new dimension of power and creativity.
... 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.
... important: in this article, try
entering the example code lines into your javascript console to see what happens.
...And 11 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
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).
...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.
...the text
entered as the value for this attribute is what gets displayed as the tooltip.
...And 10 more matches
Drag Operations - Web APIs
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.
...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.
... during a drag operation, a listener for the drag
enter or dragover events can check the effectallowed property to see which operations are permitted.
...And 10 more matches
Using CSS gradients - CSS: Cascading Style Sheets
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.
... <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.
... 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.
...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...
...kground: 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 */ .ui-slider { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-slider > * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; back...
...And 10 more matches
<input type="date"> - HTML: Hypertext Markup Language
<input> elements of type="date" create input fields that let the user
enter a date, either with a textbox that validates the input or a special date picker interface.
... methods select(), stepdown(), stepup() value a domstring representing the date
entered in the input.
...if the value
entered into the element occurs afterward, the element fails constraint validation.
...And 10 more matches
Mobile accessibility - Learn web development
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.
...
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.
...And 9 more matches
Handling common HTML and CSS problems - Learn web development
in the search packages text field, type "lint" and press
enter/return to search for linting-related packages.
...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 9 more matches
<textarea> - HTML: Hypertext Markup Language
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.
... default content
entered between the opening and closing tags.
... 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.
...And 9 more matches
panel - Archive of obsolete content
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.
...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.
...And 8 more matches
Numeric Controls - Archive of obsolete content
« previousnext » xul has two elements used for the entry of numeric values or ranges, and well as two elements for
entering dates and times.
...number fields a textbox may be used for
entering numbers by setting the value of the type attribute to the value number.
... this type of textbox may only be used to
enter numbers.
...And 8 more matches
NSS Tools modutil
-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.
...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.
...And 8 more matches
The JavaScript input interpreter - Firefox Developer Tools
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.
... if your input does not appear to be complete when you press
enter, then the console treats this as shift+
enter , enabling you to finish your input.
...And 8 more matches
radial-gradient() - CSS: Cascading Style Sheets
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.
...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).
...And 8 more matches
transform-origin - CSS: Cascading Style Sheets
for example, the transformation origin of the rotate() function is the c
enter of rotation.
... 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.
... 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.
...And 8 more matches
Client-side storage - Learn web development
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.
...our example will allow you
enter a name, after which the page will update to give you a personalized greeting.
... 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.
...And 7 more matches
Handling common accessibility problems - Learn web development
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).
...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.
...And 7 more matches
CanvasRenderingContext2D.rotate() - Web APIs
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.
...note that the c
enter of rotation is the top-left corner of the canvas, and not a location relative to any shape.
...And 7 more matches
ARIA: button role - Accessibility
ample creates a simple button which is first in the focus order, though <button> or <input> with type="button" should be used for buttons: <button id="savechanges">save</button> note: if using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and have to define event handlers for click and keydown events, including the
enter and space keys, in order to process the user's input.
... keyboard interactions key function
enter activates the button.
...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.
...And 7 more matches
ARIA: textbox role - Accessibility
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".
... <!-- simple text input field --> <div id="txtboxlabel">
enter your five-digit zipcode</div> <div role="textbox" contenteditable="true" aria-placeholder="5-digit zipcode" aria-labelledby="txtboxlabel"></div> <!-- multi-line text area --> <div id="txtboxmultilinelabel">
enter the tags for the article</div> <div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="txtboxmultilinelabel" aria-required="true"></div> semantic elements are more concise and require no javascript to support textbox features.
... <label for="txtbox">
enter your five-digit zipcode</label> <input type="text" placeholder="5-digit zipcode" id="txtbox"/> <!-- multi-line text area --> <label for="txtboxmultiline">
enter the tags for the article</label> <textarea id="txtboxmultiline" required></textarea> where a text field is read-only, indicated this by setting aria-readonly="true" on the element.
...And 7 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 7 more matches
conic-gradient() - CSS: Cascading Style Sheets
the conic-gradient() css function creates an image consisting of a gradient with color transitions rotated around a c
enter point (rather than radiating from the c
enter).
... syntax /* a conic gradient rotated 45 degrees, starting blue and finishing red */ conic-gradient(from 45deg, blue, red); /* a a bluish purple box: the gradient goes from blue to red, but as only the bottom right quadrant is visible, as the c
enter of the conic gradient is in at the top left corner */ conic-gradient(from 90deg at 0 0, blue, red); /* colorwheel */ background: conic-gradient( hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) ); values <angle> preceded b...
... <position> using the same length, order and keyterm values as the background-position property, the position defines c
enter of the gradient.
...And 7 more matches
Event reference
mouse
enter a pointing device is moved onto the element that has the listener attached.
... drag
enter a dragged element or text selection
enters a valid drop target.
...ow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange dom mutation events domattributenamechanged domattrmodified domcharacterdatamodified domcontentloaded domelementnamechanged domnodeinserted domnodeinsertedintodocument domnoderemoved domnoderemovedfromdocument domsubtreemodified touch events touchcancel touchend touchmove touchstart pointer events pointerover pointer
enter pointerdown pointermove pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture standard events these events are defined in official web specifications, and should be common across browsers.
...And 7 more matches
<input type="month"> - HTML: Hypertext Markup Language
<input> elements of type month create input fields that let the user
enter a month and year allowing a month and year to be easily
entered.
...in browsers that don't support month inputs, the control degrades gracefully to a simple <input type="text">, although there may be automatic validation of the
entered text to ensure it's formatted as expected.
... value a domstring representing the value of the month and year
entered into the input, in the form yyyy-mm (four or more digit year, then a hyphen ("-"), followed by the two-digit month).
...And 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).
... 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.
... value a domstring containing the value of the time
entered into the input.
...And 7 more matches
Index - Archive of obsolete content
249 ontext
entered xul attributes, xul reference no summary!
... 458 c
enterwindowonscreen xul methods, xul reference no summary!
... 541 ontext
entered needshelp, xul methods, xul reference no summary!
...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.
... try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="c
enter">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="c
enter">home</a> </td> <td width="200"> <a href="#" align="c
enter">our team</a> </td> <td width="200"> <a href="#" align="c
enter">projects</a> </td> <td width="200"> ...
... <a href="#" align="c
enter">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="sp...
...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.
... try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="c
enter">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="c
enter">home</a> </td> <td width="200"> <a href="#" align="c
enter">our team</a> </td> <td width="200"> <a href="#" align="c
enter">projects</a> </td> <td width="200"> ...
... <a href="#" align="c
enter">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="sp...
...And 6 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
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.
..."todo-0" class="label__lg">what needs to be done?</label> </h2> <input bind:value={name} bind:this={nameel} type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled={!name} class="btn btn__primary btn__lg">add</button> </form> try the app out — type a new todo name in to the <input> field, press tab to give focus to the add button, and then hit
enter or escape to see how the input recovers focus.
...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
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
i can use the align-items property on the grid container, to align the items using one of the following values: auto normal start end c
enter stretch baseline first baseline last baseline * {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); ...
...the second item, has an align-self value of start, the third end and the fourth c
enter.
...d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 { grid-area: a; } .item2 { grid-area: b; align-self: start; } .item3 { grid-area: c; align-self: end; } .item4 { grid-area: d; align-self: c
enter; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> </div> items with an intrinsic aspect ratio the specification details that the default behavior in align-self is to stretch, except for items which have an intrinsic aspect ratio, in this case they behave as start.
...And 6 more matches
background-position - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: c
enter; /* <percentage> values */ background-position: 25% 75%; /* <length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* multiple images */ background-position: 0 0, c
enter; /* edge offsets values */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-positio...
...if only one value is specified, the second value is assumed to be c
enter.
... 1-value syntax: the value may be: the keyword value c
enter, which c
enters the image.
...And 6 more matches
justify-items - CSS: Cascading Style Sheets
lignment in block, absolute positioned and table layout) in flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns the items inside their grid areas on the inline axis (more about alignment in grid layouts) syntax /* basic keywords */ justify-items: auto; justify-items: normal; justify-items: stretch; /* positional alignment */ justify-items: c
enter; /* pack items around the c
enter */ justify-items: start; /* pack items from the start */ justify-items: end; /* pack items from the end */ justify-items: flex-start; /* equivalent to 'start'.
...*/ 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.
... positional alignment: one of: c
enter, start, end, flex-start, flex-end, self-start, self-end, left, or right.
...And 6 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).
... 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 length, order and keyterm values as the background-position property, the position defines c
enter of the gradient.
...And 6 more matches
repeating-radial-gradient() - CSS: Cascading Style Sheets
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 t...
...he 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.
...And 6 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
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.
...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.
...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.
...And 5 more matches
azimuth - Archive of obsolete content
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).
... c
enter-left: same as 340deg.
...And 5 more matches
The HTML5 input types - Learn web development
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.
... note: if the data
entered is not an email address, the :invalid pseudo-class will match, and the validitystate.typemismatch property will return true.
...additionally, on devices with dynamic keyboards, the keyboard's
enter key may read "search", or display a magnifying glass icon.
...And 5 more matches
How to get a stacktrace with WinDbg
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.
...to load the symbols,
enter the three commands below, pressing
enter after each one.
...And 5 more matches
Rhino Debugger
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.
... 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.
...And 5 more matches
Index
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.
... 253 js_
entercompartment jsapi reference, spidermonkey no summary!
... 254 js_
entercrosscompartmentcall jsapi reference, obsolete, spidermonkey no summary!
...And 5 more matches
All keyboard shortcuts - Firefox Developer Tools
enter return
enter step forward through the attributes of a node tab tab tab step backward through the attributes of a node shift + tab shift + tab shift + tab (when an attribute is selected) start editing the attribute
enter return
enter hide/show the selected node h h h focus on the search box in the html pane c...
...trl + f cmd + f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +
enter f2 / cmd + return f2 / ctrl +
enter copy the selected node's outer html ctrl + c cmd + c ctrl + c scroll the selected node into view s s s find the next match in the markup, when searching is active
enter return
enter find the previous match in the markup, when searching is active shift +
enter shift + return shift +
enter breadcrumbs bar these shortcuts work when the breadcrumbs bar is focused.
... command windows macos linux focus on the search box in the css pane ctrl + f cmd + f ctrl + f clear search box content (only when the search box is focused, and content has been
entered) esc esc esc step forward through properties and values tab tab tab step backward through properties and values shift + tab shift + tab shift + tab start editing property or value (rules view only, when a property or value is selected, but not already being edited)
enter or space return or space
enter or space cycle up and ...
...And 5 more matches
Examine and edit HTML - Firefox Developer Tools
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.
... css selector search you can search elements by
entering a css selector.
...And 5 more matches
Applying styles and colors - Web APIs
the valid strings you can
enter should, according to the specification, be css <color> values.
...by increasing the step count and in effect drawing more circles, the background would completely disappear from the c
enter of the image.
... the line width is the thickness of the stroke c
entered on the given path.
...And 5 more matches
Key Values - Web APIs
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_accept (0x1e) keycode_dpad_c
enter (23) "again" the again key.
...And 5 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...
...ider-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 */ /* 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-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 { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } body { max-width: 1000px; margin: 0 auto; font-family: "...
...And 5 more matches
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
it enabled proper vertical alignment, so we can at last easily c
enter a box.
... 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.
...change the size of the container or nested element and the nested element always remains c
entered.
...And 5 more matches
Building accessible custom components in XUL - Archive of obsolete content
nly.xul"); grid.spreadsheet { border: thin solid; } grid.spreadsheet label { border-bottom: 1px solid black; border-left: 1px solid black; margin: 0; padding: 3px; } grid.spreadsheet description { color: black; background-color: white; margin: 0px; padding: 2px; border-left: thin solid; border-bottom: thin solid; font-family: monospace; font-size: 12pt; text-align: c
enter; font-weight: bold; } </code> you can see the results by installing stage-1.xpi, restarting firefox, and selecting accjax from the tools menu.
...to maintain compatibility with the accessible html spreadsheet demo, i chose the
enter key to trigger editing mode.
... when the user presses
enter, we replace the currently focused xul label element with a xul textbox element, copy the initial value over to the textbox element, and call its focus and select methods to set focus to the textbox and select the entire value.
...And 4 more matches
Element Positioning - Archive of obsolete content
this is useful if the user wants to
enter a long string of text.
... c
enter this c
enters the child elements in the box.
... we can change the earlier example to c
enter the elements as follows: example 4: source view <box flex="1" pack="c
enter"> <button label="happy"/> <button label="sad"/> </box> now, when the window is resized, the buttons c
enter themselves horizontally.
...And 4 more matches
XUL controls - Archive of obsolete content
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.
... <tab label="firefox"/> tab reference related elements: tabs tabbox tabpanels <textbox> a textbox which allows a single line of text to be
entered.
... textbox reference <textbox multiline="true"> a textbox which allows multiple lines of text to be
entered.
...And 4 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
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.
...some other design patterns are based on mvc, such as mvvm (model-view-viewmodel), mvp (model-view-pres
enter), and mvw (model-view-whatever).
... 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.
...And 4 more matches
Flexbox - Learn web development
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.
... 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.
... 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.
...And 4 more matches
UI pseudo-classes - Learn web development
while it is being clicked on, or when the return/
enter key is being pressed down in the case of a keyboard activation).
...for example, in our custom radio buttons example, we use generated content to handle the placement and animation of the inner circle when a radio button is selected: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: c
enter; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } this is really useful — screenreaders already let their users know when a radio button or checkbox they encounter is checked/selected, so you don't want them to read out another dom element that indicates selection — ...
... 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).
...And 4 more matches
Basic math in JavaScript — numbers and operators - Learn web development
enter the commands listed below into your developer tools javascript console.
...
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.
...this most commonly happens when data is
entered into a form input, and the input type is text.
...And 4 more matches
Handling text — strings in JavaScript - Learn web development
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.
...try
entering the following lines: let badstring = this is a test; let badstring = 'this is a test; let badstring = this is a test'; these lines don't work because any text without quotes around it is assumed to be a variable name, property name, a reserved word, or similar.
...And 4 more matches
Storing the information you need — Variables - Learn web development
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.
... 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.
...when you
enter the variable names, you should get a value of undefined returned.
...And 4 more matches
Introduction to automated testing - Learn web development
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.
...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.
...And 4 more matches
Setting up your own test automation environment - Learn web development
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.
...('q')).sendkeys(webdriver.key.tab); }); driver.findelement(by.name('btnk')).click(); driver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === '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.
...And 4 more matches
QA phase
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!
...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...
...
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!
...And 4 more matches
Introduction to NSPR
this requirement implies that when a thread first
enters the monitor, an evaluation of the invariant expression must yield a true.
...the thread makes an absolute assertion of the expression's evaluation both on
entering and on exiting the monitor.
...when the thread is resumed after the wait, it will have re
entered the monitor, making operations on the data safe.
...And 4 more matches
NSS tools : signtool
note that the password
entered on the command line is displayed as plain text.
...
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.
...if you do not
enter a common name, the tool provides a default name.
...And 4 more matches
Document - Web APIs
globaleventhandlers.ondrag
enter is an eventhandler representing the code to be called when the drag
enter event is raised.
... globaleventhandlers.onmouse
enter is an eventhandler representing the code to be called when the mouse
enter event is raised.
... globaleventhandlers.onpointer
enter is an eventhandler representing the code to be called when the pointer
enter event is raised.
...And 4 more matches
Checking when a deadline is due - Web APIs
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.
... 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.
...on mobile platforms you tend to get a numeric keypad for
entering data, which is helpful.
...And 4 more matches
align-content - CSS: Cascading Style Sheets
syntax /* basic positional alignment */ /* align-content does not take left and right values */ align-content: c
enter; /* pack items around the c
enter */ align-content: start; /* pack items from the start */ align-content: end; /* pack items from the end */ align-content: flex-start; /* pack flex items from the start */ align-content: flex-end; /* pack flex items from the end */ /* normal alignment */ align-content: normal; /* baseline alignment */ align-content: baseline; align-content: firs...
... on either end */ align-content: space-evenly; /* distribute items evenly items have equal space around them */ align-content: stretch; /* distribute items evenly stretch 'auto'-sized items to fit the container */ /* overflow alignment */ align-content: safe c
enter; align-content: unsafe c
enter; /* global values */ align-content: inherit; align-content: initial; align-content: unset; values start the items are packed flush to each other against the start edge of the alignment container in the cross axis.
... c
enter the items are packed flush to each other in the c
enter of the alignment container along the cross axis.
...And 4 more matches
align-items - CSS: Cascading Style Sheets
syntax /* basic keywords */ align-items: normal; align-items: stretch; /* positional alignment */ /* align-items does not take left and right values */ align-items: c
enter; /* pack items around the c
enter */ align-items: start; /* pack items from the start */ align-items: end; /* pack items from the end */ align-items: flex-start; /* pack flex items from the start */ align-items: flex-end; /* pack flex items from the end */ /* baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* overflow alignment (for positional...
... alignment only) */ align-items: safe c
enter; align-items: unsafe c
enter; /* global values */ align-items: inherit; align-items: initial; align-items: unset; values normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
... c
enter the flex items' margin boxes are c
entered within the line on the cross-axis.
...And 4 more matches
<position> - CSS: Cascading Style Sheets
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.
...And 4 more matches
text-align - CSS: Cascading Style Sheets
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.
... c
enter the inline contents are c
entered within the line box.
...And 4 more matches
<mtable> - MathML
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.
... c
enter: see baseline.
...And 4 more matches
Creating annotations - Archive of obsolete content
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.
...nalbgcolor = null; var active = 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.
...And 3 more matches
Signing an XPI - Archive of obsolete content
enter a password which will be used to encrypt your keys.
...
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 .
...
enter "y" to continue, or anything else to abort: y
enter certificate information.
...And 3 more matches
CSS and JavaScript accessibility best practices - Learn web development
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).
...there are a number of contrast checking tools online that you can
enter your foreground and background colors into, to check them.
...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).
...And 3 more matches
WAI-ARIA basics - Learn web development
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.
...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).
...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".
...And 3 more matches
Fundamental text and font styling - Learn web development
c
enter: c
enters the text.
... 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.
...but it was a rare occasion such as this that he did.</p> html { font-size: 10px; } h1 { font-size: 5rem; text-transform: capitalize; text-shadow: 1px 1px 1px red, 2px 2px 1px red; text-align: c
enter; } h1 + p { font-weight: bold; } p { font-size: 1.5rem; color: red; font-family: helvetica, arial, sans-serif; } line height the line-height property sets the height of each line of text — this can take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the font-size is multiplied to get the l...
...And 3 more matches
How do I use GitHub Pages? - Learn web development
you tell the computer to do something in the terminal by typing in a command and hitting
enter, as seen above.
... on this page, in the repository name box,
enter a name for your code repository, for example my-repository.
...copy the whole of the first line, paste it into the command line, and press
enter.
...And 3 more matches
Your first form - Learn web development
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).
... 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 a quick mockup will help you to define the right set of data you want to ask your user to
enter.
...And 3 more matches
Looping code - Learn web development
first, some simple html — a text <input> allowing us to
enter a name to search for, a <button> element to submit a search, and a <p> element to display the results in: <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); c...
... 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.
...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.
...And 3 more matches
Manipulating documents - Learn web development
you might think that such limitations are a bad thing, but browsers are locked down for good reasons, mostly c
entering around security.
... as an example, try adding these lines to our ongoing example: para.style.color = 'white'; para.style.backgroundcolor = 'black'; para.style.padding = '10px'; para.style.width = '250px'; para.style.textalign = 'c
enter'; reload the page and you'll see that the styles have been applied to the paragraph.
... if you look at that paragraph in your browser's page inspector/dom inspector, you'll see that these lines are indeed adding inline styles to the document: <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: c
enter;">we hope you enjoyed the ride.</p> note: notice how the javascript property versions of the css styles are written in lower camel case whereas the css versions are hyphenated (e.g.
...And 3 more matches
Arrays - Learn web development
as in previous articles, let's learn about the real basics of arrays by
entering some examples into browser developer console.
...
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.
...the idea is that when terms are
entered in the search box, the top 5 previous search terms are displayed in the list.
...And 3 more matches
What is JavaScript? - Learn web development
we can mark it up using html to give it structure and purpose: <p>player 1: chris</p> then we can add some css into the mix to get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: c
enter; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); ...
... function updatename() { let name = prompt('
enter a new name'); para.textcontent = 'player 1: ' + name; } try clicking on this last version of the text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)!
...in the above example for instance, we ask for a new name to be
entered then store that name in a variable called name.
...And 3 more matches
JavaScript object basics - Learn web development
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.
...i\'m ' + this.name[0] + '.'); } }; after saving and refreshing, try
entering some of the following into the javascript console on your browser devtools: person.name person.name[0] person.age person.interests[1] person.bio() person.greeting() you have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!
...the object name (person) acts as the namespace — it must be
entered first to access anything encapsulated inside the object.
...And 3 more matches
Ember interactivity: Events, classes and state - Learn web development
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.
...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.
... 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.
...And 3 more matches
Handling common JavaScript problems - Learn web development
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.
... in the search packages text field, type "jslint" and press
enter/return to search for linting-related packages.
... the c
enter panel shows the code in the selected script.
...And 3 more matches
Accessible Toolkit Checklist
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.
...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.
... msaa support, including the haspopup state default buttons ability to define in xml
enter key fires it, but not when another widget has focus that needs the
enter key layout engine - drawing dark border dynamically when the currently focused widget does not need the
enter key events - making keystrokes do the right thing msaa support (default state) links
enter key activates link (thus default button no longer shows dark border when link is focused) msaa support, including linked and traversed states, and accessible value that holds destination url text fields - single and multiple line it's prob...
...And 3 more matches
Multiple Firefox profiles
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.
... otherwise,
enter a space character followed by --profilemanager.
...And 3 more matches
Monitors
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.
...And 3 more matches
gtstd.html
>certutil -s -d ca_db -n "myco's root ca" -s "cn=my ca,o=myco,st=california,c=us" -t "ct,," -x -2
enter password or pin for "communicator certificate db": extract the ca certificate from the ca's certificate database to a file.
... >certutil -l -d ca_db -n "myco's root ca" -a -o ca_db/rootca.crt
enter password or pin for "communicator certificate db": display the contents of the ca's certificate databases.
... >certutil -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.
...And 3 more matches
Bytecode Descriptions
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.
...(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.
...fine print for environment chain instructions the following rules for jsop::{push,pop}lexicalenv also apply to jsop::pushvarenv and jsop::{
enter,leave}with.
...And 3 more matches
Page inspector keyboard shortcuts - Firefox Developer Tools
enter return
enter step forward through the attributes of a node tab tab tab step backward through the attributes of a node shift + tab shift + tab shift + tab (when an attribute is selected) start editing the attribute
enter return
enter hide/show the selected node h h h focus on the search box in the html pane c...
...trl + f cmd + f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +
enter f2 / cmd + return f2 / ctrl +
enter copy the selected node's outer html ctrl + c cmd + c ctrl + c scroll the selected node into view s s s find the next match in the markup, when searching is active
enter return
enter find the previous match in the markup, when searching is active shift +
enter shift + return shift +
enter breadcrumbs bar these shortcuts work when the breadcrumbs bar is focused.
... command windows macos linux focus on the search box in the css pane ctrl + f cmd + f ctrl + f clear search box content (only when the search box is focused, and content has been
entered) esc esc esc step forward through properties and values tab tab tab step backward through properties and values shift + tab shift + tab shift + tab start editing property or value (rules view only, when a property or value is selected, but not already being edited)
enter or space return or space
enter or space cycle up and ...
...And 3 more matches
Element.msZoomTo() - Web APIs
if no value is specified, defaults to the current c
enterpoint of visible content, horizontally.
...if no value is specified, defaults to the current c
enterpoint of visible content, vertically.
... c
enter: default.
...And 3 more matches
Guide to the Fullscreen API - Web APIs
this article demonstrates how to use the fullscreen api to place a given element into full-screen mode, as well as how to detect when the browser
enters or exits full-screen mode.
...webkit doesn't do this; instead, it c
enters the fullscreen element at the same size in a screen that's otherwise black.
...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.
...And 3 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
omvalues(0, 0, -10); const viewerstartorientation = vec3.fromvalues(0, 0, 1.0); const cubeorientation = vec3.create(); const cubematrix = mat4.create(); const mousematrix = mat4.create(); const inverseorientation = quat.create(); const radians_per_degree = math.pi / 180.0; the first two—viewerstartposition and viewerstartorientation—indicate where the viewer will be placed relative to the c
enter of the space, and the direction in which they'll initially be looking.
... window.addeventlistener("load", onload); function onload() { xrbutton = document.queryselector("#
enter-xr"); xrbutton.addeventlistener("click", onxrbuttonclick); projectionmatrixout = document.queryselector("#projection-matrix div"); modelmatrixout = document.queryselector("#model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.queryselector("#mouse-matrix div"); if (!navigator.xr || enableforcepolyfill) { console.log("...
... 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.
...And 3 more matches
Alerts - Accessibility
here is a simple form: <form method="post" action="post.php"> <fieldset> <legend>please
enter your contact details</legend> <label for="name">your name (required):</label> <input name="name" id="name" aria-required="true"/> <br /> <label for="email">e-mail address (required):</label> <input name="email" id="email" aria-required="true"/> <br /> <label for="website">website (optional):</label> <input name="website" id="website"/> </fieldset> <la...
...bel for="message">please
enter your message (required):</label> <br /> <textarea name="message" id="message" rows="5" cols="80" aria-required="true"></textarea> <br /> <input type="submit" name="submit" value="send message"/> <input type="reset" name="reset" value="reset form"/> </form> checking for validity and notifying the user form validations consists of several steps: checking if the e-mail address or
entered name are valid.
...we need to change the two inputs for e-mail and name for this: <input name="name" id="name" aria-required="true" onblur="checkvalidity('name', ' ', 'invalid name
entered!');"/> <br /> <input name="email" id="email" aria-required="true" onblur="checkvalidity('email', '@', 'invalid e-mail address');"/> testing the example if you use firefox 3 and a currently-supported screen reader, try the following:
enter only your first name as the name.
...And 3 more matches
<basic-shape> - CSS: Cascading Style Sheets
the <position> argument defines the c
enter of the circle.
... this defaults to c
enter if omitted.
... the position argument defines the c
enter of the ellipse.
...And 3 more matches
justify-self - CSS: Cascading Style Sheets
e about alignment in block, absolute positioned and table layout) in flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns an item inside its grid area on the inline axis (more about alignment in grid layouts) syntax /* basic keywords */ justify-self: auto; justify-self: normal; justify-self: stretch; /* positional alignment */ justify-self: c
enter; /* pack item around the c
enter */ justify-self: start; /* pack item from the start */ justify-self: end; /* pack item from the end */ justify-self: flex-start; /* equivalent to 'start'.
...*/ justify-self: self-start; justify-self: self-end; justify-self: left; /* pack item from the left */ justify-self: right; /* pack item from the right */ /* baseline alignment */ justify-self: baseline; justify-self: first baseline; justify-self: last baseline; /* overflow alignment (for positional alignment only) */ justify-self: safe c
enter; justify-self: unsafe c
enter; /* global values */ justify-self: inherit; justify-self: initial; justify-self: unset; this property can take one of three different forms: basic keywords: one of the keyword values normal, auto, or stretch.
... positional alignment: one of: c
enter, start, end, flex-start, flex-end, self-start, self-end, left, or right.
...And 3 more matches
<input type="week"> - HTML: Hypertext Markup Language
methods select(), stepdown(), and stepup() value a domstring representing the value of the week/year
entered into the input.
...if the value
entered into the element exceeds this, the element fails constraint validation.
... 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.
...And 3 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
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).
... listing 5: content for clock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="clock" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content/clock.js"/> <hbox align="c
enter"> <label value="current time:" /> <textbox id="currenttime" /> </hbox> </dialog> listing 6: content for clock.js function initclock() { showcurrenttime(); window.setinterval(showcurrenttime, 1000); } function showcurrenttime() { var textbox = document.getelementbyid("currenttime"); textbox.value = new date().tolocaletimestring(); textbox.select(); } operations check per...
...version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <!doctype dialog system "chrome://helloworld/locale/clock.dtd"> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="&helloworld.clock;" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content/clock.js" /> <hbox align="c
enter"> <label value="&helloworld.currenttime;:" /> <textbox id="currenttime" /> </hbox> </dialog> create the dtd that defines the entity references now create the dtd file that gets referred to by clock.xul (listing 9).
...And 2 more matches
prefwindow - Archive of obsolete content
prefer the classical window.opendialog() with the following window features: "chrome,titlebar,toolbar,c
enterscreen,dialog=yes".
... attributes buttonalign, buttondir, buttonorient, buttonpack, buttons, defaultbutton, lastselected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, c
enterwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups...
...typically, this means that the button will be activated when the
enter key is pressed.
...And 2 more matches
3D collision detection - Game development
sphere to check whether a sphere contains a point we need to calculate the distance between the point and the sphere's c
enter.
...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.
...this is overkill, however — testing all the vertices is unnecessary, as we can get away with just calculating the distance between the aabb's closest point (not necessarily a vertex) and the sphere's c
enter, seeing if it is less than or equal to the sphere's radius.
...And 2 more matches
Function return values - Learn web development
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.
... 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) + '.
...And 2 more matches
Drawing graphics - Learn web development
the first two specify the position of the arc's c
enter (x and y, respectively).
... before calling fill(), we draw a line to the c
enter of the circle.
...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.
...And 2 more matches
Useful string methods - Learn web development
let's
enter some examples into the browser developer console.
...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 you can display them in order of length, or let a user know that a username they have
entered into a form field is too long if it is over a certain length.
...And 2 more matches
Inheritance in JavaScript - Learn web development
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.
...try saving your code, loading the page in a browser, and
entering teacher.prototype.constructor into the console to verify.
...And 2 more matches
Getting started with Vue - Learn web development
use the arrow keys and
enter to select the "manually select features" option.
...once they are selected, press
enter to proceed.
...navigate to "eslint with error prevention only" and hit
enter again.
...And 2 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
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.
... 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.
... </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).
...And 2 more matches
Gecko Keypress Event
if the os-provided character cannot be
entered without using the ctrl key, then, gecko does not replace the character.
... if the character provided by the keyboard layout cannot be
entered without ctrl key, then, gecko does not replace the character (as on windows).
...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.
...And 2 more matches
MathML Demo: <mtable> - tables and matrices
this is the baseline external vertical align is c
enter ---...
...when align="c
enter" or align="baseline", the middle of the table coincides with the baseline.
... [ 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.
...And 2 more matches
Phishing: a short definition
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.
...users look for these when logging in, and only
enter their credentials when they recognize the user defined pictures or words.
...
enter the world of second factors.
...And 2 more matches
NSS tools : pk12util
pk12util -i 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.
...
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.
... 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.
...And 2 more matches
NSS tools : pk12util
pk12util -i 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.
...
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.
... 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.
...And 2 more matches
JSAPI User Guide
report->filename : "[no filename]", (unsigned int) report->lineno, message); } int run(jscontext *cx) { //
enter a request before running anything in the context.
... rootedobject global(cx); global = js_newglobalobject(cx, &globalclass, nullptr, js::dontfireonnewglobalhook); if (!global) return 1; //
enter the new global object's compartment.
... 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.
...And 2 more matches
JSAutoCompartment
this article covers features introduced in spidermonkey 24 raii helper to
enter a different compartment on the given context and automatically leave it once the jsautocompartment instance gets out of scope.
...this implicitly identifies the compartment to be
entered.
...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.
...And 2 more matches
Building the WebLock UI
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.
... <separator class="thin"/> <hbox align="c
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 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.
...And 2 more matches
nsIAuthInformation
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.
...on return, this parameter should contain the domain
entered by the user.
...on return, this parameter should contain the password
entered by the user.
...And 2 more matches
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...
... 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.
...And 2 more matches
nsITextInputProcessor
{ key: "
enter", // required.
... code: "
enter", // optional.
...var convertkeyevent = new keyboardevent("", { key: "convert", code: "convert" }); tip.flushpendingcomposition(convertkeyevent); // this means that the composition is committed by a keypress of "
enter" key.
...And 2 more matches
nsIXULWindow
void assumechromeflagsarefrozen(); void c
enter(in nsixulwindow arelative, in boolean ascreen, in boolean aalert); nsixulwindow createnewwindow(in print32 achromeflags, in nsiappshell aappshell); nsidocshelltreeitem getcontentshellbyid(in wstring id); void removechildwindow(in nsixulwindow achild); void showmodal(); attributes attribute type description chromeflags pruint32...
... 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.
...And 2 more matches
Migrating from Firebug - Firefox Developer Tools
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.
...And 2 more matches
Edit fonts - Firefox Developer Tools
you can select values using the slider or
enter a numeric value directly into the text box.
...you can select values using the slider or
enter a numeric value directly into the text box.
... you can select values using the slider or
enter a numeric value directly into the text box.
...And 2 more matches
Examine and edit CSS - Firefox Developer Tools
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.
...you can also tab through the different existing properties and values, and start editing them by pressing
enter or space.
...And 2 more matches
BiquadFilterNode() - Web APIs
frequency: the c
enter of the frequency band.
... frequency: the c
enter frequency of the boost range.
... frequency: the c
enter frequency of the attenuation range.
...And 2 more matches
CanvasRenderingContext2D.textAlign - Web APIs
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.
... "c
enter" the text is c
entered.
...And 2 more matches
Transformations - Web APIs
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().
...And 2 more matches
Using files from web applications - Web APIs
exactly what part of your content will accept drops may vary depending on the design of your application, but 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
Pointer events - Web APIs
event types and global event handlers pointer events have ten event types, seven of which have similar semantics to their mouse event counterparts (down, up, move, over, out,
enter, and leave).
... 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).
... <html> <script> function over_handler(event) { } function
enter_handler(event) { } function down_handler(event) { } function move_handler(event) { } function up_handler(event) { } function cancel_handler(event) { } function out_handler(event) { } function leave_handler(event) { } function gotcapture_handler(event) { } function lostcapture_handler(event) { } function init() { var el=document.getelementbyid("target"); ...
...And 2 more matches
Rendering and the WebXR frame animation callback - Web APIs
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.
...And 2 more matches
Using the Web Speech API - Web APIs
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.
...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.
...And 2 more matches
::placeholder - CSS: Cascading Style Sheets
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.
... 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.
...And 2 more matches
background-position-x - CSS: Cascading Style Sheets
syntax /* keyword values */ 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;...
... c
enter aligns the c
enter of the background image with the c
enter of the background position layer.
...a value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the right edge of the background image is aligned with the right edge of the container, thus a value of 50% horizontally c
enters the background image.
...And 2 more matches
background-position-y - CSS: Cascading Style Sheets
syntax /* keyword values */ background-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: inhe...
... c
enter aligns the vertical c
enter of the background image with the vertical c
enter of the background position layer.
...a value of 0% means that the top edge of the background image is aligned with the top edge of the container, and a value of 100% means that the bottom edge of the background image is aligned with the bottom edge of the container, thus a value of 50% vertically c
enters the background image.
...And 2 more matches
background - CSS: Cascading Style Sheets
erties: background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size syntax /* using a <background-color> */ background: green; /* using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* using a <box> and <background-color> */ background: border-box red; /* a single image, c
entered and scaled */ background: no-repeat c
enter/80% url("../img/image.png"); the background property is specified as one or more background layers, separated by commas.
... the syntax of each layer is as follows: each layer may include zero or one occurrences of any of the following values: <attachment> <bg-image> <position> <bg-size> <repeat-style> the <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "c
enter/80%".
...| <repeat-style> | <attachment> | <box> | <box>where <bg-image> = none | <image><bg-position> = [ [ left | c
enter | right | top | bottom | <length-percentage> ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ] | [ c
enter | [ left | right ] <length-percentage>?
...And 2 more matches
box-align - CSS: Cascading Style Sheets
/* 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.
... c
enter the box aligns contents in the c
enter, dividing any extra space equally between the start and the end.
... formal definition initial valuestretchapplies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax start | c
enter | end | baseline | stretch examples setting box alignment <!doctype html> <html> <head> <title>css box-align example</title> <style> div.example { display: box; /* as specified */ display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the children, so there is room for the box-pack */ height: 40...
...And 2 more matches
justify-content - CSS: Cascading Style Sheets
syntax /* positional alignment */ justify-content: c
enter; /* pack items around the c
enter */ justify-content: start; /* pack items from the start */ justify-content: end; /* pack items from the end */ justify-content: flex-start; /* pack flex items from the start */ justify-content: flex-end; /* pack flex items from the end */ justify-content: left; /* pack items from the left */ justify-content: right; /* pack items from t...
... on either end */ justify-content: space-evenly; /* distribute items evenly items have equal space around them */ justify-content: stretch; /* distribute items evenly stretch 'auto'-sized items to fit the container */ /* overflow alignment */ justify-content: safe c
enter; justify-content: unsafe c
enter; /* global values */ justify-content: inherit; justify-content: initial; justify-content: unset; values start the items are packed flush to each other toward the start edge of the alignment container in the main axis.
... c
enter the items are packed flush to each other toward the c
enter of the alignment container along the main axis.
...And 2 more matches
place-content - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: align-content justify-content syntax /* positional alignment */ /* align-content does not take left and right values */ place-content: c
enter start; place-content: start c
enter; place-content: end left; place-content: flex-start c
enter; place-content: flex-end c
enter; /* baseline alignment */ /* justify-content does not take baseline values */ place-content: baseline c
enter; place-content: first baseline space-evenly; place-content: last baseline right; /* distributed alignment */ place-content: space-between space-evenly; place-cont...
... c
enter the items are packed flush to each other toward the c
enter of the alignment container.
...al</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="baseline">baseline</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly" selected>space-evenly</option> <option value="stretch">stretch</option> <option value="c
enter">c
enter</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select> <select id="justifycontentalignment"> <option value="normal">normal</option> <option value="space-between">space-betwee...
...And 2 more matches
place-items - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: align-items justify-items syntax /* keyword values */ place-items: auto c
enter; place-items: normal start; /* positional alignment */ place-items: c
enter normal; place-items: start auto; place-items: end normal; place-items: self-start auto; place-items: self-end normal; place-items: flex-start auto; place-items: flex-end normal; place-items: left auto; place-items: right normal; /* baseline alignment */ place-items: baseline normal; place-items: first baseline auto; plac...
... c
enter the items are packed flush to each other toward the c
enter of the of the alignment container.
... examples placing items in a flex container div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: c
enter; justify-content: c
enter; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; fon...
...And 2 more matches
The HTML autocomplete attribute - HTML: Hypertext Markup Language
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.
... 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.
...And 2 more matches
HTML attribute reference - HTML: Hypertext Markup Language
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.
...
enterkeyhint <textarea>, contenteditable the
enterkeyhint specifies what action label (or icon) to present for the
enter key on virtual keyboards.
... 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.
...And 2 more matches
<input type="range"> - HTML: Hypertext Markup Language
if the value
entered into the element exceeds this, the element fails constraint validation.
... 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 range inputs is 1, allowing only integers to be
entered, unless the stepping base is not an integer; for example, if you set min to -10 and value to 1.5, then a step of 1 will allow only values such as 1.5, 2.5, 3.5,...
...And 2 more matches
refX - SVG: Scalable Vector Graphics
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.
... c
enter the reference point of the marker is placed at the horizontal c
enter of the shape.
... 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.
...And 2 more matches
refY - SVG: Scalable Vector Graphics
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.
... c
enter the reference point of the marker is placed at the vertical c
enter of the shape.
... 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.
...And 2 more matches
transform-origin - SVG: Scalable Vector Graphics
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.
... 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.
...And 2 more matches
Displaying annotations - Archive of obsolete content
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.
... the complete content script is here: self.on('message', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annotation.url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').css('border', 'solid 3px yellow'); $('.annotated').bind('mouse
enter', function(event) { self.port.emit('show', $(this).attr('annotation')); event.stoppropagation(); event.preventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); annotationanchor = $(annotationanchorancestor).parent().find( ...
... then in the module's scope implement a function to update the matcher's workers, and edit handlenewannotation to call this new function when the user
enters a new annotation: function updatematchers() { matchers.foreach(function (matcher) { matcher.postmessage(simplestorage.storage.annotations); }); } function handlenewannotation(annotationtext, anchor) { var newannotation = new annotation(annotationtext, anchor); simplestorage.storage.annotations.push(newannotation); updatematchers(); } annotation panel the annotation panel just s...
...activate the annotator and
enter an annotation.
Storing annotations - Archive of obsolete content
the annotation is composed of the text the user
entered and the "annotation anchor", which consists of the url, element id and element content: function handlenewannotation(annotationtext, anchor) { var newannotation = new annotation(annotationtext, anchor); simplestorage.storage.annotations.push(newannotation); } this function calls a constructor for an annotation object, which we also need to supply: function annotation(annotationtext, anch...
...file: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of the add-on that displays all the previously
entered annotations.
..., .selection-text, .annotation-text { padding: 5px; margin: 5px; } #annotation-list .selection-text,#annotation-list .annotation-text { border: solid 1px #eee; } #annotation-list .annotation-text { font-style: italic; } body { background-color: #f5f5f5; font: 100% arial, helvetica, sans-serif; } h1 { font-family: georgia,serif; font-size: 1.5em; text-align:c
enter; } save these in data/list as annotation-list.html and annotation-list.css respectively.
... 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.
Display a Popup - Archive of obsolete content
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.
...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.
... text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); self.port.emit("text-
entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
developers who contribute to the free office suite openoffice.org are requested to
enter into a joint copyright assignment with sun microsystems, the initial developer.
... red hat
enterprise linux (rhel) cannot be copied or distributed with the redhat trademark in place.
...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/index.html ...
List of Mozilla-Based Applications - Archive of obsolete content
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.
...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...
...ly known as milimail) tuneup music collection organizer listed on xulrunner hall of fame but haven't seen information elsewhere tuxguitar tabulature editor uses xulrunner twitfactory standalone twitter/identi.ca client uis university information system intranet application, 1000 users, thin client based on ff3 unison desktop
enterprise email i think it's using mailnews code but don't have any information to link to.
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
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.
... 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.
...however for
enterprise deployment, it is vital!
...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...
textbox.type - Archive of obsolete content
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.
... password a textbox that hides what is typed, used for
entering passwords.
...if the searchbutton attribute is set to true, the command event is only fired if the user presses the search button or presses the
enter key.
...the command event will fire if the user presses the
enter key.
XUL Events - Archive of obsolete content
for example, a button can be activated by clicking on it with the mouse or by pressing
enter while it has the focus.
... attribute: ondragend drag
enter the drag
enter event is sent when the mouse pointer first moves over an element during a drag.
... attribute: ondrag
enter dragexit this event is sent when the mouse pointer moves away from an element during a drag.
... attribute: ondragover input this event is sent when a user
enters text in a textbox.
Positioning - Archive of obsolete content
leftc
enter the popup will be aligned with the c
enter of the left-hand edge of the anchor.
... rightc
enter the popup will be aligned with the c
enter of the right-hand edge of the anchor.
... topc
enter the popup will be aligned with the c
enter of the top edge the anchor.
... bottomc
enter the popup will be aligned with the c
enter of the bottom edge the anchor.
Creating Dialogs - Archive of obsolete content
var somefile=document.getelementbyid('
enterfile').value; window.opendialog("chrome://findfile/content/showdetails.xul","showmore", "chrome",somefile); in this example the dialog showdetails.xul is displayed.
... it's passed one argument, somefile, which was taken from the value of an element with the id
enterfile.
...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.
Creating a Wizard - Archive of obsolete content
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.
...this allows you to validate the input
entered on each page before the user continues.
... pageshow wizardpage called on the page that the user is
entering.
Focus and Selection - Archive of obsolete content
if there are three textboxes on a window, the one that has the focus is the one that the user can currently
enter text into.
...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.
...for instance, you might update a total as the user
enters values in other fields, or use focus events to validate certain values.
...if there were only six characters
entered into the field, only the fifth and sixth characters would be selected.
More Wizards - Archive of obsolete content
in some cases, it would be more convenient to disable the next button until valid input has been
entered.
...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.
...f="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode(); return true;"> <label value="
enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> there is also a corresponding canrewind property that you can use to enable or disable the back button.
XUL accessibility guidelines - Archive of obsolete content
accessibility hub on the mozilla developer c
enter.
...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.
...screen readers will then read aloud the label when
entering a form field.
...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.
datepicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a datepicker allows the user to
enter a date.
... normal - a datepicker with three fields for
entering the year, month and date.
... 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.
... datevalue type: date the date that is currently
entered or selected in the datepicker as a date object.
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...
...typically, this means that the button will be activated when the
enter key is pressed.
...typically, this means that the button will be activated when the
enter key is pressed.
... c
enterwindowonscreen() return type: no return value c
enters the dialog on the screen.
timepicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the timepicker is used to allow the user to
enter a time.
... it contains three fields to
enter the hour, minute and second.
... datevalue type: date the date that is currently
entered or selected in the datepicker as a date object.
... value type: string the currently
entered time of the form hh:mm:ss.
Building up a basic demo with PlayCanvas editor - Game development
we want to start small, so we will use the empty project — click on the blank project option and
enter a name for it (we are using "mdn games demo".)
enter a description if you want — it is optional.
...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.
create fancy boxes - Learn web development
.fancy { /* within a circle, c
entered text looks prettier.
... */ text-align : c
enter; /* let's avoid our text touching the border.
...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.
... .fancy { position: relative; background-color: #ffc; padding: 2rem; text-align: c
enter; max-width: 200px; } .fancy::before { content: ""; position : absolute; z-index : -1; bottom : 15px; right : 5px; width : 50%; top : 80%; max-width: 200px; box-shadow: 0px 13px 10px black; transform: rotate(4deg); } what's next in many ways, making a fancy box is mostly about adding color and images within the background, so it could worth digging into ...
Basic native form controls - Learn web development
they are a very convenient way to let the user
enter any kind of data, and we've already seen a few simple examples.
... 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).
... 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.
... 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.
How to structure a web form - Learn web development
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.
...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.
...
enter the following below the previous section: <section> <h2>payment information</h2> <p> <label for="card"> <span>card type:</span> </label> <select id="card" name="usercard"> <option value="visa">visa</option> <option value="mc">mastercard</option> <option value="amex">american express</option> </select> </p> <p> <label for="number"> <span>card number:</span> <strong><abbr title="required">*</abbr></strong> </label> <input type="tel" id="number" name="cardnumber"> </p> <p> <label for="date"> <span>expiration date:</span> <strong><abbr title="required">*</abbr></strong> <em>for...
Getting started with Svelte - Learn web development
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.
... 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.
... 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.
... above the tabs, you'll find a toolbar that lets you
enter full-screen mode, and download your app.
Software accessibility: Where are we today?
alternative ways to command the computer and
enter data another problem is how people with disabilities get information into the computer.
...here are some of the alternative ways physically disabled people
enter information: sticky keys make
entering key combinations easy.
...some, like stephen hawking,
enter information by choosing among lists of options.
...
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.
HTTP logging
type cmd and press
enter, a new command prompt window with a black background will appear.
...press the
enter key after each one.: for 64-bit windows: set moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 set moz_log_file=%temp%\log.txt "c:\program files\mozilla firefox\firefox.exe" for 32-bit windows: set moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 set moz_log_file=%temp%\log.txt "c:\program files (x86)\mozilla firefox\firefox.exe" (these instructions assume that you installed firefox to the default location, and that drive c: is your windows startup disk.
...make sure to hit
enter after each line.
... copy and paste the following line into the "run" command window and then press
enter: for 32-bit windows: "c:\program files (x86)\mozilla firefox\firefox.exe" -moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 -moz_log_file=%temp%\log.txt for 64-bit windows: "c:\program files\mozilla firefox\firefox.exe" -moz_log=timestamp,rotate:200,nshttp:5,cache2:5,nssockettransport:5,nshostresolver:5,cookie:5 -moz_log_file=%temp%\log.txt ...
Eclipse CDT
download "eclipse ide for c/c++ developers" (not eclipse ide for
enterprise java developers) from the eclipse download page, install it, and add the directory containing the eclipse binary to your path (/applications/eclipse.app/contents/eclipse/ on mac).
...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.
...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").
Using the Browser API
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.).
... 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.
...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.
...note that this doesn't include simple errors due to incorrect urls being
entered.
source-editor.jsm
sourceeditor.events.mouse_over "mouseover" fired when the mouse pointer
enters a line annotation.
... setcaretoffset() sets the current caret position (insertion point) for newly-
entered text.
...this may be one of sourceeditor.vertical_align.top, sourceeditor.vertical_align.c
enter, and sourceeditor.vertical_align_bottom.
... mouseover the "mouseover" event is sent when the user moves the mouse pointer
enters a line of text content.
SVN for Localizers
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].
... 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.
... 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.
...
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.
Profiling with the Firefox Profiler
tip: if things are blank elsewhere in the ui, you may have text
entered into the "filter stacks" box.
...to enable it, check the 'multi-thread' box then
enter one or more thread names into the textbox beside it.
... examples: 1 2 if the filter you
entered is invalid, no threads will be profiled.
...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).
Creating a Cookie Log
change to your firefox directory (usually c:\program files\mozilla firefox) type "set nspr_log_file=c:\temp\cookie-log.txt",
enter type "set nspr_log_modules=cookie:4" and press
enter run firefox by typing "firefox.exe" and pressing
enter.
... type "export nspr_log_file=~/cookie-log.txt" and press
enter.
... type "export nspr_log_modules=cookie:4" and press
enter.
... run firefox by typing "./firefox" and pressing
enter mac os x open terminal.app, which is located in the /applications/utilities folder (these instructions are for bash, the default shell in mac os x 10.3 and higher; if you use something else, you probably know how to modify these instructions already).
Utilities for nss samples
checkpassword */ extern prbool checkpassword(char *cp); /* * getpassword */ extern char * getpassword(file *input, file *output, char *prompt, prbool (*ok)(char *)); /* * filepasswd extracts the password from a text file * * storing passwords is often used with server environments * where prompting the user for a password or requiring it * to be
entered in the commnd line is not a feasible option.
... "password must be at least 8 characters long with one or more\n"); fprintf(output, "non-alphabetic characters\n"); continue; } return (char*) port_strdup(phrase); } } /* * filepasswd extracts the password from a text file * * storing passwords is often used with server environments * where prompting the user for a password or requiring it * to be
entered in the commnd line is not a feasible option.
...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(...
... press
enter to continue: "); while ((c = getc(stdin)) != '\n' && c != eof) ; if (c == eof) rv = secfailure; fprintf(stderr, "\n"); /* set back termio the way it was */ tio.c_lflag = orig_lflag; tio.c_cc[vmin] = orig_cc_min; tio.c_cc[vtime] = orig_cc_time; tcsetattr(fd, tcsaflush, &tio); return rv; } /* * seedfromnoisefile */ secstatus seedfromnoisefile(...
NSS tools : modutil
-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.
... -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.
... 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.
sslerr.html
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_invalid_password -8091 password
entered is invalid.
... sec_error_retry_old_password -8090 old password
entered incorrectly.
NSS tools : modutil
-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.
... -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.
... 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.
Tutorial: Embedding Rhino
in this document: runscript: a simple embedding
entering a context initializing standard objects collecting the arguments evaluating a script printing the result exiting the context expose java apis using java apis implementing interfaces adding java objects using javascript objects from java using javascript variables calling javascript functions javascript host objects defining host objec...
...
entering a context the code context cx = context.
enter(); creates and
enters a context.
...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().
Tracing JIT
when the monitor determines that the interpreter has
entered a region of code that would benefit from native compilation, the monitor activates the recorder.
... recording when the trace monitor
enters recording mode, it constructs a new trace recorder, of type tracerecorder.
... 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.
... 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.
Introduction to the JavaScript shell
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.
... for example, if you
enter the javascript function below: function test() { var i = 3; print(i+2); } then run the command dis(test);, you get this output: main: 00000: uint16 3 00003: setvar 0 00006: pop 00007: name "print" 00010: pushobj 00011: getvar 0 00014: uint16 2 00017: add 00018: call 1 00021: pop 00022: stop source notes: 0: 0 [ 0] newline 1: 3 [ 3] decl offset 0 2: 7 ...
... if your program includes a function, dostuff(), like this: function dostuff(input) { print("
enter a number: "); var n1 = readline(); print("
enter another one: "); var n2 = readline(); print("you
entered " + n1 + " and " + n2 + "\n"); } calling dissrc(dostuff) function would give this output: ;------------------------- 10: print("
enter a number: "); 00000: 10 name "print" 00003: 10 pushobj 00004: 10 string "
enter a number: " 00007: 10 call 1 00010: 10 pop ;---------...
...---------------- 11: var n1 = readline(); 00011: 11 name "readline" 00014: 11 pushobj 00015: 11 call 0 00018: 11 setvar 0 00021: 11 pop ;------------------------- 12: print("
enter another one: "); 00022: 12 name "print" 00025: 12 pushobj 00026: 12 string "
enter another one: " 00029: 12 call 1 00032: 12 pop ;------------------------- 13: var n2 = readline(); 00033: 13 name "readline" 00036: 13 pushobj 00037: 13 call 0 00040: 13 setvar 1 00043: 13 pop ;------------------------- 14: ;------------------------- 15: print("you
entered " + n1 + " and " + n2 + "\n"); 00044: 15 name "print" 00047: 15 pushobj 00048: 15 string "you
entered " 00051: 15 getvar 0 00054: 15 add 00055: 15 string " and " 00058: 15 add 00059: 15 g...
JS_LeaveCompartment
leave a the compartment, returning to the compartment active before the corresponding js_
entercompartment.
... oldcompartment jscompartment * value returned by previous call to js_
entercompartment.
...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_leavecompartment js_
entercompartment jsautocompartment bug 786068 ...
JS_LeaveCrossCompartmentCall
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.
...any access to an object in a different compartment must be bracketed by call js_
entercrosscompartmentcall and js_leavecrosscompartmentcall.
... see also js_
entercrosscompartmentcall js_
entercompartment js_leavecompartment bug 786068 bug 563099 ...
SpiderMonkey 1.8.5
the approach eliminates the need for the js_
enterlocalrootscope api, and in many cases the need to explicitly root gc things or use the "root as you go" approach popular with earlier spidermonkey releases.
...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 ...
... 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_addnamedroot – use js_add*root js_addnamedrootrt – use js_add*root js_addroot – use js_add*root js_clearnewbornroots – no longer needed js_clearoperationcallback js_clear...
...regexproots js_decompilescript js_destroyscript js_
enterlocalrootscope js_executescriptpart js_forgetlocalroot js_getfunctionname js_getoperationlimit js_getscriptobject js_getstringbytes js_getstringchars js_isassigning js_leavelocalrootscope js_leavelocalrootscopewithresult js_newdouble js_newdoublevalue js_newscriptobject js_newstring js_poparguments js_pusharguments js_pushargumentsva js_removeroot js_removerootrt js_sealobject js_setbranchcallback js_setcallreturnvalue2 js_setcheckobjectaccesscallback js_setobjectprincipalsfinder js_setoperationlimit js_setprincipalstranscoder 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).
Web Replay
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.
... 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.
... as for taking a snapshot, all other threads
enter an idle state.
Index
its primary use is in converting user-
entered text into properly-formatted html.
...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.
... 473 nsidomdesktopnotificationc
enter interfaces, interfaces:scriptable, xpcom, xpcom interface reference the nsidomdesktopnotificationc
enter interface implements the dom navigator.moznotification 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.
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(); ...
...
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.
... void
enterlastwindowclosingsurvivalarea(); parameters none.
...if there are no windows open and no outstanding calls to
enterlastwindowclosingsurvivalarea() this method will exit immediately.
nsIAutoCompleteInput
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview acstring getsearchat(in unsigned long index); void onsearchbegin(); void onsearchcomplete(); boolean ontext
entered(); boolean ontextreverted(); void selecttextrange(in long startindex, in long endindex); attributes attribute type description completedefaultindex boolean if a search result has its defaultindex set, this will optionally try to complete the text in the textbox to the entire text of the result at the...
... 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.
...ontext
entered() called when the user selects and presses
enter on a result item.
... boolean ontext
entered(); parameters none.
Address Book examples
new contact dialog 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", "", "chrome,resizable=no,titlebar,modal,c
enterscreen", {abcard:abcard, listuri:listuri}); new address book dialog unlike the edit address book dialog, the new address book dialog does not currently have the facility to get the chrome uri based on the address book type.
... for local (mork) address books: window.opendialog( "chrome://messenger/content/addressbook/abaddressbooknamedialog.xul", "", "chrome,modal=yes,resizable=no,c
enterscreen", null); for ldap address books: window.opendialog("chrome://messenger/content/addressbook/pref-directory-add.xul", "", "chrome,modal=yes,resizable=no,c
enterscreen", null); note: there is no new address book dialog for the os x address book.
...for a user @bar.com,
entering foo would become foo@bar.com "addrbook" - use to autocomplete from a local address book, e.g.
Working with windows in chrome code
opening windows from a <script> in a window or an overlay to open a new window, we usually use a window.open or window.opendialog dom call, like this: var win = window.open("chrome://myextension/content/about.xul", "aboutmyextension", "chrome,c
enterscreen"); the first parameter to window.open is the uri of the xul file that describes the window and its contents.
... var ww = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); var win = ww.openwindow(null, "chrome://myextension/content/about.xul", "aboutmyextension", "chrome,c
enterscreen", null); window object note the win variable in the above section, which is assigned the return value of window.open.
...todo: link to how to pass an xpcom object to a new window when it has a more useful example opener code: window.opendialog("chrome://test/content/progress.xul", "myprogress", "chrome,c
enterscreen", {status: "reading remote data", maxprogress: 50, progress: 10} ); progress.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="onload();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script><![cdata[ var gstatus, gprogressmeter; var maxprogress = 100; function onload() { gstatus = do...
... window.opendialog( "chrome://test/content/progress.xul", "myprogress", "chrome,c
enterscreen", {status: "reading remote data", maxprogress: 50, progress: 10}, oncancel ); the progress dialog can then run the callback like this: <button label="cancel" oncommand="window.arguments[1](); close();" /> example 3: using nsiwindowmediator when opener is not enough the window.opener property is very easy to use, but it's only useful when you're sure that your window was opened fro...
Web Console UI Tour - Firefox Developer Tools
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.
... 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.
...use it to
enter javascript expressions.
HTMLTextAreaElement - Web APIs
inputmode maxlength long: returns / sets the element's maxlength attribute, indicating the maximum number of characters the user can
enter.
... minlength long: returns / sets the element's minlength attribute, indicating the minimum number of characters the user can
enter.
... placeholder string: returns / sets the element's placeholder attribute, containing a hint to the user about what to
enter in the control.
...e a link: .intlink { cursor: pointer; text-decoration: underline; color: #0000ff; } html: <form name="myform"> <p>[ <span class="intlink" onclick="insertmetachars('<strong>','<\/strong>');"><strong>bold</strong></span> | <span class="intlink" onclick="insertmetachars('<em>','<\/em>');"><em>italic</em></span> | <span class="intlink" onclick="var newurl=prompt('
enter the full url for the link');if(newurl){insertmetachars('<a href=\u0022'+newurl+'\u0022>','<\/a>');}else{document.myform.mytxtarea.focus();}">url</span> | <span class="intlink" onclick="insertmetachars('\n<code>\n','\n<\/code>\n');">code</span> | <span class="intlink" onclick="insertmetachars(' :-)');">smile</span> | etc.
SubtleCrypto.wrapKey() - Web APIs
*/ 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 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 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 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.
Geometry and reference spaces in WebXR - Web APIs
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).
...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.
...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.
...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.
WebXR permissions and security - Web APIs
once that check is passed, the request to
enter immersive-vr mode is allowed if all of the following are true: the requestsession() call was issued by code executing within the handler for a user event, or the from the startup code for a user-launched web application.
... the user's intent to
enter immersive vr mode is well understood; see user intent below for details.
...otherwise, an appropriate exception is thrown, such as securityerror if the document doesn't have permission to
enter immersive mode.
...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.
Basic concepts behind Web Audio API - Web APIs
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.
... the m input channel is used for the c
enter output channel (c).
...surround output channels (sl and sr), as well as the c
enter (c) and subwoofer (lfe) channels, are left silent.
...c
enter (c) and subwoofer (lfe) channels are left silent.
Window.prompt() - Web APIs
return value a string containing the text
entered by the user, or null.
...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.
... 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 textbox.
XRSystem: requestSession() - Web APIs
securityerror permission to
enter the specified xr mode is denied.
...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.
... if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.addeventlistener('click', onbuttonclicked); immersivebutton.innerhtml = '
enter xr'; immersivebutton.disabled = false; } else { console.log("webxr doesn't support immersive-vr mode!"); } }); } else { console.log("webxr is not available!"); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity.
An overview of accessible web applications and widgets - Accessibility
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.
... 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.
...on mac os x, the user can press either
enter or the spacebar to activate the next tab.
Cognitive accessibility - Accessibility
examples of this are checking a checkbox,
entering data or changing a select option.
... provide text to identify incomplete required fields and text descriptions if a value
entered is invalid.
... data
entered by the user should be checked for errors before submission, and the user should be given the opportunity to correct them.
... the united states c
enters for disease control estimate that, as of 2018, 1 in 4 u.s.
Web accessibility for seizures and physical reactions - Accessibility
for example, the page for trace research & development c
enter’s photosensitive epilepsy analysis tool notes that “photosensitive seizures can be provoked by certain types of flashing in web or computer content, including mouse-overs that cause large areas of the screen to rapidly flash on and off repeatedly.” other physical reactions nausea, vertigo (or dizziness), and disorientation are very nonspecific symptoms associated with all kinds of disease...
... harding flash and pattern analyzer iso iec 61966-2-2:2003(en) multimedia systems and equipment — colour measurement and management — part 2-2: colour management — extended rgb colour space — scrgb photosensitive epilepsy analysis tool along with the harding tool, is generaly recognized to be one of the two "gold standards" for analyzing flashes trace research and development c
enter using peat to create seizureless web animations w3c css color module level 3 personalization semantics explainer 1.0.
...a 1.4.3: contrast (minimum) web accessibility initiative (wai) web animations model w3c working draft web content accessibility guidelines (wcag) 2.0 definition of relative luminance web content accessibility guidelines (wcag) 2.1 contributers: heartfelt thanks to teal; wayne dick 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.
... 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
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.
... function update(e) { setcoords(e, "offset"); setcoords(e, "client"); setcoords(e, "page"); setcoords(e, "screen"); } inner.addeventlistener("mouse
enter", update, false); inner.addeventlistener("mousemove", update, false); inner.addeventlistener("mouseleave", update, false); the event handler is in the update() method.
... our main code sets up the event handlers on the inner box by calling addeventlistener() for each of the types mouse
enter, mousemove, and mouseleave.
... .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.
CSS Box Alignment - CSS: Cascading Style Sheets
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.
...the first item overrides the align-items value set on the group by setting align-self to c
enter.
...the first item overrides the align-items set on the group by setting align-self to c
enter.
... 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.
Basic concepts of flexbox - CSS: Cascading Style Sheets
you could instead set align-items to flex-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.
...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.
... 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.
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
values: flex-start (default) | flex-end | c
enter | space-between | space-around spec: https://drafts.csswg.org/css-flexbox/#justify-content-property @mixin justify-content($value: flex-start) { @if $value == flex-start { -webkit-box-pack: start; -moz-box-pack: start; -ms-flex-pack: start; } @else if $value == flex-end { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; } @else if $value == space-be...
...(for anonymous flex items, align-self always matches the value of align-items on their associated flex container.) values: flex-start | flex-end | c
enter | baseline | stretch (default) spec: https://drafts.csswg.org/css-flexbox/#align-items-property @mixin align-items($value: stretch) { @if $value == flex-start { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; } @else if $value == flex-end { -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; } @else { -webkit-box-align: $...
...value; -moz-box-align: $value; -ms-flex-align: $value; } -webkit-align-items: $value; align-items: $value; } flexbox align self values: auto (default) | flex-start | flex-end | c
enter | baseline | stretch spec: https://drafts.csswg.org/css-flexbox/#align-items-property @mixin align-self($value: auto) { // no webkit box fallback.
... 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.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
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.
...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; } we are going to create a grid with a flexible number of flexible columns.
... .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.
... 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
by default, it is at the c
enter of the element and can be moved.
...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...
...by default the perspective is c
entered on the viewer, which is not always adequate.
...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...
align-self - CSS: Cascading Style Sheets
syntax /* keyword values */ align-self: auto; align-self: normal; /* positional alignment */ /* align-self does not take left and right values */ align-self: c
enter; /* put the item around the c
enter */ align-self: start; /* put the item at the start */ align-self: end; /* put the item at the end */ align-self: self-start; /* align the item flush at the start */ align-self: self-end; /* align the item flush at the end */ align-self: flex-start; /* put the flex item at the start */ align-self: flex-end; /* put the flex item at the end */ /* baseline alignmen...
...t */ align-self: baseline; align-self: first baseline; align-self: last baseline; align-self: stretch; /* stretch 'auto'-sized items to fit the container */ /* overflow alignment */ align-self: safe c
enter; align-self: unsafe c
enter; /* global values */ align-self: inherit; align-self: initial; align-self: unset; values auto computes to the parent's align-items value.
... c
enter the flex item's margin box is c
entered within the line on the cross-axis.
...baseline<overflow-position> = unsafe | safe<self-position> = c
enter | start | end | self-start | self-end | flex-start | flex-end examples html <section> <div>item #1</div> <div>item #2</div> <div>item #3</div> </section> css section { display: flex; align-items: c
enter; height: 120px; background: beige; } div { height: 60px; background: cyan; margin: 5px; } div:nth-child(3) { align-self: flex-end; background: pink; } result spe...
box-pack - CSS: Cascading Style Sheets
/* keyword values */ box-pack: start; box-pack: c
enter; box-pack: end; box-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.
... c
enter the box packs contents in the c
enter, dividing any extra space equally between the start and the end.
... formal definition initial valuestartapplies toelements with a css display value of -moz-box, -moz-inline-box, -webkit-box or -webkit-inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax start | c
enter | end | justify examples div.example { border-style: solid; display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the children, so there is room for the box-pack */ height: 300px; /* make this box wide enough to show the contents are c
entered horizontally */ width: 300px; /* children should be oriented vertically */ -moz-...
...box-orient: vertical; /* mozilla */ -webkit-box-orient: vertical; /* webkit */ /* align children to the horizontal c
enter of this box */ -moz-box-align: c
enter; /* mozilla */ -webkit-box-align: c
enter; /* webkit */ /* pack children to the bottom of this box */ -moz-box-pack: end; /* mozilla */ -webkit-box-pack: end; /* webkit */ } div.example p { /* make children narrower than their parent, so there is room for the box-align */ width: 200px; } <div class="example"> <p>i will be second from the bottom of div.example, c
entered horizontally.</p> <p>i will be on the bottom of div.example, c
entered horizontally.</p> </div> specifications not part of any standard.
margin - CSS: Cascading Style Sheets
for example, in certain cases this value can be used to c
enter an element.
... formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <div class="c
enter">this element is c
entered.</div> <div class="outside">this element is positioned outside of its container.</div> css .c
enter { margin: auto; background: lime; width: 66%; } .outside { margin: 3rem 0 0 -3rem; background: cyan; width: 66%; } more examples margin: 5%; /* all sides: 5% margin */ margin: 10px; /* all sides: 10px margin */ margin: 1.6em 20px; /* top and bottom: 1.6em margin */ /* left and right: 20px margin */ margin: 10px 3% -1em; /* top: 10px margin */ /* left and right: 3% margin */ /* bottom: -1em marg...
...in */ margin: 10px 3px 30px 5px; /* top: 10px margin */ /* right: 3px margin */ /* bottom: 30px margin */ /* left: 5px margin */ margin: 2em auto; /* top and bottom: 2em margin */ /* box is horizontally c
entered */ margin: auto; /* top and bottom: 0 margin */ /* box is horizontally c
entered */ notes horizontal c
entering to c
enter something horizontally in modern browsers, you can use display: flex; justify-content: c
enter; .
...in order to c
enter an element inside its parent, use margin: 0 auto;.
mask-position - CSS: Cascading Style Sheets
/* 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.
... formal definition initial valuec
enterapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.animation 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> ]?
...x; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="c
enter">c
enter</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="c
enter c
enter">c
enter c
enter</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</option> <option value="60% 20%">60% 20%</option> </select> javascript var maskposition = document.getelementbyid("maskposition"); maskp...
offset-anchor - CSS: Cascading Style Sheets
syntax /* keyword values */ offset-anchor: top; offset-anchor: bottom; offset-anchor: left; offset-anchor: right; offset-anchor: c
enter; offset-anchor: auto; /* <percentage> values */ offset-anchor: 25% 75%; /* <length> values */ offset-anchor: 0 0; offset-anchor: 1cm 2cm; offset-anchor: 10ch 8em; /* edge offsets values */ offset-anchor: bottom 10px right 20px; offset-anchor: right 3em bottom 10px; /* global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: unset; values auto offset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its value f...
... 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> ]?
... 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.
perspective-origin - CSS: Cascading Style Sheets
c
enter, a keyword being a shortcut for the 50% percentage value.
... c
enter, a keyword being a shortcut for the 50% 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> ]?
...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...
ruby-align - CSS: Cascading Style Sheets
/* keyword values */ ruby-align: start; ruby-align: c
enter; ruby-align: space-between; ruby-align: space-around; /* global values */ ruby-align: inherit; ruby-align: initial; ruby-align: unset; syntax values start is a keyword indicating that the ruby will be aligned with the start of the base text.
... c
enter is a keyword indicating that the ruby will be aligned at the middle of the base text.
... formal definition initial valuespace-aroundapplies toruby bases, ruby annotations, ruby 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 distributed between and around 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-around; } result specifications specification status comment css ruby layout module level 1the definition of 'ruby-align' in that specification.
text-align-last - CSS: Cascading Style Sheets
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.
... c
enter the inline contents are c
entered within the line box.
... formal definition initial valueautoapplies toblock containersinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | start | end | left | right | c
enter | justify examples justifying the last line <p>integer elementum massa at nulla placerat varius.
...nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p> css p { font-size: 1.4em; text-align: justify; text-align-last: c
enter; } results specifications specification status comment css text module level 3the definition of 'text-align-last' in that specification.
Orientation and motion data explained - Developer guides
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.
... 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.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
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.
...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.
<tr>: The Table Row element - HTML: Hypertext Markup Language
c
enter c
enter the contents of each cell between their left and right edges.
... 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.
... 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 .
... middle each cell's text is vertically c
entered.
The building blocks of responsive design - Progressive web apps (PWAs)
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.
... 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.
...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 query, like so: button { background: url(images/low-res-header.jpg) 1rem c
enter ; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { button { background: url(images/high-res-header.jpg) 1rem c
enter ; } } this looks rather complicated, but really it's not — we are providing a number of media query options, as at this time different browsers support different resolution media query types and even units.
SVG documentation index - SVG: Scalable Vector Graphics
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.
... 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.
... 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.
Basic shapes - SVG: Scalable Vector Graphics
cx the x position of the c
enter of the circle.
... cy the y position of the c
enter of the circle.
... cx the x position of the c
enter of the ellipse.
... cy the y position of the c
enter of the ellipse.
Gradients in SVG - SVG: Scalable Vector Graphics
olor="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#radialgradient1)"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#radialgradient2)"/> </svg> screenshotlive sample the stops used here are the same as before, but now the object will be red in the c
enter, and in all directions gradually change to blue at the edge.
...it requires a c
enter point, designated by the cx and cy attributes, and a radius, r.
... c
enter and focal point <?xml version="1.0" standalone="no"?> <svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" he...
...if the focal point isn't given at all, it's assumed to be at the same place as the c
enter point.
cfx - Archive of obsolete content
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.
... 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.
...this means that any profile-specific data
entered from one run of cfx will not, by default, be available in the next run.
jpm - Archive of obsolete content
for example, in an ubuntu or debian terminal window,
enter sudo apt-get install nodejs nodejs-legacy npm.
...if you just press
enter, your add-on gets the default value.
...this means that any profile-specific data
entered from one run of jpm is not, by default, available in the next run.
Adding windows and dialogs - Archive of obsolete content
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.
... 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.
... 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.
Signing an extension - Archive of obsolete content
enter the file name, e.g.
...
enter the password to protect your certificate backup and click ok.
...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.
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...
... file = new file(file, "components"); } } return file; } public file[] getfiles(string aprop) { file[] files = null; if (aprop.equals("apluginsdl")) { files = new file[1]; files[0] = new file(libxulpath, "plugins"); } return files; } } calling xpcom ui from another thread appstartup.run()
enters the main event loop and will stay there until the application exits.
... windowproxy.openwindow(null, chromeuri, name, "c
enterscreen", null); for more information, please see xulplanet's documentation of nsiproxyobjectmanager this was taken from injecting events onto xpcom’s ui thread ...
Mozilla Crypto FAQ - Archive of obsolete content
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).
... cryptography & liberty 2000: an international survey of encryption policy, by the electronic privacy information c
enter.
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(); ...
...var listener = new privatebrowsinglistener(); listener.watcher = { on
enterprivatebrowsing : function() { // we have just
entered private browsing mode!
... 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
commands are
entered in the text box, and responses are appended to the end of the output.
...command history remembers the last 20 commands
entered.
... in the interactive session's input field,
enter this.fpaused venkman evaluates the expression, giving you [boolean] false back.
Anonymous Content - Archive of obsolete content
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.
Panels - Archive of obsolete content
it is used when supporting temporary popup displays for selecting or
entering data.
...for example, the following panel displays a textbox for
entering a name.
...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.
Adding HTML Elements - Archive of obsolete content
remember that xml is case-sensitive though, so you'll have to
enter the tags and attributes in lowercase.
...this must be
entered exactly as shown or it won't work correctly.
... the tags must be
entered in lowercase.
Box Model Details - Archive of obsolete content
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 result is that the buttons will be c
entered in the box in both directions.
Input Controls - Archive of obsolete content
without any attributes, the textbox element creates a box in which the user can
enter text.
... 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.
...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.
List Controls - Archive of obsolete content
you cannot
enter your own text by typing it in.
...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.
Manipulating Lists - Archive of obsolete content
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.
... 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.
The Chrome URL - Archive of obsolete content
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.
XUL element attributes - Archive of obsolete content
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.
... c
enter the elements are c
entered horizontally.
... 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.
menulist - Archive of obsolete content
c
enter the text will be cropped in the middle, showing both the start and end of the text normally.
...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.
...the user may
enter text into the textbox or select one of the choices by clicking from the drop-down.
Scratchpad - Archive of obsolete content
but even with possible limitations present, the html code can be either manually
entered or copied from the source and pasted into the "about:blank" page (a new empty tab) with the use page inspector's edit as html context menu command.
...↑ and ↓ cycle through the suggestions and
enter or tab select the highlighted choice.
... 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.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
using the mozilla browser engine engine that powers mozilla firefox, which includes spidermonkey as its javascript interpreter, but lots more features beyond ssjs alone such as dom, db, file io, css, server sessions, e4x, etc...] this is a great advantage to the developer as it presents a consistent server-side and client-side development environment for both browser and server contexts that is c
entered on open source and web standards.
...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.
...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...
Collision detection - Game development
we will check if the c
enter of the ball is colliding with any of the given bricks.
...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.
Backgrounds and borders - Learn web development
.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.
... you can use keywords such as top and right (look up the others on the background-position page): .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top c
enter; } and lengths, and percentages: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; } you can also mix keyword values with lengths or percentages, for example: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; } finally, you can also use a 4-value syntax in order to indicate a...
... the value of background-size may only be included immediately after background-position, separated with the '/' character, like this: c
enter/80%.
Debugging CSS - Learn web development
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.
...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.
Styling tables - Learn web development
fonts.googleapis.com/css?family=rock+salt' rel='stylesheet' type='text/css'> now add the following css into your style.css file, below the previous addition: /* typography */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; } thead th, tfoot th { font-family: 'rock salt', cursive; } th { letter-spacing: 2px; } td { letter-spacing: 1px; } tbody td { text-align: c
enter; } tfoot th { text-align: right; } there is nothing really specific to tables here; we are 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 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.
CSS values and units - Learn web development
there are a number of these keywords, some of which have fairly
entertaining names!
...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.
...if you only specify values for one axis the other will default to c
enter.
Legacy layout methods - Learn web development
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.
...this c
enters the content with a maximum width of 960 pixels.
...the <div> is c
entered using auto left and right margins, and a padding of 20 pixels is applied left and right.
Practical positioning examples - Learn web development
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.
... 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.
...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.
Styling links - Learn web development
default styles the following example illustrates what a link will behave like by default (the css is simply enlarging and 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.
...</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...
...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.
How do you upload your files to a web server? - Learn web development
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.
... on the c
enter right pane, you see remote files.
... 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.
What are browser developer tools? - Learn web development
click on a file to select it and view its contents in the c
enter pane of the debugger.
... this will give you a window like the following: to see what happens, try
entering the following snippets 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.
How do you set up a local testing server? - Learn web development
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.
... # 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.
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 : ...
CSS basics - Learn web development
we'll also c
enter the heading.
... 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.
... c
entering the image img { display: block; margin: 0 auto; } next, we c
enter the image to make it look better.
Publishing your website - Learn web development
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.
... 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.
HTML text fundamentals - Learn web development
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).
.../h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>important notice</h1> <p>on sunday january 9th 2010, a gang of goths were spotted stealing several garden gnomes from a shopping c
enter in downtown milwaukee.
...solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<h1>important notice</h1>\n<p>on <strong>sunday january 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping c
enter in downtown <strong>milwaukee</strong>.
Responsive images - Learn web development
here's a simple example: this works well on a wide screen device, such as a laptop or desktop (you can see the example live and find 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.
... 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.
Functions — reusable blocks of code - Learn web development
note: feel free to
enter these lines into your browser's javascript console to re-familiarize yourself with their functionality, if needed.
...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".
Third-party APIs - Learn web development
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 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.
... find the string
enter-api-key-here in the source code, and replace it with your api key.
Silly story generator - Learn web development
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.
...this gives you three variables that store references to the "
enter custom name" text field (customname), the "generate random story" button (randomize), and the <p> element at the bottom of the html body that the story will be copied into (story), respectively.
...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.
Object building practice - Learn web development
its parameters are: the x and y position of the arc's c
enter — we are specifying the ball's x and y properties.
... 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.
... 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.
Object prototypes - Learn web development
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!
...you can check this by
entering the following in the console: person2.__proto__ this will return the person1 object.
...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.
Starting our Svelte Todo list app - Learn web development
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.
... #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
newtodo.svelte: the text input and button that allow you to
enter a new todo item.
...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.
...res name to its initial value and editing = false // and exit editing mode } function onsave() { update({ name: name }) // updates todo name editing = false // and exit editing mode } function onremove() { dispatch('remove', todo) // emit remove event } function onedit() { editing = true //
enter editing mode } function ontoggle() { update({ completed: !todo.completed}) // updates todo status } updating the markup now we need to update our todo component's markup to call the above functions when the appropriate actions are taken.
Working with Svelte stores - Learn web development
te' let alertcontent = '' const unsubscribe = alert.subscribe(value => alertcontent = value) ondestroy(unsubscribe) </script> {#if alertcontent} <div on:click={() => alertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.5rem; margin-left: 1.5rem; margin-top: 1rem; right: 0; display: flex; align-items: c
enter; border-radius: 0.2rem; background-color: #565656; color: #fff; font-size: 0.875rem; font-weight: 700; padding: 0.5rem 1.4rem; font-size: 1.5rem; z-index: 100; opacity: 95%; } div p { color: #fff; } div svg { height: 1.6rem; fill: currentcolor; width: 1.4rem; margin-right: 0.5rem; } </style> let's walk through this piece of code in detail.
...in the web console,
enter the command localstorage.getitem('mdn-svelte-todo').
... 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.
Command line crash course - Learn web development
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.
...the command line is the literal line where you
enter commands and the cursor blinks.
...if you
enter it in a new browser tab, you’ll (eventually) get redirected to /docs/web/api/windoworworkerglobalscope/fetch.
Deploying our app - Learn web development
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.
... 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.
... 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.
Command line options
if the option contains arguments,
enter the argument after the option.
...
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.
Creating MozSearch plugins
search engine plugin and
enters "mozilla" in the search box and presses the
enter key.
... example: searching mdc this plugin lets you easily search the mozilla developer c
enter web site.
... <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>mdc</shortname> <description>mozilla developer c
enter search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh5waxgf8pdq0fgwj22d27cjadaaiirlmjo%2bmxa9r2kahvgba2wwx6b8w7od6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn75d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcm...
Eclipse CDT Manual Setup
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.
...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.
How to implement a custom autocomplete search component
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.
...._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:...
CustomizableUI.jsm
notifystartcustomizing() notify listeners that a window is
entering customize mode.
... parameters awindow the window
entering customize mode notifyendcustomizing() notify listeners that a window is exiting customize mode.
...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...
FxAccountsProfileClient.jsm
rejects: fxaccountsprofilecli
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.
... 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
open a terminal window and
enter hg --version.
... 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.
...tps://hg.mozilla.org/l10n-central/ab-cd/ default-push = ssh://hg.mozilla.org/l10n-central/ab-cd/ you’ll also need to tell ssh which account to use for your pushes, too, by editing ~/.ssh/config and adding these lines, where user@host.domain is your account: host hg.mozilla.org user user@host.domain now you can push your work to the repository (and check the result on the dashboard) by
entering this command from your local directory: hg push and tah dah!
Basics
</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> </math> <div style="text-align:c
enter"> left size: <a class="control" href="javascript:incrementinput('input21', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input21',-1);" title="decrease input">-</a> right size: <a class="control" href="javascript:incrementinput('input12', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input12',-1);" title=...
... mathml button html content <div style="text-align: c
enter"> <button style="white-space: normal;"> <span style="color: brown;"> for example, <b>click</b> this mathml continued fraction<br/> inside this html button<br /> </span> <math> <mrow> <mfrac> <mi>π</mi> <mn>4</mn> </mfrac> <mo>=</mo> <mfrac numalign="left"> <mstyle scriptlevel="0"> <mn>1</mn> </mstyle> <mstyle scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac numal...
Mozilla Web Developer FAQ
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.
FIPS Mode - an explanation
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).
... 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.
NSS Sample Code Utilities_1
"password must be at least 8 characters long with one or more\n"); fprintf(output, "non-alphabetic characters\n"); continue; } return (char*) port_strdup(phrase); } } /* * filepasswd extracts the password from a text file * * storing passwords is often used with server environments * where prompting the user for a password or requiring it * to be
entered in the command line is not a feasible option.
...; /* 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(...
... press
enter to continue: "); while ((c = getc(stdin)) != '\n' && c != eof) ; if (c == eof) rv = secfailure; fprintf(stderr, "\n"); /* set back termio the way it was */ tio.c_lflag = orig_lflag; tio.c_cc[vmin] = orig_cc_min; tio.c_cc[vtime] = orig_cc_time; tcsetattr(fd, tcsaflush, &tio); return rv; } /* * seedfromnoisefile */ secstatus seedfromnoisefile(...
Python binding for NSS
you can
enter a bug report here.
...protectedobjectsigner nss.certusagestatusresponder 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.
Hacking Tips
fffffff6a88, res=jsval_void) at js/src/jit/baselineic.cpp:6113 #4 0x00007ffff7f41395 in <<jitframe_exit>> () #5 0x00007ffff7f42223 in <<jitframe_baselinestub>> () #6 0x00007ffff7f4423d in <<jitframe_baselinejs>> () #7 0x00007ffff7f4222e in <<jitframe_baselinestub>> () #8 0x00007ffff7f4326a in <<jitframe_baselinejs>> () #9 0x00007ffff7f38d5f in <<jitframe_entry>> () #10 0x00000000006a86de in
enterbaseline(jscontext*, js::jit::
enterjitdata&) (cx=0x14f2640, data=...) at js/src/jit/baselinejit.cpp:150 note, when you enable the unwinder, the current version of gdb (7.10.1) does not flush the backtrace.
...instead of
entering jit code, it runs it in a simulator (interpreter) for arm code.
...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.
JS_LeaveLocalRootScope
this must be the same context passed to js_
enterlocalrootscope().
... 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.
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...
...idermonkey 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 is straightforward: class js::compileoptions added in spidermonkey 17 class js::owningcompileoptions added in spidermonkey 31 class js::readonlycompileoptions added in spidermonkey 31 class js::sourcebufferholder added in spidermonkey 31 js::evaluate added in spidermonkey 17 js_eval...
...they have been removed in js 1.8.5, though js_
enterlocalrootscope obsolete since javascript 1.8.5 js_leavelocalrootscope obsolete since javascript 1.8.5 js_leavelocalrootscopewithresult obsolete since javascript 1.8.5 js_forgetlocalroot obsolete since javascript 1.8.5 added in spidermonkey 1.8 if an object contains references to other gc things that are not stored in spidermonkey data structures ("slots"), it must implement the jstraceop hook...
SpiderMonkey 1.8.7
the approach eliminates the need for the js_
enterlocalrootscope api, and in many cases the need to explicitly root gc things or use the "root as you go" approach popular with earlier spidermonkey releases.
...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 ...
... 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 a...
History Service Design
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.
...in both cases an implem
enter can know what did happen at startup and act accordingly (maybe restoring a backup).
... 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.
nsIAppShellService
in long ainitialwidth, in long ainitialheight, in nsiappshell aappshell); nsiwebnav createwindowlessbrowser (in bool aischrome) void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.8 void ensure1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.8 void
enterlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 void exitlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 void gethiddenwindowandjscontext(out nsidomwindow ahiddendomwindow, out jscontext ajscontext); native code only!
...
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.
...(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.
nsIAuthPrompt
one of the save_password_* constants pwd the password
entered by the user if ok was selected.
...one of the save_password_* constants user the username
entered in the dialog.
... pwd the password
entered by the user if ok was selected.
nsIAuthPrompt2
this has largely the same semantics as nsiauthprompt.promptusernameandpassword(), but must return immediately after calling and return the
entered data in a callback.
...the implementation should fill in this object with the information
entered by the user before returning.
...the implementation should fill in this object with the information
entered by the user before returning.
nsIWebBrowserChrome
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.
... chrome_c
enter_screen 134217728 represent special cases.
... methods destroybrowserwindow() asks the implem
enter to destroy the window associated with this webbrowser object.
Search - Firefox Developer Tools
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.
...press shift + ctrl + f (windows and linux) or shift + cmd + f (macos) and then
enter the string you are trying to find.
Debugger - Firefox Developer Tools
on
enterframe(frame) the stack frameframe is about to begin executing code.
... spidermonkey only calls on
enterframe to report visible, non-"debugger" frames.
... when an exception’s propagation causes control to
enter a finally block, the exception is temporarily set aside.
Network request list - Firefox Developer Tools
(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.
...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).
...
enter a string in the search field of the sidebar, and press
enter or return.
AudioNode.channelInterpretation - Web APIs
the m input channel is used for the c
enter output channel (c).
...surround output channels (sl and sr), as well as the c
enter (c) and subwoofer (lfe) channels, are left silent.
...c
enter (c) and subwoofer (lfe) channels are left silent.
BiquadFilterNode.type - Web APIs
the c
enter of the range of frequencies.
... the c
enter of the range of frequencies.
... the frequency with the maximal group delay, that is, the frequency where the c
enter of the phase transition occurs.
BiquadFilterNode - Web APIs
the c
enter of the range of frequencies.
... the c
enter of the range of frequencies.
... the frequency with the maximal group delay, that is, the frequency where the c
enter of the phase transition occurs.
CanvasRenderingContext2D.arc() - Web APIs
syntax void ctx.arc(x, y, radius, startangle, endangle [, anticlockwise]); the arc() method creates a circular arc c
entered at (x, y) with a radius of radius.
... parameters x the horizontal coordinate of the arc's c
enter.
... y the vertical coordinate of the arc's c
enter.
CanvasRenderingContext2D.ellipse() - Web APIs
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.
... 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.
Drawing shapes with canvas - Web APIs
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.
... 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).
... 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.
Constraint validation API - Web APIs
the constraint validation api enables checking values that users have
entered into form controls, before submitting the values to the server.
... 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.
...ad display custom error messages, you could use javascript like the following: const nameinput = document.queryselector('input'); const form = document.queryselector('form'); nameinput.addeventlistener('input', () => { nameinput.setcustomvalidity(''); nameinput.checkvalidity(); }); nameinput.addeventlistener('invalid', () => { if(nameinput.value === '') { nameinput.setcustomvalidity('
enter your username!'); } else { nameinput.setcustomvalidity('usernames can only contain upper and lowercase letters.
DOMMatrix - Web APIs
dommatrix.scalenonuniformself() modifies the matrix by applying the specified scaling on the x, y, and z axes, c
entered at the given origin.
... dommatrix.scaleself() modifies the matrix by applying the specified scaling factors, with the c
enter located at the specified origin.
... dommatrix.scale3dself() modifies the matrix by applying the specified scaling factor to all three axes, c
entered on the given origin.
DOMMatrixReadOnly - Web APIs
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.
... 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.
... dommatrixreadonly.scalenonuniform() returns a new dommatrix created by applying the specified scaling on the x, y, and z axes, c
entered at the given origin.
DataTransfer.dropEffect - Web APIs
for the drag
enter and dragover events, dropeffect will be initialized based on what action the user is requesting.
...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.
Element: mouseleave event - Web APIs
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.
... #mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var
entereventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouse
enter', e => { mousetarget.style.border = '5px dotted orange';
entereventcount++; addlistitem('this is mouse
enter event ' +
entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); fun...
Element - Web APIs
event handlers element.onfullscreenchange an event handler for the fullscreenchange event, which is sent when the element
enters or exits full-screen mode.
... 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.
Fullscreen API - Web APIs
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 by the event handler above when the user hits the
enter key.
GlobalEventHandlers - Web APIs
globaleventhandlers.ondrag
enter is an eventhandler representing the code to be called when the drag
enter event is raised.
... globaleventhandlers.onmouse
enter is an eventhandler representing the code to be called when the mouse
enter event is raised.
... globaleventhandlers.onpointer
enter is an eventhandler representing the code to be called when the pointer
enter event is raised.
HTMLElement - Web APIs
toucheventhandlers.ontouch
enter returns the event handling code for the touch
enter event.
... 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.
HTMLInputElement.stepDown() - Web APIs
example click the button in this example to increment the number input type: html <p> <label>
enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>
enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="decrem
enter" min="-2" max="15"> </label> </p> <input type="button" value="decrement" id="thebutton"> javascript /* make the button...
... call the function */ let button = document.getelementbyid('thebutton'); button.addeventlistener('click', function() { stepondown();} ); function stepondown() { let input = document.getelementbyid('thenumber'); let val = document.getelementbyid('decrem
enter').value; if (val) { /* increment with a parameter */ input.stepdown(val); } else { /* or without a parameter.
... try setting the step decrem
enter to 1.2.
HTMLInputElement - Web APIs
note: if the user
enters a value different from the value expected, this may return an empty string.
...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.
... placeholder string: returns / sets the element's placeholder attribute, containing a hint to the user of what can be
entered in the control.
Intersection Observer API - Web APIs
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.
...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...
... #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.
KeyboardEvent - Web APIs
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.
... examples include the digits on the numeric keypad, the keypad's
enter key, and the decimal point on the keypad.
... note: this does not describe the locale of the data being
entered.
Starting up and shutting down a WebXR session - Web APIs
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.
...at this point, the setup process is complete and we've
entered the rendering stage of our application.
Understandable - Accessibility
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.
...when
entering a password) or context problem (e.g.
... 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.
-webkit-mask-position-x - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-position-x: left; -webkit-mask-position-x: c
enter; -webkit-mask-position-x: right; /* <percentage> values */ -webkit-mask-position-x: 100%; -webkit-mask-position-x: -50%; /* <length> values */ -webkit-mask-position-x: 50px; -webkit-mask-position-x: -1cm; /* multiple values values */ -webkit-mask-position-x: 50px, 25%, -3em; /* global values */ -webkit-mask-position-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length...
... 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> | 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
/* keyword values */ -webkit-mask-position-y: top; -webkit-mask-position-y: c
enter; -webkit-mask-position-y: bottom; /* <percentage> values */ -webkit-mask-position-y: 100%; -webkit-mask-position-y: -50%; /* <length> values */ -webkit-mask-position-y: 50px; -webkit-mask-position-y: -1cm; /* multiple values values */ -webkit-mask-position-y: 50px, 25%, -3em; /* global values */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-p...
... 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.
Box alignment in Flexbox - CSS: Cascading Style Sheets
the first item overrides the align-items values set on the group by setting align-self to c
enter.
...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.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
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.
... c
enter item before flexbox, developers would joke that the hardest problem in web design was vertical c
entering.
...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.
Basic Shapes - CSS: Cascading Style Sheets
the keyword closest-side uses the length from the c
enter of the shape to the closest side of the reference box.
... the keyword farthest-side uses the length from the c
enter of the shape to the farthest side of the reference box.
...if omitted this will be set to c
enter.
<length> - CSS: Cascading Style Sheets
examples length unit comparison the following demo provides you with an input field in which you can
enter a <length> value (e.g.
... html <div class="outer"> <div class="input-container"> <label>
enter width:</label> <input type="text" id="length"> </div> <div class="inner"> </div> </div> <div class="results"> </div> css html { font-family: sans-serif; font-weight: bold; box-sizing: border-box; } .outer { width: 100%; height: 50px; background-color: #eee; position: 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'); const resultsdiv = document.queryselector('.results'); inputelem.addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const result = document.createelement('div'); result.classname = 'result'; result.style.width = inputelem...
offset-position - CSS: Cascading Style Sheets
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.
...if only one value is specified, the second value is assumed to be c
enter.
... formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrefertosizeofcontainingblockcomputed 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> ]?
place-self - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: align-self justify-self syntax /* keyword values */ place-self: auto c
enter; place-self: normal start; /* positional alignment */ place-self: c
enter normal; place-self: start auto; place-self: end normal; place-self: self-start auto; place-self: self-end normal; place-self: flex-start auto; place-self: flex-end normal; place-self: left auto; place-self: right normal; /* baseline alignment */ place-self: baseline normal; place-self: first baseline auto; place-self: last...
... c
enter the flex item's margin box is c
entered within the line on the cross-axis.
...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...
scroll-snap-align - CSS: Cascading Style Sheets
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.
... 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.
... 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.
transform-box - CSS: Cascading Style Sheets
formal definition initial valueview-boxapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax content-box | border-box | fill-box | stroke-box | view-box examples svg transform-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <g> <circle id="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 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.
<col> - HTML: Hypertext Markup Language
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.
... 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.
... 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.
<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.
... 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.
...("input", updatefirst, false); colorpicker.addeventlistener("change", watchcolorpicker, false); function watchcolorpicker(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.target.value; }); } selecting the value if the <input> element's implementation of the color type on the user's browser doesn't support a color well, but is instead a text field for
entering the color string directly, you can use the select() method to select the text currently in the edit field.
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
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).
... to achieve the same effect as the left, c
enter, right or justify values, use the css text-align property on it.
... 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.
<th> - HTML: Hypertext Markup Language
c
enter: the content is c
entered in the cell.
... to achieve the same effect as the left, c
enter, right or justify values, apply the css text-align property to the element.
... middle: c
enters the text in the cell.
<thead>: The Table Head element - HTML: Hypertext Markup Language
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).
... to achieve the same effect as the left, c
enter, right or justify values, use the css text-align property on it.
... 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.
inputmode - HTML: Hypertext Markup Language
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.
... email a virtual keyboard optimized for
entering email addresses.
... url a keypad optimized for
entering urls.
Introduction - JavaScript
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.
... 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!
Regular expressions - JavaScript
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.
... 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".
Digital audio concepts - Web media technologies
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.
...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.
... 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.
OpenSearch description format
type="application/x-moz-keywordsearch" specifies the url used when a keyword search is
entered in the location bar.
... for these url types, you can use {searchterms} to substitute the search terms
entered by the user in the search bar or location bar.
...when specifying values, you can use {searchterms} to insert the search terms
entered by the user in the search bar.
Mobile first - Progressive web apps (PWAs)
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.
...to create something more suitable for desktop, i put in the following media queries: @media (min-width: 480px) { #bottom, #top { display: none; } article, nav { display: block; } nav ul { text-align: c
enter; } nav li { display: inline; } nav li a { border-right: 1px solid #ad66d5; border-bottom: none; display: inline-block; padding: 0 5px; font-size: 1.6em; } nav li:last-child a { border-right: none; } } @media (min-width: 600px) { html { background: #eee; height: 100%; } body { width: 600px; height: inherit; margin: 0 auto...
... 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.
cx - SVG: Scalable Vector Graphics
the cx attribute define the x-axis coordinate of a c
enter point.
...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.
... ellipse for <ellipse>, cx defines the x-axis coordinate of the c
enter of the shape.
cy - SVG: Scalable Vector Graphics
the cy attribute define the y-axis coordinate of a c
enter point.
...g/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.
... ellipse for <ellipse>, cy defines the y-axis coordinate of the c
enter of the shape.
<circle> - SVG: Scalable Vector Graphics
the <circle> svg element is an svg basic shape, used to draw circles based on a c
enter point and a radius.
... html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the c
enter of the circle.
... value type: <length>|<percentage> ; default value: 0; animatable: yes cy the y-axis coordinate of the c
enter of the circle.
Paths - SVG: Scalable Vector Graphics
at its c
enter, two elliptical arcs have been cut out (x radius = 30, y radius = 50).
... 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.
...the solution, (x, y), is the c
enter of the ellipse(s).
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...
...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.
... 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.
Getting Started (jpm) - Archive of obsolete content
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.
Dialogs and Prompts - Archive of obsolete content
this will: handle a few keyboard events (
enter/esc and more), which is good for keyboard accessibility.
...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...
...: 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: the current...
Handling Preferences - Archive of obsolete content
to access all other preferences,
enter "about:config" into the location bar.
...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 ?
Setting Up a Development Environment - Archive of obsolete content
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".
...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.
Adding preferences to an extension - Archive of obsolete content
tylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow id="stockwatcher2-prefs" title="stockwatcher 2 options" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="sw2-stock-pane" label="stock settings"> <preferences> <preference id="pref_symbol" name="extensions.stockwatcher2.symbol" type="string"/> </preferences> <hbox align="c
enter"> <label control="symbol" value="stock to watch: "/> <textbox preference="pref_symbol" id="symbol" maxlength="4"/> </hbox> </prefpane> </prefwindow> the <preferences> block establishes all the settings we implement as well as their types.
...the second is the textbox itself, in which the user
enters the symbol.
Bookmark Keywords - Archive of obsolete content
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.
...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.
Drag and Drop JavaScript Wrapper - Archive of obsolete content
the object contains a series of functions, one for each event handler (except for drag
enter where it has nothing special to do).
...<description value="click and drag this text." ondraggesture="nsdraganddrop.startdrag(event,textobserver)" ondragover="nsdraganddrop.dragover(event,textobserver)" ondragexit="nsdraganddrop.dragexit(event,textobserver)" ondragdrop="nsdraganddrop.drop(event,textobserver)" /> as mentioned earlier, there is nothing special that happens during a drag
enter event, so you can just write that yourself.
Drag and Drop - Archive of obsolete content
ondrag
enter called for an element when the mouse pointer first moves over the element while something is being dragged.
...this should be changed in the ondragover and ondrag
enter event handlers.
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...
Tamarin build documentation - Archive of obsolete content
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.
align - Archive of obsolete content
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.
... c
enter the elements are c
entered horizontally.
textbox.value - Archive of obsolete content
« xul reference home value type: string the default value
entered in a textbox.
... the attribute only holds the default value and is never modified when the user
enters text.
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
<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.
... <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.
Content Panels - Archive of obsolete content
when the user
enters a url or clicks on a link in a document, the source of the frame is changed.
...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.
Keyboard Shortcuts - Archive of obsolete content
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).
... vk_cancel vk_back vk_tab vk_clear vk_return vk_
enter vk_shift vk_control vk_alt vk_pause vk_caps_lock vk_escape vk_space vk_page_up vk_page_down vk_end vk_home vk_left vk_up vk_right vk_down vk_printscreen vk_insert vk_delete vk_0 vk_1 vk_2 vk_3 vk_4 vk_5 vk_6 vk_7 vk_8 vk_9 vk_semicolon vk_equals vk_a vk_b vk_c ...
XBL Example - Archive of obsolete content
some keyboard shortcuts could be used for the previous and next buttons, (say backspace and the
enter key).
...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.
Using the Editor from XUL - Archive of obsolete content
nstexteditorkeylistener this event listener handles key presses for typing, and other editing operations (backspace, delete,
enter/return).
... 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.
attribute.align - Archive of obsolete content
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.
... c
enter: (deprecated) the elements are c
entered horizontally.
key - Archive of obsolete content
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.
...on macintosh this can only be used in conjunction with another modifier, since alt+letter combinations are reserved for
entering special characters in text.
label - Archive of obsolete content
c
enter the text will be cropped in the middle, showing both the start and end of the text normally.
... 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.
listcell - Archive of obsolete content
c
enter the text will be cropped in the middle, showing both the start and end of the text normally.
...if it is desired to c
enter the image, use css to hide the label.
tooltip - Archive of obsolete content
c
enter the text will be cropped in the middle, showing both the start and end of the text normally.
... the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftc
enter, rightc
enter, topc
enter or bottomc
enter.
Mozilla release FAQ - Archive of obsolete content
gemini was a previous rendering engine project, renamed nglayout aurora is the navigation c
enter in mozilla and navigator5 seamonkey refers to versions of mozilla based on xpfe and nglayout normandy refers to the mail/news branch of mozilla what are all these acronyms people are using in the newsgroup?
...mozilla currently has far more developers than docum
enters.
2006-12-24 - Archive of obsolete content
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
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.
NPEvent - Archive of obsolete content
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.
... adjustcursorevent: sent when the mouse
enters or leaves the bounds of the instance.
forEach - Archive of obsolete content
feel free to alter the text as english is not my mother tongue and i'm more concerned with the code quality that the english grammar ;-s dotnetcarp
enter 30 june 2012 <hr> the compatibility section goes to extraordinary lengths in providing a foreach implementation.
...dotnetcarp
enter 30 june 2012 <hr> i have released the write access restriction, but i will be watching changes closely.
2D collision detection - Game development
p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> crafty.init(200, 200); var dim1 = {x: 5, y: 5, w: 50, h: 50} var dim2 = {x: 20, y: 10, w: 60, h: 40} var rect1 = crafty.e("2d, canvas, color").attr(dim1).color("red"); var rect2 = crafty.e("2d, canvas, color, keyboard, fourway").fourway(2).attr(dim2).color("blue"); rect2.bind("
enterframe", function () { if (rect1.x < rect2.x + rect2.w && rect1.x + rect1.w > rect2.x && rect1.y < rect2.y + rect2.h && rect1.h + rect1.y > rect2.y) { // collision detected!
... this.x + this.radius, this.y + this.radius, this.radius, 0, math.pi * 2 ); ctx.closepath(); ctx.fill(); ctx.restore(); } }); var circle1 = crafty.e("2d, canvas, circle").attr(dim1).circle(15, "red"); var circle2 = crafty.e("2d, canvas, circle, fourway").fourway(2).attr(dim2).circle(20, "blue"); circle2.bind("
enterframe", function () { var dx = (circle1.x + circle1.radius) - (circle2.x + circle2.radius); var dy = (circle1.y + circle1.radius) - (circle2.y + circle2.radius); var distance = math.sqrt(dx * dx + dy * dy); if (distance < circle1.radius + circle2.radius) { // collision detected!
Bounding volume collision detection with THREE.js - Game development
we need to provide the sphere's c
enter and radius, which can be added to the boundingsphere property available in geometry.
... // 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.
Building up a basic demo with A-Frame - Game development
the controls are already working: you can use the mouse for looking around and the keyboard for movement (try the w, a, s, and d keys.) there's even an "
enter vr mode" button in the bottom right corner of the screen, to allow you to shift to full screen, stereoscopic image viewing if you have the necesary vr hardware set up and ready.
...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.
Building up a basic demo with Three.js - Game development
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.
...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.
Desktop mouse and keyboard controls - Game development
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.
Bounce off the walls - Game development
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.
...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.
Visual-js game engine - Game development
1) click create application 2)
enter new application name in input prompt 3) select folder for server part of application (important : www is not secure place) 4) select folder for client part of application ( any path in www) 5) new app name will appear in project list , select and click open application 6) open your server folder : install node.js modules one way - use windows bat-s file (in server root folder with prefix ...
...install_ ) second way - open cmd terminal and
enter next command : npm install mysql npm install delivery npm install express npm install mkdirp npm install socket.io npm install nodemailer@0.7.0 very easy installation and project files generator .
Visual JS GE - Game development
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.
... after this has finished processing, restart the web page by
entering the following in the console: resource.test_res.
Server - MDN Web Docs Glossary: Definitions of Web-related terms
a hardware server is a shared computer on a network, usually powerful and housed in a data c
enter.
... for example: an internet-connected web server is sending a html file to your browser software so that you can read this page local area network server for file, name, mail, print, and fax minicomputers, mainframes, and super computers at data c
enters learn more general knowledge introduction to servers server (computing) on wikipedia ...
What is accessibility? - Learn web development
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%".
... the united states c
enters for disease control estimate that, as of 2018, 1 in 4 u.s.
Advanced styling effects - Learn web development
imple <div>s, so you can compare the original with the blended version: <div> </div> <div class="multiply"> </div> now some css — we are adding to the <div> one background image and a green background color: div { width: 250px; height: 130px; padding: 10px; margin: 10px; display: inline-block; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat c
enter 20px; background-color: green; } .multiply { background-blend-mode: multiply; } the result we get is this — you can see the original on the left, and the multiply blend mode on the right: mix-blend-mode now let's look at mix-blend-mode.
...v> </article> here's the css we'll style this with: article { width: 280px; height: 180px; margin: 10px; position: relative; display: inline-block; } div { width: 250px; height: 130px; padding: 10px; margin: 10px; } article div:first-child { position: absolute; top: 10px; left: 0; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat c
enter 20px; background-color: green; } article div:last-child { background-color: purple; position: absolute; bottom: -10px; right: 0; z-index: -1; } .multiply-mix { mix-blend-mode: multiply; } this gives us the following results: you can see here that the multiply mix blend has blended together not only the two background images, but also the color from the <div> below it too.
Fundamental CSS comprehension - Learn web development
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.
... 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.
Images, media, and form elements - Learn web development
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.
Test your skills: backgrounds and borders - Learn web development
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.
What text editors are available? - Learn web development
if you're running ubuntu, your best bet is to search within the ubuntu software c
enter.
...in the most popular distros you can start with your graphical package manager (ubuntu software c
enter, mintinstall, gnome software, &c.).
Other form controls - Learn web development
visually, the text
entered wraps and the form control is by default resizable.
... 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.
Styling web forms - Learn web development
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.
Advanced text formatting - Learn web development
<kbd>: for marking up keyboard (and other types of) input
entered into the computer.
...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 <code><font></code> and <code><c
enter></code>.</p> <p>in the above javascript example, <var>para</var> represents a paragraph element.</p> <p>select all the text with <kbd>ctrl</kbd>/<kbd>cmd</kbd> + <kbd>a</kbd>.</p> <pre>$ <kbd>ping mozilla.org</kbd> <samp>ping mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre> the above code will look like so: marking u...
Document and website structure - Learn web development
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.
...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.
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
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.
Introduction to events - Learn web development
first, a simple html form that requires you to
enter your first and last name: <form> <div> <label for="fname">first name: </label> <input id="fname" type="text"> </div> <div> <label for="lname">last name: </label> <input id="lname" type="text"> </div> <div> <input id="submit" type="submit"> </div> </form> <p></p> div { margin-bottom: 10px; } now some javascript — here we implement a very simple check insi...
...ementbyid('fname'); const lname = document.getelementbyid('lname'); const para = document.queryselector('p'); form.onsubmit = function(e) { if (fname.value === '' || lname.value === '') { e.preventdefault(); para.textcontent = 'you need to fill in both names!'; } } obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers
entered into the fields, for example — but it is ok for example purposes.
Object-oriented JavaScript for beginners - Learn web development
add the following lines below your previous code addition: let person1 = new person('bob'); let person2 = new person('sarah'); save your code and reload it in the browser, and try
entering the following lines into your js console: person1.name person1.greeting() person2.name person2.greeting() cool!
... try
entering this into your browser's javascript console: let person1 = new object(); this stores an empty object in the person1 variable.
Website security - Learn web development
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.
...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).
Routing in Ember - Learn web development
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.
... 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.
Ember app structure and componentization - Learn web development
enter the following command into your terminal: ember generate component header these will generate some new files, as shown in the resulting terminal output: installing component create app/components/header.hbs skip app/components/header.js tip to add a class, run `ember generate component-class header` installing component-test create tests/integration/components/header-test.js ...
...
enter the following lines into your terminal, one by one: ember generate component todo-list ember generate component todo ember generate component footer you’ll now see the following inside your todomvc/app/components directory: now that we have all of our component structure files, we can cut and paste the html for each component out of the application.hbs file and into each of those component...
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:...
...padding: 1rem; padding-top: 0; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto; } #app > form { max-width: 100%; } #app h1 { display: block; min-width: 100%; width: 100%; text-align: c
enter; margin: 0; margin-bottom: 1rem; } </style> if you check the app, you'll see that our todo list is now in a card, and we have some better formatting of our to-do items.
Introducing a complete toolchain - Learn web development
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.
... 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.
Links and Resources
accessibility information resource c
enter for developers at adobe - flash mx accessibility, pdf document accessibility and actionscript accessibility.
... other resources trace c
enter - trace c
enter of the university of wisconsin (research on technology for persons with disabilities).
Debugging Frame Reflow
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.
...ablecol colg tablecolgroup tbl table tblo tableouter rowg tablerowgroup row tablerow textctl textinput text text vp viewport once the problem is reduced to a single frame level, placing a breakpoint at displayreflow
enterprint in nsframe.cpp is a very efficient way to step through the reflow tree.
Windows SDK versions
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.
Obsolete Build Caveats and Tips
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 can download the sdk from the microsoft download c
enter.
Experimental features in Firefox
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.
... nightly 72 no developer edition 72 no beta 72 no release 72 no preference name devtools.inspector.color-scheme-simulation.enabled execution context selector this feature displays a button on the console's command line that lets you change the context in which the expression you
enter will be executed.
Storage access policy: Block cookies from trackers
alternatively you can report broken sites directly in firefox by clicking "report a problem" in the content blocking section of the control c
enter (this shortcut may not be available in all versions of firefox).
... for the preference value
enter comma separated origins that you’d like to have classified as trackers.
How to get a stacktrace for a bug report
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.
... to access all of your submitted reports type "about:crashes" into the firefox address bar and press
enter.
Localizing without a specialized tool
to do this,
enter the following commands, keeping sure to change "x-testing" to the actual locale code of your locale.
... 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.
Release phase
your .hg/hgrc file shoud look like this (add the emphasized line): [paths] default = hg.mozilla.org/releases/l10n-central/x-testing default-push = ssh://hg.mozilla.org/releases/l10n-central/x-testing if you haven't already cloned the remote repository,
enter this command: hg clone ssh://hg.mozilla.org/releases/l10n-central/x-testing mercurial will let you know that it's cloning the repository: destination directory: x-testing requesting all changes adding changesets adding manifests adding file changes added 4 changesets with 242 changes to 239 files updating to branch default 239 files updated, 0 files merged, 0 files removed, 0 files unresolved t...
...
enter :pike as the requestee.
mozilla::Monitor
methods
enter()
enter the monitor.
...see also monitorauto
enter prmonitor ...
Patches and pushes
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.
...
enter :flod as the requestee.
PR_CNotify
pr_failure indicates that the monitor has not been
entered by the calling thread.
...as soon as the thread is scheduled, it attempts to re
enter the monitor.
PR_CWait
syntax #include <prcmon.h> prstatus pr_cwait( void *address, printervaltime timeout); parameters the function has the following parameters: address the address of the protected object--the same address previously passed to pr_c
entermonitor.
...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).
PR_ExitMonitor
if unsuccessful (the calling thread has not
entered the monitor), pr_failure.
...threads that were blocked trying to
enter the monitor will be rescheduled.
PR_Wait
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.
... in pseudo-code, the sequence is as follows: pr_
entermonitor(&ml); while (!expression) wait; ...
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...
...ree(p0); p0 = getpassword(input, output, "
enter new password: ", checkpassword); if (p1) port_free(p1); p1 = getpassword(input, output, "re-
enter password: ", checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stderr, "passwords do not match.
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...
...ree(p0); p0 = getpassword(input, output, "
enter new password: ", checkpassword); if (p1) port_free(p1); p1 = getpassword(input, output, "re-
enter password: ", checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stderr, "passwords do not match.
Overview of NSS
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 Tools certutil
the certificate database tool prompts you to
enter the url.
...mplies c) u user cert w send warning creating a certificate request this example generates a binary certificate request file named e95c.req in the specified directory: certutil -r -s "cn=john smith, o=netscape, l=mountain view, st=california, c=us" -p "650-555-8888" -o mycert.req -d certdir before it creates the request file, the certificate database tool prompts you for a password:
enter password or pin for "communicator certificate db": creating a certificate a valid certificate must be issued by a trusted ca.
Rhino scopes and contexts
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.
...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).
Getting SpiderMonkey source code
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.
Invariants
the public api for compartment-hopping, jsauto
entercompartment, and the internal api, js::autocompartment, both make sure the invariant is maintained.
... 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.
JS_ClearNewbornRoots
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.
JS_LeaveLocalRootScopeWithResult
this must be the same context that was passed to js_
enterlocalrootscope.
... description see js_
enterlocalrootscope for an explanation of local root scopes.
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.
...
entering int true if the callback is being called because the specified function is being invoked or false if the function is exiting.
JS_SetInterruptCallback
otherwise the engine may call the interrupt callback again, re
entering it.
... important note: additional callbacks can occur inside the callback handler if it re-
enters the js engine.
JS_SetOperationCallback
otherwise the engine may call the operation callback again, re
entering it.
... important note: additional callbacks can occur inside the callback handler if it re-
enters the js engine.
Gecko Roles
role_hotkeyfield represents a hot-key field that allows the user to
enter a combination or sequence of keystrokes.
... role_entry an control whose textual content may be
entered or modified by the user.
Observer Notifications
this can happen multiple times, such as when the window first opens, when multiple items are removed, and when
entering private browsing mode.
... topic data description private-browsing
enter sent when private browsing mode is activated.
mozIPlacesAutoComplete
note: pages will not be automatically unregistered when private browsing mode is
entered or exited.
...note: pages will not be automatically unregistered when private browsing mode is
entered or exited.
mozIVisitInfoCallback
void handleresult( in moziplaceinfo aplaceinfo ); parameters aplaceinfo the information that was
entered into the database.
... aplaceinfo the information that was being
entered into the database.
nsIAccessibleEvent
event_contexthelp_start 0x0020 0x001d a window has
entered context-sensitive help mode.
... event_dragdrop_start 0x0022 0x001f an application is about to
enter drag-and-drop mode.
nsIAccessibleRole
role_hotkeyfield 50 represents a hot-key field that allows the user to
enter a combination or sequence of keystrokes.
... role_entry 102 an control whose textual content may be
entered or modified by the user.
nsIAppShell
run()
enter an event loop.
...under some circumstances these "additional methods" can cause gecko event handlers to be re-
entered, sometimes leading to hangs and crashes.
nsIDOMNavigatorDesktopNotification
attributes attribute type description moznotification nsidomdesktopnotificationc
enter read only.
... see also nsidomdesktopnotificationc
enter ...
nsIDOMSimpleGestureEvent
client coordinates contain the c
enter point of the tap.
...client coordinates contain the c
enter pivot point of the action.
nsIHTMLEditor
constants constant value description eleft 0 ec
enter 1 eright 2 ejustify 3 methods adddefaultproperty() registers a default style property with the editor.
... aalign enum value for first encountered alignment (left/c
enter/right) getbackgroundcolorstate() getfontcolorstate() returns what font face is in the selection.
nsIParentalControlsService
this method may block while the operating system presents user interface to handle the override request (such as an "
enter an administrator's password" dialog box).
... this method may block while the operating system presents user interface to handle the override request (such as an "
enter an administrator's password" dialog box).
nsIPromptService
dcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var username = {value: "user"}; // default the username to user var password = {value: "pass"}; // default the password to pass var check = {value: true}; // default the checkbox to true var result = prompts.promptusernameandpassword(null, "title", "
enter username and password:", username, password, "save", check); // result is true if ok was pressed, false if cancel was pressed.
...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.
nsISelection2
a value of 50 c
enters the frame vertically.
...a value of 50 c
enters the frame horizontally .
nsISelectionPrivate
a value of 50 c
enters the frame vertically.
...a value of 50 c
enters the frame horizontally .
nsISound
event_prompt_dialog_open 3 a prompt dialog (one that allows the user to
enter data, such as an authentication 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.
XPCOM Thread Synchronization
concurrentmethod() { nsautolock al(mlock); nsautomonitor am(mmonitor); if (needexpensivecomputation()) { nsautounlock au(mlock); } am.wait(); pr_notifycondvar(mcvar); } new usage using namespace mozilla; 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.
... mozilla::condvar mozilla::monitor mozilla::monitorauto
enter mozilla::mutex mozilla::mutexautolock mozilla::mutexautounlock ...
Autoconfiguration in Thunderbird
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.
... manual configuration if guessing fails, the user must manually
enter the configuration information.
Index
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!
... 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.
Introduction to DOM Inspector - Firefox Developer Tools
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.
Set an XHR breakpoint - Firefox Developer Tools
to turn on the feature: open the debugger click on "pause on any url" which acts as a wild card, causing the code to pause on any call, or, click the plus sign next to the xhr breakpoints header,
enter the url in which you are interested, and press
enter.
... 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.
UI Tour - Firefox Developer Tools
t: in 2-pane mode, the inspector includes the html pane, and the css pane, which can contain one of six tools: rules view layout view computed view changes view compatibility view (firefox developer edition 77 and later) fonts view animations view the following image shows the 3-pane mode (available from firefox 62 onwards) which moves the css rules view into a separate pane in the c
enter of the inspector.
... the following image shows 3-pane mode: as you can see, the css pane has moved into the c
enter of the inspector.
Background Tasks API - Web APIs
concepts and usage the main thread of a web browser is c
entered around its event loop.
... border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; display: block; overflow: auto; } .label { display: inline-block; } .counter { text-align: right; padding-top: 4px; float: right; } .button { padding-top: 2px; padding-bottom: 4px; width: 100px; display: inline-block; float: left; border: 1px solid black; cursor: pointer; text-align: c
enter; margin-top: 0; color: white; background-color: darkgreen; } #progress { width: 100%; padding-top: 6px; } javascript content now that the document structure is defined, construct the javascript code that will do the work.
Using the CSS Typed Object Model - Web APIs
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.
...'ll take a look at that their types are by employing short javascript snippets outputting to console.log(): :root { --maincolor: hsl(198, 43%, 42%); --black: hsl(0, 0%, 16%); --white: hsl(0,0%,97%); --unit: 1.2rem; } button { --maincolor: hsl(198, 100%, 66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); width: calc(30% + 20px); background: no-repeat 5% c
enter url(https://mdn.mozillademos.org/files/16793/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-radius: 2px; font-size: calc(var(--unit)*2); color: var(--white); cursor: pointer; transform: scale(0.95); } let's add the class to a button (a button which does nothing).
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...
...iss { 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; flex-wrap: wrap; justify-content: space-around; opacity: 1; user-select: none } .keypress>div:hover { o...
Using channel messaging - Web APIs
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>.
... 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.
Detecting device orientation - Web APIs
so let's imagine a ball in a garden: <div class="garden"> <div class="ball"></div> </div> <pre class="output"></pre> this garden is 200 pixel wide (yes, it's a tiny one), and the ball is in the c
enter: .garden { position: relative; width : 200px; height: 200px; border: 5px solid #ccc; border-radius: 10px; } .ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px; background: green; border-radius: 100%; } now, if we move our device, the ball will move accordingly: var ball = document.queryselector('.ball'); var garden = document.querysel...
... output.innerhtml = "beta : " + x + "\n"; output.innerhtml += "gamma: " + y + "\n"; // because we don't want to have the device upside down // we constrain the x value to the range [-90,90] if (x > 90) { x = 90}; if (x < -90) { x = -90}; // to make computation easier we shift the range of // x and y to [0,180] x += 90; y += 90; // 10 is half the size of the ball // it c
enter the positioning point to the c
enter of the ball ball.style.top = (maxy*y/180 - 10) + "px"; ball.style.left = (maxx*x/180 - 10) + "px"; } window.addeventlistener('deviceorientation', handleorientation); click here to open this example in a new window; because deviceorientation doesn't work in a cross-origin <iframe> in all browsers.
Document: drag event - Web APIs
html <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.datatransfer.setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: 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.
...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
insertbronreturn controls whether the
enter key inserts a <br> element, or splits the current block element into two.
...(internet explorer uses the <em> element instead of <i>.) justifyc
enter c
enters the selection or insertion point.
Document: fullscreenchange event - Web APIs
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.
... 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.
DragEvent - Web APIs
drag
enter this event is fired when a dragged element or text selection
enters a valid drop target.
... globaleventhandlers.ondrag
enter a global event handler for the drag
enter event.
EffectTiming.fill - Web APIs
</div> css content .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: 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...
...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.
Element.innerHTML - Web APIs
we add a second method that logs information about mouseevent based events (such as mousedown, click, and mouse
enter): function logevent(event) { var msg = "event <strong>" + event.type + "</strong> at <em>" + event.clientx + ", " + event.clienty + "</em>"; log(msg); } then we use this as the event handler for a number of mouse events on the box that contains our log: var boxelem = document.queryselector(".box"); boxelem.addeventlistener("mousedown", logevent); boxelem.addeventlistener("mous...
...eup", logevent); boxelem.addeventlistener("click", logevent); boxelem.addeventlistener("mouse
enter", logevent); boxelem.addeventlistener("mouseleave", logevent); html the html is quite simple for our example.
Element: mouseover event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property onmouseover examples the following example illustrates the difference between mouseover and mouse
enter events.
... html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouse
enter", function( event ) { // highlight the mouse
enter target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list item test.addeventlistener("mouseover", function( event ) { // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.styl...
Element.scrollIntoViewIfNeeded() - Web APIs
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.
... 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.
Element.setPointerCapture() - Web APIs
note: when pointer capture is set, pointerover, pointerout, pointer
enter, and pointerleave events are only generated when crossing the boundary of the capture target.
... html <div id="slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-items: c
enter; justify-content: c
enter; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slid...
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...
... #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.
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 ...
... #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.
GlobalEventHandlers.onanimationiteration - Web APIs
html <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> begin demonstration </div> css :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: 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...
... #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.
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 ...
... #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.
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...
... var el=document.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_hand...
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...
... var el=document.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_hand...
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...
... var el=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" ondragstar...
HTMLElement: change event - Web APIs
try
entering something into the field below, and then click somewhere else to trigger the event.
... html <input placeholder="
enter some text" name="name"/> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('change', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'change' in that specification.
HTMLElement: input event - Web APIs
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.
... html <input placeholder="
enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('input', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'input event' in that specification.
HTMLInputElement.stepUp() - Web APIs
example click the button in this example to increment the number input type: html <p> <label>
enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>
enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="increm
enter" min="0" max="25"> </label> </p> <input type="button" value="increment" id="thebutton"> javascript /* make the button ...
...call the function */ let button = document.getelementbyid('thebutton') button.addeventlistener('click', function() { steponup() }) function steponup() { let input = document.getelementbyid('thenumber') let val = document.getelementbyid('increm
enter').value if (val) { /* increment with a parameter */ input.stepup(val) } else { /* or without a parameter.
HTMLMediaElement - Web APIs
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.
... 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.
KeyboardEvent.charCode - Web APIs
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).
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.relatedTarget - Web APIs
that is: 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 target, relatedtarget returns null.
Path2D - Web APIs
path2d.arc() adds an arc to the path which is c
entered at (x, y) position with radius r starting at startangle and ending at endangle going in the given direction by anticlockwise (defaulting to clockwise).
... path2d.ellipse() adds an elliptical arc to the path which is c
entered at (x, y) position with the radii radiusx and radiusy starting at startangle and ending at endangle going in the given direction by anticlockwise (defaulting to clockwise).
PaymentCurrencyAmount.value - Web APIs
you must convert the
entered text to this form or it will not be valid.
...nting prices this example represents the price of $42.95 in us dollars: let itemprice = { currency: "usd", value: "42.95" }; this example specifies a price of £7.77: let shippingcost = { currency: "gbp", value: "7.77" } this example specifies a price of 1000¥: let price = { currency: "jpy", value: "1000" } verifying a properly formatted price you can ensure that the value
entered as a price is formatted correctly prior to submission by matching it against a simple regular expression: function checkpriceformat(price) { let validregex = /^-?[0-9]+(\.[0-9]+)?$/; return validregex.test(price); } this function, checkpriceformat(), will return true if the specified price string is formatted properly, or false if it's not.
PointerEvent - Web APIs
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).
... globaleventhandlers.onpointer
enter a global event handler for the pointer
enter event.
Pointer Lock API - Web APIs
s recently unprefixed, you would currently declare it something like this, for example if you wanted to request pointer lock on a canvas element: canvas.requestpointerlock = canvas.requestpointerlock || canvas.mozrequestpointerlock; canvas.requestpointerlock() if a user has exited pointer lock via the default unlock gesture, or pointer lock has not previously been
entered for this document, an event generated as a result of an engagement gesture must be received by the document before requestpointerlock will succeed.
... when the mouse is unlocked, the system cursor can exit and re-
enter the browser window.
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.
... syntax var xcoordinate = element.cx; value an svganimatedlength representing the x-coordinate of the circleʼs c
enter.
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.
... syntax var ycoordinate = element.cy; value an svganimatedlength representing the y-coordinate of the circleʼs c
enter.
SVGCircleElement - Web APIs
svgcircleelement.cx read only this property defines the x-coordinate of the c
enter of the <circle> element.
... svgcircleelement.cy read only this property defines the y-coordinate of the c
enter of the <circle> element.
SVGTransform - Web APIs
when the rotation is around the c
enter point (0, 0), e and f will be zero.
... 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.
ScrollToOptions.behavior - Web APIs
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.
... when the form is submitted, an event handler is run that puts the
entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions.left - Web APIs
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.
... when the form is submitted, an event handler is run that puts the
entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions.top - Web APIs
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.
... when the form is submitted, an event handler is run that puts the
entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions - Web APIs
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.
... when the form is submitted, an event handler is run that puts the
entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
SubtleCrypto.unwrapKey() - Web APIs
*/ 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.
...*/ 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.
TextTrack - Web APIs
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.
WebGLRenderingContext - Web APIs
the effect is clearly visible when using scissor() and clear() to draw a square in the c
enter of the canvas, by specifying its position and size in pixels.
... <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : c
enter; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(func...
Canvas size and WebGL - Web APIs
the effect is clearly visible when using scissor() and clear() to draw a square in the c
enter of the canvas, by specifying its position and size in pixels.
... <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : c
enter; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(fu...
WebGL model view projection - Web APIs
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).
...the c
enter of the cube is the point (0,0,0).
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.
... <div class="messagebox"> <label for="message">
enter a message: <input type="text" name="message" id="message" placeholder="message text" inputmode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the little box into which we'll insert the messages.
Writing a WebSocket server in C# - Web APIs
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.
...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...
Web Video Text Tracks Format (WebVTT) - Web APIs
00:00:04.000 --> 00:00:06.500 position:45%,line-right align:c
enter size:35% what are you waiting for?
...following interface can be used to expose webvtt cues in dom api: enum autokeyword { "auto" }; enum directionsetting { "" /* horizontal */, "rl", "lr" }; enum linealignsetting { "start", "c
enter", "end" }; enum positionalignsetting { "line-left", "c
enter", "line-right", "auto" }; enum alignsetting { "start", "c
enter", "end", "left", "right" }; [constructor(double starttime, double endtime, domstring text)] interface vttcue : texttrackcue { attribute vttregion?
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
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.
...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.
Inputs and input sources - Web APIs
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).
... 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.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
the origin is generally the c
enter of the user's fisted hand.
... 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.
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...
...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.
Window - Web APIs
window.prompt() returns the text
entered by the user in a prompt dialog.
... 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.
XRInputSource.gripSpace - Web APIs
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.
...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.
XRSystem: devicechange event - Web APIs
example the example shown here handles the devicechange event by toggling the availability of the "
enter xr" button based on whether or not any immersive devices are currently available.
...if there is, the button to
enter xr mode is enabled; otherwise it's disabled.
XRSystem: isSessionSupported() - Web APIs
if it is, we set up a button to read "
enter xr", to call a method onbuttonclicked(), and enable the button.
... 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.
Using the alert role - Accessibility
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.
...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.
Using the aria-invalid attribute - Accessibility
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.
... <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).
Using the link role - Accessibility
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.
... <p><a href="https://mozilla.org" target="_blank">actual real link</a></p> css span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; } javascript const spanelem = document.queryselector('span'); //handles clicks and keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.key === '
enter') { let ref = e.target != null ?
ARIA: application role - Accessibility
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 tab , space and
enter keys, as well as escape , must be handled by the application.
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=...
...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(); }); more examples data grid examples layout grids examples w3c/wai tutorial: tables accessibility concerns even if the keyboard use is properly implemented, some users might not be aware that they have to use the arrow keys.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
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.
...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.
Keyboard-navigable JavaScript widgets - Accessibility
style <ul id="stylemenu" title="style" tabindex="-1"> <li id="italic" tabindex="-1">italics</li> <li id="bold" tabindex="-1">bold</li> <li id="underline" tabindex="-1">underlined</li> </ul> </li> <li id="mb1_menu3" tabindex="-1"> justification <ul id="justificationmenu" title="justication" tabindex="-1"> <li id="left" tabindex="-1">left</li> <li id="c
enter" tabindex="-1">c
entered</li> <li id="right" tabindex="-1">right</li> <li id="justify" tabindex="-1">justify</li> </ul> </li> </ul> disabled controls when a custom control becomes disabled, remove it from the tab order by setting tabindex="-1".
...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();".
Web Accessibility: Understanding Colors and Luminance - Accessibility
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.
...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.
Operable - Accessibility
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.
Color contrast - Accessibility
the "good" <div> has a light purple background, which makes the text easy to read: example1 <div class="good"> good contrast </div> div { font-family: sans-serif; text-align: c
enter; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .good { background-color: #fae6fa; } the "bad" <div> on the other hand has a very dark purple background, which makes the text much harder to read: example2 <div class="bad"> bad contrast </div> div { font-family: sans-serif; text-align: ...
...c
enter; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .bad { background-color: #400064; } solution when choosing a color scheme for your website, choose foreground and background colors that have good contrast.
:target - CSS: Cascading Style Sheets
quisque quis neque arcu, nec gravida magna.</figcaption> </figure> </div> css /* unopened lightbox */ .lightbox { display: none; } /* opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: c
enter; justify-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-ite...
...ms: 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 html living standardthe definition of ':target' in that specification.
Grid wrapper - CSS: Cascading Style Sheets
requirements items placed on the grid should be able to align to a horizontally-c
entered max-width wrapper and/or the outer edges of the grid.
... useful fallbacks or alternative methods when using this recipe at page level it can be useful to set a max-width along with left and right auto margins to c
enter the content horizontally: .grid { max-width: 1200px; margin: 0 auto; // horizontally c
enters the container } /* remove the max-width and margins if the browser supports grid */ @supports (display: grid) { .grid { display: grid; /* other grid code goes here */ max-width: none; margin: 0; } } to “break out” a full-width item to the edge of the viewport you can then us...
Pagination - CSS: Cascading Style Sheets
typically, the pagination component will be c
entered horizontally underneath the content.
...the <nav> element is designated a flex container in order that we can c
enter the list inside using the justify-content property.
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
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples css .box { background-color: rgba(255, 255, 255, 0.3); border-radius: 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; back...
...ground-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 level 2the definition of 'backdrop-filter' in that specification.
clip-path - CSS: Cascading Style Sheets
<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> ]?
... </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
entering a valid color into the input causes the <div> to adopt that color, allowing you to test our color values.
... html <div></div> <hr> <label for="color">
enter a valid color value:</label> <input type="text" id="color"> css div { width: 100%; height: 200px; } javascript const inputelem = document.queryselector('input'); const divelem = document.queryselector('div'); function validtextcolor(stringtotest) { if (stringtotest === "") { return false; } if (stringtotest === "inherit") { return false; } if (stringtotest === "transparent") { return false; } const image = document.createelement("img"); image.style.color = "rgb(0, 0, 0)"; image.style.color = stringtotest; if (image.style.color !== "rgb(0, 0, 0)") { return true; } image.style.color = "rgb(255, 255, 255)"; image.style.color = stringtotest; return image.style.color !== "rgb(255, 255, 255)"; } inputelem.addeventlisten...
margin-left - CSS: Cascading Style Sheets
in this case, it is set to the value c
entering the element inside its parent.
...in this case, it is set to the value c
entering the border area inside the available width, if fixed.
margin-right - CSS: Cascading Style Sheets
in this case, it is set to the value c
entering the element inside its parent.
...in this case, it is set to the value c
entering the border area inside the available width, if fixed.
mask - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:mask-image: nonemask-mode: match-sourcemask-repeat: no-repeatmask-position: c
entermask-clip: border-boxmask-origin: border-boxmask-size: automask-composite: addapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-position: refer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueas eac...
...| <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> ]?
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...
...0px; 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: screen; } .overlay .item { mix-blend-mode: overlay; } .darken .item { mix-blend-mode: darken; } .lighten .item { mix-blend-mode: lighten; } .color-dodge .item { mix-blend-mode: color-dodge; } .color-burn .item { mix-blend-mode: color-burn; } .hard-light .item { mix-blend-mode: hard-light; } .soft-light .item { mix-blend-mode: soft-li...
object-position - CSS: Cascading Style Sheets
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.
... 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> ]?
perspective - CSS: Cascading Style Sheets
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.
...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
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.
...ntax none | <angle> | [ x | y | z | <number>{3} ] && <angle> examples rotate an element on hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: c
enter; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
scroll-snap-coordinate - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednopercentagesrefer to the element’s border boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea position formal syntax none | <position>#where <position> = [ [ left | c
enter | right ] | [ top | c
enter | bottom ] | [ left | c
enter | right | <length-percentage> ] [ top | c
enter | bottom | <length-percentage> ]?
...2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-type: mandatory; font-size: 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: c
enter; font-size: 50px; } .coordinate0 > div { scroll-snap-coordinate: 0 0; } .coordinate25 > div { scroll-snap-coordinate: 25px 0; } .coordinate50 > div { scroll-snap-coordinate: 50px 0; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-destination - CSS: Cascading Style Sheets
formal definition initial value0px 0pxapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea position 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> ]?
...roll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; scroll-snap-destination: 20px 0; font-size: 0; } .destination0 { scroll-snap-destination: 0 0; } .destination25 { scroll-snap-destination: 25px 0; } .destination50 { scroll-snap-destination: 50px 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: c
enter; font-size: 50px; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-stop - CSS: Cascading Style Sheets
css /* setup */ :root, body { height: 100%; display: flex; align-items: c
enter; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 256px; height: 256px; flex-flow: column nowrap; } /* definite scroll snap */ .mandatory-scroll-snapping > d...
...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
rtl</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div> css /* setup */ html, body, .holster { height: 100%; } .holster { display: flex; align-items: c
enter; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 256px; height: 256px; flex-flow: column nowrap; } /* scroll-snap */ .x.mandatory-scroll-snapping { scrol...
...l-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) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } results specifications specificat...
shape-outside - CSS: Cascading Style Sheets
)<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> ]?
...100%, 0 100%); float: left; -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); } .right { -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); shape-outside: polygon(100% 0, 100% 100%, 0 100%); float: right; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); } p { text-align: c
enter; } result specifications specification status comment css shapes module level 1the definition of 'shape-outside' in that specification.
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...
...</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 infin...
Setting up adaptive streaming media sources - Developer guides
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.
Video player styling basics - Developer guides
basic styling the html video and its controls are all contained within a <figure> element, which is given a maximum width and height (based on the dimensions of the video used) and c
entered within the page: figure { max-width:64rem; width:100%; max-height:30.875rem; height:100%; margin:1.25rem auto; padding:1.051%; background-color:#666; } the video controls container itself also needs some styling so that it is set up the correct way: .controls { width:100%; height:8.0971659919028340080971659919028%; /* of figure's height */ position:relative; } ...
...:auto; } .controls > * { display:block; width:16.6667%; margin-left:0; height:2.5rem; margin-top:2.5rem; } .controls .progress { position:absolute; top:0; width:100%; float:none; margin-top:0; } .controls .progress progress { width:98%; margin:0 auto; } .controls button { background-position:c
enter c
enter; } } the .progress container is now moved to the top of the control set via position:absolute, so it and all the buttons need to be wider.
Making content editable - Developer guides
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>).
...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...
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>.
... 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.
HTML attribute: minlength - HTML: Hypertext Markup Language
the minlength attribute defines the minimum number of characters (as utf-16 code units) the user can
enter into an <input> or <textarea>.
... <label for="fruit">
enter a fruit name that is at least 5 letters long</label> <input type="text" minlength="5" id="fruit"> we can use pseudoclasses to style the element based on whether the value is valid.
HTML attribute: step - HTML: Hypertext Markup Language
the default stepping value for number inputs is 1, allowing only integers to be
entered, unless the stepping base is not an integer.
...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.
<colgroup> - HTML: Hypertext Markup Language
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.
... 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.
<input type="submit"> - HTML: Hypertext Markup Language
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.
...in this instance, the string will be text=usertext, where "usertext" is the text
entered by the user, encoded to preserve special characters.
<samp>: The Sample Output element - HTML: Hypertext Markup Language
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.
...note also the use of <kbd> to represent the command the user
entered at the prompt in the sample text.
<table>: The Table element - HTML: Hypertext Markup Language
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.
...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.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
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.
... 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.
<tt>: The Teletype Text element (obsolete) - HTML: Hypertext Markup Language
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.
... <p>
enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p> result overriding the default font you can override the browser's default font—if the browser permits you to do so, which it isn't required to do—using css: css tt { font-family: "lucida console", "menlo", "monaco", "courier", monospace; } html <p>
enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p> result usage notes the <tt> element is, by default, rendered using the browser's default non-proportional font.
HTML elements reference - HTML: Hypertext Markup Language
<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.
... <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.
Global attributes - HTML: Hypertext Markup Language
the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, 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...
... autocapitalize controls whether and how text input is automatically capitalized as it is
entered/edited by the user.
Control flow and error handling - JavaScript
function checkdata() { if (document.form1.threechar.value.length == 3) { return true; } else { alert( '
enter exactly three characters.
... javascript creates this identifier when the catch block is
entered.
Inheritance and the prototype chain - JavaScript
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.
... let's try
entering some more code into the console: function dosomething(){} dosomething.prototype.foo = "bar"; var dosomeinstancing = new dosomething(); dosomeinstancing.prop = "some value"; console.log("dosomeinstancing.prop: " + dosomeinstancing.prop); console.log("dosomeinstancing.foo: " + dosomeinstancing.foo); console.log("dosomething.prop: " + dosomething.prop); console.log("dosometh...
WeakRef - JavaScript
garbage collection is a hard problem that javascript engine implem
enters are constantly refining and improving their solutions to.
...(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.
<mfrac> - MathML
possible values are: left, c
enter (default), and right.
...possible values are: left, c
enter (default), and right.
<mlabeledtr> - MathML
possible values are: left, c
enter and right.
... possible values are: axis, baseline, bottom, c
enter and top.
<mtd> - MathML
possible values are: left, c
enter and right.
... possible values are: axis, baseline, bottom, c
enter and top.
<mtr> - MathML
possible values are: left, c
enter and right.
... possible values are: axis, baseline, bottom, c
enter and top.
Performance fundamentals - Web Performance
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.
alignment-baseline - SVG: Scalable Vector Graphics
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.
... c
enter aligns the c
enter of the aligned subtree with the c
enter of the line box.
d - SVG: Scalable Vector Graphics
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 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
on a zero length subpath, the stroke consists of a full circle c
entered at the subpath's point.
...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.
<marker> - SVG: Scalable Vector Graphics
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.
<symbol> - SVG: Scalable Vector Graphics
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.
Getting started - SVG: Scalable Vector Graphics
a green circle <circle> with a radius of 80px is drawn atop the c
enter of the red rectangle (c
enter of circle offset 150px to the right, and 100px downward from the top left corner).
...the text is positioned by setting an anchor where we want the midpoint to be: in this case, the midpoint should correspond to the c
enter of the green circle.
hotkeys - Archive of obsolete content
on macintosh this can only be used in conjunction with another modifier, since alt-letter combinations are reserved for
entering special characters in text.
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...
Editor Embedding Guide - Archive of obsolete content
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.
Repackaging Firefox - Archive of obsolete content
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.
Prism - Archive of obsolete content
community blog posts prism forum #prism on irc.mozilla.org goodies bundle library contributing source code in svn bugzilla (for bugs and suggestions) open bugs,
enter new bug build documentation related topics xulrunner ...
Hacking wiki - Archive of obsolete content
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.
Remotely debugging Firefox for Metro - Archive of obsolete content
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.
Supporting per-window private browsing - Archive of obsolete content
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.
Tamarin Build System Documentation - Archive of obsolete content
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 new nsString class implementation (1999) - Archive of obsolete content
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.
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...
More Tree Features - Archive of obsolete content
eecol id="firstname" label="first name" primary="true" flex="3" /> <treecol id="lastname" label="last name" flex="7" /> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="guys" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="bob" /> <treecell label="carp
enter" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="jerry" /> <treecell label="hodge" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> this has created a hierarchical tree.
Tabboxes - Archive of obsolete content
<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.
Tree Box Objects - Archive of obsolete content
" primary="true" flex="1"/> </treecols> <treechildren> <treeitem label="row 0"/> <treeitem label="row 1"/> <treeitem label="row 2"/> <treeitem label="row 3"/> <treeitem label="row 4"/> <treeitem label="row 5"/> <treeitem label="row 6"/> <treeitem label="row 7"/> <treeitem label="row 8"/> <treeitem label="row 9"/> </treechildren> </tree> <hbox align="c
enter"> <label value="scroll to row:"/> <textbox id="tbox"/> <button label="scroll" oncommand="doscroll();"/> </hbox> note that we use the rows attribute on the tree to specify that only four rows are displayed at a time.
XBL Attribute Inheritance - Archive of obsolete content
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.
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...
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> ...
wizard - Archive of obsolete content
et href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="
enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
XULRunner Hall of Fame - Archive of obsolete content
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.
XUL Explorer - Archive of obsolete content
installs latest version: install (windows): xulexplorer-1.0a1pre.en-us.win32.exe 6.6mb install (mac): xulexplorer-1.0a1pre.en-us.mac.dmg 9.3mb install (linux): xulexplorer-1.0a1pre.en-us.linux-i686.tar.bz2 8.4mb contributing source code in svn bugzilla (for bugs and suggestions) open bugs,
enter new bug blog posts xul explorer - updated (1.0a1pre) xul explorer 0.4 xul explorer 0.3 xul explorer 0.2 exploring xul ...
Mozprofile - Archive of obsolete content
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.
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...
Adobe Flash - Archive of obsolete content
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.
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 ...
Summary of Changes - Archive of obsolete content
proprietary or deprecated feature w3c feature or recommended replacement deprecated font html 4.01 span plus css1 color: ; font-family: ; font-size: ; deprecated c
enter or align="c
enter" css1 text-align: c
enter; for in-line elements like text or image deprecated c
enter or align="c
enter" css1 margin-left: auto; margin-right: auto; for block-level elements deprecated bgcolor css1 background-color: ; non-standard embed html 4.01 object deprecated applet html 4.01 object non-standard marquee html 4.01 div plus scripting ...
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> ...
Examples - Game development
monster madness a webgl and asm.js-based multiplayer online shooter, developed by nom nom games and trendy
entertainment.
Game monetization - Game development
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.
3D games on the Web - Game development
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.
Create the Canvas and draw on it - Game development
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.
Game over - Game development
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.
Move the ball - Game development
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.
Extra lives - Game development
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().
Randomizing gameplay - Game development
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.
Scaling - Game development
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.
Advanced form styling - Learn web development
actual from input using something like this: input[type="file"] { height: 0; padding: 0; opacity: 0; } and then style the label to act like a button, which when pressed will open the file picker as expected: label[for="file"] { box-shadow: 1px 1px 3px #ccc; background: linear-gradient(to bottom, #eee, #ccc); border: 1px solid rgb(169, 169, 169); border-radius: 5px; text-align: c
enter; line-height: 1.5; } label[for="file"]:hover { background: linear-gradient(to bottom, #fff, #ddd); } label[for="file"]:active { box-shadow: inset 1px 1px 3px #ccc; } you can see the result of the above css styling in the below live example (see also styled-file-picker.html live, and the source code).
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
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).
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...
Web forms — Working with user data - Learn web development
validating and submitting form data client-side form validation sending data is not enough — we also need to make sure that the data users
enter into forms is in the correct format to process it successfully, and that it won't break our applications.
Getting started with HTML - Learn web development
the disabled elements typically have a grayed-out appearance.) for example: <input type="text" disabled="disabled"> as shorthand, it is acceptable to write this as follows: <!-- using the disabled attribute prevents the end user from
entering text into the input box --> <input type="text" disabled> <!-- text input is allowed, as it doesn't contain the disabled attribute --> <input type="text"> for reference, the example above also includes a non-disabled form input element.the html from the example above produces this result: omitting quotes around attribute values if you look at code for a lot of other sites, you might come...
Adding vector graphics to the Web - Learn web development
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.
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...
Fetching data from the server - Learn web development
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.
Working with JSON - Learn web development
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.
Implementing feature detection - Learn web development
finally, add another <script> element at the bottom of the html body (just before the </body> tag), and put the following script inside the tags: if (modernizr.geolocation) { navigator.geolocation.getcurrentposition(function(position) { let latlng = new google.maps.latlng(position.coords.latitude,position.coords.longitude); let myoptions = { zoom: 8, c
enter: latlng, maptypeid: google.maps.maptypeid.terrain, disabledefaultui: true } let map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); }); } else { const para = document.createelement('p'); para.textcontent = 'argh, no geolocation!'; document.body.appendchild(para); } try your example out!
Learn web development
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).
Accessibility Features in Firefox
we expect
enterprising script writers will eventually fix annoying accessibility issues in popular web pages, and (hopefully) share their tricks with everyone!
CSUN Firefox Materials
we expect
enterprising script writers will eventually fix annoying accessibility issues in popular web pages, and (hopefully) share their tricks with everyone!
Multiprocess on Windows
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.
Lightweight themes
pick a category and tags — select a category and
enter some tags that best describe your theme.
Add-ons
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.
How Mozilla's build system works
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.
Simple Sunbird build
building just lightning after you have completed a full build, if you would like to rebuild lightning you don't need to go through the whole build process: #
enter the calendar directory in the object-directory cd src/../objdir-sb-release/calendar # make the lightning extension make -c lightning references general build documentation comm-central ...
pymake
try typing just pymake into the shell and press
enter.
The Firefox codebase: CSS Guidelines
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.
mach
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!
Error codes returned by Mozilla APIs
ns_error_schemavalidator_type_not_found (0x80640004) note: there are other errors in these files: gfx/public/nsidevicecontext.h base/public/nsneterror.h parser/htmlparser/public/nsiparser.h layout/base/nslayouterrors.h profile/public/nsiprofileinternal.idl security/manager/ssl/public/nsicmsmessageerrors.idl directory/xpcom/base/public/nsildaperrors.idl content/base/public/nscont
enterrors.h see also mozilla error lookup lets you quickly look up the error name by its code in different formats.
Cross Process Object Wrappers
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.
Security best practices for Firefox front-end engineers
existing security controls sanitizing all strings that
enter the dom through apis such as innerhtml when running system-privileged chrome code, we sanitize all html fragments that are created for chrome-privileged documents.
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
once the sdk
enters beta, it is suitable for building extensions; your component should work with release builds of the sdk without any modifications.
HTML parser threading
the method then
enters a loop that has a bunch of return conditions (including parser termination).
Getting Started with Chat
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.
DeferredTask.jsm
the task cannot be re-
entered while running, but can be executed again after a previous run finished.
Application Translation with Mercurial
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.
Bootstrapping a new locale
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/ ...
Localizing XLIFF files for iOS
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.
Using the viewport meta tag to control layout on mobile browsers
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.
Mozilla Quirks Mode Behavior
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).
mozilla::MutexAutoLock
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.
mozilla::MutexAutoUnlock
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.
Mozilla
mozilla::condvarmozilla::monitormozilla::monitorauto
entermozilla::mutexmozilla::mutexautolockmozilla::mutexautounlock ...
Namespace
mozillamozilla::condvarmozilla::monitormozilla::monitorauto
entermozilla::mutexmozilla::mutexautolockmozilla::mutexautounlock ...
DMD
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.
Gecko Profiler FAQ
[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)”.
about:memory
once firefox's memory usage has gotten high) open a new tab and type "about:memory" into the address bar and hit "
enter".
javascript.options.strict
example : <html> <head> <title>sample</title> </head> <body> <label id="name">
enter you first name</label> <p id ="sample"></p> <script> "use strict" name1= "john" ; // this will cause and an error as variable not declared .
Preferences system
example: var features = "chrome,titlebar,toolbar,c
enterscreen,modal"; window.opendialog(url, "preferences", features); bugzilla the component for bugs in the preferences bindings (but not in firefox/thunderbird options ui) is toolkit:preferences (file a bug list open bugs) ...
McCoy
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.
Midas
justifyc
enter c
enter-aligns the current block.
About NSPR
nspr is functionally complete and has
entered a mode of sustaining engineering.
Cached Monitors
pr_c
entermonitor
enters the lock associated with a cached monitor.
PR_CExitMonitor
syntax #include <prcmon.h> prstatus pr_cexitmonitor(void *address); parameters the function has the following parameters: address the address of the protected object--the same address previously passed to pr_c
entermonitor.
PR_CNotifyAll
all of the threads waiting on the state change are then scheduled to re
enter the monitor.
PR_CreateThread
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.
An overview of NSS Internals
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.
NSS 3.12.4 release notes
<c
enter> 2009-08-20 </c
enter> <c
enter>newsgroup: mozilla.dev.tech.crypto</c
enter> introduction network security services (nss) 3.12.4 is a patch release for nss 3.12.
NSS 3.12.9 release notes
<c
enter> 2010-09-23</c
enter> <c
enter> newsgroup: mozilla.dev.tech.crypto</c
enter> introduction network security services (nss) 3.12.9 is a patch release for nss 3.12.
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
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.
NSS 3.18 release notes
the following ca certificates had the websites and code signing trust bits turned off ou = equifax secure certificate authority sha1 fingerprint: d2:32:09:ad:23:d3:14:23:21:74:e4:0d:7f:9d:62:13:97:86:63:3a cn = equifax secure global ebusiness ca-1 sha1 fingerprint: 7e:78:4a:10:1c:82:65:cc:2d:e1:f1:6d:47:b4:40:ca:d9:0a:19:45 cn = tc trustc
enter class 3 ca ii sha1 fingerprint: 80:25:ef:f4:6e:70:c8:d4:72:24:65:84:fe:40:3b:8a:8d:6a:db:f5 the following ca certificates were added cn = staat der nederlanden root ca - g3 sha1 fingerprint: d8:eb:6b:41:51:92:59:e0:f3:e7:85:00:c0:3d:b6:88:97:c9:ee:fc cn = staat der nederlanden ev root ca sha1 fingerprint: 76:e2:7e:c1:4f:db:82:c1:c0:a6...
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
the following ca certificates were removed: cn = s-trust universal root ca sha-256 fingerprint: d8:0f:ef:91:0a:e3:f1:04:72:3b:04:5c:ec:2d:01:9f:44:1c:e6:21:3a:df:15:67:91:e7:0c:17:90:11:0a:31 cn = tc trustc
enter class 3 ca ii sha-256 fingerprint: 8d:a0:84:fc:f9:9c:e0:77:22:f8:9b:32:05:93:98:06:fa:5c:b8:11:e1:c8:13:f6:a1:08:c7:d3:36:b3:40:8e cn = tÜrktrust elektronik sertifika hizmet saÄŸlayıcısı h5 sha-256 fingerprint: 49:35:1b:90:34:44:c1:85:cc:dc:5c:69:3d:24:d8:55:5c:b2:08:d6:a8:14:13:07:69:9f:4a:f0:63:19:9d:78 bugs fixed in nss 3.37 this bugzilla qu...
JS_NewScriptObject
once you have created a script, you should immediately ensure that its script object is reachable (perhaps by using js_addroot or js_
enterlocalrootscope).
Exploitable crashes
to get them go to the mac developer c
enter downloads section -> other downloads -> search for "crashwrangler".
Animated PNG graphics
authors the apng specification was authored by: stuart parm
enter <pavlov@pavlov.net> vladimir vukicevic <vladimir@pobox.com> andrew smith <asmith15@littlesvr.ca> overview apng is an extension of the portable network graphics (png) format, adding support for animated images.
Gecko events
is supported: no event_movesize_end the movement or resizing of a window has finished is supported: no event_contexthelp_start a window has
entered context-sensitive help mode is supported: no event_contexthelp_end a window has exited context-sensitive help mode is supported: no event_dragdrop_start an application is about to
enter drag-and-drop mode is supported: yes event_dragdrop_end an application is about to exit drag-and-drop mode is supported: no event_dialog_start a dialog box has been displayed is supported: no event_dial...
XML Extras
the mozilla developer c
enter has several pages for xmlhttprequest.
How To Pass an XPCOM Object to a New Window
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.
Introduction to XPCOM for the DOM
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.
XPCShell Reference
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.
imgIDecoder
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).
mozIRegistry
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.
mozITXTToHTMLConv
its primary use is in converting user-
entered text into properly-formatted html.
nsIDOMChromeWindow
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.
nsIDroppedLinkHandler
boolean candroplink( in nsidomdragevent aevent, in prbool aallowsamedocument ); parameters aevent a drag
enter or dragover event.
nsIFilePicker
on some platforms, this is automatically appended to filenames the user
enters, if required.
nsIParserUtils
sanitizerdropnoncsspresentation (1 << 3) flag for sanitizer: drops non-css presentational html elements and attributes, such as <font>, <c
enter>, and the bgcolor attribute.
nsISearchEngine
if value is "{searchterms}", it will be substituted with the user-
entered data when retrieving the submission.
nsISelectionController
scroll_c
enter_vertically 1<<4 if set, the specified location will be scrolled to the c
enter of the view.
nsISpeculativeConnect
no obligation is taken on by the implem
enter, nor is the submitter obligated to actually open the new channel.
nsIURIFixup
the fixup object implem
enter should honour this flag and only perform any lengthy keyword (or search) operation if it is set.
nsIWebNavigation
this should only be applied to non-sensitive uris
entered by users.
nsIWindowWatcher
(for example, when opening a window from xpcom component code), you might want to use this interface for opening a new window: 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); note: versions of gecko before gecko 2.0 would ignore some of the chrome flags when opening a chrome window without an opener window, instead behaving as if the "all" flag was present.
nsIWindowsShellService
istryentry(in long ahkeyconstant, in string asubkeyname, in string avaluename); obsolete since gecko 1.8 void restorefilesettings(in boolean aforallusers); obsolete since gecko 1.9 void shortcutmaintenance(); attributes attribute type description desktopbackgroundcolor unsigned long the desktop background color, visible when no background image is used, or if the background image is c
entered and does not fill the entire screen.
nsPIPromptService
embedding/components/windowwatcher/public/nspipromptservice.idlscriptable this interface is for the dialog implem
enters, not for other developers.
XPCOM Interface Reference
tnsicookiemanagernsicookiemanager2nsicookiepermissionnsicookiepromptservicensicookieservicensicookiestoragensicrashreporternsicryptohmacnsicryptohashnsicurrentcharsetlistenernsicyclecollectorlistenernsidbchangelistenernsidbfolderinfonsidnslistenernsidnsrecordnsidnsrequestnsidnsservicensidomcanvasrenderingcontext2dnsidomchromewindownsidomclientrectnsidomdesktopnotificationnsidomdesktopnotificationc
enternsidomelementnsidomeventnsidomeventgroupnsidomeventlistenernsidomeventtargetnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositionerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializerns...
Xptcall Porting Status
<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.
LDAP Support
this document is intended to "fill in the gaps" about how
enterprise customers can leverage and customize ldap support in mozilla thunderbird.
Mail client architecture overview
this includes the mail compose window, creation of rfc822 messages from the data a user has
entered, and sending the messages via smtp.
Using MAPI with Thunderbird's Windows 7 developer builds
(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 ...
Mozilla
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.
Preferences System
example: var features = "chrome,titlebar,toolbar,c
enterscreen,modal"; window.opendialog(url, "preferences", features); bugzilla the component for bugs in the preferences bindings (but not in firefox/thunderbird options ui) is toolkit:preferences (file a bug list open bugs) ...
Accessibility Inspector - Firefox Developer Tools
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.
Browser Console - Firefox Developer Tools
try running this code in the browser console's command line (remember that to send multiple lines to the browser console, use shift+
enter): var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.selectedtab); newtabbrowser.addeventlistener("load", function() { newtabbrowser.contentdocument.body.innerhtml = "<h1>this page has been eaten</h1>"; }, true); newtabbrowser.contentdocument.location.href = "https://mozilla.org/"; it adds a listener to the currently selected tab's load event that will eat the new page, then loads a new p...
Set a breakpoint - Firefox Developer Tools
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.
Step through code - Firefox Developer Tools
step in: advance to the next line in the function, unless on a function call, in which case
enter the function being called step out: run to the end of the current function, in which case, the debugger will skip the return value from a function, returning execution to the caller split console when paused, you can press the esc key to open and close the split console to gain more insight into errors and variables: pause on breakpoints overlay since firefox 70, when your code is paused on a breakpoint an overlay appears on the viewport of the tab you are debu...
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
(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.
Tutorial: Set a breakpoint - Firefox Developer Tools
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.
Debugger-API - Firefox Developer Tools
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.
Deprecated tools - Firefox Developer Tools
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).
Eyedropper - Firefox Developer Tools
keyboard shortcuts command windows macos linux select the current color
enter return
enter dismiss the eyedropper esc esc esc move by 1 pixel arrow keys arrow keys arrow keys move by 10 pixels shift + arrow keys shift + arrow keys shift + arrow keys ...
Console messages - Firefox Developer Tools
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.
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 ...
AddressErrors.recipient - Web APIs
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.
Animation.oncancel - Web APIs
the cancel event can be triggered manually with animation.cancel() when the animation
enters the "idle" play state from another state, such as when the animation is removed from an element before it finishes playing creating a new animation that is initially idle does not trigger a cancel event on the new animation.
Animation.ready - Web APIs
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.
CSSImageValue - Web APIs
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.
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.imageSmoothingEnabled - Web APIs
html <canvas id="canvas" width="460" height="210"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '16px sans-serif'; ctx.textalign = 'c
enter'; const img = new image(); img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; img.onload = function() { const w = img.width, h = img.height; ctx.filltext('source', w * .5, 20); ctx.drawimage(img, 0, 24, w, h); ctx.filltext('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = true; ctx.drawimage(img, w, 24, w * 3, h * 3); ctx.fillte...
A basic ray-caster - Web APIs
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.
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.
DOMException - Web APIs
(legacy code value: 3 and legacy constant name: hierarchy_request_err) wrongdocum
enterror the object is in the wrong document.
DOMMatrixReadOnly.scale() - Web APIs
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.
DOMPoint.fromPoint() - Web APIs
var c
enter = dompoint.frompoint({x: 75, y: -50, z: -55, w: 0.25}); specifications specification status comment geometry interfaces module level 1the definition of 'frompoint()' in that specification.
DataTransfer.effectAllowed - Web APIs
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.
DataTransferItem.webkitGetAsEntry() - Web APIs
#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 scanfile...
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
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.
Document: keyup event - Web APIs
bubbles yes cancelable yes interface keyboardevent event handler property onkeyup the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was
entered.
Document.mozSetImageElement() - Web APIs
<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.
Document.querySelector() - Web APIs
as the backslash is also an escape character in javascript, if you are
entering a literal string, you must escape it twice (once for the javascript string, and another time for queryselector()): <div id="foo\bar"></div> <div id="foo:bar"></div> <script> console.log('#foo\bar'); // "#fooar" (\b is the backspace control character) document.queryselector('#foo\bar'); // does not match anything console.log('#foo\\bar'); // "#foo\bar" c...
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: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: c
enter; justify-content: c
enter; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.sty...
Document.writeln() - Web APIs
example document.writeln("<p>
enter password:</p>"); notes document.writeln is the same as document.write but adds a newline.
Element: auxclick event - Web APIs
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 gamin...
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
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.
Element.getClientRects() - Web APIs
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.
Element.hasAttributeNS() - Web APIs
example // check that the attribute exists before you set a value var d = document.getelementbyid("div1"); if (d.hasattributens( "http://www.mozilla.org/ns/specialspace/", "special-align")) { d.setattribute("align", "c
enter"); } notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute...
Element.insertAdjacentText() - Web APIs
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().
Element: keydown event - Web APIs
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.
Element: keyup event - Web APIs
bubbles yes cancelable yes interface keyboardevent event handler property onkeyup the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was
entered.
Element: mouseout event - Web APIs
mouseout is also delivered to an element if the cursor
enters a child element, because the child element obscures the visible area of the element.
Element.releasePointerCapture() - Web APIs
html <div id="slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-items: c
enter; justify-content: c
enter; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slid...
Element.removeAttributeNode() - Web APIs
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.
Element.requestFullscreen() - Web APIs
if permission to
enter full screen mode is granted, the returned promise will resolve and the element will receive a fullscreenchange event to let it know that it's now in full screen mode.
Element.setAttributeNS() - Web APIs
example let d = document.getelementbyid('d1'); d.setattributens('http://www.mozilla.org/ns/specialspace', 'spec:align', 'c
enter'); notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (...
Element: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: c
enter; justify-content: c
enter; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); el.onwheel...
Comparison of Event Targets - Web APIs
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.
Event.preventDefault() - Web APIs
html here's the form: <div class="container"> <p>please
enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascr...
FileSystemDirectoryReader.readEntries() - Web APIs
#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 scanfile...
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.oncontextmenu - Web APIs
html <div class="shape">spinning</div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: c
enter; justify-content: c
enter; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute...
GlobalEventHandlers.onkeypress - Web APIs
html <label>
enter numbers only: <input> </label> javascript function numbersonly(event) { return event.charcode === 0 || /\d/.test(string.fromcharcode(event.charcode)); } const input = document.queryselector('input'); input.onkeypress = numbersonly; // prevent pasting (since pasted content might include non-number characters) input.onpaste = event => false; result capture the typing of a hidden word t...
GlobalEventHandlers.onpointerdown - Web APIs
#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.
GlobalEventHandlers.onwheel - Web APIs
html <div>scale me with your mouse wheel.</div> css body { min-height: 100vh; margin: 0; display: flex; align-items: c
enter; justify-content: c
enter; } div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4...
HTMLElement: beforeinput event - Web APIs
html <input placeholder="
enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('beforeinput', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status ui eventsthe definition of 'beforeinput event' in that speci...
HTMLElement.hidden - Web APIs
.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.
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...
HTMLInputElement: invalid event - Web APIs
html <form action="#"> <ul> <li><label>
enter an integer between 1 and 10: <input type="number" min="1" max="10" required></label></li> <li><input type="submit" value="submit"></li> </ul> </form><p id="log"></p> javascript const input = document.queryselector('input') const log = document.getelementbyid('log') input.addeventlistener('invalid', logvalue) function logvalue(e) { log.textcontent += e.target.value } result specifi...
HTMLInputElement: search event - Web APIs
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).
HTMLMediaElement: pause event - Web APIs
the pause event is sent when a request to pause an activity is handled and the activity has
entered its paused state, most commonly after the media has been paused through a call to the element's pause() method.
HTMLTableElement.align - Web APIs
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.
Dragging and Dropping Multiple Items - Web APIs
getdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<<error>>\n"); dump(ex); } } } } function output(text) { document.getelementbyid("output").textcontent += text; dump(text); } </script> </head> <body> <div id="output" style="min-height: 100px; white-space: pre; border: 1px solid black;" ondrag
enter="document.getelementbyid('output').textcontent = ''; event.stoppropagation(); event.preventdefault();" ondragover="event.stoppropagation(); event.preventdefault();" ondrop="event.stoppropagation(); event.preventdefault(); dodrop(event);"> <div> fix</div> </div> </body> </html> this example cancels both the drag
enter and dragover events by calling the preventdefault().
Recommended Drag Types - Web APIs
the following example shows how to create an area for receiving dropped files: <listbox ondrag
enter="return checkdrag(event)" ondragover="return checkdrag(event)" ondrop="dodrop(event)"/> <script> function checkdrag(event) { return event.datatransfer.types.contains("application/x-moz-file"); } function dodrop(event) { var file = event.datatransfer.mozgetdataat("application/x-moz-file", 0); if (file instanceof components.interfaces.nsifile) { event.currenttarget.app...
HTML Drag and Drop API - Web APIs
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.
Ajax navigation example - Web APIs
from <strong>third_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> css/style.css: #ajax-loader { position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%; } #ajax-loader > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: c
enter; background-color: #000000; opacity: 0.65; } include/after_content.php: <p>this is the footer.
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...
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
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.
MediaStreamTrack: unmute event - Web APIs
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.
Recording a media element - Web APIs
<div class="bottom"> <pre id="log"></pre> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 2px; border: 1px solid black; } .button { cursor: pointer; display: block; width: 160px; border: 1px solid black; font-size: 16px; text-align: c
enter; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; text-decoration: none; } h2 { margin-bottom: 4px; } .left { margin-right: 10px; float: left; width: 160px; padding: 0px; } .right { margin-left: 10px; float: left; width: 160px; padding: 0px; } .bottom { clear: both; padding-top: 10px; } javascript content now let's have a loo...
Using the MediaStream Recording API - Web APIs
we register an event handler for this using mediarecorder.onstop, and finalize our blob there from all the chunks we have received: mediarecorder.onstop = function(e) { console.log("recorder stopped"); const clipname = prompt('
enter a name for your sound clip'); const clipcontainer = document.createelement('article'); const cliplabel = document.createelement('p'); const audio = document.createelement('audio'); const deletebutton = document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; cl...
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() - Web APIs
0 no button pressed 1 main button pressed (usually the left button) 2 secondary button pressed (usually the right button) 4 auxiliary button pressed (usually the middle button) "relatedtarget", optional and defaulting to null, of type eventtarget, that is the element just left (in case of a mouse
enter or mouseover) or is
entering (in case of a mouseout or mouseleave).
MouseEvent.pageX - Web APIs
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.
PannerNode.positionX - Web APIs
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.
PannerNode.positionY - Web APIs
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.
ParentNode.replaceChildren() - Web APIs
!</label> <select id="yes" multiple size="10"> </select> </div> </main> it would make sense to use some simple css to lay out the two select lists in a line alongside one another, with the control buttons in between them: main { display: flex; } div { margin-right: 20px; } label, button { display: block; } .buttons { display: flex; flex-flow: column; justify-content: c
enter; } select { width: 200px; } what we want to do is transfer any selected options in the "no" list over to the "yes" list when the "yes" button is pressed, and transfer any selected options in the "yes" list over to the "no" list when the "no" button is pressed.
PayerErrors.email - Web APIs
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 ...
PayerErrors.name - Web APIs
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 ...
PayerErrors.phone - Web APIs
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 ...
PaymentResponse.onpayerdetailchange - Web APIs
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.
PaymentResponse: payerdetailchange event - Web APIs
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.
PaymentResponse.retry() - Web APIs
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.
Payment Request API - Web APIs
advantages of using the payment request api with "basic-card" (card-based payments): fast purchase experience: users
enter their details once into the browser and are then ready to pay for goods and services on the web.
PerformanceEventTiming - Web APIs
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.
PerformanceNavigationTiming.type - Web APIs
the value must be one of the following: navigate navigation started by clicking a link,
entering the url in the browser's address bar, form submission, or initializing through a script operation other than reload and back_forward as listed below.
RTCDTMFToneChangeEvent - Web APIs
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.
RTCDataChannel.readyState - Web APIs
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.
RTCIceTransport.onstatechange - Web APIs
example this snippet establishes a handler for the statechange event that looks to see if the transport has
entered the "failed" state, which indicates that the connection has failed with no chance of being automatically restored.
RTCIceTransport: statechange event - Web APIs
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.
Screen - Web APIs
note that browsers determine which screen to report as current by detecting which screen has the c
enter of the browser window.
Using Service Workers - Web APIs
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!
Storage Access API - Web APIs
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.
SubtleCrypto.deriveBits() - Web APIs
*/ 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.
SubtleCrypto.deriveKey() - Web APIs
*/ function getkeymaterial() { let password = window.prompt("
enter your password"); let enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), "pbkdf2", false, ["derivebits", "derivekey"] ); } async function encrypt(plaintext, salt, iv) { let keymaterial = await getkeymaterial(); let key = await window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": ...
Touch() - Web APIs
"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.
Touch.radiusX - Web APIs
the touch.rotationangle is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its c
enter.
ValidityState.patternMismatch - Web APIs
examples given the following: <p> <label>
enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> he...
ValidityState.typeMismatch - Web APIs
type attribute conformance input type value expected value email x@y or x@y.z email address, with or without tld url x: or x://y.z protocol or full url with protocol examples given the following: <p> <label>
enter an email address: <input type="email" value="example.com"/> </label> </p> <p> <label>
enter a url: <input type="url" value="example.com"/> </label> </p> input:invalid { border: red solid 3px; } the above each produce a typemismatch because the email address is just a domain and the url has no protocol the typemismatch occurs when there is a disconnect between the value ex...
A basic 2D WebGL animation example - Web APIs
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).
Basic scissoring - Web APIs
<p>result of of scissoring.</p> <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; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following tw...
Boilerplate 1 - Web APIs
]</button> <canvas>your browser does not seem to support html5 canvas.</canvas> css body { text-align : c
enter; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clienth...
Clearing by clicking - Web APIs
<p>a very simple webgl program that still shows some color and user interaction.</p> <p>you can repeatedly click the empty canvas or the button below to change color.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : 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.
Clearing with colors - Web APIs
--> <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.
Color masking - Web APIs
<p>tinting the displayed colors with color masking.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <button id="red-toggle">on</button> <button id="green-toggle">on</button> <button id="blue-toggle">on</button> body { text-align : c
enter; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-family : serif; font-size : inherit; font-weight : 900; color : white; margin : auto; padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #bl...
Detect WebGL - Web APIs
<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.
Hello GLSL - Web APIs
hello glsl!</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : c
enter; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader...
Hello vertex attributes - Web APIs
click on the canvas to change the horizontal position of the square.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : c
enter; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); g...
Raining rectangles - Web APIs
you missed <strong>0</strong>.</p> <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; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function s...
Scissor animation - Web APIs
<p>webgl animation by clearing the drawing buffer with solid color and applying scissor test.</p> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : c
enter; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of an...
Simple color animation - Web APIs
<p>a simple webgl program that shows color animation.</p> <p>you can click the button below to toggle the color animation on or off.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : 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 setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); // a variab...
Textures from code - Web APIs
simple demonstration of procedural texturing</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : c
enter; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute vec2 position; void main() { gl_position = vec4(position, 0.0, 1.0); gl_poin...
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
onneeded = async () => { try { await pc.setlocaldescription(await pc.createoffer()); signaler.send({description: pc.localdescription}); } catch(err) { console.error(err); } }; because the createoffer() method is asynchronous and takes some time to complete, there's time in which the remote peer might attempt to send an offer of its own, causing us to leave the stable state and
enter the have-remote-offer state, which means we are now waiting for a response to the offer.
Lifetime of a WebRTC session - Web APIs
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.
Signaling and video calling - Web APIs
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.
Using bounded reference spaces - Web APIs
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.
Lighting a WebXR setting - Web APIs
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.
WebXR Device API - Web APIs
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.
Using IIR filters - Web APIs
this
enters the realms of signal processing theory — don't worry if you look at it and feel like it's not for you.
Using Web Workers - Web APIs
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.
Window.devicePixelRatio - Web APIs
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.
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
html <p>hello</p> css p { width: 400px; margin: 0 auto; padding: 20px; font: 2rem/2 sans-serif; text-align: c
enter; background: purple; color: white; } javascript let para = document.queryselector('p'); let compstyles = window.getcomputedstyle(para); para.textcontent = 'my computed font-size is ' + compstyles.getpropertyvalue('font-size') + ',\nand my computed line-height is ' + compstyles.getpropertyvalue('line-height') + '.'; result description the returned object is the same csss...
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...
Window.openDialog() - Web APIs
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.
Window.showModalDialog() - Web APIs
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.
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
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.
XRReferenceSpace: reset event - Web APIs
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).
XRSpace - Web APIs
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.
XRWebGLLayerInit.stencil - Web APIs
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.
Using the aria-describedby attribute - Accessibility
<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.
ARIA Test Cases - Accessibility
normally, the number of items contained within the list, and the nesting level (if this is not the outermost list) is announced upon
entering.
ARIA: document role - Accessibility
description by default, web pages are treated as documents; assistive technologies (at)
enter browse or read mode when
entering a new web page.
ARIA: switch role - Accessibility
button.switch { margin: 0; padding: 0; width: 70px; height: 26px; border: 2px solid black; display: inline-block; margin-right: 0.25em; line-height: 20px; vertical-align: middle; text-align: c
enter; font: 12px "open sans", "arial", serif; } button.switch span { padding: 0 4px; pointer-events: none; } [role="switch"][aria-checked="false"] :first-child, [role="switch"][aria-checked="true"] :last-child { background: #262; color: #eef; } [role="switch"][aria-checked="false"] :last-child, [role="switch"][aria-checked="true"] :first-child { color: #bbd; } label.switch { font: 16...
Basic form hints - Accessibility
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.
Accessibility and Spacial Patterns - Accessibility
is about more than numbers scientific literature colour constancy in context: roles for local adaptation and levels of reference gamma oscillations and photosensitive epilepsy characterizing the patterned images that precipitate seizures and optimizing guidelines to prevent them arnold wilkins, john emmett, and graham harding contributers: heartfelt thanks to jim allan of the diagram c
enter for his discussions on the topic of alternative means of education.
Accessibility documentation index - Accessibility
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.
-moz-image-rect - CSS: Cascading Style Sheets
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.
-webkit-box-reflect - CSS: Cascading Style Sheets
]# , <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> ]?
:-moz-loading - CSS: Cascading Style Sheets
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
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.
:invalid - CSS: Cascading Style Sheets
html <form> <div class="field"> <label for="url_input">
enter a url:</label> <input type="url" id="url_input"> </div> <div class="field"> <label for="email_input">
enter an email address:</label> <input type="email" id="email_input" required> </div> </form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-color: #ffdddd; } form:invalid { border: 5px...
:placeholder-shown - CSS: Cascading Style Sheets
html <form id="test"> <p> <label for="name">
enter student name:</label> <input id="name" placeholder="student name"/> </p> <p> <label for="branch">
enter student branch:</label> <input id="branch" placeholder="student branch"/> </p> <p> <label for="sid">
enter student id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder="8 digit id"/> </p> <input type="submit"...
:read-only - CSS: Cascading Style Sheets
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.
:read-write - CSS: Cascading Style Sheets
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.
additive-symbols - CSS: Cascading Style Sheets
]# , <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> ]?
negative - CSS: Cascading Style Sheets
]# , <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> ]?
pad - CSS: Cascading Style Sheets
]# , <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> ]?
prefix - CSS: Cascading Style Sheets
]# , <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> ]?
suffix - CSS: Cascading Style Sheets
]# , <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> ]?
symbols - CSS: Cascading Style Sheets
]# , <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> ]?
prefers-reduced-motion - CSS: Cascading Style Sheets
*/ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: c
enter; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status comment media queries level 5the definition o...
shape - CSS: Cascading Style Sheets
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.
@page - CSS: Cascading Style Sheets
| <page-margin-box> <page-body>where <page-selector> = <pseudo-page>+ | <ident> <pseudo-page>*<page-margin-box> = <page-margin-box-type> '{' <declaration-list> '}'where <pseudo-page> = : [ left | right | first | blank ]<page-margin-box-type> = @top-left-corner | @top-left | @top-c
enter | @top-right | @top-right-corner | @bottom-left-corner | @bottom-left | @bottom-c
enter | @bottom-right | @bottom-right-corner | @left-top | @left-middle | @left-bottom | @right-top | @right-middle | @right-bottom examples @page pseudo-class examples please refer to the various pseudo-classes of @page for examples.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
.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.
Subgrid - CSS: Cascading Style Sheets
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.
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 with floated blocks - CSS: Cascading Style Sheets
source code for the example html <div id="abs1"> <b>div #1</b><br />position: absolute;</div> <div id="flo1"> <b>div #2</b><br />float: left;</div> <div id="flo2"> <b>div #3</b><br />float: right;</div> <br /> <div id="sta1"> <b>div #4</b><br />no positioning</div> <div id="abs2"> <b>div #5</b><br />position: absolute;</div> css div { padding: 10px; text-align: c
enter; } b { font-family: sans-serif; } #abs1 { position: absolute; width: 150px; height: 200px; top: 10px; right: 140px; border: 1px dashed #900; background-color: #fdd; } #sta1 { height: 100px; border: 1px dashed #996; background-color: #ffc; margin: 0px 10px 0px 10px; text-align: left; } #flo1 { margin: 0px 10px 0px 20px; float: left; width: 150px; height: 200px...
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 ...
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
<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.
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
]# , <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> ]?
background-origin - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples setting background origins .example { border: 10px double; padding: 10px; background: url('image.jpg'); background-position: c
enter left; background-origin: content-box; } #example2 { border: 4px solid black; padding: 10px; background: url('image.gif'); background-repeat: no-repeat; background-origin: border-box; } div { background-image: url('logo.jpg'), url('mainback.png'); /* applies two images to the background */ background-position: top right, 0px 0px; background-origin: content-box, padding-box; }...
<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
</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.
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
]# , <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> ]?
border-left - CSS: Cascading Style Sheets
</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.
border-right - CSS: Cascading Style Sheets
</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.
border-spacing - CSS: Cascading Style Sheets
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.
border-top - CSS: Cascading Style Sheets
</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.
bottom - CSS: Cascading Style Sheets
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.
box-shadow - CSS: Cascading Style Sheets
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.
calc() - CSS: Cascading Style Sheets
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.
color-adjust - CSS: Cascading Style Sheets
css .my-box { background-color: black; background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: 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.
content - CSS: Cascading Style Sheets
]# , <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> ]?
cross-fade() - CSS: Cascading Style Sheets
]# , <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> ]?
<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
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.
font - CSS: Cascading Style Sheets
</div> <br/><br/><br/><br/><br/><br/> css body, input { font: 14px arial; overflow: hidden; } .propinputcont { float: left; text-align: c
enter; margin-right: 5px; width: 80px; } .setpropcont { float: left; margin-right: 5px; width: 120px; } .propinputs, .setpropcont { margin-bottom: 1em; } .curcss { border: none; border-bottom: 1px solid black; text-align: c
enter; width: 80px; } .mandatory { border-bottom-color: red; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .
margin-trim - CSS: Cascading Style Sheets
l probably work like so: when you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this: article { background-color: red; margin: 20px; padding: 20px; display: inline-block; } article > span { background-color: black; color: white; text-align: c
enter; padding: 10px; margin-right: 20px; } the problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it: span:last-child { margin-right: 0; } it is a pain having to write another rule to achieve this, and it is also not very flexible.
mask-border-source - CSS: Cascading Style Sheets
]# , <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> ]?
mask-image - CSS: Cascading Style Sheets
]# , <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> ]?
offset-path - CSS: Cascading Style Sheets
, [ <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> ]?
order - CSS: Cascading Style Sheets
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.
scale - CSS: Cascading Style Sheets
reates stacking contextyes formal syntax none | <number>{1,3} examples scaling an element on hover html <div> <p class="scale">scaling</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: c
enter; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
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
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.
scroll-margin-inline-start - CSS: Cascading Style Sheets
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.
scroll-margin-inline - CSS: Cascading Style Sheets
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.
scroll-margin - CSS: Cascading Style Sheets
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.
scroll-snap-points-x - CSS: Cascading Style Sheets
es setting horizontal scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: c
enter; font-size: 100px; } #container > div:nth-child(even) { background-color: #87ea87; } #container > div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-points-y - CSS: Cascading Style Sheets
cal scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: c
enter; font-size: 100px; } #container > div:nth-child(even) { background-color: #87ea87; } #container > div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
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...
<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...
translate - CSS: Cascading Style Sheets
]?where <length-percentage> = <length> | <percentage> examples html <div> <p class="translate">translation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: c
enter; } .translate { transition: translate 1s; } div:hover .translate { translate: 200px 50px; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
will-change - CSS: Cascading Style Sheets
var el = document.getelementbyid('element'); // set will-change when the element is hovered el.addeventlistener('mouse
enter', hintbrowser); el.addeventlistener('animationend', removehint); function hintbrowser() { // the optimizable properties that are going to change // in the animation's keyframes block this.style.willchange = 'transform, opacity'; } function removehint() { this.style.willchange = 'auto'; } specifications specification status comment css will change module lev...
zoom - CSS: Cascading Style Sheets
>normal</p> <p class="big">big</p> css p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div> css div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: c
enter; vertical-align: middle; display: inline-block; zoom: 1.5; } div#a { background-color: gold; zoom: normal; } div#b { background-color: green; zoom: 200%; } div#c { background-color: blue; zoom: 2.9; } result specifications not part of any standard.
Getting Started - Developer guides
first we'll add a text box to our html so the user can
enter their name: <label>your name: <input type="text" id="ajaxtextbox" /> </label> <span id="ajaxbutton" style="cursor: pointer; text-decoration: underline"> make a request </span> we'll also add a line to our event handler to get the user's data from the text box and send it to the makerequest() function along with the url of our server-side script: document.getelementbyid("ajaxbutton").oncl...
Adding captions and subtitles to HTML5 video - Developer guides
'none' : 'block'); } }); subtitle menu css we also added some rudimentary styling for the newly created subtitles menu: .subtitles-menu { display:none; position:absolute; bottom:14.8%; right:20px; background:#666; list-style-type:none; margin:0; padding:0; width:100px; padding:10px; } .subtitles-menu li { padding:0; text-align:c
enter; } .subtitles-menu li button { border:none; background:#000; color:#fff; cursor:pointer; width:90%; padding:2px 5px; border-radius:2px; } styling the displayed subtitles one of the less well known about and supported features of webvtt is the ability to style the individual subtitles (something called text cues) via css extensions.
Mouse gesture events - Developer guides
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.
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...
Introduction to HTML5 - Developer guides
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.
A hybrid approach - Developer guides
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.
HTML attribute: max - HTML: Hypertext Markup Language
<input type="week" max="2019-w23" step=""> time hh:mm <input type="time" max="17:00" step="900"> datetime-local yyyy-mm-ddthh:mm <input type="datetime-local" min="2019-12-25t23:59"> number <number> <input type="number" min="0" step="5" max="100"> range <number> <input type="range" min="60" step="5" max="100"> note: when the data
entered by the user doesn't adhere to the maximum value set, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and rangeoverflow for more information.
HTML attribute: min - HTML: Hypertext Markup Language
<input type="week" min="2019-w23" step=""> time hh:mm <input type="time" min="09:00" step="900"> datetime-local yyyy-mm-ddthh:mm <input type="datetime-local" min="2019-12-25t19:30"> number <number> <input type="number" min="0" step="5" max="100"> range <number> <input type="range" min="60" step="5" max="100"> note: when the data
entered by the user doesn't adhere to the min value set, the value is considered invalid in contraint validation and will match the :invalid pseudoclass see client-side validation and rangeunderflow for more information.
HTML attribute: pattern - HTML: Hypertext Markup Language
examples given the following: <p> <label>
enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> he...
HTML attribute: size - HTML: Hypertext Markup Language
<label for="fruit">
enter a fruit</label> <input type="text" size="15" id="fruit"> <label for="vegetable">
enter a vegetable</label> <input type="text" id="vegetable"> <select name="fruits" size="5"> <option>banana</option> <option>cherry</option> <option>strawberry</option> <option>durian</option> <option>blueberry</option> </select> <select name="vegetables" size="5"> <option>carrot</option> <option>cucumber<...
<input type="checkbox"> - HTML: Hypertext Markup Language
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.
<input type="reset"> - HTML: Hypertext Markup Language
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.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
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.
<label> - HTML: Hypertext Markup Language
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.
Content negotiation - HTTP
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.
Feature-Policy: wake-lock - HTTP
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.
Feature-Policy - HTTP
wake-lock controls whether the current document is allowed to use wake lock api to indicate that device should not
enter power-saving mode.
Sec-Fetch-Site - HTTP
directly
entering a url in the address bar, opening a bookmark, or draging-and-dropping a file into the browser window.
HTTP Index - HTTP
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.
Expressions and operators - JavaScript
suppose a function called validate validates an object's value property, given the object and the high and low values: function validate(obj, lowval, hival) { if ((obj.value < lowval) || (obj.value > hival)) console.log('invalid value!'); } you could call validate in each form element's onchange event handler, using this to pass it to the form element, as in the following example: <p>
enter a number between 18 and 99:</p> <input type="text" name="age" size=3 onchange="validate(this, 18, 99);"> grouping operator the grouping operator ( ) controls the precedence of evaluation in expressions.
Function.displayName - JavaScript
by
entering the following in a console, it should display as something like "function my function()": var a = function() {}; a.displayname = 'my function'; a; // "function my function()" when defined, the displayname property returns the display name of a function: function dosomething() {} console.log(dosomething.displayname); // "undefined" var popup = function(content) { console.log(content); }; popup.displayname = 'show popup'; console.log(popup.displayname); // "show popup" defining a displayname in function expressions you can define a function with a display ...
encodeURIComponent() - JavaScript
ne attempts to encode a surrogate which is not part of a high-low pair, e.g., // high-low pair ok console.log(encodeuricomponent('\ud800\udfff')); // lone high surrogate throws "urierror: malformed uri sequence" console.log(encodeuricomponent('\ud800')); // lone low surrogate throws "urierror: malformed uri sequence" console.log(encodeuricomponent('\udfff')); use encodeuricomponent() on user-
entered fields from forms post'd to the server.
this - JavaScript
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.
Strict mode - JavaScript
" + 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.
Template literals (Template strings) - JavaScript
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.
JavaScript shells - JavaScript
execute js - (no longer maintained) - firefox-extension which provides an enhanced javascript-console, where you can comfortably
enter and execute arbitrary javascript-code and modify functions.
MathML attribute reference - MathML
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).
Authoring MathML - MathML
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.
<mo> - MathML
symmetric if stretchy is true, this attribute specifies whether the operator should be vertically symmetric around the imaginary math axis (c
entered fraction line).
Lazy loading - Web Performance
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.
Media - Progressive web apps (PWAs)
om here: /*** print sample ***/ /* defaults for screen */ #print-head, #print-foot { display: none; } /* print only */ @media print { h1 { page-break-before: always; padding-top: 2em; } h1:first-child { page-break-before: avoid; counter-reset: page; } #print-head { display: block; position: fixed; top: 0pt; left:0pt; right: 0pt; font-size: 200%; text-align: c
enter; } #print-foot { display: block; position: fixed; bottom: 0pt; right: 0pt; font-size: 200%; } #print-foot:after { content: counter(page); counter-increment: page; } } /* end print only */ view this document in your browser.
SVG Event Attributes - SVG: Scalable Vector Graphics
attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload document element event attributes oncopy, oncut, 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, on...
begin - SVG: Scalable Vector Graphics
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.
end - SVG: Scalable Vector Graphics
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 .
fill-rule - SVG: Scalable Vector Graphics
ied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- the c
enter of the shape has two path segments (shown by the red stroke) between it and infinity.
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...
Clipping and masking - SVG: Scalable Vector Graphics
creating clips we create the above mentioned semicircle based on a circle element: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clippath id="cut-off-bottom"> <rect x="0" y="0" width="200" height="100" /> </clippath> </defs> <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> </svg> c
entered at (100,100) a circle with radius 100 is painted.