Search completed in 1.43 seconds.
nsIFocusManager
dom/interfaces/base/nsi
focusmanager.idlscriptable please add a summary to this article. ...
... dom/interfaces/base/nsi
focusmanager.idlscriptable please add a summary to this article. ...
... dom/interfaces/base/nsi
focusmanager.idlscriptable please add a summary to this article. ...
...And 31 more matches
Focus management with Vue refs - Learn web development
we'll look at using vue refs to handle this — an advanced feature that allows you to have direct access to the underlying dom nodes below the virtual dom, or direct access from one component to the internal dom structure of a child component. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. ...
...e. vue components are written as a combination of javascript objects that manage the app's data and an html-based template syntax that maps to the underlying dom structure. for installation, and to use some of the more advanced features of vue (like single file components or render functions), you'll need a terminal with node + npm installed. objective: to learn how to handle
focus management using vue refs. the
focus management problem while we do have working edit functionality, we aren't providing a great experience for non-mouse users. specifically, when a user activates the "edit" button, we remove the "edit" button from the dom, but we don't move the user's
focus anywhere, so in effect it just disappears. this can be disorienting for keyboard and non-visual us...
...nality, we aren't providing a great experience for non-mouse users. specifically, when a user activates the "edit" button, we remove the "edit" button from the dom, but we don't move the user's
focus anywhere, so in effect it just disappears. this can be disorienting for keyboard and non-visual users. to understand what's currently happening: reload your page, then press tab. you should see a
focus outline on the input for adding new to-do items. press tab again. the
focus should move to the "add" button. hit it again, and it'll be on the first checkbox. one more time, and
focus should be on the first "edit" button. activate the "edit" button by pressing enter. the checkbox will be replaced with our edit component, but the
focus outline will be gone. this behavior can be jarring. in ad...
...And 23 more matches
Focus and Selection - Archive of obsolete content
« previousnext » the section will describe how to handle the
focus and selection of elements.
focused elements the
focused element refers to the element which currently receives input events. if there are three textboxes on a window, the one that has the
focus is the one that the user can currently enter text into. only one element per window has the
focus at a time. the user can change the
focus by clicking an element with the mouse or by pressing the tab key. when the tab key is pressed, the next element is given the
focus. to step backwards, the shift key and tab key can be pressed. rearranging the tab order you can change the order in which elements are
focused when the user presses the tab key by adding a tabindex attribute to an element. this attribute should be set to a ...
... the mouse or by pressing the tab key. when the tab key is pressed, the next element is given the
focus. to step backwards, the shift key and tab key can be pressed. rearranging the tab order you can change the order in which elements are
focused when the user presses the tab key by adding a tabindex attribute to an element. this attribute should be set to a number. when the user presses tab, the
focus will shift to the element with the next highest tab index. that means that you can order the elements by setting indices on elements in sequence. usually, however, you would not set the tabindex attribute. if you do not, pressing tab will set the
focus to the next displayed element. you only need to set tab indices if you wish to use a different order. here is an example: example 1 : source view ...
...elements in sequence. usually, however, you would not set the tabindex attribute. if you do not, pressing tab will set the
focus to the next displayed element. you only need to set tab indices if you wish to use a different order. here is an example: example 1 : source view <button label="button 1" tabindex="2"/> <button label="button 2" tabindex="1"/> <button label="button 3" tabindex="3"/> the
focus event the
focus event is used to respond when the
focus is given to an element. the blur event is used to respond when the
focus is removed from an element. you can respond to
focus changes by adding an on
focus or onblur attribute on an element. they work just like their html counterparts. you might use these event handlers to highlight the element or display text on a status bar. the following e...
...And 22 more matches
:focus-visible - CSS: Cascading Style Sheets
compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. ...
...compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. ...
...compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. ...
...And 18 more matches
HTMLElement.focus() - Web APIs
the htmlelement.
focus() method sets
focus on the specified element, if it can be
focused. the
focused element is the element which will receive keyboard and similar events by default. syntax element.
focus(options); // object parameter parameters options optional an optional object providing options to control aspects of the
focusing process. this object may contain the following property: preventscroll optional a boolean value indicating whether or not the browser should scroll the document to bring the newly-
focused element into view. a value of false for preventscroll (the default) means that the browser will scroll the element into view after
focusing it. if preventscroll is set to true, no scrolling will occur. ...
...object may contain the following property: preventscroll optional a boolean value indicating whether or not the browser should scroll the document to bring the newly-
focused element into view. a value of false for preventscroll (the default) means that the browser will scroll the element into view after
focusing it. if preventscroll is set to true, no scrolling will occur. ...
...operty: preventscroll optional a boolean value indicating whether or not the browser should scroll the document to bring the newly-
focused element into view. a value of false for preventscroll (the default) means that the browser will scroll the element into view after
focusing it. if preventscroll is set to true, no scrolling will occur. ...
...And 11 more matches
FocusEvent.relatedTarget - Web APIs
relatedtarget may also be set to null for security reasons, like when tabbing in or out of a page. mouseevent.relatedtarget is a similar property for mouse events. ...
...relatedtarget may also be set to null for security reasons, like when tabbing in or out of a page. mouseevent.relatedtarget is a similar property for mouse events. ...
...relatedtarget may also be set to null for security reasons, like when tabbing in or out of a page. mouseevent.relatedtarget is a similar property for mouse events. ...
...And 7 more matches
:-moz-focusring - CSS: Cascading Style Sheets
this feature is not defined in any specification yet, though it was discussed in the working group and it was decided to add it to selectors 4 or 5. ...
... this feature is not defined in any specification yet, though it was discussed in the working group and it was decided to add it to selectors 4 or 5. ...
... this feature is not defined in any specification yet, though it was discussed in the working group and it was decided to add it to selectors 4 or 5. ...
...And 6 more matches
Document.hasFocus() - Web APIs
the has
focus() method of the document interface returns a boolean value indicating whether the document or any element inside the document has
focus. this method can be used to determine whether the active element in a document has
focus. when viewing a document, an element with
focus is always the active element in the document, but an active element does not necessarily have
focus. for example, an active element within a popup window that is not the foreground doesn't have
focus. syntax var
focused = document.has
focus(); return value false if the active element in the document has no
focus; true if the active element in the document has
focus. example this example checks whether the document has
focus every 300 milliseconds. ...
...ave
focus. for example, an active element within a popup window that is not the foreground doesn't have
focus. syntax var
focused = document.has
focus(); return value false if the active element in the document has no
focus; true if the active element in the document has
focus. example this example checks whether the document has
focus every 300 milliseconds. to test the functionality of has
focus(), click on the button to open a new window, and try switching between the two pages. ...
... var
focused = document.has
focus(); return value false if the active element in the document has no
focus; true if the active element in the document has
focus. example this example checks whether the document has
focus every 300 milliseconds. to test the functionality of has
focus(), click on the button to open a new window, and try switching between the two pages. ...
...And 4 more matches
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
the canvasrenderingcontext2d.draw
focusifneeded() method of the canvas 2d api draws a
focus ring around the current or given path, if the specified element is
focused. syntax void ctx.draw
focusifneeded(element); void ctx.draw
focusifneeded(path, element); parameters element the element to check whether it is
focused or not. path a path2d path to use. examples managing button
focus this example draws two buttons on a canvas. the draw
focusifneeded() method is used to draw a
focus ring when appropriate. html <canvas id="canvas"> <button id="button1">continue</button> <button id="button2">quit</button> </canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const button1 = document.getelementbyid('button1'); const button2 = d...
...hod is used to draw a
focus ring when appropriate. ...
...ocument.addeventlistener('blur', redraw, true); canvas.addeventlistener('click', handleclick, false); redraw(); function redraw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawbutton(button1, 20, 20); drawbutton(button2, 20, 80); } function handleclick(e) { // calculate click coordinates const x = e.clientx - canvas.offsetleft; const y = e.clienty - canvas.offsettop; //
focus button1, if appropriate drawbutton(button1, 20, 20); if (ctx.ispointinpath(x, y)) { button1.
focus(); } //
focus button2, if appropriate drawbutton(button2, 20, 80); if (ctx.ispointinpath(x, y)) { button2.
focus(); } } function drawbutton(el, x, y) { const active = document.activeelement === el; const width = 150; const height = 40; // button background ctx.fillst...
...And 3 more matches
HTMLSelectElement.autofocus - Web APIs
the htmlselectelement.auto
focus property is a boolean that reflects the auto
focus html attribute, which indicates whether the associated <select> element will get input
focus when the page loads, unless the user overrides it. only one form-associated element in a document can have this attribute specified. if there are several, the first element with the attribute set inserted, usually the first such element on the page, get the initial
focus. setting this property doesn't set the
focus to the associated <select> element: it merely tells the browser to
focus to it when the element is inserted in the document. setting it after the insertion, that is most of the time after the document load, has no visible effect. ...
...e set inserted, usually the first such element on the page, get the initial
focus. setting this property doesn't set the
focus to the associated <select> element: it merely tells the browser to
focus to it when the element is inserted in the document. setting it after the insertion, that is most of the time after the document load, has no visible effect. ...
...st such element on the page, get the initial
focus. setting this property doesn't set the
focus to the associated <select> element: it merely tells the browser to
focus to it when the element is inserted in the document. setting it after the insertion, that is most of the time after the document load, has no visible effect. ...
...And 3 more matches
WindowClient.focused - Web APIs
the
focused read-only property of the windowclient interface is a boolean that indicates whether the current client has
focus. syntax var my
focused = windowclient.
focused; value a boolean. ...
...operty of the windowclient interface is a boolean that indicates whether the current client has
focus. syntax var my
focused = windowclient.
focused; value a boolean. ...
... working draft initial definition ...
...And 3 more matches
Element: focus event - Web APIs
the
focus event fires when an element has received
focus. the main difference between this event and
focusin is that
focusin bubbles while
focus does not. the opposite of
focus is blur. ...
... the
focus event fires when an element has received
focus. the main difference between this event and
focusin is that
focusin bubbles while
focus does not. the opposite of
focus is blur. ...
... the
focus event fires when an element has received
focus. the main difference between this event and
focusin is that
focusin bubbles while
focus does not. the opposite of
focus is blur. ...
...And 2 more matches
WindowClient.focus() - Web APIs
the
focus() method of the windowclient interface gives user input
focus to the current client and returns a promise that resolves to the existing windowclient. syntax windowclient.
focus().then(function(windowclient) { // do something with your windowclient once it has been
focused }); parameters none. return value a promise that resolves to the existing windowclient. ...
...wclient) { // do something with your windowclient once it has been
focused }); parameters none. return value a promise that resolves to the existing windowclient. ...
... working draft initial definition. ...
...And 2 more matches
Element: focusin event - Web APIs
the
focusin event fires when an element is about to receive
focus. the main difference between this event and
focus is that
focusin bubbles while
focus does not. the opposite of
focusin is
focusout. ...
... the
focusin event fires when an element is about to receive
focus. the main difference between this event and
focus is that
focusin bubbles while
focus does not. the opposite of
focusin is
focusout. ...
... the
focusin event fires when an element is about to receive
focus. the main difference between this event and
focus is that
focusin bubbles while
focus does not. the opposite of
focusin is
focusout. ...
... cancelable no interface
focusevent event handler property on
focusin sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('
focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('
focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed. document object model (dom) level 3 events specification obsolete initial def...
Element: focusout event - Web APIs
the
focusout event fires when an element is about to lose
focus. the main difference between this event and blur is that
focusout bubbles while blur does not. the opposite of
focusout is
focusin. ...
... the
focusout event fires when an element is about to lose
focus. the main difference between this event and blur is that
focusout bubbles while blur does not. the opposite of
focusout is
focusin. ...
... the
focusout event fires when an element is about to lose
focus. the main difference between this event and blur is that
focusout bubbles while blur does not. the opposite of
focusout is
focusin. ...
... cancelable no interface
focusevent event handler property on
focusout sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('
focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('
focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed. document object model (dom) level 3 events specification obsolete initial def...
FocusEvent - Web APIs
the
focusevent interface represents
focus-related events, including
focus, blur,
focusin, and
focusout. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><lin...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
focusevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
focusevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor
focusevent() cr...
...arget="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
focusevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor
focusevent() creates a
focusevent event with the given parameters. properties this interface also inherits properties from its parent uievent, and indirectly from event.
focusevent.relatedtarget is an eventtarget representing a secondary target for this event. in some cases (such as when tabbing in or out a page), this property may be set to null for security reasons. methods this interface has no specific methods.
...s an eventtarget representing a secondary target for this event. in some cases (such as when tabbing in or out a page), this property may be set to null for security reasons. methods this interface has no specific methods. it inherits methods from its parent uievent, and indirectly from event. specifications specification status comment ui eventsthe definition of '
focusevent' in that specification. working draft document object model (dom) level 3 events specificationthe definition of '
focusevent' in that specification. obsolete initial definition. ...
:focus - CSS: Cascading Style Sheets
the :
focus css pseudo-class represents an element (such as a form input) that has received
focus. it is generally triggered when the user clicks or taps on an element or selects it with the keyboard's tab key. /* selects any <input> when
focused */ input:
focus { color: red; } note: this pseudo-class applies only to the
focused element itself. use :
focus-within if you want to select an element that contains a
focused element. ...
...ment (such as a form input) that has received
focus. it is generally triggered when the user clicks or taps on an element or selects it with the keyboard's tab key. /* selects any <input> when
focused */ input:
focus { color: red; } note: this pseudo-class applies only to the
focused element itself. use :
focus-within if you want to select an element that contains a
focused element. syntax :
focus examples html <input class="red-input" value="i'll be red when
focused."><br> <input class="blue-input" value="i'll be blue when
focused."> css .red-input:
focus { background: yellow; color: red; } .blue-input:
focus { background: yellow; color: blue; } result accessibility concerns make sure the visual
focus indicator can be seen by people with low vision. this will also benefi...
...cused."> css .red-input:
focus { background: yellow; color: red; } .blue-input:
focus { background: yellow; color: blue; } result accessibility concerns make sure the visual
focus indicator can be seen by people with low vision. this will also benefit anyone use a screen in a brightly lit space (like outside in the sun). wcag 2.1 sc 1.4.11 non-text contrast requires that the visual
focus indicator be at least 3 to 1. accessible visual
focus indicators: give your site some
focus! tips for designing useful and usable
focus indicators :
focus { outline: none; } never just remove the
focus outline (visible
focus indicator) without replacing it with a
focus outline that will pass wcag 2.1 sc 1.4.11 non-text contrast. quick tip: never remove css outlines specifications ...
...cus! tips for designing useful and usable
focus indicators :
focus { outline: none; } never just remove the
focus outline (visible
focus indicator) without replacing it with a
focus outline that will pass wcag 2.1 sc 1.4.11 non-text contrast. quick tip: never remove css outlines specifications specification status comment html living standardthe definition of ':
focus' in that specification. living standard defines html-specific semantics. selectors level 4the definition of ':
focus' in that specification. working draft no change. selectors level 3the definition of ':
focus' in that specification. recommendation no change. css level 2 (revision 1)the definition of ':
focus' in that specification. recommendation i...
FocusedChild
« nsiaccessible page summary
focused accessible child of node. ...
... « nsiaccessible page summary
focused accessible child of node. ...
... « nsiaccessible page summary
focused accessible child of node. ...
-moz-user-focus - CSS: Cascading Style Sheets
the -moz-user-
focus css property is used to indicate whether an element can have the
focus. /* keyword values */ -moz-user-
focus: normal; -moz-user-
focus: ignore; /* global values */ -moz-user-
focus: inherit; -moz-user-
focus: initial; -moz-user-
focus: unset; by setting its value to ignore, you can disable
focusing the element, which means that the user will not be able to activate the element. the element will be skipped in the tab sequence. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete note: this property doesn't work for xul <xul:textbox> elements, because the textbox itself never takes
focus. instead, xbl creates an anonymous html <input> element inside the textbox, and that element is what receives
focus. you can stop the...
...pped in the tab sequence. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete note: this property doesn't work for xul <xul:textbox> elements, because the textbox itself never takes
focus. instead, xbl creates an anonymous html <input> element inside the textbox, and that element is what receives
focus. you can stop the textbox from taking keyboard
focus by setting its tab index to -1, and from taking mouse
focus by preventing the default action of mousedown events. syntax values ignore the element does not accept the keyboard
focus and will be skipped in the tab order. normal the element can accept the keyboard
focus. select-after ? select-before ? select-menu ? select-same ? select-all ? none ? formal definition initial v...
...eyboard
focus. select-after ? select-before ? select-menu ? select-same ? select-all ? none ? formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax ignore | normal | select-after | select-before | select-menu | select-same | select-all | none examples html <input class="ignored" value="the user cannot
focus on this element."> css .ignored { -moz-user-
focus: ignore; } specifications not part of any standard. a similar property, user-
focus, was proposed in early drafts of a predecessor of the css3 ui specification, but was rejected by the working group. ...
setfocus - Archive of obsolete content
« xul reference home set
focus type: boolean if true or omitted, the
focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard. if this attribute is false, the
focus does not change during navigation. ...
... « xul reference home set
focus type: boolean if true or omitted, the
focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard. if this attribute is false, the
focus does not change during navigation. ...
TakeFocus
« nsiaccessible page summary this method
focuses this accessible node. void take
focus(); remarks the state state_
focusable indicates whether this node is normally
focusable. it is the callers responsibility to determine whether this node is
focusable.acctake
focus on a node that is not normally
focusable (such as a table), will still set
focus on that node, although normally that will not be visually indicated in most style sheets. ...
...ble node. void take
focus(); remarks the state state_
focusable indicates whether this node is normally
focusable. it is the callers responsibility to determine whether this node is
focusable.acctake
focus on a node that is not normally
focusable (such as a table), will still set
focus on that node, although normally that will not be visually indicated in most style sheets. ...
FocusEvent() - Web APIs
the
focusevent() constructor returns a newly created
focusevent object with an optional eventtarget. when the event has both a source and a destination, the relatedtarget value must be set to the other target. syntax var
focusevent = new
focusevent(typearg[,
focuseventinit]); properties the
focusevent() constructor also inherits arguments from uievent() and from event(). typearg is a domstring representing the name of the event.
focuseventinit optional is a
focuseventinit dictionary, having the following fields: "relatedtarget", optional and defaulting to null, is an eventtarget representing the secondary target of a
focusevent. the
focuseventinit dictionary also accepts fields from the uieventinit and eventinit dictionaries. specifications specification ...
...the following fields: "relatedtarget", optional and defaulting to null, is an eventtarget representing the secondary target of a
focusevent. the
focuseventinit dictionary also accepts fields from the uieventinit and eventinit dictionaries. specifications specification status comment document object model (dom) level 3 events specificationthe definition of '
focusevent()' in that specification. obsolete initial definition ...
GlobalEventHandlers.onfocus - Web APIs
the on
focus property of the globaleventhandlers mixin is an eventhandler that processes
focus events on the given element. the
focus event is raised when the user sets
focus on an element. for on
focus to fire on non-input elements, they must be given the tabindex attribute (see building keyboard accessibility back in for more details). note: the opposite of on
focus is onblur. syntax target.on
focus = functionref; value functionref is a function name or a function expression. the function receives a
focusevent object as its sole argument. example this example uses onblur and on
focus to change the text within an <input> element. ...
...yntax target.on
focus = functionref; value functionref is a function name or a function expression. the function receives a
focusevent object as its sole argument. example this example uses onblur and on
focus to change the text within an <input> element. html <input type="text" value="click here"> javascript let input = document.queryselector('input'); input.onblur = inputblur; input.on
focus = input
focus; function inputblur() { input.value = '
focus has been lost'; } function input
focus() { input.value = '
focus is here'; } result try clicking in and out of the form field, and watch its contents change accordingly. specifications specification status comment html living standardthe definition of 'on
focus' in that specification. living standard ...
Window: focus event - Web APIs
the
focus event fires when an element has received
focus. the opposite of
focus is blur. bubbles no cancelable no interface
focusevent event handler property on
focus sync / async sync composed yes examples live example this example changes the appearance of a document when it loses
focus. it uses addeventlistener() to monitor
focus and blur events. html <p id="log">click on this document to give it
focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = '
focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has
focus. click outside the document t...
...nitor
focus and blur events. html <p id="log">click on this document to give it
focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = '
focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has
focus. click outside the document to lose
focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('
focus', play); result specifications specification status comment ui events working draft added info that this event is composed. document object model (dom) level 3 events specification obsolete initial definition ...
::-moz-focus-inner - CSS: Cascading Style Sheets
the ::-moz-
focus-inner css pseudo-element is a mozilla extension that represents an inner
focus ring of the <button> element as well as the button, submit, reset, and color types of the <input> element. note: using ::-moz-
focus-inner with anything than the buttons that support it doesn't match anything and has no effect. ...
...presents an inner
focus ring of the <button> element as well as the button, submit, reset, and color types of the <input> element. note: using ::-moz-
focus-inner with anything than the buttons that support it doesn't match anything and has no effect. syntax syntax not found in db! examples html <input type="submit" value="input"/> <button type="submit">button</button> css button::-moz-
focus-inner, input[type="color"]::-moz-
focus-inner, input[type="reset"]::-moz-
focus-inner, input[type="button"]::-moz-
focus-inner, input[type="submit"]::-moz-
focus-inner { padding-block-start: 0px; padding-inline-end: 2px; padding-block-end: 0px; padding-inline-start: 2px; border: 1px dotted red; } result specifications not part of any standard. ...
:focus-within - CSS: Cascading Style Sheets
the :
focus-within css pseudo-class represents an element that has received
focus or contains an element that has received
focus. in other words, it represents an element that is itself matched by the :
focus pseudo-class or has a descendant that is matched by :
focus. (this includes descendants in shadow trees.) /* selects a <div> when one of its descendants is
focused */ div:
focus-within { background: cyan; } this selector is useful, to take a common example, for highlighting an entire <form> container when the user
focuses on one of its <input> fields. syntax :
focus-within examples in this example, the form will receive special coloring styles when either text input receives
focus. html <p>try typing into this form.</p> <form> <label for="given_name">given name:</label> <input i...
...ample, the form will receive special coloring styles when either text input receives
focus. html <p>try typing into this form.</p> <form> <label for="given_name">given name:</label> <input id="given_name" type="text"> <br> <label for="family_name">family name:</label> <input id="family_name" type="text"> </form> css form { border: 1px solid; color: gray; padding: 4px; } form:
focus-within { background: #ff8; color: black; } input { margin: 4px; } result specifications specification status comment selectors level 4the definition of ':
focus-within' in that specification. working draft initial definition. ...
norestorefocus - Archive of obsolete content
« xul reference home norestore
focus type: boolean if false, the default value, then when the panel is hidden, the keyboard
focus will be restored to whatever had the
focus before the panel was opened. if true, the
focus will not be reset, although it will be cleared if the
focus is within the panel. ...
noautofocus - Archive of obsolete content
« xul reference home noauto
focus type: boolean if false, the default value, the currently
focused element will be un
focused whenever the popup is opened or closed. if true, the
focus is not adjusted. ...
noinitialfocus - Archive of obsolete content
« xul reference homenoinitial
focustype: booleanif false, the default value, the element is considered when determining which element should be initially
focused in a dialog. if true, the element will not receive initial
focus. this lets you prevent things like descriptions and labels from inadvertently receiving initial
focus. ...
textbox.onfocus - Archive of obsolete content
note: the behavior of this event has evolved over time. prior to gecko 1.9 (firefox 3), the script code would execute in the context of the anonymous html <input> element inside the textbox binding. from gecko 1.9 to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9), the script code would actually execute twice, once in the context of the anonymous html <input> element and once in the context of the <textbox> element itself. as of gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10), the script code only runs in the context of the <textbox> element, matching the behavior of all other event handlers. ...
focus - Archive of obsolete content
« xul reference home
focus() return type: no return value assigns the
focus to the element, if it can accept the
focus. the on
focus handler is called if the toplevel window is active. ...
focusedItem - Archive of obsolete content
« xul reference
focuseditem type: radio element holds the currently
focused item in the radiogroup, which may or may not be the same as the selected item. you can change the
focused item by setting this property. ...
accessibility.tabfocus
the preference accessibility.tab
focus controls what elements receive
focus when the user presses the tab key. note: on mac os x, if this preference is not set, the full keyboard access setting in system preferences > keyboard is honored. type:integer default value: 7 (windows and linux); 2 (mac os x) exists by default: no application support:gecko 1.7 status: active introduction: bugs: bug 140612 values 1 give
focus only to text fields (default on mac osx) 2 give
focus to all form elements except text fields. 4 give
focus only to links and linked images. other you can add these values to combine their functionality. the value 7 (give
focus to all elements) is the default on windows and linux. ...
nsIWebBrowserChromeFocus
embedding/browser/webbrowser/nsiwebbrowserchrome
focus.idlscriptable implemented by the same object as nsiembeddingsitewindow. it represents the
focus up-calls from mozilla to the embedding chrome. inherits from: nsisupports last changed in gecko 1.7 method overview void
focusnextelement(); void
focusprevelement(); methods
focusnextelement() set the
focus at the next
focusable element in the chrome. void
focusnextelement(); parameters none.
focusprevelement() set the
focus at the previous
focusable element in the chrome. void
focusprevelement(); parameters none. see also see bug 70224 for gratuitous information. ...
Selection.focusNode - Web APIs
the selection.
focusnode read-only property returns the node in which the selection ends. a user may make a selection from left to right (in document order) or right to left (reverse of document order). the
focus is where the user ended the selection. this can be visualized by holding the shift key and pressing the arrow keys on your keyboard to modify the current selection. the selection's
focus moves, but the selection's anchor, the other end of the selection, does not move. syntax node = sel.
focusnode specifications specification status comment selection apithe definition of 'selection.
focusnode' in that specification. working draft current ...
Selection.focusOffset - Web APIs
the selection.
focusoffset read-only property returns the number of characters that the selection's
focus is offset within the selection.
focusnode. this number is zero-based. if the selection ends with the first character in the selection.
focusnode, 0 is returned. syntax offset = sel.
focusoffset specifications specification status comment selection apithe definition of 'selection.
focusoffset' in that specification. working draft current ...
ShadowRoot.delegatesFocus - Web APIs
the delegates
focus read-only property of the shadowroot interface returns a boolean that indicates whether delegates
focus was set when the shadow was attached (see element.attachshadow()). this is currently an experimental non-standard feature, available only in chrome. syntax var df = shadowroot.delegates
focus value a boolean value — true if the shadow root does delegate
focus, false if it doesn't. examples let customelem = document.queryselector('my-shadow-dom-element'); let shadow = customelem.shadowroot; ... // does it delegate
focus? let hostelem = shadow.delegates
focus; specifications this feature is not currently in a specification. ...
Window.focus() - Web APIs
makes a request to bring the window to the front. it may fail due to user settings and the window isn't guaranteed to be frontmost before this method returns. syntax window.
focus() example if (clicked) { window.
focus(); } specification specification status comment html living standardthe definition of 'window.
focus()' in that specification. living standard ...
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
ded more features to our to-do list and started to organize our app into components. in this article we will add the app's final features and further componentize our app. we will learn how to deal with reactivity issues related to updating objects and arrays. to avoid common pitfalls, we'll have to dig a little deeper into svelte's reactivity system. we'll also look at solving some accessibility
focus issues, and more besides. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. you'll need a terminal with node + npm installed to compile and build your app. objective: learn some advanced svelte techniques involving solving reactivity issues, k...
...ded that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. you'll need a terminal with node + npm installed to compile and build your app. objective: learn some advanced svelte techniques involving solving reactivity issues, keyboard accessibility problems to do with component lifecycle, and more. we'll
focus on some accessibility issues involving
focus management. to do so, we'll utilize some techniques for accessing dom nodes and executing methods like
focus() and select(). we will also see how to declare and clean-up event listeners on dom elements. we also need to learn a bit about component lifecycle, to understand when these dom nodes get mounted and and unmounted from the dom and how we can ac...
...>remove completed</button> </div> we've also declared a reactive completedtodos variable to enable or disable the remove completed button. don't forget to pass the prop into moreactions from inside todos.svelte, where the component is called: <moreactions {todos} on:checkall={e => checkalltodos(e.detail)} on:removecompleted={removecompletedtodos} /> working with the dom:
focusing on the details now that we have completed all of the app's required functionality, we'll concentrate on some accessibility features that will improve the usability of our app for both keyboard-only and screenreader users. in its current state our app has a couple of keyboard accessibility problems involving
focus management. let's have a look at these issues. exploring keyboard accessibilit...
...And 57 more matches
IME handling guide
this document explains how gecko handles ime. introduction ime is an abbreviation of input method editor. this is a technical term from windows but these days, this is used on other platforms as well. ime is a helper application of a user's text input. it handles native key events before or after
focused application (depending on the platform) and creates a composition string (a.k.a. preedit string), suggests a list of what the user attempts to input, commits composition string as a selected item off the list and commits composition string without any conversion. ime is used by chinese, japanese, korean and taiwan users for inputting chinese characters because the number of them is beyond thousands and cannot be input from the keyboard directly. however, especially on mobile devices ...
...e, japanese, korean and taiwan users for inputting chinese characters because the number of them is beyond thousands and cannot be input from the keyboard directly. however, especially on mobile devices nowadays, ime is also used for inputting latin languages like autocomplete. additionally, ime may be used for handwriting systems or speech input systems on some platforms. if ime is available on
focused elements, we call that state "enabled". if ime is not fully available(i.e., user cannot enable ime), we call this state "disabled". if ime is enabled but users use direct input mode (e.g., for inputting latin characters), we call it "ime is closed". otherwise, we call it "ime is open". (fyi: "open" is also called "active" or "turned on". "closed" is also called "inactive" or "turned off") so,...
...w text typed by the user" isn't used because when composition string is already separated to multiple clauses, that means that the composition string has already been converted by ime at least once. modules handling ime composition widget each widget handles native ime events and dispatches widgetcompositionevent with mozilla::widget::texteventdispatcher to represent the behavior of ime in the
focused editor. this is the only module that depends on the users platform. see also native ime handlers section for the detail of each platform's implementation. android widget still does not use texteventdispatcher to dispatch widgetcompositionevents, see bug 1137567. mozilla::widget::texteventdispatcher this class is used by native ime handler(s) on each platform. this capsules the logic to di...
...And 37 more matches
ARIA Test Cases - Accessibility
jaws 10 passed fail - - voiceover (leopard) n/a n/a - fail window-eyes passed- not announced as "alert" fail - - nvda passed n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - ffd - an interesting thing to note is that, when
focus moves to an alert, jaws loses its place on the page, so that, when the alert disappears, jaws virtual cursor is at the bottom of the page. alertdialog alert dialog yui alert dialog (3rd button in this page) expected at behavior: at should speak the fact that this is an alert, the title and contents of the dialog, then place virtual
focus or the real
focus on the desired control (like a...
...the page, so that, when the alert disappears, jaws virtual cursor is at the bottom of the page. alertdialog alert dialog yui alert dialog (3rd button in this page) expected at behavior: at should speak the fact that this is an alert, the title and contents of the dialog, then place virtual
focus or the real
focus on the desired control (like a button). ...
...the title and contents of the dialog, then place virtual
focus or the real
focus on the desired control (like a button). screen magnifier should show the
focused button or emulate any other standard behavior found in notification dialogs in windows or respective operating systems. markup used: role="alert" aria-labeledby notes: in the uiuc test example, the 'close' button cannot recieve
focus. results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 2 pass, 1 pass with known
focus of the close button problem. ffd - i concur - - - voiceover (leopard) n/a n/a - fail voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a ...
...And 33 more matches
Accessibility in React - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to learn about implementing keyboard accessibility in react. including keyboard users at this point, we've accomplished all of the features we set out to implement. a user can add a new task, check and uncheck tasks, delete tasks, or edit task names. ...
...can do all of these things with a mouse. unfortunately, these features are not very accessible to keyboard-only users. let's explore this now. exploring the keyboard usability problem start by clicking on the input at the top of our app, as if you're going to add a new task. you'll see a thick, dashed outline around that input. this outline is your visual indicator that the browser is currently
focused on this element. press the tab key, and you will see the outline appear around the "add" button beneath the input. this shows you that the browser's
focus has moved. press tab a few more times, and you will see this dashed
focus indicator move between each of the filter buttons. keep going until the
focus indicator is around the first "edit" button. press enter. the <todo /> component will sw...
...put. this shows you that the browser's
focus has moved. press tab a few more times, and you will see this dashed
focus indicator move between each of the filter buttons. keep going until the
focus indicator is around the first "edit" button. press enter. the <todo /> component will switch templates, as we designed, and you'll see a form that lets us edit the name of the task. but where did our
focus indicator go? when we switch between templates in our <todo /> component, we completely remove the elements that were there before to replace them with something else. that means the element that we were
focused on vanishes, and nothing is in
focus at all. this could confuse a wide variety of users — particularly users who rely on the keyboard, or users who use a screen reader. to improve the...
...And 27 more matches
Accessible Toolkit Checklist
ach control so that the msaa event system can call back for the right iaccessible for each event. the checklist this checklist is currently only for microsoft windows, but should be expanded to include information about linux and os x. it is maintained by the mozilla accessibility community. contributions are welcome. ...
... msaa event system can call back for the right iaccessible for each event. the checklist this checklist is currently only for microsoft windows, but should be expanded to include information about linux and os x. it is maintained by the mozilla accessibility community. contributions are welcome. general dialogs/windows/general escape key cancels dialogs and re
focuses the previously
focused on the parent window. ...
...default tab order should be in document order. ...
...And 26 more matches
Index - Web APIs
t specification) or svgmatrix (old specification) object for the current transformation matrix. 558 canvasrenderingcontext2d.direction api, canvas, canvasrenderingcontext2d, experimental, property, reference the canvasrenderingcontext2d.direction property of the canvas 2d api specifies the current text direction used to draw text. 559 canvasrenderingcontext2d.draw
focusifneeded() api, accessibility, canvas, canvasrenderingcontext2d, method, reference the canvasrenderingcontext2d.draw
focusifneeded() method of the canvas 2d api draws a
focus ring around the current or given path, if the specified element is
focused. 560 canvasrenderingcontext2d.drawimage() api, canvas, canvasrenderingcontext2d, method, reference the canvasrenderingco...
...hod, reference returns an htmlcollection of elements with the given tag name. 923 document.getelementsbytagnamens() api, dom, method, needsmarkupwork, needsspectable, reference, getelementsbytagnamens returns a list of elements with the given tag name belonging to the given namespace. the complete document is searched, including the root node. 924 document.has
focus() api, dom,
focus, method, reference the has
focus() method of the document interface returns a boolean value indicating whether the document or any element inside the document has
focus. this method can be used to determine whether the active element in a document has
focus. 925 document.hasstorageaccess() api, dom, document, method, reference, storage access api, hasstor...
...6 documentorshadowroot api, document, documentorshadowroot, interface, reference, shadowroot, shadow dom the documentorshadowroot mixin of the shadow dom api provides apis that are shared between documents and shadow roots. the following features are included in both document and shadowroot. 1037 documentorshadowroot.activeelement api, document, documentorshadowroot,
focus, property, reference, shadowroot, activeelement the activeelement read-only property of the document and shadowroot interfaces returns the element within the dom or shadow dom tree that currently has
focus. 1038 documentorshadowroot.caretpositionfrompoint() api, document, documentorshadowroot, method, reference, shadowroot, caretpositionfrompoint() the caretpositionfrom...
...And 26 more matches
Building accessible custom components in XUL - Archive of obsolete content
ells are exposed as cells</caption> each column header, previously exposed as a text label, is now exposed to assistive technologies as an actual column header. <caption>column headers are exposed as column headers</caption> row headers are also exposed properly. <caption>row headers are exposed as row headers</caption> that's it! well, not quite. ...
...ve no way to
focus individual cells, nor do we have a way to navigate the spreadsheet with the keyboard. but that's it as far as dhtml accessibility goes. all you need to do is declare two namespaces and assign the appropriate role attributes, and firefox handles exposing the elements properly to the underlying assistive technology. further reading table of supported roles and states in firefox
focus issues download stage-3.zip install stage-3.xpi the next step on the road to an accessible spreadsheet is the
focus problem. in html documents, you can make any element
focusable with the tabindex attribute. in xul, there is no tabindex attribute; to make a xul element
focusable, you need to use a mozilla-specific css property, -moz-user-
focus: normal. <code> grid.spreadsheet { border: thin s...
...stage-3.zip install stage-3.xpi the next step on the road to an accessible spreadsheet is the
focus problem. in html documents, you can make any element
focusable with the tabindex attribute. in xul, there is no tabindex attribute; to make a xul element
focusable, you need to use a mozilla-specific css property, -moz-user-
focus: normal. <code> grid.spreadsheet { border: thin solid; -moz-user-
focus: normal; } </code> in html documents, firefox draws a
focus rectangle around the currently
focused element. in xul, we will need to handle this ourselves, again with css rules. you might initially think of using the css border property, but that will add width and height to the
focused cell. a better approach is to use the css outline property, which does maintains the element's dimensions. (tech...
...And 24 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
ow msaa clients can utilize gecko's msaa support. intro: what is msaa? msaa is the microsoft active accessibility (msaa) api, used on windows operating systems to support assistive technologies for users with disabilities. third party assistive technology, such as screen readers, screen magnifiers and voice input software, want to track what's happening inside mozilla. they need to know about
focus changes and other events, and it needs to know what objects are contained in the current document or dialog box. using this information, a screen reader will speak out loud important changes to the document or ui, and allow the user to track where they navigate. the screen reader user can navigate the web page using screen reader commands or browser commands, and the two pieces of software must r...
...mation, a screen reader will speak out loud important changes to the document or ui, and allow the user to track where they navigate. the screen reader user can navigate the web page using screen reader commands or browser commands, and the two pieces of software must remain in sync. some screen readers can even show information on a refreshable braille display. screen magnifiers will zoom to the
focus, keeping it on the screen at all times, or even allow the user to enter a special low vision document reading mode, with a variety of features such as ticker mode where text is streamed on a single line. finally, voice dictation software needs to know what's in the current document or ui in order to implement "say what you see" kinds of features. on microsoft windows, these kinds of assistive te...
... currently being interacted with and custom interface extensions via interfaces via queryinterface and queryservice. this can provide assistive technology with contextual information specific to your object model. for example, gecko support isimpledomnode to provide information about the dom node for an accessible object. a set of system messages that confer accessibility-related events such as
focus changes, changes to document content and state changes in ui objects like checkboxes. to really learn about msaa, you need to download the entire msaa sdk. without downloading the sdk, you won't get the extremely useful tools, which help a great deal in the learning process. the accessible event watcher shows what accessible events are being generated by a given piece of software. the accessib...
...And 21 more matches
How to build custom form controls - Learn web development
> element or if you want to provide custom behaviors, you may consider building your own controls. in this article, we will discuss how to build a custom control. to that end, we will work with an example: rebuilding the <select> element. we will also discuss how, when, and whether building your own control makes sense, and what to consider when building a control is a requirement. note: we'll
focus on building the control, not on how to make the code generic and reusable; that would involve some non-trival javascript code and dom manipulation in an unknown context, and that is out of the scope of this article. design, structure, and semantics before building a custom control, you should start by figuring out exactly what you want. this will save you some precious time. in particular, it'...
...html element. we require our control to be usable with a mouse as well as with a keyboard, and comprehensible to a screen reader, just like any native control. let's start by defining how the control reaches each state: the control is in its normal state when: the page loads. the control was active and the user clicks anywhere outside it. the control was active and the user moves the
focus to another control using the keyboard (e.g. the tab key). the control is in its active state when: the user clicks on it or touches it on a touch screen. the user hits the tab key and it gains
focus. the control was in its open state and the user clicks on it. the control is in its open state when: the control is in any other state than open and the user clicks on it. ...
...k event. defining the html structure and (some) semantics now that the control's basic functionality has been decided upon, it's time to start building it. the first step is to define its html structure and to give it some basic semantics. here is what we need to rebuild a <select> element: <!-- this is our main container for our control. the tabindex attribute is what allows the user to
focus the control. we'll see later that it's better to set it through javascript. --> <div class="select" tabindex="0"> <!-- this container will be used to display the current value of the control --> <span class="value">cherry</span> <!-- this container will contain all the options available for our control. because it's a list, it makes sense to use the ul element. --> <ul class...
...And 13 more matches
Index - Archive of obsolete content
mary! 277 appendix f: monitoring dom changes no summary! 278 connecting to remote content no summary! 279 custom xul elements with xbl no summary! 280 getting started with firefox extensions extensions an extension is a small application that adds something new to one or more mozilla applications. this tutorial
focuses on extensions for firefox, but the same (or very similar) principles apply to creating extensions for other applications such as thunderbird, seamonkey, and flock. 281 handling preferences add-ons, extensions, xul, xul school no summary! 282 intercepting page loads no summary! 283 introduction welcome to the xul school tutorial! ...
...framework that allows developers to instrument a program with probes that have little to no effect on performance when not in use and very little when active. probe data can be collected with scripts written in d (no, not that one). mozilla dtrace support has been added by the sun dtrace team and can be used on solaris 10 and mac os x 10.5. 415 dehydra dehydra the development
focus switched to dxr (where the "d" comes from "dehydra"), which is based on clang instead of gcc. try dxr instead, or else try the gcc python plugin: https://fedorahosted.org/gcc-python-plugin/. 416 dehydra frequently asked questions dehydra initially dehydra was written as an easy way to look for patterns in control flow graphs (cfgs). images of those graphs reminded me of the m...
...d, rust firefox uses the rust programming language extensively. this page is a rough guide for people using rust in firefox. see also the documentation on this topic on the oxidation wiki page. 442 content states and the style system developing mozilla content states are what gecko uses to implement the various state-dependent in css (examples would be :hover, :active, :
focus, :target, :checked). we will
focus on describing how changes in content state are handled. 443 disabling interruptible reflow add the following variables to your environment to disable gecko interruptible reflow: 444 document loading - from load start to finding a handler docshell, outdated_articles, uriloader this document describes the beginning of the...
...And 12 more matches
Styling links - Learn web development
ses: link (unvisited): the default state that a link resides in, when it isn't in any other state. this can be specifically styled using the :link pseudo class. visited: a link when it has already been visited (exists in the browser's history), styled using the :visited pseudo class. hover: a link when it is being hovered over by a user's mouse pointer, styled using the :hover pseudo class.
focus: a link when it has been
focused (for example moved to by a keyboard user using the tab key or similar, or programmatically
focused using htmlelement.
focus()) — this is styled using the :
focus pseudo class. active: a link when it is being activated (e.g. clicked on), styled using the :active pseudo class. default styles the following example illustrates what a link will behave like by defau...
...ded, clicking on them would break the examples (you'd end up with an error, or a page loaded in the embedded example that you couldn't get back from.) # just links to the current page. you'll notice a few things as you explore the default styles: links are underlined. unvisited links are blue. visited links are purple. hovering a link makes the mouse pointer change to a little hand icon. ...
... error, or a page loaded in the embedded example that you couldn't get back from.) # just links to the current page. you'll notice a few things as you explore the default styles: links are underlined. unvisited links are blue. visited links are purple. hovering a link makes the mouse pointer change to a little hand icon. ...
...And 11 more matches
Handling common accessibility problems - Learn web development
ailable since the early days of the web. the elements that have this capability are the common ones that allow user to interact with web pages, namely links, <button>s, and form elements like <input>. ...
...he elements that have this capability are the common ones that allow user to interact with web pages, namely links, <button>s, and form elements like <input>. ...
...is capability are the common ones that allow user to interact with web pages, namely links, <button>s, and form elements like <input>. ...
...And 11 more matches
Mozilla’s UAAG evaluation report
ing bugs, and some keyboard usability issues, but in general mozilla now has keyboard equivalents for almost everything. most browsers do not allow the user to select text with the keyboard alone. we intend to do this with a caret browsing feature. 1.2 activate event handlers. (p1) p onmouseover, onmousedown, onmouseup, onmousemove, onclick, ondbclick: no keyboard support on
focus and onblur: cannot be activated with pointer 1.3 provide text messages. (p1) c status line and alert boxes used to convey messages and alerts guideline 2. ensure user access to all content. checkpoint title status notes/plans checkpoint title status notes/plans 2.1 render content according to specification. (p1) vg rend...
...h characteristics. (p2) na 4.16 configure synthesized speech features. (p2) na 4.17 choose style sheets. (p1) c under view menu, use style sheet -- allows one user style sheet to be applied at a time guideline 5. ensure user control of user interface behavior. checkpoint title status notes/plans 5.1 no automatic content
focus change. (p2) c preferences, advanced, scripts & windows - allow scripts to "open unrequested windows" 5.2 keep viewport on top. (p2) c windows can be configured so that the window with the current
focus is always on top. 5.3 manual viewport open only. (p2) vg preferences, advanced, scripts & windows - allow scripts to "open unrequested windows" we do not ha...
...(p2) p only allows confirmation if the information is not secure? this is also under preferences, security, ssl, "sending form data from unencrypted page to unencrypted page" 5.6 confirm fee links. (p2) ni no support of fee links 5.7 manual...
...And 11 more matches
ARIA: listbox role - Accessibility
or more static items, similar to the html <select> element. unlike <select>, a listbox can contain images. each child of a listbox should have a role of option. it is highly recommended to use the html select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage
focus for all the descendants, and native html elements provide this functionality for you for free. elements with the role listbox have an implicit aria-orientation value of vertical. when a list is tabbed to, the first item in the list will be selected if nothing else already is. up/down arrows navigate the list, and pressing shift + up/down arrows will move and extend the selection. typing one or ...
...uous items, ctrl+arrow moves without selecting, and ctrl+space can be used to select non-contiguous items. it is recommended that a checkbox, link or other method be used to select all items, and ctrl+a could be used as a shortcut key for this. when the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets
focus. if an option or item is
focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. as
focus moves within the list, the screen reader announces the relevant items. associated aria roles, states, and properties associated roles option one or more nested options are required. all selected options have ari...
...cription a human-readable string value which more clearly identifies the role of the listbox. screen readers will often read this value to the user after reading the label (if there is one), in place of saying "listbox". ...
...And 11 more matches
Keyboard-navigable JavaScript widgets - Accessibility
panels. these widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. this document describes techniques to make javascript widgets accessible with the keyboard. using tabindex by default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get
focused. with the tabindex global attribute, authors can make other elements
focusable, too. when set to 0, the element becomes
focusable by keyboard and script. when set to -1, the element becomes
focusable by script, but it does not become part of the keyboard
focus order. the order in which elements gain
focus when using a keyboard, is the source order by default. in exceptional circumstances, auth...
...board, is the source order by default. in exceptional circumstances, authors may want to redefine the order. to do this, authors can set tabindex to any positive number. warning: avoid using positive values for tabindex. elements with a positive tabindex are put before the default interactive elements on the page, which means page authors will have to set (and maintain) tabindex values for all
focusable elements on the page whenever they use one or more positive values for tabindex. the following table describes tabindex behavior in modern browsers: tabindex attribute
focusable with mouse or javascript via element.
focus() tab navigable not present follows the platform convention of the element (yes for form controls, links, etc.). follows the platform convent...
... zero (i.e. tabindex="0") yes in tab order relative to element's position in document (note that interactive elements like <a> have this behavior by default, they don't need the attribute). positive (e.g. ...
...And 11 more matches
Miscellaneous - Archive of obsolete content
it also collapses consecutive whitespaces into a single whitespace, and returns at m...
...hub.com/realityripple/pale-moon/blob/master/palemoon/base/content/browser.js#l5113. note that it returns the empty string (""), not false, when nothing is selected. getbrowserselection() is not implemented on some platforms, such as thunderbird and songbird. ...
...alityripple/pale-moon/blob/master/palemoon/base/content/browser.js#l5113. note that it returns the empty string (""), not false, when nothing is selected. getbrowserselection() is not implemented on some platforms, such as thunderbird and songbird. ...
...And 10 more matches
ARIA: button role - Accessibility
ickable elements that trigger a response when activated by the user. adding role="button" will make an element appear as a button control to a screen reader. this role can be used in combination with the aria-pressed attribute to create toggle buttons. ...
...see the official wai-aria example code. ...
...utton not pressed" depending on the value of aria-pressed. if the design were to call for the button label to change from "mute" to "unmute," a toggle button would not be appropriate, so the the aria-pressed attribute would be omitted. keyboard interactions key function enter activates the button. ...
...And 10 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
es to <input> are highlighted. attributes for the <input> element include global html attributes and: attribute type or types description accept file hint for expected file type in file upload controls alt image alt attribute for the image type. ...
... attributes for the <input> element include global html attributes and: attribute type or types description accept file hint for expected file type in file upload controls alt image alt attribute for the image type. ...
...ange, color, and password. this attribute has no effect on input types that do not return numeric or text data, being valid for all input types except checkbox, radio, file, or any of the button types. see the html autocomplete attribute for additional information, including information on password security and how autocomplete is slightly different for hidden than for other input types. auto
focus a boolean attribute which, if present, indicates that the input should automatically have
focus when the page has finished loading (or when the <dialog> containing the element has been displayed). note: an element with the auto
focus attribute may gain
focus before the domcontentloaded event is fired. no more than one element in the document may have the auto
focus attribute. if put on m...
...And 10 more matches
XUL accessibility guidelines - Archive of obsolete content
ovide a keyboard accessible alternative for accessing this functionality. the firefox "bookmarks manager" provides an example of how to make trees more accessible. the bookmark manager allows users to sort bookmarks by a particular column of information and choose which columns to display. because column headers and the column picker, in the upper right hand corner of the tree, can not receive
focus, they are not operable with a keyboard. in the bookmark manager this functionality is available under the view menu which is accessible to a keyboard user. toolbarbuttons by default, toolbar buttons cannot receive
focus with a keyboard. the recommended way of fixing this is that all functionality associated with a toolbar be duplicated elsewhere in the application, such as in a menu item or con...
...(firefox's "print preview" window uses this fallback technique.) this should only be used as a last resort, and it should be consistent throughout a window (that is either all toolbar buttons are tabbable or none of them are). ...
...(firefox's "print preview" window uses this fallback technique.) this should only be used as a last resort, and it should be consistent throughout a window (that is either all toolbar buttons are tabbable or none of them are). keyboard shortcuts keyboard shortcuts are very useful to users needing keyboard access. ...
...And 9 more matches
Firefox user agent string reference - HTTP
ort 4.4. android versions 4 and above will report the version accurately. note that the same gecko—with the same capabilities—is shipped to all versions of android. form factor gecko user agent string phone mozilla/5.0 (android 4.4; mobile; rv:41.0) gecko/41.0 firefox/41.0 tablet mozilla/5.0 (android 4.4; tablet; rv:41.0) gecko/41.0 firefox/41.0
focus for android from version 1,
focus is powered by android webview and uses the following user agent string format: mozilla/5.0 (linux; <android version> <build tag etc.>) applewebkit/<webkit rev> (khtml, like gecko) version/4.0
focus/<
focusversion> chrome/<chrome rev> mobile safari/<webkit rev> tablet versions on webview mirror mobile, but do not contain a mobile token. starting in version 6, u...
...ered by android webview and uses the following user agent string format: mozilla/5.0 (linux; <android version> <build tag etc.>) applewebkit/<webkit rev> (khtml, like gecko) version/4.0
focus/<
focusversion> chrome/<chrome rev> mobile safari/<webkit rev> tablet versions on webview mirror mobile, but do not contain a mobile token. starting in version 6, users can opt into using a geckoview-based
focus for android with a hidden preference: it uses a geckoview ua string to advertise gecko compatibility. ...
... tag etc.>) applewebkit/<webkit rev> (khtml, like gecko) version/4.0
focus/<
focusversion> chrome/<chrome rev> mobile safari/<webkit rev> tablet versions on webview mirror mobile, but do not contain a mobile token. starting in version 6, users can opt into using a geckoview-based
focus for android with a hidden preference: it uses a geckoview ua string to advertise gecko compatibility. ...
...And 9 more matches
Accessibility API cross-reference
an interesting problem is that mozilla, safari/khtml, opera, staroffice and other apps are cross-platform, but there is currently no cross-platform accessibility api. ...
..., although communication for some cross-platform accessibility api of the future could be done through sockets. these tables describe how various accessibility apis define possible roles of an object, and states. all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc. they also define a list of possible object states, such as
focused, read-only, checked, etc. this table is the start of a cross-reference, so we can spot the differences and similarities in the apis. aria is a standard developed as part of the web accessibility initiative, which uses markup syntax quite familiar to users of html, xml, sgml and others. the roles it specifies have already informed the 'semantic elements' of html5 (such as main and footer), but ...
... whole, combine to create a form. form <form> presumably msaa's graphic is aria's and html's img? graphic n/a n/a img <img> a cell in a grid or treegrid. grid a composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are
focusable by using methods of two-dimensional navigation, such as directional arrow keys, e.g. a spreadsheet. gridcell a type of mouse pointer used for resizing windows grip n/a n/a n/a probably a group box (titledbox in mozilla) grouping panel panel group <fieldset>, <div> a heading for a s...
...And 8 more matches
ARIA: grid role - Accessibility
the grid role is for a widget that contains one or more rows of cells. the position of each cell is significant and can be
focused using keyboard input. <table role="grid" aria-labelledby="id-select-your-seat"> <caption id="id-select-your-seat">select your seat</caption> <tbody role="presentation"> <tr role="presentation"> <td></td> <th>row a</th> <th>row b</th> </tr> <tr> <th scope="row">aisle 1</th> <td tabindex="0"> <button id="1a" tabindex="-1">1a</button> </td> <td tabindex="-1"> <button id="1b" tabindex="-1">1b</button> </td> <!-- more columns --> </tr> <tr> <th scope="row">aisle 2</th> <td tabindex="-1"> <button id="2a" tabindex="-1">2a</button> </td> <td tabind...
...ue is false. for many use cases, an html table element is sufficient as it and its elements already include many aria roles. keyboard interactions when a keyboard user encounters a grid, they navigate the rows and columns using the left, right, top and down keys. to activate the interactive component, they will use the return and space keys. ...
...es, an html table element is sufficient as it and its elements already include many aria roles. keyboard interactions when a keyboard user encounters a grid, they navigate the rows and columns using the left, right, top and down keys. to activate the interactive component, they will use the return and space keys. key action → moves
focus one cell to the right. if
focus is on the right-most cell in the row,
focus does not move. ← moves
focus one cell to the left. if
focus is on the left-most cell in the row,
focus does not move. ↓ moves
focus one cell down. if
focus is on the bottom cell in the column,
focus does not move. ↑ moves
focus one cell up. if
focus is on the top cell in the column,
focus does not move. ...
...And 8 more matches
NPEvent - Archive of obsolete content
wparam 32 bit field for the windows event parameter; parameter value depends upon event type. lparam 32 bit field for the windows event parameter; parameter value depends upon event type. eventrecord npevent on mac os npevent is defined as an eventrecord data structure, which has the followin...
...wparam 32 bit field for the windows event parameter; parameter value depends upon event type. lparam 32 bit field for the windows event parameter; parameter value depends upon event type. eventrecord npevent on mac os npevent is defined as an eventrecord data structure, which has the following fields: wha...
...arameter value depends upon event type. eventrecord npevent on mac os npevent is defined as an eventrecord data structure, which has the following fields: what integer representing an event type. both windowed and windowless plug-ins receive the same events. values: 0 nullevent 1 mousedown 2 mouseup 3 keydown 4 keyup 5 autokey 6 updateevt 7 diskevt 8 activateevt 15 osevt 23 khighlevelevent get
focusevent 0, 1 (true, false) lose
focusevent adjustcursorevent 0, 1 (true, false) for information about these events, see the mac os developer documentation. message longint. additional information about the event. type of information depends on the event type. undefined for null, mouseup, and mousedown events. when longint. ticks since start-up. where point. cursor location. modifiers integer. fl...
...And 7 more matches
CSS and JavaScript accessibility best practices - Learn web development
gnised styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this. for more on abbreviations, see abbreviations. links hyperlinks — the way you get to new places on the web: <p>visit the <a href="https://www.mozilla.org">mozilla homepage</a>.</p> some very simple link styling is shown below: a { color: #ff0000; } a:hover, a:visited, a:
focus { color: #a60000; text-decoration: none; } a:active { color: #000000; background-color: #a60000; } the standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the link has previously been visited (default: purple), and yet another color when the link is activated (default: red). in addition, the mouse pointer c...
...olor: #a60000; } the standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the link has previously been visited (default: purple), and yet another color when the link is activated (default: red). in addition, the mouse pointer changes to a pointer icon when links are moused over, and the link receives a highlight when
focused (e.g. via tabbing) or activated. the following image shows the highlight in both firefox (a dotted outline) and chrome (a blue outline): you can be creative with link styles, as long as you keep giving users feedback when they interact with the links. something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — both are very impo...
...name</label> <input type="text" id="name" name="name"> </div> you can see some good example css in our form-css.html example (see it live also). most of the css you'll write for forms will be for sizing the elements, lining up labels and inputs, and getting them looking neat and tidy. you shouldn't however deviate too much from the expected visual feedback form elements receive when they are
focused, which is basically the same as links (see above). you could style form
focus/hover states to make this behaviour more consistent across browsers or fit in better with your page design, but don't get rid of it altogether — again, people rely on these clues to help them know what is going on. tables tables for presenting tabular data. you can see a good, simple example of table html and css...
...And 7 more matches
HTML text fundamentals - Learn web development
he raw text in the input field so that it appears as a heading and two paragraphs in the output field. if you make a mistake, you can always reset it using the reset button. if you get stuck, press the show solution button to see the answer. playable code <h2>live output</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: 100px; width: 95%">my short story i am a statistician and my name is trish. my legs are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution">...
...tcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.
focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
... item in a <li> (list item) element: <ul> <li>milk</li> <li>eggs</li> <li>bread</li> <li>hummus</li> </ul> active learning: marking up an unordered list try editing the live sample below to create your very own html unordered list. ...
...And 7 more matches
Index - Learn web development
esign, example, intro, mobile, needsactivelearning when you're building a website, one top issue to consider is universal design: accommodating all users regardless of disability, technical constraints, culture, location, and so on. 16 how do i start to design my website? beginner, composing, needsactivelearning, needsschema when starting with a web project, many people
focus on the technical side. of course you must be familiar with the technique of your craft, but what really matters is what you want to accomplish. yes, it seems obvious, but too many projects fail not from a lack of technical know-how, but from lack of goals and vision. 17 how do i use github pages? beginner, github, guide, web, gh-pages, git, publish github is a "social coding"...
...ying it to creating a fun app that generates random silly stories. have fun! 81 storing the information you need — variables arrays, booleans, javascript, numbers, objects, updating, variables, declaring, initializing, l10n:priority, loose typing, strings by now you should know a reasonable amount about javascript variables and how to create them. in the next article, we'll
focus on numbers in more detail, looking at how to do basic math in javascript. 82 test your skills: arrays arrays, beginner, javascript, learn, test your skills this aim of this skill test is to assess whether you've understood our arrays article. 83 test your skills: math beginner, javascript, learn, math, test your skills this aim of this skill test is to as...
...stom fonts to your page, and styling lists and links. 161 fundamental text and font styling article, beginner, css, guide, style, text, alignment, family, font, shorthand, spacing, weight we hoped you enjoyed playing with text in this article! the next article will give you all you need to know about styling html lists. 162 styling links article, beginner, css,
focus, guide, learn, links, pseudo-class, hover, hyperlinks, menus, tabs we hope this article has provided you with all you'll need to know about links — for now! the final article in our styling text module details how to use custom fonts on your websites, or web fonts as they are better known. 163 styling lists article, beginner, css, guide, styling, text, bullets, lists ...
...And 7 more matches
Selection - Web APIs
a selection object represents the range of text selected by the user or the current position of the caret. to obtain a selection object for examination or manipulation, call window.getselection(). a user may make a selection from left to right (in document order) or right to left (reverse of document order). the anchor is where the user began the selection and the
focus is where the user ends the selection. if you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button, and the
focus is placed where you released the mouse button. anchor and
focus should not be confused with the start and end positions of a selection. the anchor can be placed before the
focus or vice-versa, depending on the direction you made your selection. properties se...
...the document (e.g., an iframe that was never clicked on). selection.anchoroffsetread only returns a number representing the offset of the selection's anchor within the anchornode. if anchornode is a text node, this is the number of characters within anchornode preceding the anchor. if anchornode is an element, this is the number of child nodes of the anchornode preceding the anchor. selection.
focusnoderead only returns the node in which the selection ends. can return null if selection never existed in the document (for example, in an iframe that was never clicked on). selection.
focusoffsetread only returns a number representing the offset of the selection's anchor within the
focusnode. if
focusnode is a text node, this is the number of characters within
focusnode preceding the
focus. i...
...deread only returns the node in which the selection ends. can return null if selection never existed in the document (for example, in an iframe that was never clicked on). selection.
focusoffsetread only returns a number representing the offset of the selection's anchor within the
focusnode. if
focusnode is a text node, this is the number of characters within
focusnode preceding the
focus. if
focusnode is an element, this is the number of child nodes of the
focusnode preceding the
focus. selection.iscollapsedread only returns a boolean indicating whether the selection's start and end points are at the same position. selection.rangecountread only returns the number of ranges in the selection. selection.typeread only returns a domstring describing the type of the current selection. ...
...And 7 more matches
ARIA: tab role - Accessibility
ombination identifies to assistive technology that the element is part of a group of related elements. some assistive technology will provide a count of the number of tab role elements inside a tablist, and inform users of which tab they currently have targeted. they should contain the aria-controls property identifying an element with the tabpanel role. when an element with the tabpanel role has
focus, or a child of it has
focus, that indicates that the connected element with the tab role is the active tab in a tablist. when working with elements with the tab role, when they are selected or active, they should have their aria-selected attribute set to true, otherwise it should be set to false. when a tab is selected or active, its controlled tabpanel should have its aria-expanded and hidden a...
...o true, otherwise it should be set to false. when a tab is selected or active, its controlled tabpanel should have its aria-expanded and hidden attributes set to true, otherwise they should be set to false. ...
...false. when a tab is selected or active, its controlled tabpanel should have its aria-expanded and hidden attributes set to true, otherwise they should be set to false. associated roles and attributes aria-selected boolean aria-controls id of element with tabpanel role id content keyboard interaction key action tab when
focus is outside of the tablist moves
focus to the active tab. if
focus is on the active tab moves
focus to the next element in the keyboard
focus order, ideally the active tab's associated tabpanel. →
focuses and optionally activates the next tab in the tab list. if the current tab is the last tab in the tab list it activates the first tab. ←
focuses and optionally activates the previous tab in the tab list. if...
...And 7 more matches
Index - Archive of obsolete content
ummary! 123 firstdayofweek xul attributes, xul reference no summary! 124 firstpage xul attributes, xul reference no summary! 125 fixed xul attributes, xul reference no summary! 126 flags xul attributes, xul reference no summary! 127 flex xul attributes, xul reference no summary! 128
focused xul attributes, xul reference no summary! 129 forcecomplete xul attributes, xul reference no summary! 130 fullscreenbutton xul, xul attributes, xul reference no summary! 131 grippyhidden xul attributes, xul reference no summary! 132 grippytooltiptext xul attributes, xul reference no summary! 133...
...summary! 203 multiple xul attributes, xul reference no summary! 204 name xul attributes, xul reference no summary! 205 negate xul attributes, xul reference no summary! 206 newlines xul attributes, xul reference no summary! 207 next xul attributes, xul reference no summary! 208 noauto
focus xul attributes, xul reference no summary! 209 noautohide xul attributes, xul reference no summary! 210 noinitial
focus xul, xul attribute, xul reference no summary! 211 nomatch xul attributes, xul reference no summary! 212 norestore
focus no summary! 213 notification.type xul attributes, xu...
...el xul attributes, xul reference no summary! 327 selected xul attributes, xul reference no summary! 328 selectedindex needshelp, xul attributes, xul reference no summary! 329 seltype xul attributes, xul reference no summary! 330 separator.orient xul attributes, xul reference no summary! 331 set
focus xul attributes, xul reference no summary! 332 showcaret xul attributes, xul reference no summary! 333 showcommentcolumn xul attributes, xul reference no summary! 334 showimagecolumn xul, xul attributes, xul reference, popup no summary! 335 showpopup xul attributes, xul reference no summary! 336 ...
...And 6 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
et of results given the current value of the textbox. the sessions can be set using the searchsessions attribute or by calling the addsession method. ...
...oninput, onsearchcomplete, ontextcommand, ontextentered, 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, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value ...
...mplete behavior will be disabled. you might use a script to change this attribute. if false, the default, autocomplete is enabled. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...And 6 more matches
TypeScript support in Svelte - Learn web development
dosstatus // reference to todosstatus instance $: newtodoid = todos.length > 0 ? ...
...// reference to todosstatus instance $: newtodoid = todos.length > 0 ? math.max(...todos.map(t => t.id)) + 1 : 1 function addtodo(name: string) { todos = [...todos, { id: newtodoid, name, completed: false }] $alert = `todo '${name}' has been added` } function removetodo(todo: todotype) { todos = todos.filter(t => t.id !== todo.id) todosstatus.
focus() // give
focus to status heading $alert = `todo '${todo.name}' has been deleted` } function updatetodo(todo: todotype) { const i = todos.findindex(t => t.id === todo.id) if (todos[i].name !== todo.name) $alert = `todo '${todos[i].name}' has been renamed to '${todo.name}'` if (todos[i].completed !== todo.completed) $alert = `todo '${todos[i].name}' marked as ${todo.completed ? 'c...
...o a string variable. newtodo.svelte next we will take care of newtodo.svelte. as usual, add the lang='ts' attribute. the warning will indicate that we have to specify a type for the nameel variable. set its type to htmlelement like this: let nameel: htmlelement // reference to the name input dom node last for this file, we need to specify the correct type for our auto
focus variable; update its definition like this: export let auto
focus: boolean = false todo.svelte now the only warnings that npm run validate emits are triggered by calling the todo.svelte component; let's fix them. open the todo.svelte file, and add the lang='ts' attribute. let's import the todotype, and set the type of the todo prop. replace the export let todo line with the foll...
...And 6 more matches
Gecko info for Windows accessibility vendors
avascript and other languages. it covers content, style and events. inside the gecko process, code has full access to dom apis. however, exposing the entire dom to external software packages is quite involved, partially because changes to the dom in firefox must occur on the main thread. we have chosen a subset of readonly methods in the dom needed for assistive technology vendors. events such as
focus changes must be tracked through msaa events, rather than dom events. xul: extensible user-interface language the xml-based language used by firefox and mozilla to develop the ui. similar to html in that it can be combined with css and javascript to make powerful applications. contains more desktop-style widgets than html and follows a box layout model, rather than being text...
...ree vs. dom tree - what's the relation? the msaa tree and the dom tree are parallel structures, although the msaa tree is a subset of the dom tree. queryservice() can be used to switch between the interfaces (iaccessible, isimpledomdocument, isimpledomnode and isimpledomtext). if there is no msaa node for a dom node, or vice-versa, queryservice() will return null. anything that is
focusable or conveys important information about the structure of the document is exposed in the msaa tree of iaccessibles. windows applications based on the gecko layout engine gecko is a rendering engine that mozilla, netscape and other new browsers use. gecko can render a variety of content, not just html and supports key web standards such as cascading style sheets, javascript and the w3c do...
... mozillawindowclass - general filler window, a catch all starting in firefox 2, however, you should begin switching your code to use navrelation_embeds. going forward, this may be the only way to efficiently find the content area, as mozilla will begin to become a windowless application, with an exception for plugins which create their own window. when you see the content window receive
focus, first check the role. if it is role_pane or role_document then this should be treated as a document for the default modality of the screen reader. if it is a role_application, role_dialog or role_alert then stay in
focus tracking mode -- there is no need to parse the document. in addition, if it is a role_alert, a screen reader should treat it as a message box -- that is, to read the entire cont...
...And 6 more matches
nsIDOMWindowUtils
blenontestmouseevents(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 getouterwindowwithid(in unsigned long long aouterwindowid); long getpccountscriptcount(); a...
...d read only unsigned long long the number of elements which have been restyled for the current document. keep in mind that during a restyle operation, an element may be restyled multiple times (for example, when an inline element contains blocks). this number also counts restyling of pseudo-elements and anonymous boxes. throws ns_error_not_available if the count can't be provided.
focusedinputtype string the type of the currently-
focused html <input> element, if one is
focused. imageanimationmode unsigned short returns the image animation mode of the window. the attribute's value must be one of the animationmode values from imgicontainer. imeisopen boolean returns the ime open state. true if it's open, otherwise false. this attribute only wor...
...te is not the same as ime-mode: disabled. ime_status_enabled 1 users can use all functions of ime. this state is same as ime-mode: normal. ime_status_password 2 users cannot use most ime functions. on gtk2, users can use "simple ime" which only supports dead key inputting. this state is the same as ime-mode: password. ime_status_plugin 3 plug-in has
focus. at this time we should not attempt to set the ime state. composition_attr_rawinput 0x02 synthesize a text event to the window. cannot be accessed from unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges. currently, this method doesn't support 4 or more clauses composition string. obsolete sin...
...And 6 more matches
ARIA: dialog role - Accessibility
/p> <button>close</button> </div> description marking up a dialog element with the dialog role helps assistive technology identify the dialog's content as being grouped and separated from the rest of the page content. however, adding role="dialog" alone is not sufficient to make a dialog accessible. additionally, the following needs to be done: the dialog must be properly labeled keyboard
focus must be managed correctly the sections below describe how these two requirements can be met. labeling even though it is not required for the dialog itself to be able to receive
focus, it still needs to be labeled. the label given to the dialog will provide contextual information for the interactive controls inside the dialog. in other words, the dialog's label acts like a grouping label for ...
...h is shown in the code snippet below: <div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </div> keep in mind that a dialog's title and description text do not have to be
focusable in order to be perceived by screen readers operating in a non-virtual mode. the combination of the aria dialog role and labeling techniques should make the screen reader announce the dialog's information when
focus is moved into it. required javascript features
focus management a dialog has particular requirements for how keyboard
focus should be managed: dialogs should always have at ...
...der to be perceived by screen readers operating in a non-virtual mode. the combination of the aria dialog role and labeling techniques should make the screen reader announce the dialog's information when
focus is moved into it. required javascript features
focus management a dialog has particular requirements for how keyboard
focus should be managed: dialogs should always have at least one
focusable control. for many dialogs, there will be a button like "close", "ok" or "cancel". ...
...And 6 more matches
Cognitive accessibility - Accessibility
and attention deficit hyperactivity disorder (adhd). though there is a lot of diversity within clinical definitions of cognitive impairments, people with them experience a common set of functional problems. these problems include difficulty with understanding content, remembering how to complete tasks, and confusion caused by inconsistent or non-traditional web page layouts. in this document, we
focus on steps developers should take to improve the cognitive accessibility of their web sites and applications. overview cognitive and intellectual disabilities cover a large spectrum, and may be momentary, temporary, or permanent conditions. for example, dementia and alzheimer's are permanent cognitive impairments that get progressively worse. other permanent cognitive impairments include aphasia,...
... another form it can take is depression, such as when mourning the loss of a loved one, or being momentarily saddened by a tweet or video they just saw online. a third example could be sleep deprivation. it may seem like an overwhelming challenge to address the wide range of cognitive differences, especially when solutions for two different people may be conflicting. one way to handle this is to
focus on cognitive skills. cognitive skills include: attention memory processing speed time management letters and language numbers symbols and math understanding and making choices a solid approach to providing accessible solutions for people with cognitive impairments includes: delivering content in more than one way, such as by text-to-speech or by video; providing easily-understood c...
...memory processing speed time management letters and language numbers symbols and math understanding and making choices a solid approach to providing accessible solutions for people with cognitive impairments includes: delivering content in more than one way, such as by text-to-speech or by video; providing easily-understood content, such as text written using plain-language standards;
focusing attention on important content; minimizing distractions, such as unnecessary content or advertisements; providing consistent web page layout and navigation; incorporating familiar elements, such as underlined links that are blue when not visited and purple when visited; dividing processes into logical, essential steps with progress indicators; making website authentication as easy as poss...
...And 6 more matches
Keyboard - Accessibility
to be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. this includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.
focusable elements should have interactive semantics if an element can be
focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option). note: one important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="applicati...
... if an element can be
focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option). note: one important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="application"). in such a case,
focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode"). most interactive elements are
focusable by default; you can make an element
focusable by adding a tabindex=0 attribute value to it. however, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handler...
...bindex=0 attribute value to it. however, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events. see also tabindex global html attribute global event handlers: onkeydown global event handlers: onkeyup avoid using tabindex attribute greater than zero the tabindex attribute indicates that an element is
focusable using the keyboard. a value of zero indicates that the element is part of the default
focus order, which is based on the ordering of elements in the html document. a positive value puts the element ahead of those in the default ordering; elements with positive values are
focused in the order of their tabindex values (1, then 2, then 3, etc.). this creates confusion for keyboard-only users wh...
...And 6 more matches
Anonymous Content - Archive of obsolete content
whenever an event is retargeted, the target field of the event is set to the bound element. the original anonymous content responsible for the event can be obtained from a new field of the event object: originaltarget. the action taken (retarget vs. stop) is specific to the event type. in general, ui events are retargeted and mutation events are stopped. exceptions to the rule are noted below. ...
...ed, the target field of the event is set to the bound element. the original anonymous content responsible for the event can be obtained from a new field of the event object: originaltarget. the action taken (retarget vs. stop) is specific to the event type. in general, ui events are retargeted and mutation events are stopped. exceptions to the rule are noted below. ...
...nt responsible for the event can be obtained from a new field of the event object: originaltarget. the action taken (retarget vs. stop) is specific to the event type. in general, ui events are retargeted and mutation events are stopped. exceptions to the rule are noted below.
focus and blur events when a
focus or blur event crosses a scope boundary, the bound element is checked to see if it is
focusable (i.e., if the user agent would normally fire a
focus or blur event on the element). if the bound element is
focusable, then the event is retargeted. if not, then the event is stopped. if anonymous content underneath a
focusable bound element blurs and anonymous content also underneath the bound element takes
focus, then the blur and
focus events are both stopped. as far as the bound element i...
...And 5 more matches
Panels - Archive of obsolete content
ox id="search"/> <button label="search" oncommand="dosearch();"/> <button label="cancel" oncommand="this.parentnode.hidepopup();"/> </panel> because the panel can no longer be closed by clicking elsewhere, the panel should always provide a means to close the panel itself. in this example a cancel button has been added. for more information about these types of panels, see floating panels. ...
...mand="dosearch();"/> <button label="cancel" oncommand="this.parentnode.hidepopup();"/> </panel> because the panel can no longer be closed by clicking elsewhere, the panel should always provide a means to close the panel itself. in this example a cancel button has been added. for more information about these types of panels, see floating panels. ...
...el" oncommand="this.parentnode.hidepopup();"/> </panel> because the panel can no longer be closed by clicking elsewhere, the panel should always provide a means to close the panel itself. in this example a cancel button has been added. for more information about these types of panels, see floating panels.
focus in panels elements within panels may be
focused with the mouse, and the currently
focused element may be adjusted by pressing the tab key. ...
...And 5 more matches
panel - Archive of obsolete content
refox versions between 3.6 and 4.0, placing an iframe, browser or editor inside a panel is not supported. some features may work, but only on some platforms. for those versions of firefox, it is best to avoid child frames in a panel, if possible. this limitation was resolved as of firefox 4.0. attributes backdrag, close, consumeoutsideclicks, fade, flip, ignorekeys, label, left, level, noauto
focus, noautohide, norestore
focus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may be attached to a label. <panel id="thepanel"> <hbox align="start"> <image src="w...
...all other normal windows, including those of other applications. parent the panel is shown just above the window the panel is in, but behind other windows above it. if anchored, the child window maintains its relative position to its parent window. floating the panel floats above the window the panel is in. on mac, the panel is only visible when the application is active. noauto
focus type: boolean if false, the default value, the currently
focused element will be un
focused whenever the popup is opened or closed. if true, the
focus is not adjusted. noautohide type: boolean if false, the default value, the panel will be hidden when the user clicks outside the panel or switches
focus to another application. if true, the panel will only be closed when the hidepopup met...
... onpopuphidden type: script code this event is sent to a popup after it has been hidden. ...
...And 5 more matches
textbox - Archive of obsolete content
the user can enter text. it is similar to the html input element. only one line of text is displayed by default. the multiline attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
...he value infinity may be used if you want no limit on the number of decimal places. note that decimal numbers are stored as floats. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.
focused type: boolean this attribute is true if the element is
focused. emptytext deprecated since gecko 2 type: string a string that appears in the textbox when it has no value. this is superseded by the placeholder attribute in gecko 2.0. the old name is retained for compatibility, but you should update your code. hidespinbuttons type: boolean if true, the number box does not have ...
...And 5 more matches
XForms Input Element - Archive of obsolete content
introduction this element is an important and oft-used xforms element to show and change the instance data to which this xforms control is bound (see the spec). attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for
focusing this control single-node binding special inputmode - not supported for this control incremental - supported. the default value is 'false'. mozilla extensions labelposition - only for boolean types: show the label before or after the checkbox (see below) type restrictions the input element can be bound to a node containing simple content of any data type except xsd:base64binary, xsd:hexbinray or any data ...
...dled by one of the other widgets (as documented below). analogous widgets are <xhtml:input type="text"/> and <xul:textbox/> specific handling of attributes incremental - if "true", the bound instance node will be updated on each character typed by the user. if "false", or the incremental attribute is omitted on this element then the bound instance node will be updated when the control loses the
focus. checkbox most often used when the form author only needs a simple 'true', 'false', '1', or '0' response from the user (xhtml/xul). characteristics used when the instance node is of type xsd:boolean or a type derived from it analogous widgets are <xhtml:input type="checkbox"/> and <xul:checkbox/> the corresponding label can be displayed before or after the checkbox by using the labelposition at...
... and <xul:checkbox/> the corresponding label can be displayed before or after the checkbox by using the labelposition attribute. specific handling of attributes incremental - if "true" or this attribute is omitted from this element, then the instance node will be updated when the user checks or un-checks the checkbox. if "false" then the instance node will be updated when the checkbox loses the
focus. labelposition - a mozilla xforms extension in the namespace http://www.mozilla.org/projects/xfor...009/extensions. this attribute is optional, possible values are before and after. the default value if omitted is after. it controls the display of the label relative to the checkbox. before shows the label first, then the checkbox, after shows the checkbox, than the label. labelposition was introd...
...And 5 more matches
Looping code - Learn web development
utton> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.
focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else { para.textcontent = 'contact not found.'; } } }); hidden code 3 <!doctype html> <html> <head> <meta charset="utf-8">...
... <script> const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.
focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else if (i === contacts.length-1) para.textcontent = 'contact not found.'; } }); </script...
...— we have an array of contact information, with each item being a string containing a name and phone number separated by a colon. next, we attach an event listener to the button (btn), so that when it is pressed, some code is run to perform the search and return the results. we store the value entered into the text input in a variable called searchname, before then emptying the text input and
focusing it again, ready for the next search. note that we also run the tolowercase() method on the string, so that searches will be case-insensitive. now onto the interesting part, the for loop: we start the counter at 0, run the loop until the counter is no longer less than contacts.length, and increment i by 1 after each iteration of the loop. inside the loop, we first split the current co...
...And 5 more matches
All keyboard shortcuts - Firefox Developer Tools
d) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 close toolbox (if the toolbox is in a separate window and in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 open web console 1 ctrl + shift + k cmd + opt + k ctrl + shift + k toggle "pick an element from the page" (opens the toolbox and/or
focus the inspector tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f7 shift + f7 * shift + f7 open profiler shift + f5 shift + f5 * shift + f5 open network monitor 2 ctrl + shift + e cmd + opt + e ctrl + shift + e toggle responsive design mode ctrl + shift + m cmd + opt + m ctrl + shift + m ...
... open scratchpad shift + f4 shift + f4 * shift + f4 open webide shift + f8 shift + f8 * shift + f8 storage inspector shift + f9 shift + f9 * shift + f9 open debugger 3 ctrl + shift + z cmd + opt + z ctrl + shift + z 1. unlike the other toolbox-hosted tools, this shortcut does not also close the web console. instead, it
focuses on the web console's command line. to close the web console, use the global toolbox shortcut of ctrl + shift + i (cmd + opt + i on a mac). 2. before firefox 55, the keyboard shortcut was ctrl + shift + q (cmd + opt + q on a mac). 3. starting in firefox 71. before firefox 66, the letter in this shortcut was s. toolbox these shortcuts work whenever the toolbox is open, no matter which tool ...
...n start stepping through attributes. ...
...And 5 more matches
panel - Archive of obsolete content
dit-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline. 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. it means that the panel's about // to be shown. ...
...e the newline. 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. it means that the panel's about // to be shown. // // set the
focus to the text area so the user can // just start typing. ...
...it-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline. text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); addon.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code. it means that the panel's about // to be shown. ...
...And 4 more matches
Finding window handles - Archive of obsolete content
run the snippets below from the scratchpad in environment > browser. recall that nsibasewindow -> nativehandle returns the following in the different operating systems: windows - hwnd mac os x - nswindow* linux - gdkwindow* (it will be gdkwindow* no matter what desktop/window manager) is in use, for explanation why see the article: standard os libraries - unix section) windows compone...
...acerequestor) .getinterface(ci.nsibasewindow); var gdkwindowptrstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); // types let guint32 = ctypes.uint32_t; let gdkwindow = ctypes.structtype('gdkwindow'); // https://developer.gnome.org/gdk3/stable/gdk3-windows.html#gdk-window-
focus var gdk_window_
focus = gdk.declare('gdk_window_
focus', ctypes.default_abi, ctypes.void_t, gdkwindow.ptr, guint32); // https://developer.gnome.org/gdk2/stable/gdk2-x-window-system-interaction.html#gdk-x11-get-server-time var gdk_x11_get_server_time = gdk.declare('gdk_x11_get_server_time', ctypes.default_abi, guint32, gdkwindow.ptr); var browserwindow_madeintogdkwinptr = gdkwindow.ptr(ctypes.uint...
...rver_time = gdk.declare('gdk_x11_get_server_time', ctypes.default_abi, guint32, gdkwindow.ptr); var browserwindow_madeintogdkwinptr = gdkwindow.ptr(ctypes.uint64(gdkwindowptrstring)); var rez_gst = gdk_x11_get_server_time(browserwindow_madeintogdkwinptr); console.info('rez_gst:', rez_gst, uneval(rez_gst)); // return is a number of ms since the computer (xserver) was on var rez_gwf = gdk_window_
focus(browserwindow_madeintogdkwinptr, rez_gst); console.info('rez_gwf:', rez_gwf, uneval(rez_gwf)); // return is void so this will be undefined gdk.close(); gtk+ components.utils.import('resource://gre/modules/services.jsm'); var browserwindow = services.wm.getmostrecentwindow('navigator:browser'); if (!browserwindow) { throw new error('no browser window found'); } var basewindow = browserwin...
...And 4 more matches
Tabbed browser - Archive of obsolete content
// check each tab of this browser instance var numtabs = tabbrowser.browsers.length; for (var index = 0; index < numtabs; index++) { var currentbrowser = tabbrowser.getbrowseratindex(index); if (url == currentbrowser.currenturi.spec) { // the url is already opened. select this tab. tabbrowser.selectedtab = tabbrowser.tabcontainer.childnodes[index]; //
focus *this* browser-window browserwin.
focus(); found = true; break; } } } // our url isn't open. open it now. if (!found) { var recentwindow = wm.getmostrecentwindow("navigator:browser"); if (recentwindow) { // use an existing browser window recentwindow.delayedopentab(url, null, null, null, null); } else { // no browser windo...
...opened tab regardless of which url/uri it displays. this assumes the tab is opened by your extension, not by some other browser component. we can do re-use an arbitrary tab by attaching a custom attribute to it when we first open it. later, when we want to re-use that tab, we iterate over all open tabs looking for one which has our custom attribute. if such a tab exists, we change its url/uri and
focus/select it. if no such tab exists (perhaps the user closed it or we never opened it in the first place), we create a new tab with our custom attribute. function openandreuseonetabperattribute(attrname, url) { var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); for (var found = false, index = 0, tabbr...
...open it now. var browserenumerator = wm.getenumerator("navigator:browser"); var tabbrowser = browserenumerator.getnext().gbrowser; // ...
...And 4 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
t applications (such as firefox) use a different autocomplete mechanism than the mozilla suite. the example below will create an autocomplete textbox that will search the user's history. ...
...whilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, 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, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select...
...mplete behavior will be disabled. you might use a script to change this attribute. if false, the default, autocomplete is enabled. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...And 4 more matches
listbox - Archive of obsolete content
istcell'); cell.setattribute('label', gems[i].price ); row.appendchild(cell); thelist.appendchild(row); } attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...y column. for richlistbox, this is new in firefox 3.5. suppressonselect type: boolean if this attribute is not specified, a select event is fired whenever an item is selected, either by the user or by calling one of the select methods. if set to true, the select event is never fired. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so in...
...ser, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...And 4 more matches
radiogroup - Archive of obsolete content
elated ] a group of radio buttons. only one radio button inside the group can be selected at a time. the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. ...
... be selected at a time. the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. ...
... label="red"/> <radio id="violet" label="green" selected="true"/> <radio id="yellow" label="blue"/> </radiogroup> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...And 4 more matches
richlistbox - Archive of obsolete content
can contain any content. you can click on any richlistitem element and use the keyboard to move the selection around. attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...column. for richlistbox, this is new in firefox 3.5. suppressonselect type: boolean if this attribute is not specified, a select event is fired whenever an item is selected, either by the user or by calling one of the select methods. if set to true, the select event is never fired. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so i...
...r, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...And 4 more matches
HTML: A good basis for accessibility - Learn web development
es on wai-aria and multimedia will look at other aspects of ui accessibility. one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard. you can try this out using our native-keyboard-accessibility.html example (see the source code). ...
... other aspects of ui accessibility. one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard. you can try this out using our native-keyboard-accessibility.html example (see the source code). open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab
focus start to move through the different
focusable elements. the
focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is
focused. you can then press enter/return to follow a
focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input. other form elements...
...e native keyboard accessibility you would have had if you'd just used <button> elements, plus you don't get any of the default css styling that buttons get. building keyboard accessibility back in adding such advantages back in takes a bit of work (you can see an example in our fake-div-buttons.html example — also see the source code). ...
...And 4 more matches
HTML: A good basis for accessibility - Learn web development
es on wai-aria and multimedia will look at other aspects of ui accessibility. one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard. you can try this out using our native-keyboard-accessibility.html example (see the source code). ...
... other aspects of ui accessibility. one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard. you can try this out using our native-keyboard-accessibility.html example (see the source code). open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab
focus start to move through the different
focusable elements. the
focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is
focused. you can then press enter/return to follow a
focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input. other form elements...
...e native keyboard accessibility you would have had if you'd just used <button> elements, plus you don't get any of the default css styling that buttons get. building keyboard accessibility back in adding such advantages back in takes a bit of work (you can see an example in our fake-div-buttons.html example — also see the source code). ...
...And 4 more matches
Basic native form controls - Learn web development
next we will look at the functionality of the different form controls, or widgets, in detail — studying all the different options available to collect different types of data. in this particular article we will look at the original set of form controls, available in all browsers since the early days of the web. prerequisites: basic computer literacy, and a basic understanding of html. ...
...ypes on github at single-line-text-fields.html (see it live also). here is a basic single line text field example: <input type="text" id="comment" name="comment" value="i'm a text field"> single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data to the server. the following screenshot shows default,
focused and disabled text input types in firefox 71 and safari on macos and in chrome 79 and edge 18 on windows 10. note: html5 enhanced the basic original single line text field by adding special values for the type attribute that enforce specific validation constraints and other features, for example specific to entering urls or numbers. we'll cover those in the next article, the html5 input type...
...riginal text control is the hidden input type. this is used to create a form control that is invisible to the user, but is still sent to the server along with the rest of the form data once submitted — for example you might want to submit a timestamp to the server stating when an order was placed. because it is hidden, the user can not see nor intentionally edit the value, it will never receive
focus, and a screen reader will not notice it either. <input type="hidden" id="timestamp" name="timestamp" value="1286705410"> if you create such an element, it's required to set its name and value attributes. the value can be dynamically set via javascript. the hidden input type should not have an associated label. other text input types, like search, url, and tel, were added with html5. those wil...
...And 4 more matches
A first splash into JavaScript - Learn web development
let's imagine your boss has given you the following brief for creating this game: i want you to create a simple guess the number type game. it should choose a random...
... the first line (line 2 above) declares a variable called userguess and sets its value to the current value entered inside the text field. we also run this value through the built-in number() constructor, just to make sure the value is definitely a number. next, we encounter our first conditional code...
...as higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower. the last three lines in the function (lines 26–28 above) get us ready for the next guess to be submitted. we add 1 to the guesscount variable so the player uses up their turn (++ is an incrementation operation — increment by 1), and empty the value out of the form text field and
focus it again, ready for the next guess to be entered. events at this point we have a nicely implemented checkguess() function, but it won't do anything because we haven't called it yet. ideally we want to call it when the "submit guess" button is pressed, and to do this we need to use an event. events are things that happen in the browser — a button being clicked, a page loading, a video playing...
...And 4 more matches
Useful string methods - Learn web development
equal to the thing on the right? or in this case, does the method call on the left return the result on the right? hint: in this case it is probably more useful to test whether the method call isn't equal to a certain result. ...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.
focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
...iable to equal to the final result, not the input. note: a hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them. ...
...And 4 more matches
Ember app structure and componentization - Learn web development
when we first navigated to our server at localhost:4200. however, we don't want this. instead, we want it to contain the todomvc app structure. to start with, delete the contents of application.hbs and replace them with the following: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" auto
focus > </section> note: aria-label provides a label for assistive technology to make use of — for example, for a screenreader to read out. this is useful in such cases where we have an <input> being used with no corresponding html text that could be turned into a label. when you save application.hbs, the development server you started earlier will automatically rebuild the app and refresh the ...
...d refresh the browser. the rendered output should now look like this: it doesn't take too much effort to get our html looking like a fully-featured to-do list app. ...
...do-list"> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>buy movie tickets</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input auto
focus class="edit" value="todo text"> </li> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>go to movie</label> <button type="button" class="destroy" title="remove this todo" ></button> ...
...And 4 more matches
Beginning our React todo list - Learn web development
ity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to introduce our todo list case study, and get the basic app structure and styling in place. our app's user stories in software development, a user story is an actionable goal from the perspective of the user. defining user stories before we begin our work will help us
focus our work. our app should fulfill the following stories: as a user, i can read a list of tasks. add a task using the mouse or keyboard. mark any task as completed, using the mouse or keyboard. delete any task, using the mouse or keyboard. edit any task, using the mouse or keyboard. view a specific subset of tasks: all tasks, only the active task, or only the completed tasks. we'll tackl...
...l. remember — this is actually javascript, not html! the aria-pressed attribute used in our earlier code snippet has a value of true because aria-pressed is not a true boolean attribute in the way checked is. ...
...tml { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-
focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-...
...And 4 more matches
Starting our Svelte Todo list app - Learn web development
piler, and most of them have already been ported to svelte. on github you can see which accessibility checks are still missing. you can check the meaning of each rule by clicking on its link. styling our markup let's make the todo list look a little better. ...
...tml { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-
focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-...
...th: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 { display: block; max-width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } .label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: center; } .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(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direc...
...And 4 more matches
Index
the developer how to download and organize the gecko sdk and create a new project in which components like weblock can be created. 110 starting weblock xpcom in this chapter, we begin to design and implement the web locking functionality itself. we have already created a module that implements most of the generic component functionality (e.g. registration). this chapter will
focus on the functionality that actually handles the web locking. 111 using xpcom components xpcom applications like the mozilla browser are sophisticated, modularized clients of xpcom components. in fact, virtually all of the functionality that you associate with a browser - navigation, window management, managing cookies, bookmarks, security, searching, rendering, and other featu...
...this node. 255 doaction this method performs the accessible action at the given zero-based index. action number 0 is the default action. 256 extendselection this method extends the current selection from its current accessible anchor node to this accessible. 257 firstchild returns first child node in accessible tree. 258
focusedchild
focused accessible child of node. 259 getaccessibleabove this method returns an accessible node geometrically above this one. 260 getaccessiblebelow this method returns an accessible node geometrically below this one. 261 getaccessiblerelated this method returns an accessible related to this one by the given relat...
...relationscount returns the number of accessible relations for this object. 284 role enumerated accessible role for the associated element. the values depend on platform because of variations. see the role_* constants in roles documentation. 285 setselected this method adds or remove this accessible to the current selection. 286 take
focus this method
focuses this accessible node. 287 takeselection this method selects this accessible node only. 288 value accessible value -- a number or a secondary text equivalent for this node. widgets that use role attribute can force a value using the valuenow attribute. 289 nsiaccessiblecaretmoveevent interfaces, interfaces:sc...
...And 4 more matches
nsISelectionController
selection_ime_convertedtext 16 selection_ime_selectedconvertedtext 32 selection_accessibility 64 for accessibility api usage. selection_find 128 num_selectiontypes 8 9 selection_anchor_region 0 selection_
focus_region 1 selection_whole_selection 2 num_selection_regions 2 3 selection_off 0 selection_hidden 1 hidden displays selection. selection_on 2 selection_disabled 3 selection_attent...
...d the selection one character cell forward in the document. this method is used internally for handling delete key. void characterextendfordelete(); parameters none. charactermove() will move the selection one character forward/backward in the document. this will also have the effect of collapsing the selection if the extend = pr_false the "point" of selection that is extended is considered the "
focus" point, or the last point adjusted by the selection. void charactermove( in boolean forward, in boolean extend ); parameters forward forward or backward if pr_false. extend should it collapse the selection or extend it? checkvisibility() checks if textnode and offsets are actually rendered in the current precontext. boolean checkvisibility( in nsidomnode node,...
...artoffset offset in dom to first char of textnode to test. endoffset offset in dom to last char of textnode to test. return value true if visible, false if not. completemove() will move page view to the top or bottom of the document this will also have the effect of collapsing the selection if the extend = pr_false the "point" of selection that is extended is considered the "
focus" point, or the last point adjusted by the selection. void completemove( in boolean forward, in boolean extend ); parameters forward forward or backward if pr_false. extend should it collapse the selection or extend it? completescroll() will move page view to the top or bottom of the document. void completescroll( in boolean forward ); parameters forwa...
...And 4 more matches
HTMLInputElement - Web APIs
the form. type string: returns / sets the element's type attribute, indicating the type of control to display. see type attribute of <input> for possible values. disabled boolean: returns / sets the element's disabled attribute, indicating that the control is not available for interaction. the input values will not be submitted with the form. ...
...he element's type attribute, indicating the type of control to display. see type attribute of <input> for possible values. disabled boolean: returns / sets the element's disabled attribute, indicating that the control is not available for interaction. the input values will not be submitted with the form. see also readonly auto
focus boolean: returns / sets the element's auto
focus attribute, which specifies that a form control should have input
focus when the page loads, unless the user overrides it, for example by typing in a different control. only one form element in a document can have the auto
focus attribute. it cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set
focus to a hidden control). required boolean: retu...
...h, tel, url, email, or password; otherwise it is ignored. properties not yet categorized defaultvalue string: returns / sets the default value as originally specified in the html that created this object. dirname string: returns / sets the directionality of the element. accesskey string: returns a string containing a single character that switches input
focus to the control when pressed. list read only htmlelement object: returns the element pointed by the list attribute. the property may be null if no html element found in the same tree. multiple boolean: returns / sets the element's multiple attribute, indicating whether more than one value is possible (e.g., multiple files). files filelist array: returns the lis...
...And 4 more matches
ARIA: application role - Accessibility
tains elements that do not conform to any other known html element or wai-aria widget. any sort of special interpretation of html structures and widgets should be suspended, and control should be completely handed over to the browser and web application to handle mouse, keyboard, or touch interaction. in this mode, the web author is completely responsible for handling any and all keyboard input,
focus management, and other interactions and cannot assume assistive technologies would do any processing on their end. if the web application encompassed by the application role contains parts that should be treated like normal web content, a role of document or article should be used. background for historic reasons, especially on windows, screen readers and some other assistive technologies (at) ...
...graphics, or landmark regions. for all of this to work, ats intercept almost all keyboard input and consume it themselves, letting nothing through to the browser or other user agent. to be able to interact with a web page, a standard set of widgets is recognized that, when pressing a certain key (usually the enter key) this mode is switched off. the screen reader mode, often called forms mode or
focus mode, lets all keyboard input go through to the browser again. escape is the most common way of switching back to browse mode. the application role is designed to provide a means for widgets that are not part of the standard set to be accessible for direct interaction in ats that use both browse and
focus modes for interacting with web content. associated wai-aria roles, states, and properties ...
... aria-label used to provide the name of the application or purpose of the widget that is being exposed. ...
...And 4 more matches
ARIA: feed role - Accessibility
tter, or even a list of related products on an ecommerce page. these streams can be limited or infinite, loading more content as the user scrolls. implementing the feed pattern allows a screen reader to reliably read and trigger the loading of feed content while in reading mode. a feed is a container element whose children are <article>s or have role article. each article within a feed should be
focusable, with tabindex of 0 or -1. an article should be scrolled into view when it, or a descendant element, receives
focus. if the addition of articles occupies the main browser thread, make sure to set aria-busy="true" on the feed itself, and make sure to set it back to false when processing ends, or the user may not see the updates. to ensure good user experience, avoid inserting or removing arti...
...of articles occupies the main browser thread, make sure to set aria-busy="true" on the feed itself, and make sure to set it back to false when processing ends, or the user may not see the updates. to ensure good user experience, avoid inserting or removing articles in the middle of a feed, load new articles before the user has reached the end of the feed, and provide keyboard commands for moving
focus among articles so that keyboard users can navigate through your feed. see keyboard interactions below. if the number of articles is known, set aria-setsize on the articles themselves. however, if the total number is extremely large, indefinite, or changes often, set aria-setsize="-1" to indicate that the size of the feed is not known. another feature of the feed pattern is skim reading: article...
...e and efficiently discern which articles they want to read. the feed pattern enables reliable assistive technology reading mode interaction by establishing the following interoperability agreement between the web page and assistive technologies: in the context of a feed, the web page code is responsible for: appropriate visual scrolling of the content based on which article contains dom
focus. loading or removing feed articles based on which article contains dom
focus. in the context of a feed, assistive technologies with a reading mode are responsible for: indicating which article contains the reading cursor by ensuring the article element or one of its descendants has dom
focus. providing reading mode keys that move dom
focus to the next and previous articles. p...
...And 4 more matches
<button>: The Button element - HTML: Hypertext Markup Language
the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role button permitted aria roles checkbox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab dom interface htmlbuttonelement attributes this element's attributes include the global attributes. auto
focus html5 this boolean attribute specifies that the button should have input
focus when the page loads. only one element in a document can have this attribute. autocomplete this attribute on a <button> is nonstandard and firefox-specific. unlike other browsers, firefox persists the dynamic disabled state of a <button> across page loads. setting autocomplete="off" on the button disables this feat...
...can have this attribute. autocomplete this attribute on a <button> is nonstandard and firefox-specific. unlike other browsers, firefox persists the dynamic disabled state of a <button> across page loads. setting autocomplete="off" on the button disables this feature; see bug 654072. disabled this boolean attribute prevents the user from interacting with the button: it cannot be pressed or
focused. firefox, unlike other browsers, persists the dynamic disabled state of a <button> across page loads. use the autocomplete attribute to control this feature. form html5 the <form> element to associate the button with (its form owner). the value of this attribute must be the id of a <form> in the same document. (if this attribute is not set, the <button> is associated with its ancestor <fo...
......
...And 4 more matches
Closures - JavaScript
if you try this code out, you'll see that it doesn't work as...
... ]; for (var i = 0; i < helptext.length; i++) { var item = helptext[i]; document.getelementbyid(item.id).on
focus = function() { showhelp(item.help); } } } setuphelp(); try running the code in jsfiddle. the helptext array defines three helpful hints, each associated with the id of an input field in the document. the loop cycles through these definitions, hooking up an on
focus event to each one that shows the associated help method. if you try this code out, you'll see that it doesn't work as expected. no matter what field you
focus on, the message about your age will be displayed. the reason for this is that the functions assigned to on
focus are closures; they consist of the function definition and the captured environment from the setuphelp function's scope. three ...
...nsist of the function definition and the captured environment from the setuphelp function's scope. three closures have been created by the loop, but each one shares the same single lexical environment, which has a variable with changing values (item). this is because the variable item is declared with var and thus has function scope due to hoisting. the value of item.help is determined when the on
focus callbacks are executed. because the loop has already run its course by that time, the item variable object (shared by all three closures) has been left pointing to the last entry in the helptext list. one solution in this case is to use more closures: in particular, to use a function factory as described earlier: function showhelp(help) { document.getelementbyid('help').innerhtml = help; } f...
...And 4 more matches
Adding windows and dialogs - Archive of obsolete content
ribute of the element is mandatory if you want the persist attribute to work. you can also set persistence programatically using the document.persist function: document.persist("xulschoolhello-some-checkbox", "checked"); persistent data is stored in the user profile, in the file localstore.rdf. you may need to modify or delete this file often when testing persistent data in your extension. ...
...ser profile, in the file localstore.rdf. you may need to modify or delete this file often when testing persistent data in your extension.
focus and tabbing moving through all input controls in a window using only the keyboard is an accessibility requirement. you can do this in most firefox windows by pressing the tab key. each tab key press moves you to the next control in the window, giving it
focus. in general, there's nothing you need to do in order to have good keyboard
focus management. firefox will automatically
focus the first input control in your window, and tab
focus advances in the order the items are found in the xul document. ...
...again, this should be used sparingly. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...
...And 3 more matches
XUL Events - Archive of obsolete content
changethe radiostatechange event is executed when the state of a <radio> element has changed.valuechangethe valuechange event is executed when the value of an element, <progress> for example, has changed. inherited dom events event description blur the opposite of the
focus event, the blur event is passed after an element loses the
focus. attribute: onblur change this event is sent when the value of the textbox is changed. the event is not sent until the
focus is moved to another element. attribute: onchange ...
... dommousescroll this event is sent when the mouse wheel is moved, whether it results in content being scrolled or not. the target of this event is the element that was under the mouse pointer when the mouse wheel was scrolled, similar to the click event.
focus the
focus event is sent to an element when it receives the
focus. once an element has the
focus, keyboard events are sent to it. the
focus can be changed by clicking on another element, by pressing tab to switch to the next element in the tab order sequence, or by pressing 'back tab' to switch
focus to the previous element in the tab order. attribute: ...
... the
focus event is sent to an element when it receives the
focus. once an element has the
focus, keyboard events are sent to it. the
focus can be changed by clicking on another element, by pressing tab to switch to the next element in the tab order sequence, or by pressing 'back tab' to switch
focus to the previous element in the tab order. attribute: on
focus keydown the keydown event is sent to an element that has the
focus while a key is pressed but not released. ...
...And 3 more matches
currentIndex - Archive of obsolete content
you cannot rely on this property to change or determine a tree selection, except for trees with seltype="single". ...
... you cannot rely on this property to change or determine a tree selection, except for trees with seltype="single". ...
... you cannot rely on this property to change or determine a tree selection, except for trees with seltype="single". ...
...And 3 more matches
Commands - Archive of obsolete content
ed and can be invoked without needing to know about the details of its implementation. commands provide a suitable way to abstract operations from the code. commands are especially useful for larger applications. for instance, in order to implement the clipboard menu commands, cut, copy and paste, you can use commands. if you did not use commands, you would need to figure out which field has the
focus, then check to ensure that the operation is suitable for that element. in addition, the menu commands would need to be enabled and disabled depending on whether the
focused element had selected text or not, and for paste operations, whether there is something suitable on the clipboard to paste. as you can see, this becomes complicated. by using commands, much of the work is handled for you. you ...
...on the clipboard to paste. as you can see, this becomes complicated. by using commands, much of the work is handled for you. you can use a command for any operation. mozilla uses them for almost every menu command. in addition, text fields and other widgets have a number of commands which they already support that you can invoke. you should use them when the operation depends on which element is
focused. a command is identified by its id attribute. mozilla uses the convention that command id's start with 'cmd_'. you will probably want to use the same id if a command is already being used, however, for your own commands, you can use any command id you wish. to avoid conflicts, you may wish to include the application name in the command id. a simple way of using commands is as follows: example...
...n object called a command dispatcher. this object locates a handler for a command. a handler for a command is called a controller. so, essentially, when a command is invoked, the command dispatcher locates a controller which can handle the command. you can think of the command element as a type of controller for the command. the command dispatcher locates a controller by looking at the currently
focused element to see if it has a controller which can handle the command. xul elements have a controllers property which is used to check. you can use the controllers property to add your own controllers. you might use this to have a listbox respond to cut, copy and paste operations, for instance. an example of this will be provided later. by default, only textboxes have a controller that does anythi...
...And 3 more matches
XPCOM Examples - Archive of obsolete content
tasources. the nsiwindowdatasource interface has a function getwindowforresource, which can be used to get the window given a resource. in the earlier example, we generated the list of windows and added it to a menu via a template. the template generates an id attribute on each menuitem element. the value of this attribute can be used as the resource. ...
...template. the template generates an id attribute on each menuitem element. the value of this attribute can be used as the resource. that means that in order to switch the window
focus, we need to do the following: determine the element that the user clicked on. get the value of the id attribute from the element. pass this value to getwindowforresource() to get a window object. switch the
focus to this window. ...
...er to switch the window
focus, we need to do the following: determine the element that the user clicked on. get the value of the id attribute from the element. pass this value to getwindowforresource() to get a window object. switch the
focus to this window. ...
...And 3 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
cument. the dom is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment). 103 dtls (datagram transport layer security) dtls, intro datagram transport layer security (dtls) is a protocol used to secure datagram-based communications. it's based on the stream-
focused transport layer security (tls), providing a similar level of security. as a datagram protocol, dtls doesn't guarantee the order of message delivery, or even that messages will be delivered at all. however, dtls gains the benefits of datagram protocols, too; in particular, the lower overhead and reduced latency. 104 dtmf (dual-tone multi-frequency signaling) dtmf, glossary, webrtc...
...ained by microsoft for legacy enterprise uses. microsoft edge is currently the default windows browser. 270 middleware codingscripting, glossary middleware is a (loosly defined) term for any software or service that enables the parts of a system to communicate and manage data. it is the software that handles communication between components and input/output, so developers can
focus on the specific purpose of their application. 271 mitm glossary, security a man-in-the-middle attack (mitm) intercepts a communication between two systems. for example, a wi-fi router can be compromised. 272 mixin codingscripting, glossary, method, mixin, property a mixin is a class or interface in which some or all of its methods and/or properties are u...
...lossary, method, mixin, property a mixin is a class or interface in which some or all of its methods and/or properties are unimplemented, requiring that another class or interface provide the missing implementations. 273 mobile first design, glossary, layout, layout mobile mobile first, a form of progressive enhancement, is a web-development and web-design approach that
focuses on prioritizing design and development for mobile screen sizes over design and development for desktop screen sizes. the rationale behind the mobile-first approach is to provide users with good user experiences at all screen sizes—by starting with creating a user experience that works well on small screens, and then building on top of that to further enrich the user experience as the screen s...
...And 3 more matches
UI pseudo-classes - Learn web development
e of pseudo-classes and pseudo-elements. objective: to understand what parts of forms are hard to style, and why; to learn what can be done to customize them. what pseudo-classes do we have available? the original pseudo-classes available to us (as of css 2.1) that are relevant to forms are: :hover: selects an element only when it is being hovered over by a mouse pointer. :
focus: selects an element only when it is
focused (i.e. by being tabbed to via the keyboard). :active: selects an element only when it is being activated (i.e. while it is being clicked on, or when the return/enter key is being pressed down in the case of a keyboard activation). these basic pseudo-classes should be familiar to you now. more recently, the css selector level 3 and css basic ui level 3...
...y — when the page first loads, "required" is shown, along with a red cross and border. when you've typed in a valid age (i.e. in the range of 12-120), the input turns valid. if however, you then change the age entry to one that is out of range, the "outside allowable value range" message then pops up in place of "required". note: to enter an invalid/out-of-range value, you'll have to actually
focus the form and type it in using the keyboard. the spinner buttons won't let you increment/decrement the value outside the allowable range. styling enabled and disabled inputs, and read-only and read-write an enabled element is an element that can be activated; it can be selected, clicked on, typed into, etc. a disabled element on the other hand cannot be interacted with in any way, and its data...
...s look at what a form might look like (see readonly-confirmation.html for the live example; also see the source code). a fragment of the html is as follows — note the readonly attribute: <div> <label for="name">name: </label> <input id="name" name="name" type="text" value="mr soft" readonly> </div> if you try the live example, you'll see that the top set of form elements are not
focusable, however, the values are submitted when the form is submitted. we've styled the form controls using the :read-only and :read-write pseudo-classes, like so: input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; bo...
...And 3 more matches
Advanced text formatting - Learn web development
tion list in the output field. you could try using your own terms and descriptions if you like. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. playable code <h2>live output</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: 100px; width: 95%"> bacon the glue that binds the world together. eggs the glue that binds the cake together. coffee the drink that gets the world running in the morning. a light brown color.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> ...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.
focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
...tp://www.affirmationsforpositivethinking.com for "the need to eliminate negative self talk". if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. playable code 2 <h2>live output</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: 150px; width: 95%"> <p>hello and welcome to my motivation page. as confucius' quotes site says:</p> <p>it does not matter how slowly you go as long as you do not stop.</p> <p>i also love the concept of positive thinking, and the need to eliminate negative self talk (as mentioned in aff...
...And 3 more matches
Getting started with HTML - Learn web development
is should give the line italic text formatting! see your changes update live in the output area. if you make a mistake, you can clear your work using the reset button. if you get really stuck, press the show solution button to see the answer. playable code <h2>live output</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="playable-code" style="min-height: 100px;width: 95%"> this is my text. </textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font...
...tcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.
focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
...emember that you need to include a space between the element name, and between each attribute. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. ...
...And 3 more matches
Arrays - Learn web development
me — $current item price", for example "shoes — $23.99" in each case, so the correct information for each item is printed on the invoice. this is just simple string concatenation, which should be familiar to you. ...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.
focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
... input to the start of the array. this can be retrieved using searchinput.value. add a line below the // number 2 comment that removes the value currently at the end of the array. ...
...And 3 more matches
Styling Vue components with CSS - Learn web development
processed by webpack. this means we can use css pre-processors (like scss) or post-processors (like postcss). while this tutorial will not be using such tools, it's good to know that when including such code in the assets folder it will be processed automatically. ...
...tml { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-
focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; co...
...zing the #app element and its children. ...
...And 3 more matches
Mozilla accessibility architecture
1. intro this document is for people who wish to understand the architecture of mozilla's accessibility api module, which provides support for platform accessibility apis. accessibility apis are used by 3rd party software like screen readers, screen magnifiers, and voice dictation software, which need information about document content and ui controls, as well as important events like changes of
focus. mozilla supports two accessibility apis: microsoft active accessibility (msaa) on windows and accessibility tool kit (atk) on linux and unix. we do not currently support the carbon accessibility model for apple's os x. please note, the documentation for implementing an msaa server has moved. you may also wish to read gecko info for windows accessibility vendors, a primer for vendors of 3rd party...
...ant and interfaces names. given that there is a fair amount of commonality between accessibility api toolkits, it made sense to write of the code in a cross platform manner, and then deal with the platform differences on a consistent manner. the shared code makes itself available to the toolkit-specific code via generic xpcom interfaces that return information about objects we want to expose. all
focusable nodes, tables and text have accessibility interfaces. we call these objects "accessible nodes". each of these accessible nodes supports at minimum the generic cross-platform accessibility interface nsiaccessible (which provides a text name, enumerated role identifier and a set of state flags) and sometimes additional interfaces. for example, tables support nsiaccessibletable, text supports n...
...oach is that accessibility.dll/libaccessibility.so does not need get loaded until the accessibility service gets used, and for most users it is never loaded. all other accessibles for the individual objects are created on demand as well. the assistive technology can choose to get the entire tree by using a depth- or breadth- first search, it can choose to get accessibles only based on events like
focus, or it can get the accessible at a given point on the screen. no matter how the assistive technology client requests the data, the accessible for a given node is only created once. we use the accessibility cache to retrieve accessibles that have already been created for a given dom node. this tree traversal is accomplished via toolkit-specific calls which end up as calls into nsiaccessible method...
...And 3 more matches
source-editor.jsm
ring aeventtype, function acallback); void removeeventlistener(string aeventtype, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(); boolean undo(); display management operations void
focus(); number gettopindex(); boolean has
focus(); void settopindex(number atopindex); content management operations number getcharcount(); string getindentationstring(); string getlinedelimiter(); number getlinecount(); number getlineend(number alineindex, boolean aincludedelimiter); number getlinestart(number a...
...er false sourceeditor.defaults.tabsize 4 sourceeditor.defaults.theme sourceeditor.themes.mozilla sourceeditor.defaults.undolimit 200 event name constants these constants provide the names of the editor events for which you can listen. constant value description sourceeditor.events.blur "blur" fired when the editor loses
focus. sourceeditor.events.breakpoint_change "breakpointchange" fired when a new breakpoint is added, or when an existing breakpoint is removed. this happens both when the api is used to make the change or when the ui is used to do it. sourceeditor.events.context_menu "contextmenu" fired when the editor's context menu is invoked, but before it's opened. sourceed...
...nge or when the ui is used to do it. sourceeditor.events.context_menu "contextmenu" fired when the editor's context menu is invoked, but before it's opened. sourceeditor.events.dirty_changed "dirtychanged" fired when the dirty state of the editor is changed. the dirty state indicates whether or not there are unsaved changes to the text. sourceeditor.events.
focus "
focus" fired when the editor gains
focus. sourceeditor.events.mouse_move "mousemove" fired when the user moves the mouse over a line annotation. sourceeditor.events.mouse_out "mouseout" fired when the mouse pointer leaves a line annotation. sourceeditor.events.mouse_over "mouseover" fired when the mouse pointer enters a line annotation. ...
...And 3 more matches
HTMLTextAreaElement - Web APIs
ltextareaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties accesskey string: returns / sets the element's accesskey attribute. autocapitalize string: returns / sets the element's capitalization behavior for user input. valid values are: none, off, characters, words, sentences. autocomplete auto
focus boolean: returns / sets the element's auto
focus attribute, indicating that the control should have input
focus when the page loads cols unsigned long: returns / sets the element's cols attribute, indicating the visible width of the text area. defaultvalue string: returns / sets the control's default value, which behaves like the node.textcontent property. disab...
...ap html attribute, indicating how the control wraps text. htmltextareaelement.labelsread only nodelist: returns a list of label elements associated with this element. the two properties tabindex and accesskey are inherited from htmlelement from html5 on, but were defined on htmltextareaelement in dom level 2 html and earlier specifications. methods blur() removes
focus from the control; keystrokes will subsequently go nowhere.
focus() gives
focus to the control; keystrokes will subsequently go to this element. select() selects the contents of the control. setrangetext() replaces a range of text in the element with new text. setselectionrange() selects a range of text in the element (but does not
focus it). ...
...o the user. if there are problems, it fires a cancelable invalid event at the element, and returns false; if there are no problems, it returns true. setcustomvalidity(domstring) sets a custom validity message for the element. if this message is not the empty string, then the element is suffering from a custom validity error, and does not validate. the two methods blur() and
focus() are inherited from htmlelement from html5 on, but were defined on htmltextareaelement in dom level 2 html and earlier specifications. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input event fires when the value of an <input>, <select>, or <textarea> element has been changed. examples autogrowing...
...And 3 more matches
The HTML DOM API - Web APIs
, for example to draw on top of them. management of media connected to the html media elements (<audio> and <video>). dragging and dropping of content on webpages. access to the browser navigation history supporting and connective interfaces for other apis such as web components, web storage, web workers, websocket, and server-sent events. html dom concepts and usage in this article, we'll
focus on the parts of the html dom that involve engaging with html elements. discussion of other areas, such as drag and drop, websockets, web storage, etc. can be found in the documentation for those apis. structure of an html document the document object model (dom) is an architecture that describes the structure of a document; each document is represented by an instance of the interface document. ...
... accessing various information provided by the http headers when loading the page, such as the location from which the document was loaded, cookies, modification date, referring site, and so forth. access to lists of elements in the document's <head> block and body, as well as lists of the images, links, scripts, etc. contained in the document. support for interacting with the user by examining
focus and by executing commands on editable content. event handlers for document events defined by the html standard to allow access to mouse and keyboard events, drag and drop, media control, and more. event handlers for events that can be delivered to both elements and documents; these presently include only copy, cut, and paste actions. html element interfaces the element interface has been fur...
...ments both present audiovisual media. the corresponding types, htmlaudioelement and htmlvideoelement, are both based upon the common type htmlmediaelement, which in turn is based upon htmlelement and so forth. htmlmediaelement defines the methods and properties held in common between audio and video elements. these element-specific interfaces make up the majority of the html dom api, and are the
focus of this article. to learn more about the actual structure of the dom, see introduction to the dom. html dom target audience the features exposed by the html dom are among the most commonly-used apis in the web developer's arsenal. all but the most simple web applications will use some features of the html dom. html dom api interfaces the majority of the interfaces that comprise the html dom a...
...And 3 more matches
Window.open() - Web APIs
tions as described: from the same domain+port reopen with same name will access the previously created window. google chrome (55.0.2883.87 m ) on the other hand will do it only from the same parent (as if the window was created dependent, which is the "opener"). this is a wide limitation and generates unbelievable complexity of development. firefox (51.) gets the handle but cannot run any element.
focus() while chrome can run
focus() from opener to child but not between siblings nor, reverse, from child to opener. this function is the lonely key to get back the handle on a window if the developer has access only to its name (the name can be saved with cookies or local storage but not the window object handle). for now 10/01/2017 the differencies of behavior found recently have not still been tes...
...to the window object in memory does not exist or if such pointer exists but the window was closed */ { windowobjectreference = window.open("http://www.spreadfirefox.com/", "promotefirefoxwindowname", "resizable,scrollbars,status"); /* then create it. the new window will be created and will be brought on top of any other window. */ } else { windowobjectreference.
focus(); /* else the window reference must exist and the window is not closed; therefore, we can bring it back on top of any other window with the
focus() method. there would be no need to re-create the window or to reload the referenced resource. */ }; } </script> (...) <p><a href="http://www.spreadfirefox.com/" target="promotefirefoxwindowname" onclick="openffpromotion...
...e situations, therefore re-usable in scripts and webpages: <script type="text/javascript"> var windowobjectreference = null; // global variable function openrequestedpopup(url, windowname) { if(windowobjectreference == null || windowobjectreference.closed) { windowobjectreference = window.open(url, windowname, "resizable,scrollbars,status"); } else { windowobjectreference.
focus(); }; } </script> (...) <p><a href="http://www.spreadfirefox.com/" target="promotefirefoxwindow" onclick="openrequestedpopup(this.href, this.target); return false;" title="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> you can also make such function able to open only 1 secondary window and to reuse such single secondary window...
...And 3 more matches
ARIA: textbox role - Accessibility
"/> <!-- 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. ...
...rea id="txtboxmultiline" required></textarea> where a text field is read-only, indicated this by setting aria-readonly="true" on the element. associated aria properties aria-activedescendent attribute taking as it's value the id of is either a descendant of the element with dom
focus or is a logical descendant as indicated by the aria-owns attribute, it indicates when that element has
focus, when it is part of a composite widget such as a combobox. for example, in a combobox,
focus may remain on the textbox while the value of aria-activedescendant on the textbox element refers to a descendant of a popup listbox that is controlled by the textbox.this attribute must be updated programmatically as the
focus changes. aria-autocomplete attribute indicates whether and how the user's inp...
... defaults to false, the user expectation is that the control is a single line text box, and enter or return submits the form. aria-placeholder attribute represents a hint (word or phrase) to the user about what to enter into the text field. ...
...And 3 more matches
outline - CSS: Cascading Style Sheets
m borders in the following ways: outlines never take up space, as they are drawn outside of an element's content. according to the spec, outlines don't have to be rectangular, although they usually are. as with all shorthand properties, any omitted sub-values will be set to their initial value. ...
... are drawn outside of an element's content. according to the spec, outlines don't have to be rectangular, although they usually are. as with all shorthand properties, any omitted sub-values will be set to their initial value. accessibility concerns assigning outline a value of 0 or none will remove the browser's default
focus style. if an element can be interacted with it must have a visible
focus indicator. ...
...s content. according to the spec, outlines don't have to be rectangular, although they usually are. as with all shorthand properties, any omitted sub-values will be set to their initial value. accessibility concerns assigning outline a value of 0 or none will remove the browser's default
focus style. if an element can be interacted with it must have a visible
focus indicator. provide obvious
focus styling if the default
focus style is removed. ...
...And 3 more matches
disabled - HTML: Hypertext Markup Language
the disabled attribute is supported by <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <input>. ...
... the disabled attribute is supported by <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <input>. ...
... the disabled attribute is supported by <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <input>. this boolean disabled attribute indicates that the user cannot interact with the control or it's descendant controls. ...
...And 3 more matches
Updating Commands - Archive of obsolete content
s described below. command updaters a command updater is a feature of the commandset element which allows it to update commands when certain events happen. you will need to think about when a command is valid and when it is not. in addition, you will need to consider when the state could change and when the commands should be updated. for example, the paste command is valid when a textbox has the
focus and there is something on the clipboard to paste. the command will become enabled whenever a textbox is
focused and when the clipboard contents change. a command updater will listen for these situations and code can be executed which enables and disables commands as necessary. a simple command updater looks like this: <commandset id="updatepasteitem" commandupdater="true" ...
...re is something on the clipboard to paste. the command will become enabled whenever a textbox is
focused and when the clipboard contents change. a command updater will listen for these situations and code can be executed which enables and disables commands as necessary. a simple command updater looks like this: <commandset id="updatepasteitem" commandupdater="true" events="
focus" oncommandupdate="goupdatecommand('cmd_paste');"/> a command updater is indicated by using the commandupdater attribute, which should be set to true. the events attribute is used to list the events that the command updater listens for. you can specify multiple events by separating them with commas. in the example above, the command updater listens for the
focus event. this causes com...
...md_paste');"/> a command updater is indicated by using the commandupdater attribute, which should be set to true. the events attribute is used to list the events that the command updater listens for. you can specify multiple events by separating them with commas. in the example above, the command updater listens for the
focus event. this causes commands to be updated when an element receives the
focus. when a
focus event occurs, the code in the oncommandupdate attribute is called. in the example, the goupdatecommand method is called which is a function provided by the globaloverlay.js script described earlier. it will update the command and enable or disable necessary buttons and menu items. the code behind it is fairly simple. it just gets the necessary controller, calls its iscommandenabled ...
...And 2 more matches
label - Archive of obsolete content
more information is available in the xul tutorial. ...
...="email"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. control type: id this attribute specifies the id of the element with which the label is associated. when the user clicks on the label, the associated element is given
focus. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side ...
...the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...And 2 more matches
menulist - Archive of obsolete content
ed in the menulist. the currently selected choice is displayed on the menulist element. to create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements. the command event may be used to execute code when the menulist selection changes. more information is available in the xul tutorial. ...
...f this attribute is false, the selection is never updated to match the text box. this attribute applies only to editable menulists. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...items, is normally preferred to use of the attribute, as it may need to update additional state. editable type: boolean indicates that the value of the menulist can be modified by typing directly into the value field. this is rendered as a textbox with a drop-down arrow beside it. the user may enter text into the textbox or select one of the choices by clicking from the drop-down.
focused type: boolean this attribute is true if the element is
focused. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable...
...And 2 more matches
radio - Archive of obsolete content
dio button within the same radiogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or keyboard. other radio buttons in the same group are turned off. a label, specified with the label attribute may be added beside the radio button. more information is available in the xul tutorial. ...
...the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...s allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.
focused type: boolean this attribute is true if the element is
focused. group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group. only one button from each group can be checked at a time. if the user selects one the buttons, the others in the group are unchecked. image type: uri the uri of the image to appear...
...And 2 more matches
tree - Archive of obsolete content
label="ba"/> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
... to store tree state information. this is used to hold which tree items are open and which items are collapsed. this information will be remembered for the next time the xul file is opened. if you do not specify this attribute, state information will be stored in the local store (rdf:local-store). tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. treelines type: boolean when set to true, lines are drawn connecting the lines in the tree; when false, the lines are not drawn. this is false by default. properties accessibletype type: integer a value indicating the type of accessibility object for the e...
...ew will not be available, since there are no dom nodes to retrieve. in newer versions of mozilla, the contentview property is actually a synonym for the view property, since the two interfaces are flattened together into a single interface in javascript. this property is read-only. currentindex type: integer set to the row index of the tree caret in the tree. for trees with
focus, the caret's position is indicated by the
focus ring, but un
focused trees won't show a
focus ring, naturally. for un
focused trees, the (undrawn) caret's position can still be obtained by this property. if the caret isn't present for any row (for example, because the tree has never been
focused), the value will be -1. you cannot rely on this property to change or determine a tree selection, e...
...And 2 more matches
Client-side form validation - Learn web development
ific data format is required for your data). this is called form validation. when you enter data, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application. validation done in the browser is called client-side validation, while validation done on the server is called server-side validation. in this chapter we are
focusing on client-side validation. if the information is correctly formatted, the application allows the data to be submitted to the server and (usually) saved in a database; if the information isn't correctly formatted, it gives the user an error message explaining what needs to be corrected, and lets them try again. we want to make filling out web forms as easy as possible. so why do we insist on ...
...t to have a red dashed border when it is invalid and a more subtle solid black border when valid. we also added a background gradient when the input is required and invalid. try out the new behavior in the example below: note: you can find this example live on github as fruit-validation.html (see also the source code.) try submitting the form without a value. note how the invalid input gets
focus, a default error message ("please fill out this field") appears, and the form is prevented from being sent. the presence of the required attribute on any element that supports this attribute means the element matches the :required pseudoclass whether it has a value or not. if the <input> has no value, the input will match the :invalid pseudoclass. note: for good user experience, indicate to th...
... note: you can find this example live on github as full-example.html (see also the source code.) validating forms using javascript you must use javascript if you want to take control o...
...And 2 more matches
Aprender y obtener ayuda - Learn web development
d tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish.. effective learning let's move straight on and think about effective learning. different learning methods it is interesting to consider that there are two main ways in which your brain learns things —
focused and diffuse learning:
focused learning is what you might more traditionally associate with academic subjects. you concentrate deeply on a low-level topic and solving the specific problems that it brings. you are
focused on a narrow area. diffuse learning is more to do with high-level thinking around a wider area. you let your mind wander more widely, and seemingly make random connections be...
...der more widely, and seemingly make random connections between different things. this is more the kind of thinking you do while you are in the shower, or during a coffee break. from the studies that neuroscientists have done on brain activity, we have found out that you can't really engage in both ways of learning — or thinking — at once. so which one should you choose? you might think that
focused learning is better for studying, but in reality, both are very important.
focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. it isn't however very good at getting an understanding of "the big picture",...
...astery of the techniques required — strengthening the neural pathways in your brain where that information is stored. it isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before. for that, you need diffuse thinking. this is the opposite of
focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then
focus on later, to strengthen them and start to really understand what they mean. this is why it is usually good to read some introductory material first to get a high-level understanding of an area before you ...
...And 2 more matches
Getting started with Ember - Learn web development
core html, css, and javascript languages, and have knowledge of the terminal/command line. a deeper understanding of modern javascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them. objective: to learn how to install ember, and create a starter app. introducing ember ember is a component-service framework that
focuses on the overall web application development experience, minimizing the trivial differences between applications — all while being a modern and light layer on top of native javascript. ember also has immense backwards and forwards compatibility to help businesses stay up to date with the latest versions of ember and latest community-driven conventions. what does it mean to be a component-servi...
...s a basic to-do tracking app implemented in many different technologies. here is the completed ember version, for reference. a note on todomvc and accessibility the todomvc project has a few issues in terms of adhering to accessible/default web practices. ...
...ble/default web practices. there are a couple of github issues open about this on the todomvc family of projects: add keyboard access to demos re-enable outline on
focusable elements ember has a strong commitment to being accessible by default and there is an entire section of the ember guides on accessibility on what it means for website / app design. that said, because this tutorial is a
focus on the javascript side of making a small web application, todomvc's value comes from providing pre-made css and recommended html structure, which eliminates small differences between implementations, allowing for easier comparison. later on in the tutorial, we'll
focus on adding code to our application to fix some of todomvc's biggest faults. installing the ember tooling ember uses a command-li...
...And 2 more matches
Understanding client-side JavaScript frameworks - Learn web development
ng as we near the end of our react journey (for now at least), we'll add the finishing touches to the main areas of functionality in our todo list app. this includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. we'll look at conditional ui rendering along the way. 6. accessibility in react in our final tutorial article, we'll
focus on (pun intended) accessibility, including
focus management in react, which can improve usability and reduce confusion for both keyboard-only and screen reader users. 7. react resources our final article provides you with a list of react resources that you can use to go further in your learning. ember tutorials note: ember tutorials last tested in may 2020, with ember/ember cli version 3.18...
...one of the major parts of functionality that we're still missing — the ability to edit existing todo items. to do this, we will take advantage of vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. we'll also look at adding functionality to delete todo items. 8.
focus management with vue refs we are nearly done with vue. the last bit of functionality to look at is
focus management, or put another way, how we can improve our app's keyboard accessibility. we'll look at using vue refs to handle this — an advanced feature that allows you to have direct access to the underlying dom nodes below the virtual dom, or direct access from one component to the internal ...
...date existing components. 5. advanced svelte: reactivity, lifecycle, accessibility in this article we will add the app's final features and further componentize our app. we will learn how to deal with reactivity issues related to updating objects and arrays. to avoid common pitfalls, we'll have to dig a little deeper into svelte's reactivity system. we'll also look at solving some accessibility
focus issues, and more besides. 6. working with svelte stores in this article we will show another way to handle state management in svelte — stores. stores are global global data repositories that hold values. components can subscribe to stores and receive notifications when their values change. 7. typescript support in svelte we will now learn how to use typescript in svelte applications. first...
...And 2 more matches
nsIDOMXULElement
dom/interfaces/xul/nsidomxulelement.idlscriptable represents a xul element within the dom. 66 introduced gecko 1.0 inherits from: nsidomelement last changed in gecko 1.9 (firefox 3) method overview void blur(); void click(); void docommand(); void
focus(); nsidomnodelist getelementsbyattribute(in domstring name, in domstring value); nsidomnodelist getelementsbyattributens(in domstring namespaceuri, in domstring name, in domstring value); attributes attribute type description align domstring gets/sets the value of the element's align attribute. allowevents boolean true if the element's allowevents attribute is the string "true", otherwise false. removes the attribute if you set it to false. boxobject nsiboxobject read only. gets or creat...
... the element's class attribute. collapsed boolean true if the element's collapsed attribute is the string "true", otherwise false. removes the attribute if you set it to false. contextmenu domstring gets/sets the value of the element's contextmenu attribute. controllers nsicontrollers read only. returns an nsicontrollers object that additional controllers may be appended to so as to provide
focus-specific actions for commands. database nsirdfcompositedatasource read only. returns the template builder's database, if it is an rdf template. datasources domstring gets/sets the value of the element's datasources attribute. dir domstring gets/sets the value of the element's dir attribute. flex domstring gets/sets the value of the element's flex attribute. flexgroup domstring gets/sets...
...read or write individual css style properties for the element. tooltip domstring gets/sets the value of the element's tooltip attribute. tooltiptext domstring gets/sets the value of the element's tooltiptext attribute. top domstring gets/sets the value of the element's top attribute. width domstring gets/sets the value of the element's width attribute. ...
...And 2 more matches
Page inspector keyboard shortcuts - Firefox Developer Tools
n start stepping through attributes. ...
...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 move to the previous element in the breadcrumbs bar left arrow left arrow left arrow move to the next element in the breadcrumbs bar right arrow right arrow right arrow
focus the html pane shift + tab shift + tab shift + tab
focus the css pane tab tab tab css pane th...
...left arrow left arrow left arrow move to the next element in the breadcrumbs bar right arrow right arrow right arrow
focus the html pane shift + tab shift + tab shift + tab
focus the css pane tab tab tab css pane these shortcuts work when you're in the inspector's css pane. ...
...And 2 more matches
DocumentOrShadowRoot.activeElement - Web APIs
the activeelement read-only property of the document and shadowroot interfaces returns the element within the dom or shadow dom tree that currently has
focus. often activeelement will return a htmlinputelement or htmltextareaelement object if it has the text selection at the time. if so, you can get more detail by using the object's selectionstart and selectionend properties. other times the
focused element might be a <select> element (menu) or an <input> element, of type "button", "checkbox", or "radio". ...
...n activeelement will return a htmlinputelement or htmltextareaelement object if it has the text selection at the time. if so, you can get more detail by using the object's selectionstart and selectionend properties. other times the
focused element might be a <select> element (menu) or an <input> element, of type "button", "checkbox", or "radio". typically a user can press the tab key to move the
focus around the page among
focusable elements, and use the space bar to activate one (that is, to press a button or toggle a radio button). ...
...he object's selectionstart and selectionend properties. other times the
focused element might be a <select> element (menu) or an <input> element, of type "button", "checkbox", or "radio". typically a user can press the tab key to move the
focus around the page among
focusable elements, and use the space bar to activate one (that is, to press a button or toggle a radio button). which elements are
focusable varies depending on the platform and the browser's current configuration. for example, on macos systems, elements that aren't text input elements are not typically
focusable by default. note:
focus (which element is receiving user input events) is not the same thing as selection (the currently highlighted part of the document). you can get the current selection using window.getselection(). ...
...And 2 more matches
HTMLOrForeignElement - Web APIs
specifications specification status comment html living standardthe definition of 'htmlorforeignelement' in that specification. living standard ini...
... specifications specification status comment html living standardthe definition of 'htmlorforeignelement' in that specification. living standard initial definition. ...
... specifications specification status comment html living standardthe definition of 'htmlorforeignelement' in that specification. living standard initial definition. ...
...And 2 more matches
Selection.setBaseAndExtent() - Web APIs
the setbaseandextent() method of the selection interface sets the selection to be a range including all or parts of two specified dom nodes, and any content located between them. syntax sel.setbaseandextent(anchornode,anchoroffset,
focusnode,
focusoffset) parameters anchornode the node at the start of the selection. anchoroffset the number of child nodes from the start of the anchor node that should be excluded from the selection. so for example, if the value is 0 the whole node is included. if the value is 1, the whole node minus the first child node is included. and so on.
focusnode the node at the end of the selection.
focusoffset the number of child nodes from the start of the
focus node that should be included in the selection. so for example, if the value is 0 the w...
...cluded. if the value is 1, the whole node minus the first child node is included. and so on.
focusnode the node at the end of the selection.
focusoffset the number of child nodes from the start of the
focus node that should be included in the selection. so for example, if the value is 0 the whole node is excluded. if the value is 1, the first child node is included. and so on. note: if the
focus position appears before the anchor position in the document, the direction of the selection is reversed — the caret is placed at the beginning of the text rather the end, which matters for any keyboard command that might follow. for example, shift + ➡︎ would cause the selection to narrow from the beginning rather than grow at the end. return value void. exceptions if anchoroffset is la...
... the direction of the selection is reversed — the caret is placed at the beginning of the text rather the end, which matters for any keyboard command that might follow. for example, shift + ➡︎ would cause the selection to narrow from the beginning rather than grow at the end. return value void. exceptions if anchoroffset is larger than the number of child nodes inside anchornode, or if
focusoffset is larger than the number of child nodes inside
focusnode, an indexsizeerror exception is thrown. examples in this example, we have two paragraphs containing spans, each one containing a single word. the first one is set as the anchornode and the second is set as the
focusnode. we also have an additional paragraph that sits in between the two nodes. next, we have two form inputs that all...
...And 2 more matches
Window - Web APIs
s to install and remove pkcs11 modules. window.returnvalue the return value to be returned to the function that called window.showmodaldialog() to display the window as a modal dialog. methods this interface inherits methods from the eventtarget interface and implements methods from windoworworkerglobalscope and eventtarget. window.alert() displays an alert dialog. window.blur() sets
focus away from the window. window.cancelanimationframe() enables you to cancel a callback previously scheduled with window.requestanimationframe. window.cancelidlecallback() enables you to cancel a callback previously scheduled with window.requestidlecallback. window.clearimmediate() cancels the repeated execution set using setimmediate. window.close() closes the current window. window.co...
...cancel a callback previously scheduled with window.requestidlecallback. window.clearimmediate() cancels the repeated execution set using setimmediate. window.close() closes the current window. window.confirm() displays a dialog with a message that the user needs to respond to. window.dump() writes a message to the console. window.find() searches for a given string in a window. window.
focus() sets
focus on the current window. window.getcomputedstyle() gets computed style for the specified element. computed style indicates the computed values of all css properties of the element. window.getdefaultcomputedstyle() gets default computed style for the specified element, ignoring author stylesheets. window.getselection() returns the selection object representing the selected item...
...oad while it is still in progress windoweventhandlers.onafterprint called when the print dialog box is closed. see afterprint event. windoweventhandlers.onbeforeprint called when the print dialog box is opened. see beforeprint event. windoweventhandlers.onbeforeunload an event handler property for before-unload events on the window. globaleventhandlers.onblur called after the window loses
focus, such as due to a popup. globaleventhandlers.onchange an event handler property for change events on the window. globaleventhandlers.onclick called after the any mouse button is pressed & released globaleventhandlers.ondblclick called when a double click is made with any mouse button. globaleventhandlers.onclose called after the window is closed globaleventhandlers.oncontextmenu called ...
...And 2 more matches
Using the link role - Accessibility
this technique demonstrates how to use the link role and describes the effect it has on browsers and assistive technology. the link role is used to identify an element that creates a hyperlink to a resource that is in the application or external. when this role is added to an element, tab can be used to change
focus to the link, and enter used to execute the link. note: where possible, it is recommended that you use a native <a> element rather than the link role, as native elements are more widely supported by older user agents and assistive technology. native <a> elements also support keyboard and
focus requirements by default, without need for additional customization. the tabindex attribute may optionally be used with this role to directly specify the position of the element in th...
...e user agent should do the following: expose the element as having a link role in the operating system's accessibility api. fire an accessible link event using the operating system's accessibility api if it supports it. assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce the text of the link or its label when it is
focused, along with the fact that it is a link. aria links should be included in the screen reader's “list links” function just like ordinary links, and actions in this dialogue list, such as “activate link” or “move to link”, should perform the same as they do with ordinary links. screen magnifiers may enlarge links. note: opinons may differ on how assistive technology should handle t...
...he information provided above is one of those opinions and therefore not normative. examples this example shows how to implement a fake link using a <span> element. this includes javascript to grab the location and handle navigating to the new location using window.open() via clicking, and using keyboard, css to give the desired visuals of a link, the tabindex="0" attribute to make it keyboard-
focussable, and role="link" to make it recognised as a link by assistive technology. this is a huge amount of work just to recreate something you've get for free using the <a> element, so you should really use that if possible. but this shows that it can be done. you should however note that there are still problems with this approach: it is very difficult to detect whether the target of the fake ...
...And 2 more matches
<textarea> - HTML: Hypertext Markup Language
ubmitted. rows and cols attributes to allow you to specify an exact size for the <textarea> to take. setting these is a good idea for consistency, as browser defaults can differ. default content entered between the opening and closing tags. <textarea> does not support the value attribute. the <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, auto
focus, disabled, placeholder, readonly, and required. attributes this element includes the global attributes. autocapitalize this is a non-standard attribute supported by webkit on ios (therefore nearly all browsers running on ios, including safari, firefox, and chrome), which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. the no...
...ete attribute is not specified on a <textarea> element, then the browser uses the autocomplete attribute value of the <textarea> element's form owner. the form owner is either the <form> element that this <textarea> element is a descendant of or the form element whose id is specified by the form attribute of the input element. for more information, see the autocomplete attribute in <form>. auto
focus this boolean attribute lets you specify that a form control should have input
focus when the page loads. only one form-associated element in a document can have this attribute specified. cols the visible width of the text control, in average character widths. if it is specified, it must be a positive integer. if it is not specified, the default value is 20. disabled this boolean attribute i...
...other major browsers place the insertion point at the beginning of the text.notes a default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.ie full support yesopera full support ...
...And 2 more matches
Global attributes - HTML: Hypertext Markup Language
. the multiple aria-* attributes, used for improving accessibility. ...
...ould not be checked for spelling errors. style contains css styling declarations to be applied to the element. note that it is recommended for styles to be defined in a separate file or files. this attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes. ...
...e checked for spelling errors. style contains css styling declarations to be applied to the element. note that it is recommended for styles to be defined in a separate file or files. this attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes. ...
...And 2 more matches
Media - Progressive web apps (PWAs)
information: media the purpose of css is to specify how content is presented to the user. this presentation can take more than one form. for example, you are probably reading this on a device with a display. but you might also want to project it to a big screen for a large audience, or you might want to print it. these different media have different characteristics. css has the capacity to present content according to the media type. ...
...oice and settings at the time of printing. user interfaces css has some special properties for devices that support a user interface, like computer displays. these properties dynamically change the appearance of content as the user works with the interface. ...
.... user interfaces css has some special properties for devices that support a user interface, like computer displays. these properties dynamically change the appearance of content as the user works with the interface. there are five special selectors: selector selects e:hover any e element that has the pointer over it e:
focus any e element that has keyboard
focus e:active the e element that is involved in the current user action e:link any e element that is a hyperlink to a url that the user has not visited recently e:visited any e element that is a hyperlink to a url that the user has visited recently note: the information that can be obtained from the :visited selector is restricted in gecko 2.0. see privacy a...
...And 2 more matches
Creating annotations - Archive of obsolete content
{ width: 180px; height: 180px; margin: 10px; padding: 0px; } </style> </head> <body> <textarea rows='10' cols='20' id='annotation-box'> </textarea> </body> </html> save this inside data/editor as annotation-editor.html. annotation editor content script in the corresponding content script we do two things: handle a message from the add-on code by giving the text area
focus listen for the return key and when it is pressed, send the contents of the text area to the add-on. here's the code: var textarea = document.getelementbyid('annotation-box'); textarea.onkeyup = function(event) { if (event.keycode == 13) { self.postmessage(textarea.value); textarea.value = ''; } }; self.on('message', function() { var textarea = document.getelementbyid('annotati...
...ressed, send the contents of the text area to the add-on. here's the code: var textarea = document.getelementbyid('annotation-box'); textarea.onkeyup = function(event) { if (event.keycode == 13) { self.postmessage(textarea.value); textarea.value = ''; } }; self.on('message', function() { var textarea = document.getelementbyid('annotation-box'); textarea.value = ''; textarea.
focus(); }); save this inside data/editor as annotation-editor.js. updating main.js again now we'll update main.js again to create the editor and use it. first, import the panel module: var panels = require('sdk/panel'); then add the following code to the main() function: var annotationeditor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.html'), ...
...when the editor panel sends us its message we log the message and hide the panel. the only thing left is to link the editor to the selector. so edit the message handler assigned to the selector so that on receiving the show message we as...
...tor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) { console.log(this.annotationanchor); console.log(annotationtext); } annotationeditor.hide(); }, onshow: function() { this.postmessage('
focus'); } }); we create the editor panel but don't show it. we will send the editor panel the
focus message when it is shown, so it will give the text area
focus. when the editor panel sends us its message we log the message and hide the panel. the only thing left is to link the editor to the selector. so edit the message handler assigned to the selector so that on receiving the show message we assign the content of the message to the panel using a new property annotationanchor, and show the p...
Tabs - Archive of obsolete content
note: this page documents the jetpack prototype, which is no longer under active development. read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! in this class you can find information about the tabs in your firefox window. the namespace for this class is jetpack.tabs. ...
...ned from it and the blog post announcing the first sdk release for what we're up to next! in this class you can find information about the tabs in your firefox window. the namespace for this class is jetpack.tabs. blah(lengthstring
focusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring
focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded. on
focus()changing the
focus of a tab. methods open(urlstring)opens a new tab in your browser with a defined url. urlurl to be openedstring jetpack.tabs.open("htt...
...ostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded. on
focus()changing the
focus of a tab. methods open(urlstring)opens a new tab in your browser with a defined url. ...
...document is fully loaded. on
focus()changing the
focus of a tab. methods open(urlstring)opens a new tab in your browser with a defined url. urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); blah(lengthstring
focusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring
focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded. on
focus()changing the
focus of a tab. ...
PopupKeys - Archive of obsolete content
ss keys can be selected if the key pressed corresponds to the first letter of the label. other keys are ignored by the menu key listener, however, the event does not propagate to the main window. this is because the key listener is a capturing listener attached to the document. for a panel, the only key that is handled by default is the escape key to close the panel. the other keys do not apply.
focus in popups a menu does not take the keyboard
focus. the menu key listener described above captures key events on the document. thus, a key listener added to a <menupopup> will not receive any key events. instead, you must add a capturing key listener to the document or window if you want to listen for keys pressed within a menu. note that the last argument here is true to listen for events during ...
...the document or window if you want to listen for keys pressed within a menu. note that the last argument here is true to listen for events during the capturing phase of event propagation: window.addeventlistener("keypress", someaction, true); however, the default listener provides all the suitable responses to keys, so there shouldn't be a need to handle keys yourself. ...
...in a menu. note that the last argument here is true to listen for events during the capturing phase of event propagation: window.addeventlistener("keypress", someaction, true); however, the default listener provides all the suitable responses to keys, so there shouldn't be a need to handle keys yourself. while a menu is open, the
focus remains where it was before the menu was open. ...
...ents during the capturing phase of event propagation: window.addeventlistener("keypress", someaction, true); however, the default listener provides all the suitable responses to keys, so there shouldn't be a need to handle keys yourself. while a menu is open, the
focus remains where it was before the menu was open. for example,
focusing a textbox and opening the textbox's context menu keeps the
focus within the textbox. however, the capturing listener ensures that no key events reach the textbox while the menu is open. unlike with a menu, when a panel is opened, the
focus is removed from any element that has it. this allows the
focus to be shifted to elements within the panel. for more information about
focus handling within panels, see
focus in panels. ignoring keys the ignorekeys attribute...
Keyboard Shortcuts - Archive of obsolete content
creating a keyboard shortcut xul provides methods in which you can define keyboard shortcuts. ...
...box> </vbox> </window> now we can use those shortcuts to activate the commands. of course, the clipboard commands don't do anything anyway, as we haven't written those scripts. key events there are three keyboard events that may be used if the key related features described above aren't suitable. these events are: keypress called when a key is pressed and released when an element has the
focus. you might use this to check for allowed characters in a field. keydown called when a key is pressed down while an element has the
focus. note that the event will be called as soon as the key is pressed, even if it hasn't been released yet. keyup called when a key is released while an element has the
focus. key events are only sent to the element that has the
focus. typically, this will inc...
...in this case, you can add an event listener to the window tag. normally though, if you want to respond to keys globally, you will use a keyboard shortcut as described earlier. the key event object has two properties which hold the key that was pressed. ...
...ect has two properties which hold the key that was pressed. the keycode property holds the key code and may be compared to one of the constants from the key table earlier in this section. the charcode is used for printable characters and will hold the numeric unicode character code value for the key that was pressed. our find files example so far : source view next, we'll find out how to handle
focus and the selection. « previousnext » ...
command - Archive of obsolete content
atically disable the menu items and keyboard shortcuts. commands are identified by their id. if you include the script chrome://global/content/globaloverlay.js in your window, you can use the function godocommand function to invoke the command. using this function has the advantage that the command will be sent to the part of the ui which will respond to it. ...
...art of the ui which will respond to it. typically, this will be the currently
focused element. like a broadcaster, commands forward attributes to other elements. more information is available in the xul tutorial. see also: command attribute, commandset element attributes disabled, label, oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently
focused element: // first include chrome://global/content/globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command id="cmd_openhelp" oncommand="alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not. if ...
...lp');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listitem - Archive of obsolete content
h css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } current type: boolean this attribute will be set to true if the listitem is the current item. ...
...in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. ...
...nside a prefwindow. more information is available in the preferences system article. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: string you can make an item in a listbox a checkbox by setting this attribute to the value checkbox. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with ...
...dex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
tabs - Archive of obsolete content
thods | related ] a row of tabs. a tabs element should be placed inside a tabbox and should contain tab elements. nb: you can add some other elements to tabs such as button, but they will receive an index. activating them will not change the selectedindex. more information is available in the xul tutorial. ...
...closebutton classes respectively. disableclose type: boolean if this attribute is true the close button will be disabled. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
... be called when the close tab button is clicked. onnewtab not in firefox type: script code this script will be called when the new tab button is clicked. onselect type: script code this event is sent to the tabs element when this tab is changed. selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. set
focus type: boolean if true or omitted, the
focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard. if this attribute is false, the
focus does not change during navigation. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with...
...ex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
toolbarbutton - Archive of obsolete content
s expected to have an image. more information is available in the xul tutorial. relevant accessbility guidelines all toolbar functionality should be duplicated elsewhere in the application where possible, provide keyboard alternatives. where possible, duplicate functionality in a menu item or context menu. where not possible, make all toolbarbuttons
focusable by -moz-user-
focus: normal. attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabin...
... elements, they are placed right to left or bottom to top. this is reverse of the order in which they appear in the xul code. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...ox-orient style property. horizontal child elements of the element are placed next to each other in a row in the order that they appear in the xul source. vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. title type: string this functionality only applies when toolbarbutton is used in the customize toolbar dialog. the text that is displayed as a button's label when it's in the customize toolbar palette. it overrides the value of label, which is used if title is not set. this does no...
...type: string gets and sets the value of the orient attribute. tabindex type: integer gets and sets the value of the tabindex attribute. type type: string gets and sets the value of the type attribute. ...
Implementation Status - Archive of obsolete content
xforms-recalculate supported 4.3.3 xforms-revalidate supported 4.3.4 xforms-refresh supported 4.3.5 xforms-reset supported 4.3.6 xforms-next xforms-previous supported 4.3.7 xforms-
focus supported 4.3.8 xforms-help xforms-hint supported 4.3.9 xforms-submit partial see section 11.2 for more details 4.3.10 xforms-submit-serialize supported 4.4 notification events supported ...
... 4.4.8 xforms-required supported 4.4.9 xforms-optional supported 4.4.10 xforms-enabled supported 4.4.11 xforms-disabled supported 4.4.12 domactivate supported 4.4.13 dom
focusin supported 4.4.14 dom
focusout supported 4.4.15 xforms-select xforms-deselect supported 4.4.16 xforms-in-range supported 4.4.17 xforms-out-of-range supported 4.4.18 xforms-scroll-...
... 4.6.3 for select or select1 controls partial 4.6.4 for trigger controls supported 4.6.5 for submit controls supported 4.6.6 sequence: selection without value change supported 4.6.7 sequence: value change with
focus change supported 4.6.8 sequence: activating a trigger supported 4.6.9 sequence: submission supported 4.7 resolving id references in xforms unsupported 4.7.1 references to elements within a repeat element unsupported ...
...etter handle when @at evaluates to nan, and we do not generate unique values for xsd:id nodes. 303198; 339217; 10.4 delete partial we need to better handle when @at evaluates to nan 303198; 10.5 setindex supported 10.6 toggle supported 10.7 set
focus supported 10.8 dispatch supported 10.9 rebuild partial is dispatching events instead of calling directly 332231; 10.10 recalculate partial is dispatching events instead of calling directly. recalculate won't properly mark nodes as dirty if they were changed u...
XForms Select1 Element - Archive of obsolete content
lly group these pre-defined items by using the choices (see the spec) element to contain them. note, some representations of the select1 element do not support visual grouping. attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control. accesskey - used to specify the keyboard shortcut for
focusing this control. single-node binding special selection - this attribute, when set to 'open', allows the user to provide free entry to the list. possible values are open and closed, default is closed (see #representations section to refer if the attribute is supported for every representation). incremental - supported, default value is true properties selection - see corresponding attrib...
...l) radio group - used when appearance = 'full' (xhtml/xul) combobox displaying a combobox is the default representation (xhtml/xul). xhtml widget characteristics analogous widgets is <html:select/> visual grouping by choices element is supported selection="open" is supported if incremental attribute value is false, the bound node is updated when the select1 control is blurred (i.e. ...
...when the select1 control is blurred (i.e. loses
focus), otherwise it is updated upon item selection xul widget characteristics analogous widgets are <html:select/> and <xul:menulist/> visual grouping by choices element isn't implemented selection="open" attribute isn't supported if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e. loses
focus), otherwise it is updated upon item selection listbox the select1 is represented as listbox (xhtml/xul). characteristics analogous widgets are <html:select size="5"/> and <xul:listbox/> visual grouping by choices element isn't implemented selection="open" attribute isn't supported if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e. l...
...herwise it is updated upon item selection listbox the select1 is represented as listbox (xhtml/xul). characteristics analogous widgets are <html:select size="5"/> and <xul:listbox/> visual grouping by choices element isn't implemented selection="open" attribute isn't supported if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e. loses
focus), otherwise it is updated upon item selection radio group the select is represented as group of radios (xhtml/xul). characteristics appearance attribute contains the value full there are no analogue widgets in xhtml or in xul visual grouping by choices element is supported selection="open" attribute isn't supported if incremental attribute value is false then bound node is updated when i...
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
us standards organizations that affect how and why we do what we do. for example, in the accounting arena there is fasb (financial accounting standards board) and iasb (international accounting standards board). all businesses are expected and required to follow the guidelines set forth by the fasb. when auditors evaluate an organizations financial health, they do so by following the fasb rules.
focusing on the software development portion of an organization, there are numerous standards bodies that can affect development decisions. for example, if an organization is developing a web-based client, they may have to adhere to standards imposed by these organizations: ansi (american national standards institute ) atsc (advanced television systems committee ) ieee (institute of electrical and...
...by following the guidelines that have been put into place, organizations like aol can enhance user experience, interoperability, code reuse, shared resources, and goodwill while reducing costs. i will discuss each of these items in the following paragraphs. interoperability the key to interoperability is settling on a standard that has a ...
...eliminate redundant testing databases to ensure consistency and reliability. like the engineers, standardization also helps the qa engineers become highly proficient and capable of shifting from project to project. summary as organizations expand product development across multiple devices and product families, integration and compatibility must be a key requirement. adhering to a set of future-
focused international standards will make cross-functional integration possible. adopting standards will not only help an organizations end users enjoy a cross application experience; organizations will help themselves by giving development and quality assurance engineers the tools to become better equipped and flexible. lastly, by following a series of standards, organizations can more easily measure ...
...ollowing a series of standards, organizations can more easily measure progress, performance, and results across the organization. the most compelling dilemma is how an organization chooses to follow open external standards vs. a proprietary de facto standard. following proprietary de facto standards leaves an organization vulnerable and open to obsolescence when the owner of the de facto changes
focus or direction, or abandons the de facto altogether and renders the standard stagnate. on the other hand, by adopting open technology standards and participating in the development and direction of those standards, an organization is providing a path for future development, growth and revenue. original document information author(s): beth epperson last updated date: 7 november 2014 ...
Game monetization - Game development
eople that play your game, the higher the chance someone will pay, so your earnings heavily depend on your promotion activities. freemium games that feature iaps are often referred to a freemium — a freemium game can be acquired and played for free, but you can pay for extra (premium) features, virtual goods or other benefits. the word itself acquired negative connotations after big companies
focused on creating games, the main purpose of which was to get as much money from the players as possible instead of delivering a fun experience. the worst cases were when you could use real money to pay for getting advantages over other players, or when they restricted access to the next stages of the game unless the players paid. the term "pay to win" was coined and this approach is disliked by many...
...a freelance deal, but you're reusing the code and adding graphics provided by the client, sometimes implementing them as they instruct you. as an example if you've got a game where a player taps items of food, you could change the food to the client's products to give them advertising. prices in this model vary greatly depending on the brand, client, and amount of work you put in. other non-game
focused monetization strategies there are other ways you can earn money when building html5 games, and it doesn't even have to be game-related. selling resources if you're a graphic designer, you can sell the assets from the games you've created, or something brand new exclusively for that purpose at online shops like envato market. it's not much, but if you're a known designer it can be an extra pa...
...it's not much, but if you're a known designer it can be an extra passive stream of income. writing articles and tutorials it is possible to write articles about your games and even get paid for them. game promotion and monetization at the same time is a win-win, and if you don't abuse it with too much advertising the readers will enjoy reading them and as well as learning a thing or two. if you
focus on sharing the knowledge first and use your games just as the examples it should be ok. check out tuts+ game development or similar websites for writing opportunities. merchandise you can sell t-shirts, stickers or other gadgets — some devs make more money from the merchandise than from the games themselves, but it only works on very popular and recognizable games like angry birds. still, it ...
...t's why carefully managing your community is so important. it worked with the js13kgames competition — every participant got a free t-shirt, and some even gave back a few bucks to help keep it going in years to come. summary there are many ways to earn money — everything that applies to the "normal" aaa gaming world can be, more or less, applied to casual html5 games. you might however also
focus on selling licenses, doing branding, or earning on a revenue share basis from the advertisements. it's totally up to you which path you're going to follow. ...
WAI-ARIA basics - Learn web development
updated, e.g. via xmlhttprequest, or dom apis. enhancing keyboard accessibility: there are built-in html elements that have native keyboard accessibility; when other elements are used along with javascript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. where this is unavoidable, wai-aria provides a means to allow other elements to receive
focus (using tabindex). accessibility of non-semantic controls: when a series of nested <div>s along with css/javascript is used to create a complex ui-feature, or a native control is greatly enhanced/changed via javascript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. in these situations, aria can he...
... and links. generally, you are able to use the tab key to move between controls, the enter/return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a <select> box). ...
...ursor to move between options in a <select> box). however, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses
focusable controls for not quite the right purpose. you might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it. in terms of making non-
focusable code
focusable, wai-aria extends the tabindex attribute with some new values: tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. this is the most useful value of tabindex. tabindex="-1" — this allows not normally tabbable elements to receive
focus programmatically, e.g. via javascript, or as the target of links. we discu...
...he user, the value of this attribute on the different tabs is updated via javascript. aria-hidden — hides an element from being read out by a screenreader. as different tabs are selected by the user, the value of this attribute on the different tabs is updated via javascript. tabindex="0" — as we've removed the links, we need to give the list items this attribute to provide it with keyboard
focus. aria-setsize — this property allows you to specify to screenreaders that an element is part of a series, and how many items the series has. aria-posinset — this property allows you to specify what position in a series an element is in. along with aria-setsize, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. in many cases, browser...
Practical positioning examples - Learn web development
buttons, using a variety of other properties. add the following css: .info-box li { float: left; list-style-type: none; width: 150px; } .info-box li a { display: inline-block; text-decoration: none; width: 100%; line-height: 3; background-color: red; color: black; text-align: center; } finally for this section we'll set some styles on the link states. ...
...: .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: center; } finally for this section we'll set some styles on the link states. first, we'll set the :
focus and :hover states of the tabs to look different when they are
focused/hovered, providing users with some visual feedback. ...
...let's get going! first, of all, add the following rule to style the .panels <div> container. ...
...l again. so there you have it — a rather clever javascript-free way to create a toggling button effect. this will work in ie9 and above (the smooth transition will work in ie10 and above.) this effect does have some concerns — this is a bit of an abuse of form elements, as they weren't intended for this purpose. in addition, the effect is not great in terms of accessibility; the label is not
focusable by default, and the non-semantic use of the form elements could cause issues with screen readers. javascript and a link or button might be more appropriate, but it is still fun to experiment with. summary so that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to build some interesti...
Adding vector graphics to the Web - Learn web development
cached by the browser, resulting in faster loading times for any page that uses the image loaded in the future. cons you cannot manipulate the image with javascript. if you want to control the svg content with css, you must include inline css styles in your svg code. (external stylesheets invoked from the svg file take no effect.) you cannot restyle the image with css pseudoclasses (like :
focus). troubleshooting and cross-browser support for browsers that don't support svg (ie 8 and below, android 2.3 and below), you could reference a png or jpg from your src attribute and use a srcset attribute (which only recent browsers recognize) to reference the svg. this being the case, only supporting browsers will load the svg — older browsers will load the png instead: <img src="equilater...
...ing your svg inline saves an http request, and therefore can reduce a bit your loading time. you can assign classes and ids to svg elements and style them with css, either within the svg or wherever you put the css style rules for your html document. in fact, you can use any svg presentation attribute as a css property. inlining svg is the only approach that lets you use css interactions (like :
focus) and css animations on your svg image (even in your regular stylesheet.) you can make svg markup into a hyperlink by wrapping it in an <a> element. cons this method is only suitable if you're using the svg in only one place. duplication makes for resource-intensive maintenance. extra svg code increases the size of your html file. the browser cannot cache inline svg as it would cache regul...
...ils about other toys you can use in svg, and try those out too. this section is all about practising your research skills, and having some fun. if you get stuck and can't get your code working, you can always reset it using the reset button. ...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.
focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
Images in HTML - Learn web development
high), then experiment with other values to see what the effect is. set a title on the image. if you make a mistake, you can always reset it using the reset button. ...
...tcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.
focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
..., remove the title attribute, and put the text inside a <figcaption> element below the image. if you make a mistake, you can always reset it using the reset button. ...
...tcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.
focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
Making decisions in your code — conditionals - Learn web development
"june">june</option> <option value="july">july</option> <option value="august">august</option> <option value="september">september</option> <option value="october">october</option> <option value="november">november</option> <option value="december">december</option> </select> <h1></h1> <ul></ul> </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="playable-code" style="height: 400px;width: 95%"> const select = document.queryselector('select'); const list = document.queryselector('ul'); const h1 = document.queryselector('h1'); select.onchange = function() { const choice = select.value; // add conditional here createcalendar(days, choice); } func...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.
focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
... <label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> <option value="purple">purple</option> <option value="yellow">yellow</option> <option value="psychedelic">psychedelic</option> </select> <h1>this is my website</h1> </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="playable-code" style="height: 450px;width: 95%"> const select = document.queryselector('select'); const html = document.queryselector('.output'); select.onchange = function() { const choice = select.value; // add switch statement } function update(bgcolor, textcolor) { html.style.backgroundcolor = bgco...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.
focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
Accessibility information for UI designers and developers
fferences. for example, in this chart, it helps to add labels besides the colored chart lines:people who cannot see the difference between the colors, can use the labels instead. or in this one, you could consider using patterns besides colored areas: again, if people are unable to distinguish the colors, they can rely on the patterns instead. see also: understanding sc 1.4.3: contrast the
focus indicator users who navigate by keyboard (or other specialised input methods), rely on
focus styles to see where they are on the page. only one element has
focus at a given time, typically revealed by browsers with a dotted outline. css lets authors change what the
focus indicator look like, so you can design it to match branding. here's an example of someone tabbing through a footer, the focu...
... (or other specialised input methods), rely on
focus styles to see where they are on the page. only one element has
focus at a given time, typically revealed by browsers with a dotted outline. css lets authors change what the
focus indicator look like, so you can design it to match branding. here's an example of someone tabbing through a footer, the
focus moves around: note: don't remove the
focus indicator, as without it, users that can't or don't use a mouse cannot see where they are. it would be like removing the mouse indicator. see also: understanding sc 2.4.7:
focus visible be ready for resizing and custom styles on the web, users can use tools in their browser to make font sizes larger, or even provide custom css to meet their specific needs. ensure your design is flexible enough...
...ges with transitions and animations, note that some users could experience distraction, dizziness or nausea. pages with a parallax effect can particularly cause troubles. to help these users, you could offer a setting to turn off animations, or wrap the css in the prefers-reduce-motion media query. ...
...that some users could experience distraction, dizziness or nausea. pages with a parallax effect can particularly cause troubles. to help these users, you could offer a setting to turn off animations, or wrap the css in the prefers-reduce-motion media query. see also: understanding success criterion 2.3.3: animation from interactions content on hover or
focus if content is revealed on hover or
focus, for example in tooltips, there are some things to keep in mind: if the extra content obscures existing content, there should be a way to close it without moving
focus if the extra content is opened on hover, hovering the additional content itself should not cause it to disappear consistent navigation navigation should be consistent across different pages on your site. it does not need to...
Embedding the editor
low-level editor. we need a concept of an "editing session" - a single top-level document which is editable, and which may embody more than one editor. this interface will be called nsi????. high-level ui and emebedding code should deal with this editing session interface, without knowledge of the underlying editors. the editing session will forward commands to the individual editors depending on
focus, and mediate undo/redo between them. alternative solution: rather than having multiple editors in this scenario, we could have a single editor, which is capable of saving and restoring state such that it can be transferred between the various subdocuments being edited. that state would have to include the document, undo stack, and typing state. the implementation of the editing session would be...
...solution: rather than having multiple editors in this scenario, we could have a single editor, which is capable of saving and restoring state such that it can be transferred between the various subdocuments being edited. that state would have to include the document, undo stack, and typing state. the implementation of the editing session would be responsible for swapping out the editor's state on
focus changes etc. more than one editor per window current composer clients in the mozilla codebase all assume that there is only one <editor> tag per window. they all need to be able to deal with multiple editors. fixing this would require js changes of the following kind: standardize the way that clients get at the editorshell (or its replacement, post-embedding work) from the window. ensure th...
...anges etc. more than one editor per window current composer clients in the mozilla codebase all assume that there is only one <editor> tag per window. they all need to be able to deal with multiple editors. fixing this would require js changes of the following kind: standardize the way that clients get at the editorshell (or its replacement, post-embedding work) from the window. ensure that
focus changes between editors update the window's notion of the "current" editor. if we continue to use window.editorshell, then this needs to be updated on
focus changes. ensure that each editor is properly constructed on window setup, and torn down on window destruction. ensure that window close tests (e.g. calling window.trytoclose) appropriately consult each editor for state. insulating editor...
...bedding this section attempts to lay out an implementation plan, with the aim of keeping everything working as the various steps are taken. some of these tasks can be done concurrently. decide on how to implement editing session multiple-editor support eliminate specific interdependencies between composer and the xul document, via nsieditoruserinterface create bottleneck for getting to the
focussed editor; ensure that
focus changes update state move editor ownership to docshell, creating nsieditorframe created the editing session api which copes with collections of editors (or make editor re
focussable) open questions where should file open and save logic live? it seems that some embedders will want composer open and save file logic, and some won't. where should this logic live? can ...
nsIAccessible
rface is a cross-platform interface that supports platform-specific accessibility apis like msaa and atk. contains the sum of what's needed to support iaccessible as well as atk's generic accessibility objects. can also be used by in-process accessibility clients to get information about objects in the accessible tree. the accessible tree is a subset of nodes in the dom tree -- such as documents,
focusable elements and text. mozilla creates the implementations of nsiaccessible on demand. [scriptable, uuid=(c7520419-87ec-42bc-98cc-04c0bf173530)] interface nsiaccessible : nsisupports { ... }; accessible/public/nsiaccessible.idlscriptable please add a summary to this article. last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) overview this section provides short o...
...for example, if one accessible gives the accessible name for another accessible (for example, html:label and html control) then these accessibles are related, please refer to relations documentation for more information. you can get related accessibles by methods nsiaccessible.getaccessiblerelated() nsiaccessible.getrelations() nsiaccessible.getrelation() and nsiaccessible.relationscount.
focus and selection in order to
focus an accessible or get
focused child accessible use nsiaccessible.take
focus() and nsiaccessible.
focusedchild. to select an accessible you can use nsiaccessible.setselected(), nsiaccessible.takeselection() and nsiaccessible.extendselection(). actions you can prepare actions on some accessibles (for example on button accessible). the following methods are intended for ...
...x and y) coordinates relative to the screen and accessible's width and height. setselected this method adds or remove this accessible to the current selection. extendselection this method extends the current selection from its current accessible anchor node to this accessible. takeselection this method selects this accessible node only. take
focus this method
focuses this accessible node. getactionname this method retrieves the name of the accessible action at the given zero-based index. getactiondescription this method retrieves the description of the accessible action at the given zero-based index. doaction this method performs the accessible action at the given zero-based index. ac...
... modifier may be affected by user and platform preferences. usually alt+letter, or just the letter alone for menu items. defaultkeybinding provides localized string of global keyboard accelerator for default action, such as ctrl+o for open file. role enumerated accessible role for the associated element. help help text associated with node.
focusedchild
focused accessible child of node. attributes attributes of accessible. relationscount returns the number of accessible relations for this object. numactions the number of accessible actions associated with this accessible. ...
nsIDocShell
allowdnsprefetch boolean attribute that determines whether dns prefetch is allowed for this subtree of the docshell tree. defaults to true. setting this will make it take ef...
...an whether this docshell can execute scripts based on its hierarchy. the rule of thumb here is that we disable js if this docshell or any of its parents disallow scripting, unless the only reason for js being disabled in this docshell is a parent docshell having a document that is in design mode. in that case, we explicitly allow scripting on the current docshell. read only. canvashas
focus boolean tells the docshell whether the canvas should have
focus. called by the
focus manager when the user tabs to the frame rather than an element. obsolete since gecko 1.9.2 channelisunsafe boolean find out if the currently loaded document came from a suspicious channel (such as a jar channel where the server-returned content type is not a known jar type). read only. ...
...ocshell is currently transitioning between documents. read only. native code only! forcedcharset nsiatom a character set to override the page's default character set while processing; this is tried before using any other character set during page loads. note: prior to gecko 12.0, this attribute was part of a separate nsidoccharsetinfo interface. has
focus boolean tells the docshell that it now has
focus or has lost
focus. obsolete since gecko 1.9.2 historyid unsigned long long the id of the docshell in the session history. read only. isactive boolean indicates whether or not the docshell is currently active. an active docshell is one that is currently visible, which means it's not a good candidate for opti...
... auri ); parameters auri the uri to load. suspendrefreshuris() cancel the xpcom timers for each meta-refresh uri in this docshell, and this docshell's children, recursively. the meta-refresh timers can be restarted using resumerefreshuris(). if the timers are already suspended, this has no effect. void suspendrefreshuris(); parameters none. tabtotreeowner() tells the docshell to offer
focus to its tree owner. this is currently only necessary for embedding chrome. void tabtotreeowner( in boolean forward, out boolean took
focus ); parameters forward whether to tab forwards or backwards. took
focus whether or not an element was successfully
focused. ...
nsISelection
tallchildren(in nsidomnode parentnode); void selectionlanguagechange(in boolean langrtl); domstring tostring(); attributes attribute type description anchornode nsidomnode returns the node in which the selection begins. read only. anchoroffset long the offset within the (text) node where the selection begins. read only.
focusnode nsidomnode returns the node in which the selection ends. read only.
focusoffset long the offset within the (text) node where the selection ends. read only. iscollapsed boolean indicates if the selection is collapsed() or not. read only. rangecount long returns the number of ranges in the selection. read only. methods addrange() adds a n...
... rangecount long returns the number of ranges in the selection. read only. methods addrange() adds a nsidomrange to the current selection. void addrange( in nsidomrange range ); parameters range the nsidomrange to add collapse() collapses the selection to a single point, at the specified offset in the given nsidomnode. when the selection is collapsed(), and the content is
focused and editable, the caret will blink there. void collapse( in nsidomnode parentnode, in long offset ); parameters parentnode the given nsidomnode where the selection will be set. offset where in the given dom node to place the selection (the offset into the given node). collapsed() [noscript,notxpcom,nostdcall] boolean collapsed(); native code only!collapsenative void col...
... place the selection (the offset into the given node). collapsed() [noscript,notxpcom,nostdcall] boolean collapsed(); native code only!collapsenative void collapsenative( in nsinode parentnode, in long offset ); parameters parentnode offset collapsetoend() collapses the whole selection to a single point at the end of the current selection (regardless of direction). if content is
focused and editable, the caret will blink there. void collapsetoend(); parameters none collapsetostart() collapses the whole selection to a single point at the start of the current selection (regardless of direction). if content is
focused and editable, the caret will blink there. void collapsetostart(); containsnode() indicates whether the nsidomnode is part of the selection. if partlycontained is ...
...ction. return value whether or not the range contains the requested noe. deletefromdocument() deletes this selection from the document the nodes belong to. void deletefromdocument(); extend() extends the selection by moving the selection end to the specified nsidomnode and offset, preserving the selection begin position. the new selection end result will always be from the anchornode to the new
focusnode, regardless of direction. void extend( in nsidomnode parentnode, in long offset ); parameters parentnode the node where the selection will be extended to. offset where in the node to place the offset in the new selection end. native code only!extendnative void extendnative( in nsinode parentnode, in long offset ); parameters parentnode offset getrangeat(...
nsITextInputProcessor
ext, append clauses. tip.appendclausetopendingcomposition("foo-".length, tip.attr_converted_clause); tip.appendclausetopendingcomposition("bar".length, tip.attr_selected_clause); tip.appendclausetopendingcomposition("-buzz".length, tip.attr_converted_clause); // then, sets the caret if you need tip.setcaretinpendingcomposition("foo-bar".length); // finally, flush the pending composition on the
focused editor if (!tip.flushpendingcomposition()) { return; // composition is not started } if there is no composition, flushpendingcomposition() starts composition with dispatching compositionstart event automatically. however, if the event is consumed by web content, it returns false. in this case, composition isn't created. so, js-ime shouldn't continue to compose the string. finally, when you...
...on every time. this tries to get the rights to create composition on the window. if no other instance is composing on the window, this associates the instance with the window and registers the callback to the instance. boolean begininputtransaction(in nsidomwindow awindow, in nsitextinputprocessorcallback acallback); parameters awindow the dom window which has
focused editor. this must not be null. acallback the callback object. this must not be null. see the document of nsitextinputprocessorcallback for the details. return value returns true if the instance could create composition. otherwise, false. begininputtransactionfortests() this must be called before starting composition for automated tests every time. this tries to get the rights to create c...
... to create composition on the window. if no other instance is composing on the window, this associates the instance with the window and registers the callback to the instance if it's specified. boolean begininputtransactionfortests(in nsidomwindow awindow, in nsitextinputprocessorcallback acallback optional); parameters awindow the dom window which has
focused editor. this must not be null. acallback the callback object. if this is not specified, requests to imes are handled automatically. see the document of nsitextinputprocessorcallback for the details. return value returns true if the instance could create composition. otherwise, false. cancelcomposition() cancels the composition which was created by the instance. if you call this when ther...
..., the value is assumed as 0. return value if this couldn't insert the string when there is no composition (e.g., compositionstart is consumed by the web contents), it returns false. the other cases return true. flushpendingcomposition() flushes the pending composition which are set by setpendingcompositionstring(), appendclausetopendingcomposition(), and setcaretinpendingcomposition() on the
focused editor. if appendclausetopendingcomposition() and/or setcaretinpendingcomposition() are not called properly, e.g., sum of alength of calls of appendclausetopendingcomposition() is not same as composition string set by setpendingcompositionstring(), this throws an exception. after a call of this, the pending composition string information is cleared. therefore, you can set new composition stri...
Examine and edit CSS - Firefox Developer Tools
urrently selected element in the page. filtering rules there's a box at the top of the rules view labeled "filter styles": as you type: any rules which don't contain the typed string at all are hidden any declarations which contain the typed string are highlighted click the "x" at the end of the search box to remove the filter. while in the rules view, you can press ctrl / cmd + f to
focus the search field. once you've typed in a filter, you can press esc to remove it again. strict search by default, the search box highlights all declarations which contain any part of the string. for example, searching for "color" will highlight declarations containing border-bottom-color and background-color as well as just color.: if you enclose the search query in backticks, like this: `...
... if you enable one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied. in addition, the information that appears on the page itself show you what pseudo-class you are exa...
... if you enable one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied. in addition, the information that appears on the page itself show you what pseudo-class you are examining. ...
...ve filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. you can also search for the values of properties: to find the rule responsible for setting the font to "lucida grande", type that in the search box. while in the computed view, you can press ctrl / cmd + f to
focus the search field. once you've typed in a filter, you can press esc to remove it again. edit rules if you click on a declaration or a selector in the rules view you can edit it and see the results immediately. you can also tab through the different existing properties and values, and start editing them by pressing enter or space. to add a new declaration to a rule, click on the last line of the...
Using the CSS properties and values API - Web APIs
how to treat it, so it assumes that any value can be used and therefore can't animate it. when a property has a registered syntax, though, the browser can optimize around that syntax, including being able to animate it! in this example, the custom property --registered has been registered using the syntax <color> and then used in a linear gradient. ...
...n a linear gradient. that property is then transitioned on hover or
focus to a different color. ...
...ered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:
focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:
focus { --unregistered: #b4d455; } <button class="registered">background registered</button> <button class="unregistered">background not registered</button> .registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:
focus { --registered: #b4d455; } .unregistered { ...
...ered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:
focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:
focus { --unregistered: #b4d455; } button { height: 40vh; display: block; width: 100%; font-size: 3vw; } window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', }); while not functionally accurate, a good way to think about the difference between the unregistered property in the above example and the registered property is t...
Hit regions and accessibility - Web APIs
t canvas rendering. it's also very useful for assistive technology users (like screen readers) which can read and interpret the sub dom in it. a good example at html5accessibility.com demonstrates how this can be done: <canvas> <h2>shapes</h2> <p>a rectangle with a black border. in the background is a pink circle. ...
...le at html5accessibility.com demonstrates how this can be done: <canvas> <h2>shapes</h2> <p>a rectangle with a black border. in the background is a pink circle. partially overlaying the <a href="http://en.wikipedia.org/wiki/circle" on
focus="drawcircle();" onblur="drawpicture();">circle</a>. partially overlaying the circle is a green <a href="http://en.wikipedia.org/wiki/square" on
focus="drawsquare();" onblur="drawpicture();">square</a> and a purple <a href="http://en.wikipedia.org/wiki/triangle" on
focus="drawtriangle();" onblur="drawpicture();">triangle</a>, both of which are semi-opaque, so the full circle can be seen underneath.</p> </canvas> see the video how nvda reads this example by steve faulkner. aria rules accessible rich internet applications (aria) defines ...
...'}); canvas.addeventlistener('mousemove', function(event) { if (event.region) { alert('hit region: ' + event.region); } }); </script> the addhitregion() method also takes a control option to route events to an element (that is a descendant of the canvas): ctx.addhitregion({control: element}); this can be useful for routing to <input> elements, for example. see also this codepen demo.
focus rings when working with the keyboard,
focus rings are a handy indicator to help navigating on a page. to draw
focus rings on a canvas drawing, the draw
focusifneeded property can be used. canvasrenderingcontext2d.draw
focusifneeded() if a given element is
focused, this method draws a
focus ring around the current path. additionally, the scrollpathintoview() method can be used to make an el...
...eyboard,
focus rings are a handy indicator to help navigating on a page. to draw
focus rings on a canvas drawing, the draw
focusifneeded property can be used. canvasrenderingcontext2d.draw
focusifneeded() if a given element is
focused, this method draws a
focus ring around the current path. additionally, the scrollpathintoview() method can be used to make an element visible on the screen if
focused, for example. canvasrenderingcontext2d.scrollpathintoview() scrolls the current path or a given path into the view. ...
Element: blur event - Web APIs
the blur event fires when an element has lost
focus. the main difference between this event and
focusout is that
focusout bubbles while blur does not. the opposite of blur is
focus. ...
... the blur event fires when an element has lost
focus. the main difference between this event and
focusout is that
focusout bubbles while blur does not. the opposite of blur is
focus. ...
...o interface
focusevent event handler property onblur sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('
focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the
focusout event, or by setting the usecapture parameter of addeventlistener() to true. html <form id="form"> <input type="text" placeho...
... event delegation there are two ways of implementing event delegation for this event: by using the
focusout event, or by setting the usecapture parameter of addeventlistener() to true. html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('
focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed. document object model (dom) level 3 events specification obsolete initi...
HTMLAnchorElement - Web APIs
onaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlanchorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils. element.accesskey is a domstring representing a single character that switches input
focus to the hyperlink. htmlanchorelement.download is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser. the value represent the proposed name of the file. if the name is not a valid filename of the underlying os, browser will adapt it. htmlhyperlinkelementutils.hash is a usvstring representing the fragment identifier, including the ...
...nger obsolete, whereas the whatwg living standard still has it labeled obsolete. until this discrepancy is resolved, you should still assume it is obsolete. htmlanchorelement.shape is a domstring representing the shape of the active area. methods inherits methods from its parent, htmlelement, and implements those from htmlhyperlinkelementutils. ...
...dard still has it labeled obsolete. until this discrepancy is resolved, you should still assume it is obsolete. htmlanchorelement.shape is a domstring representing the shape of the active area. methods inherits methods from its parent, htmlelement, and implements those from htmlhyperlinkelementutils. htmlelement.blur() removes the keyboard
focus from the current element. htmlelement.
focus() gives the keyboard
focus to the current element. htmlhyperlinkelementutils.tostring() returns a usvstring containing the whole url. it is a synonym for htmlhyperlinkelementutils.href, though it can't be used to modify the value. the blur() and
focus() methods are inherited from htmlelement from html5 on, but were defined on htmlanchorelement in dom level 2 html and earlier specifications. ...
...living standard the following property has been added: download. technically, the url-related properties, media, host, hostname, pathname, port, protocol, search, and hash, have been moved to the htmlhyperlinkelementutils mixin, and htmlanchorelement implements this mixin. html5the definition of 'htmlanchorelement' in that specification. recommendation the methods blur() and
focus(), as well as the properties tabindex and accesskey, are now defined on htmlelement. the following properties are now obsolete: charset, coords, name, rev, and shape. the following properties have been added: hash, host, hostname, media, pathname, port, protocol, rellist, search, and text. document object model (dom) level 2 html specificationthe definition of 'htmlanchorelement'...
WindowClient - Web APIs
the windowclient interface of the serviceworker api represents the scope of a service worker client that is a document in a browsing context, controlled by an active worker. the service worker client independently selects and uses a service worker for its own loading and sub-resources. methods windowclient inherits methods from its parent interface, client. windowclient.
focus() gives user input
focus to the current client. windowclient.navigate() loads a specified url into a controlled client page. properties windowclient inherits properties from its parent interface, client. windowclient.
focused read only a boolean that indicates whether the current client has
focus. windowclient.visibilitystate read only indicates the visibility of the current client. this value can be on...
...ient has
focus. windowclient.visibilitystate read only indicates the visibility of the current client. this value can be one of "hidden", "visible", or "prerender". ...
... working draft initial definition ...
... working draft initial definition ...
ARIA: timer role - Accessibility
live elements with the role timer have an implicit aria-live value of off. aria-describedby used to indicate the idref of an element that contains additional instructions for navigating or operating this element. aria-roledescription used to give the timer a more descriptive role text for screen readers to speak. this should be localized. keyboard interactions keyboard interaction is xxx. ...
...ains additional instructions for navigating or operating this element. aria-roledescription used to give the timer a more descriptive role text for screen readers to speak. this should be localized. keyboard interactions keyboard interaction is xxx.
focus is being managed via xxx. the tab , space and enter keys, as well as escape , must be handled by the application. the one exception is if
focus xxx. required javascript features keypress used to handle keyboard input and control the
focus click, touch handle as appropriate for your widget as well changing attribute values aria-activedescendant is used to manage the
focus inside the application container. set in response to keyboard or other application events that change
focus or point of interaction. the timer role does not ...
...all aspects of interaction, including returning to the regular web content on other parts of the page, must be handled. ...
...all aspects of interaction, including returning to the regular web content on other parts of the page, must be handled. ...
ARIA: document role - Accessibility
d within an application role or other interactive widget role, the document role is used to indicate a section of a complex composit widget that an assistive technology user should read using its browse or virtual reading mode, if available. because ats with reading mode default to that mode for all elements except for those with a widget or application role set, document role is only useful for
focusable elements within a widget or application that should be read as static rich text. adding role="document" and tabindex="0" to the element containing the text within a widget enables the screen reader user to press the tab key to place
focus on the document element and read the text with the screen reader's reading cursor. assistive technologies should switch context back to document mode, poss...
...ntaining composit widget. an article can have associated articles. associated wai-aria roles, states, and properties aria-expanded include with a value of true or false if the document element is collapsible, to indicate if the document is currently expanded or collapsed. other values include the default undefined which means the document is not collapsible. tabindex="0" used to make it
focusable so the assistive technology user can tab to it and start reading right away. keyboard interactions the element should be made
focusable by setting the tabindex="0" attribute / value pair on it. this way, the user can tab to it, reading mode is invoked automatically, and the content can be read right away. required javascript features none, except as required by any attributes. for exam...
... read right away. required javascript features none, except as required by any attributes. for example, if the document is collapsible, then the state and the value of aria-expanded must be maintained. examples an example is gmail and the single conversation view. gmail is a web application. when in gmail, most user agent interactions are usurped by the application. ...
...le conversation view. gmail is a web application. when in gmail, most user agent interactions are usurped by the application. however, when the keyboard
focus is set on the starting heading on a single conversation that contains the subject of the conversation, the screen reader user can use the reading mode commands to read through the messages, expand or collapse them, and manipulate them. once
focus returns to the message list either by activating the back button or pressing an asociated keystroke, direct application interaction mode is invoked again, and the user can move to a different conversation in the list with the arrow keys. best practices always make sure an item with the document role is
focusable, by setting the tabindex attribute with a value of 0. that will also include it in ...
Operable - Accessibility
ssible (e.g. tabbing through form controls), and you should only build in custom functionality where needed. see ui controls and building keyboard accessibility back in 2.1.2 no keyboard trap (a) when entering a section of functionality using the keyboard, you should be able to get out of that section again using *only* the keyboard. for example, if you press enter/return on a
focused button to open an options window, you should be able to close that window again and return to the main content using the keyboard. this is very important so that keyboard users do not get trapped on specific sections of your apps. 2.1.3 keyboard — all functionality (aaa) this is a further step beyond criterion 2.1.1. to achieve aaa conformance, all functionality shoul...
...d be accessible using keyboard controls — with no exceptions. see ui controls and building keyboard accessibility back in 2.1.4 character key shortcuts (a) added in 2.1 if a single character key shortcut exists, then at least one of the following is true: single character key shortcuts can be turned off, remapped or are only active when the relevant user interface component is in
focus. understanding character key shortcuts note: also see the wcag description for guideline 2.1 keyboard accessible: make all functionality available from a keyboard. guideline 2.2 — enough time: provide users enough time to read and use content this guideline covers situations in which functionality may have a time limit. for example, purchases sometimes need to be completed within ...
...tructure of headings and semantic containers is provided to navigate with (for example <section>, <aside>, etc.), then an added "skip link" is not needed. need to add a section on "skip links". 2.4.2 include page title (a) each web page should include an informative <title>, the content of which describes the page's content/purpose. see adding a title. 2.4.3 logical
focus order (a) the "tabbing order" of
focusable page features (e.g. links, buttons, form inputs) makes logical sense, meaning that the page is still usable by non-sighted/keyboard users. see ui controls for general advice on tabbing to controls. if you need to place elements in an unusual layout, it is better to make sure the source order is sensible, then use css features like positioning to ha...
...e purpose of the content and form elements they are supposed to be describing. see ui controls, meaningful text labels, the basics of headings and paragraphs, the <label> element. note that you should avoid duplicating headings or labels (e.g. multiple instances of "further information"), unless the structure allows you to differentiate between them easily. 2.4.7 visible
focus for
focusable elements (aa) when tabbing through
focusable elements such as links or form inputs, there should be a visual indicator to show you which element currently has
focus. this is usually a dotted or blue outline by default (depending on browser, platform, etc.), but this can be overidden by css. see using native keyboard accessibility. 2.4.8 location within site (aaa) w...
Understandable - Accessibility
2.1. understandable states that information and the operation of user interface must be understandable. note: to read the w3c definitions for understandable and its guidelines and success criteria, see principle 3: understandable — information and the operation of user interface must be understandable. guideline 3.1 — readable: make text content readable and understandable this guideline
focuses on making text content as understandable as possible. success criteria how to conform to the criteria practical resource 3.1.1 language of page (a) the default human language of each web page should be detectable via code. this is essential for purposes like making sure the reader has arrived at a page written in a language suitable for them. the simplest way to ...
...onounciation guide after difficult words, in the same way that you find in dictionary entries. see video and audio content, and pronunciation guide for english dictionary note: also see the wcag description for guideline 3.1 readable: make text content readable and understandable. guideline 3.2 — predictable: make web pages appear and operate in predictable ways this guideline
focuses on making user interfaces intuitive and understandable. success criteria how to conform to the criteria practical resource 3.2.1 on
focus (a) when a control or other page feature receives
focus, it should not change the context in a way that may confuse or disorientate the user. this is a matter of sensible design — people don't want interfaces to sur...
...also see building keyboard accessibility back in for some useful implementation ideas. ...
...also see building keyboard accessibility back in for some useful implementation ideas. ...
Pseudo-classes - CSS: Cascading Style Sheets
ic part of an element. syntax selector:pseudo-class { property: value; } like regular classes, you can chain together as many pseudo-classes as you want in a selector. ...
...of an element. syntax selector:pseudo-class { property: value; } like regular classes, you can chain together as many pseudo-classes as you want in a selector. ...
...yntax selector:pseudo-class { property: value; } like regular classes, you can chain together as many pseudo-classes as you want in a selector. ...
...pe(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not(). defined the syntax of :enabled, :disabled, :checked, and :indeterminate, but without the associated semantic meaning. no significant change for pseudo-classes defined in css level 2 (revision 1). css level 2 (revision 1) recommendation defined :lang(), :first-child, :hover, and :
focus. no significant change for pseudo-classes defined in css level 1. css level 1 recommendation defined :link, :visited and :active, but without the associated semantic meaning. ...
Event reference
es have finished loading. beforeunload the window, the document and its resources are about to be unloaded. unload the document or a dependent resource is being unloaded. network events event name fired when online the browser has gained access to the network. offline the browser has lost access to the network.
focus events event name fired when
focus an element has received
focus (does not bubble). blur an element has lost
focus (does not bubble).
focusin an element is about to receive
focus (does bubble).
focusout an element is about to lose
focus (does bubble). websocket events event name fired when open ...
... is about to be printed or previewed for printing. beforeunload beforeunloadevent html5 the window, the document and its resources are about to be unloaded. beginevent timeevent svg a smil animation element begins. blocked indexeddb an open connection to a database is blocking a versionchange transaction on the same database. blur
focusevent dom l3 an element has lost
focus (does not bubble). boundary speechsynthesisevent web speech api the spoken utterance reaches a word or sentence boundary canplay event html5 media the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of co...
...characterdatamodified mutationevent dom l3 a text or another characterdata has changed (use mutation observers instead). domcontentloaded event html5 the document has finished loading (but not its dependent resources). domelementnamechanged mutationnameevent dom l3 removed the name of an element changed (use mutation observers instead). dom
focusin
focusevent dom l3 an element has received
focus (use
focus or
focusin instead). dom
focusout
focusevent dom l3 an element has lost
focus (use blur or
focusout instead). domnodeinserted mutationevent dom l3 a node has been added as a child of another node (use mutation observers instead). domnodeinsertedintodocument mutationeven...
... error event server sent events an event source connection has been failed. error event indexeddb a request caused an error and failed. error event web speech api a speech recognition error occurs. error speechsynthesiserrorevent web speech api an error occurs that prevents the utterance from being successfully spoken.
focus focusevent dom l3 an element has received
focus (does not bubble).
focusin
focusevent dom l3 an element is about to receive
focus (bubbles).
focusout
focusevent dom l3 an element is about to lose
focus (bubbles). fullscreenchange event full screen an element was toggled to or from fullscreen mode. fullscreenerror eve...
Rich-Text Editing in Mozilla - Developer guides
document.getelementbyid(aid).contentdocument){ return document.getelementbyid(aid).contentdocument; } else { // ie return document.frames[aid].document; } } the example contains a doricheditcommand function that makes it easier to execute commands on the iframe's document and keeps the html code clean. the function executed the requested command using execcommand() and then sets
focus back to the editable document, as clicking on a button will set
focus on the button itself, which breaks the editing flow. figure 4 : executing rich editing commands html: <button onclick="doricheditcommand('bold')" style="font-weight:bold;">b</button> javascript: function doricheditcommand(aname, aarg){ getiframedocument('editorwindow').execcommand(aname,false, aarg); document.getelementb...
... clicking on a button will set
focus on the button itself, which breaks the editing flow. ...
...h text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.
focus(); } } function validatemode() { if (!document.compform.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.
focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.createtextnode(odoc.innerhtml); odoc.innerhtml = ""; var opre = document.createelement("pre"); odoc.contenteditable = false; ...
...lse; opre.id = "sourcetext"; opre.contenteditable = true; opre.appendchild(ocontent); odoc.appendchild(opre); } else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.
focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.clos...
<select>: The HTML Select element - HTML: Hypertext Markup Language
a selected attribute on an <option> element to make it selected by default when the page first loads. the <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once. it also accepts most of the general form input attributes such as required, disabled, auto
focus, etc. you can further nest <option> elements inside <optgroup> elements to create separate groups of options inside the dropdown. for further examples, see the native form widgets: drop-down content. attributes this element includes the global attributes. autocomplete a domstring providing a hint for a user agent's autocomplete feature. see the html autocomplete attribute for a complete l...
...roup> elements to create separate groups of options inside the dropdown. for further examples, see the native form widgets: drop-down content. attributes this element includes the global attributes. autocomplete a domstring providing a hint for a user agent's autocomplete feature. see the html autocomplete attribute for a complete list of values and details on how to use autocomplete. auto
focus this boolean attribute lets you specify that a form control should have input
focus when the page loads. only one form element in a document can have the auto
focus attribute. disabled this boolean attribute indicates that the user cannot interact with the control. if this attribute is not specified, the control inherits its setting from the containing element, for example <fieldset>; if there ...
...rning: the mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in firefox. also note: on macos, the ctrl + up and ctrl + down shortcuts conflict with the os default shortcuts for mission control and application windows, so you'll have to turn these off before it will work. ...
...ntiguous items by:
focusing on the <select> element (e.g. using tab). selecting an item at the top or bottom of the range they want to select using the up and down cursor keys to go up and down the options. holding down the shift key and then using the up and down cursor keys to increase or decrease the range of items selected. keyboard users can select multiple non-contiguous items by:
focusing on the <select> element (e.g. using tab). holding down the ctrl key then using the up and down cursor keys to change the "
focused" select option, i.e. the one that will be selected if you choose to do so. the "
focused" select option is highlighted with a dotted outline, in the same way as a keyboard-
focused link. pressing space to select/deselect "
focused" select options. styling with css ...
tabindex - HTML: Hypertext Markup Language
the tabindex global attribute indicates that its element can be
focused, and where it participates in sequential keyboard navigation (usually with the tab key, hence the name). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it accepts an integer as a value, with different results depending on the integer's value: a negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be
focused with javascript or visually by clicking with the mouse. it's mostly useful to create accessible widgets with javascript. a negative value is useful when you hav...
...er's value: a negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be
focused with javascript or visually by clicking with the mouse. it's mostly useful to create accessible widgets with javascript. a negative value is useful when you have off-screen content that appears on a specific event. the user won't be able to
focus any element with a negative tabindex using the keyboard, but a script can do so by calling the
focus() method. ...
...or visually by clicking with the mouse. it's mostly useful to create accessible widgets with javascript. a negative value is useful when you have off-screen content that appears on a specific event. the user won't be able to
focus any element with a negative tabindex using the keyboard, but a script can do so by calling the
focus() method. tabindex="0" means that the element should be
focusable in sequential keyboard navigation, after any positive tabindex values and its order is defined by the document's source order. a positive value means the element should be
focusable in sequential keyboard navigation, with its order defined by the value of the number. that is, tabindex="4" is
focused before tabindex="5" and tabindex="0", but after tabindex="3". if multiple elements share the ...
...a logical sequence. if you set the tabindex attribute on a <div>, then its child content cannot be scrolled with the arrow keys unless you set tabindex on the content, too. check out this fiddle to understand the scrolling effects of tabindex. accessibility concerns avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive
focusable by keyboard input. an example of this would be using a <div> element to describe a button, instead of the <button> element. interactive components authored using non-interactive elements are not be listed in the accessibility tree. this prevents assistive technology from being able to navigate to and manipulate those components. the content should be semantically described using interactive ...
Windows - Archive of obsolete content
ndow.moveto(newx, newy); } } function mouseup(event) { startpos = null; } window.addeventlistener("mousedown", mousedown, false); window.addeventlistener("mouseup", mouseup, false); window.addeventlistener("mousemove", mousemove, false); xul titlebar element xul applications can take advantage of the titlebar element to achieve a similar result without extra javascript code. re-using and
focusing named windows while specifying the name parameter to window.open or window.opendialog will prevent multiple windows of that name from opening, each call will actually re-initialize the window and thus lose whatever state the user has put it in. additionally, if the window is in the background, it may not be brought to the front. this code will check for a window of the provided name. if it fi...
...ndows while specifying the name parameter to window.open or window.opendialog will prevent multiple windows of that name from opening, each call will actually re-initialize the window and thus lose whatever state the user has put it in. additionally, if the window is in the background, it may not be brought to the front. this code will check for a window of the provided name. ...
...you can get a dom window's id using the nsidomwindowutils attribute outerwindowid. ...
Adding Events and Commands - Archive of obsolete content
but there are several events that are implemented for most elements. these are some notable events you should keep in mind: oncommand. this is one of the most important and commonly used events in xul. it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes. ...
... drag and drop. drag and drop operations involve several events. ...
... key. it's an abstraction of the main way to interact with a control element. onselect. fired when the selection in a tree or listbox changes. onclick. triggered when the user clicks on the element, including right clicks. you shouldn't normally use this event to trigger actions on input controls such as buttons. use oncommand instead. on
focus and onblur. used when an element receives or loses
focus when the user is navigating with the keyboard. you can combine these with -moz-user-
focus to add custom
focus behavior to elements that normally wouldn't have it. drag and drop. drag and drop operations involve several events. since drag and drop is a complicated thing to manage, there are some high level wrappers that facilitate working with it. also keep in mind that there are 2 drag and drop ...
Attribute (XUL) - Archive of obsolete content
aces default defaultbutton defaultset description dir disableautocomplete disableautoselect disableclose disabled disablehistory disablekeynavigation disablesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex
focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply i...
...nputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noauto
focus noautohide noinitial
focus nomatch norestore
focus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload ...
...l orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype set
focus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction valida...
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
them in a special way. you can add event handlers to the elements inside the content if needed. the last example in the previous section demonstrated this. in that example, oncommand handlers were added to some buttons. handler element however, you may want to add an event handler to the entire contents, that is, all the elements defined in the content tag. this could be useful when trapping the
focus and blur events. to define an event handler, use the handler element. each will describe the action taken for a single event handler. you can use more than one handler if necessary. if an event does not match any of the handler events, it is simply passed to the inner content as usual. the general handler syntax is as follows: <binding id="binding-name"> <handlers> <handler event="event-nam...
...l. the general handler syntax is as follows: <binding id="binding-name"> <handlers> <handler event="event-name" action="script"/> </handlers> </binding> place all of your handlers within the handlers element. each handler element defines the action taken for a particular event specified by its event attribute. valid event types are those supported by xul and javascript, such as click and
focus. use the event name without the 'on' in front of it. a common reason to set handlers is to modify the custom properties when an event occurs. for example, a custom checkbox might have a checked property which needs to be changed when the user clicks the checkbox: <handlers> <handler event="mouseup" action="this.checked=!this.checked"/> </handlers> when the user clicks and releases the mouse bu...
... changed when the user clicks the checkbox: <handlers> <handler event="mouseup" action="this.checked=!this.checked"/> </handlers> when the user clicks and releases the mouse button over the check box, the mouseup event is sent to it, and the handler defined here is called, causing the state of the checked property to be reversed. similarly, you may wish to change a property when the element is
focused. you might have a need to change whether an element can have the
focus or not. for this, you can use a special style property -moz-user-
focus. this property controls whether an element can be
focused. (see
focus and selection) handling mouse events for mouse events, you can use the button attribute to have the handler only trap events that occur from a certain button. without this attribute, th...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
port content mode for xul. therefore, with jaws 7.10, to use xul inside of a browser, the type attribute cannot not be used. caption see groupbox checkbox <checkbox label='<!--label text-->' /> colorpicker <colorpicker type="button" palettename="standard" /> colorpicker appears to read color values out if the colorpicker can get
focus in the first place. column see grid columns see grid command see keyboard shortcut tutorial commandset see keyboard shortcut tutorial deck only the currently selected deck layer can be
focused. grid although text in the grid can be read, jaws does not recognize grids as tables for table reading m...
... jaws indicates percentage to the user radio see radiogroup radiogroup <label value='<!--radio group-->' control='radioid' /> <radiogroup id='radioid'> <radio selected="true" label='<!--option1-->' /> <radio label='<!--option2-->' /> </radiogroup> row see grid rows see grid stack all elements can be
focused, even if not visible due to being hidden under something else statusbar <statusbar> <statusbarpanel label="<!--status bar-->" flex="1"/> </statusbar> read using jaws with insert+page down statusbarpanel see statusbar tab see tabbox tabbox <tabbox> <tabs> <tab label="<!--tab text-->" /> </tabs> <tabpanels> <...
... statusbar <statusbar> <statusbarpanel label="<!--status bar-->" flex="1"/> </statusbar> read using jaws with insert+page down statusbarpanel see statusbar tab see tabbox tabbox <tabbox> <tabs> <tab label="<!--tab text-->" /> </tabs> <tabpanels> <tabpanel orient="vertical"> ... </tabpanel> </tabpanels>
focusing the tabbox will visually set
focus to the selected tab, then you can select different tabs by using the left and right arrow keys. tabbrowser jaws 7.10 issues testing with jaws 7.10, use of a tabbrowser element causes many, unpredictable issues with xul inside of the iframe. okay to use html inside of tabbrowser. see browser element for more info. tabpanel see t...
arrowscrollbox - Archive of obsolete content
rows must be clicked to scroll the scrollbox content. if false, the mouse must be hovered over the arrows to scroll automatically. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...erred to use of the attribute, as it may need to update additional state. smoothscroll type: boolean true initially enables smooth scrolling for the corresponding arrowscrollbox, false disables it. currently, smooth scrolling supports horizontal arrowscrollboxes only. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ord...
...pixels ) return type: no return value scrolls the contents of the arrowscrollbox by a certain number of pixels. use a positive value as the pixels argument to scroll forward that many pixels, or a negative value to scroll backward that many pixels. ...
button - Archive of obsolete content
elements, they are placed right to left or bottom to top. this is reverse of the order in which they appear in the xul code. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...x-orient style property. horizontal child elements of the element are placed next to each other in a row in the order that they appear in the xul source. vertical child elements of the element are placed under each other in a column in the order that they appear in the xul source. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: one of the values below the type of button. if this attribute is not present, a normal button is created. leave the attribute out for a normal button. checkbox this type of button can be in two states. the user can click the button to switch between the states. ...
...: string gets and sets the value of the orient attribute. tabindex type: integer gets and sets the value of the tabindex attribute. type type: string gets and sets the value of the type attribute. ...
checkbox - Archive of obsolete content
the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...ibute is copied to the menulist.value property upon user selection of the menuitem. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties accesskey type: character gets and sets the value of the accesskey attribute. accessibletype type: integer a value indicating the type of accessibility object for the element. checked type: boolean get...
... src type: url gets and sets the value of the src attribute. label type: string gets and sets the value of the label attribute. tabindex type: integer gets and sets the value of the tabindex attribute. ...
colorpicker - Archive of obsolete content
e, tabindex, type properties accessibletype, color, disabled, open, tabindex, value examples <colorpicker/> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
... </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: string if this attribute is not present, the colorpicker is displayed inside the window. if this is set to the text button, the colorpicker is displayed as a button. when the user clicks the button, a popup appears for the user to select a color. properties ...
...r a button-type colorpicker is open. set this property to true to open the popup or false to close the popup. tabindex type: integer gets and sets the value of the tabindex attribute. ...
datepicker - Archive of obsolete content
ro, open, readonly, tabindex, value, year, yearleadingzero examples <datepicker type="grid" value="2007-03-26"/> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...6, where 0 is sunday and 6 is saturday. the default value is determined by the locale, so only use this attribute if you want to override it. readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may still be modified by a script. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: one of the values below you can set the type attribute to one of the values below to specify the type of datepicker to use normal a datepicker with three fields for entering the year, month and date. this is the def...
...rently selected year from 1 to 9999. set this property to change the selected year. yearleadingzero type: boolean a read only value indicating whether a leading zero should be displayed before the year when it is less than 1000. ...
description - Archive of obsolete content
the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
.... the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so i...
...ex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
menuitem - Archive of obsolete content
upopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
... put into a group. only one menuitem in each radio group can be checked at a time. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: one of the values below can be used to create checkable menuitems or for radio button menuitems. checkbox the menuitem is checked. the checked attribute determines whether the menuitem is checked or not. radio the menuitem becomes part of a radio group. other...
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
menuseparator - Archive of obsolete content
the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...te is copied to the menulist.value property upon user selection of the menuitem. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so i...
...ex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
preference - Archive of obsolete content
rence id="pref_id" name="preference.name" type="int"/> </preferences> see preferences system for a complete example. attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
... say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may still be modified by a script. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. type type: one of the values below the preference type which should be one of the following values. bool a boolean set to either true or false. usually a checkbox would be connected to these preferences. int an integer string a string unichar a unicode string ...
..."editable" (see below). void setelementvalue(in domelement element); initializes the supplied element from the value stored in the preference. this function calls onsyncfrompreference. void updateelements(); update all elements that observe this preference. ...
richlistitem - Archive of obsolete content
ex, value properties accessible, control, disabled, label, selected, tabindex, value examples (example needed) attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...to fayt. if searchlabel is not present, fayt falls back to use the label property. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so i...
...ex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
scale - Archive of obsolete content
elements, they are placed right to left or bottom to top. this is reverse of the order in which they appear in the xul code. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...ies for each platform. pageincrement type: integer the amount by which the value of the curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when the page up or page down keys are pressed. the default value is 10. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware, however, that some elements, such as textbox will display the value visually, so i...
...ex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
tab - Archive of obsolete content
the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
... pinned type: boolean this attribute is set to true if the tab has been pinned (that is, if it's an app tab). the tabbrowser element's pintab and unpintab methods handle pinning and unpinning tabs. selected type: boolean this attribute is set to true if the tab is selected by default. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. unread type: boolean this attribute is set to true if the tab is unread; that is, either it has not yet been selected during the current session, or has changed since the last time it was selected. this attribute is not present if the tab is not unread. validate type: o...
...ex attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
timepicker - Archive of obsolete content
ingzero, pmindicator, readonly, second, secondleadingzero, tabindex, value examples <timepicker value="12:05"/> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...n the user cannot change the value of the element. however, the value may still be modified by a script. increment type: integer indicates the number of minutes to skip each time the arrows are pressed. this should be used in combination with setting hideseconds to true. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. value type: string the initial value of the timepicker in either the form hh:mm:ss or hh:mm. properties amindicator type: string the string value displayed for hours between midnight and noon, defaulting to am. this value is determined ...
...when it is less than 10. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string the currently entered time of the form hh:mm:ss. set this property to change the time. ...
Theme changes in Firefox 2 - Archive of obsolete content
safebrowser/browser-protection.css this file, new to firefox 2, skins browser protection features. the following styles must be implemented to support the window that appears when the user browses to a suspected phishing site: #safebrowsing-dim-area-canvas #safebrowsing-page...
...l about.css this is a new file for firefox 2. it skins the firefox about box, and needs to provide at least the following styles: #aboutlogocontainer #aboutpagecontainer #version the default theme also skins the following styles: body, html, img, ul, and ul > li. ...
...="true"] > .tab-close-button .tabbrowser-tab[selected="true"] > .tab-close-button:hover .tabbrowser-tab[selected="true"] > .tab-close-button:hover:active .tabbrowser-tabs[overflow="true"] .tabs-alltabs-box .tabs-alltabs-box .tabs-alltabs-box:hover .tabs-alltabs-box[flash="true"] tab > .tab-image-left tab > .tab-image-middle tab > .tab-image-middle > .tab-text tab > .tab-image-right tab:
focus > .tab-image-middle > .tab-text tab:hover:not([selected="true"]) > .tab-image-left tab:hover:not([selected="true"]) > .tab-image-middle tab:hover:not([selected="true"]) > .tab-image-right tab:not([selected="true"]) > .tab-image-left tab:not([selected="true"]) > .tab-image-middle tab[selected="true"] .tab-image-middle > .tab-text you may of course wish to make changes to other styles as we...
Example 1 - Learn web development
alue">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:
focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : b...
...alue">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:
focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; box-sizing : border-box; padding : 0.1em 2.
...e">cherry</span> <ul class="optlist"> <li class="option highlight">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:
focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : b...
Styling web forms - Learn web development
ht font: label { font : .8em "typewriter", sans-serif; } the text fields require some common rules. ...
...es. simply put, we remove their borders and backgrounds, and redefine their padding and margin: input, textarea { font : 1.4em/1.5em "handwriting", cursive, sans-serif; border : none; padding : 0 10px; margin : 0; width : 80%; background : none; } when one of these fields gains
focus, we highlight them with a light grey, transparent, background (it is always important to have
focus style, for usability and keyboard accessibility): input:
focus, textarea:
focus { background : rgba(0,0,0,.1); border-radius: 5px; } now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the same using the defaults. tweaking the textareas <textarea> elements default to being rendered as a...
... test your skills! you've reached the end of this article, but can you r...
Manipulating documents - Learn web development
indow, and is represented in javascript by the document object. you can use this object to return and manipulate information on the html and css that comprises the document, for example get a reference to an element in the dom, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether. in this article we'll
focus mostly on manipulating the document, but we'll show a few other useful bits besides. the document object model the document currently loaded in each one of your browser tabs is represented by a document object model. this is a "tree structure" representation created by the browser that enables the html structure to be easily accessed by programming languages — for example the browser itself u...
...ticle, we'd like to set you a little challenge — we want to make a simple shopping list example that allows you to dynamically add items to the list using a form input and button. when you add an item to the input and press the button: the item should appear in the list. each item should be given a button that can be pressed to delete that item off the list. the input should be emptied and
focused ready for you to enter another item. the finished demo will look something like this: to complete the exercise, follow the steps below, and make sure that the list behaves as described above. to start with, download a copy of our shopping-list.html starting file and make a copy of it somewhere. you'll see that it has some minimal css, a list with a label, input, and button, and an empty...
...nd store them in variables. append the span and the button as children of the list item. set the text content of the span to the input element value you saved earlier, and the text content of the button to 'delete'. append the list item as a child of the list. attach an event handler to the delete button, so that when clicked it will delete the entire list item it is inside. finally, use the
focus() method to
focus the input element ready for entering the next shopping list item. note: if you get really stuck, have a look at our finished shopping list (see it running live also.) summary we have reached the end of our study of document and dom manipulation. at this point you should understand what the important parts of a web browser are with respect to controlling documents and other...
Video and Audio APIs - Learn web development
d. each <button> has a class name, a data-icon attribute for defining what icon should be shown on each button (we'll show how this works in the below section), and an aria-label attribute to provide an understandable description of each button, since we're not providing a human-readable label inside the tags. the contents of aria-label attributes are read out by screenreaders when their users
focus on the elements that contain them. there is also a timer <div>, which will report the elapsed time when the video is playing. just for fun, we are providing two reporting mechanisms — a <span> containing the elapsed time in minutes and seconds, and an extra <div> that we will use to create a horizontal indicator bar that gets longer as the time elapses. to get an idea of what the finished pr...
...ated, but we'll highlight the most interesting bits here. first of all, notice the .controls styling: .controls { visibility: hidden; opacity: 0.5; width: 400px; border-radius: 10px; position: absolute; bottom: 20px; left: 50%; margin-left: -200px; background-color: black; box-shadow: 3px 3px 5px black; transition: 1s all; display: flex; } .player:hover .controls, player:
focus .controls { opacity: 1; } we start off with the visibility of the custom controls set to hidden. in our javascript later on, we will set the controls to visible, and remove the controls attribute from the <video> element. this is so that, if the javascript doesn't load for some reason, users can still use the video with the native controls. we give the controls an opacity of 0.5 by default...
... in our javascript later on, we will set the controls to visible, and remove the controls attribute from the <video> element. this is so that, if the javascript doesn't load for some reason, users can still use the video with the native controls. we give the controls an opacity of 0.5 by default, so that they are less distracting when you are trying to watch the video. only when you are hovering/
focusing over the player do the controls appear at full opacity. we lay out the buttons inside the control bar using flexbox (display: flex), to make things easier. next, let's look at our button icons: @font-face { font-family: 'heydingscontrolsregular'; src: url('fonts/heydings_controls-webfont.eot'); src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), ...
Web performance - Learn web development
building websites requires html, css, and javascript. to build websites and applications people want to use, which attract and retain users, you need to create a good user experience. part of good user experience is ensuring the content is quick to load and responsive to user interaction. this is known as web performance, and in this module you'll
focus on the fundamentals of how to create performant websites. the rest of our beginner's learning material tried to stick to web best practices such as performance and accessibility as much as possible, however, it is good to
focus specifically on such topics too, and make sure you are familiar with them. learning pathway while knowing html, css, and javascript is needed for implementing many web performance improvement recommendations, knowing ...
... performance or your website. by minimizing the number of dom nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. this article looks in detail at how html can be used to ensure maximum performance. css performance features css may be a less important optimization
focus for improved performance, but there are some css features that impact performance more than others. in this article we look at some css properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted. fonts and performance a look at whether you need to include external fonts and, if you do, how to include the fonts your design requires w...
...requires with the least impact on your sites performance. mobile performance with web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, cpu and battery life, it is important to consider the performance of your web content on these platforms. this article looks at mobile-specific performance considerations. ...
Introduction to client-side frameworks - Learn web development
ipt first and user experience last. accessibility on a framework-driven web let's build on what we said in the previous section, and talk a bit more about accessibility. making user interfaces accessible always requires some thought and effort, and frameworks can complicate that process. ...
...vanced framework apis to access native browser features like aria live regions or
focus management. in some cases, framework applications create accessibility barriers that do not exist for traditional websites. the biggest example of this is in client-side routing, as mentioned earlier. with traditional (server-side) routing, navigating the web has predictable results. the browser knows to set
focus to the top of the page and assistive technologies will announce the title of the page. these things happen every time you navigate to a new page. with client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust
focus or announce a new page title. framework authors have devoted immense time and labor to writing javascript that recreates t...
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos
focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Getting started with React - Learn web development
your entire app with react. in addition, many of the developer-experience benefits of a react app, such as writing interfaces with jsx, require a compilation process. adding a compiler like babel to a website makes the code on it run slowly, so developers often set up such tooling with a build step. react arguably has a heavy tooling requirement, but it can be learned. this article is going to
focus on the use case of using react to render the entire user interface of an application, using tooling provided by facebook’s own create-react-app tool. how does react use javascript? react utilizes features of modern javascript for many of its patterns. its biggest departure from javascript comes with the use of jsx syntax. jsx extends javascript's syntax so that html-like code can live alongsi...
... />, document.getelementbyid('root')); variables and props next, we'll use a few of our javascript skills to get a bit more comfortable editing components and working with data in react. we'll talk about how variables are used inside jsx, and introduce props, which are a way of passing data into a component (which can then be accessed using variables). variables in jsx back in app.js, let’s
focus on line 9: <img src={logo} classname="app-logo" alt="logo" /> here, the <img /> tag's src attribute value is in curly braces. this is how jsx recognizes variables. react will see {logo}, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it. let's try making a variable of our own. before the return statement of app, add const subject = 'react...
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos
focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
React resources - Learn web development
ch as /home, /dashboard, or login/). the react community has produced two major libraries for client-side routing: react router and reach router. react router is well-suited to applications with complex routing needs, and it meets some edge cases better than reach router. react router is a larger library, however. reach router is well-suited to simpler applications, and automatically manages
focus as the user navigates from page to page.
focus management is essential in client-side routing — without it, keyboard users can be trapped in
focus limbo, and screen-reader users may have no idea that they have moved to a new page. because reach router is better for accessibility, it's a good place to start. there's one caveat, however: these projects will be merging in the near future. when ...
...routing — without it, keyboard users can be trapped in
focus limbo, and screen-reader users may have no idea that they have moved to a new page. because reach router is better for accessibility, it's a good place to start. there's one caveat, however: these projects will be merging in the near future. when this merge happens, react router will be the surviving project (with the addition of the
focus management features of reach). previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering acc...
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos
focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Mozilla's Section 508 Compliance
so shall not disrupt or disable activated features of any operating system that are identified as accessibility features where the application programming interface for those accessibility features has been documented by the manufacturer of the operating system and is available to the product developer. complete. ...
...dentified as accessibility features where the application programming interface for those accessibility features has been documented by the manufacturer of the operating system and is available to the product developer. complete. (c) a well-defined on-screen indication of the current
focus shall be provided that moves among interactive interface elements as the input
focus changes. the
focus shall be programmatically exposed so that assistive technology can track
focus and
focus changes. complete. we expose
focus programmatically via msaa (windows) and atk (linux/unix). incomplete, we show
focus but need to expose it programmatically by supporting carbon/cocoa accessibility. (d) sufficient information about a user interface ele...
...ity greater than 20/70 shall be provided in audio and enlarged print output working together or independently, or support for assistive technology used by people who are visually impaired shall be provided. complete. built-in text zoom limited only to the size of the window. works zoomtext version 8.11. caveat, the document reading and app readings modes don't support columnized text. the
focus is not always correctly echoed via text to speech. however, it is functional and very possible to use zoomtext with mozilla in this mode. have contacted ai squared to work on reamining issues. complete, but needs testing. works with gnome-mag no magnifier support on mac os x c) at least one mode of operation and information retrieval that does not require use...
Overview of Mozilla embedding APIs
or the current document. as such, access to individual document frames is done via the domwindow interfaces. manipulation of the entire document structure is done via the various webbrowser interfaces. contract-id: ns_webbrowser_contractid implemented interfaces: nsiwebbrowser nsiwebnavigation nsiwebbrowsersetup nsiwebbrowserpersist nsiwebbrowserfind nsiwebbrowserprint nsiwebbrowser
focus nsibasewindow requestor interfaces: nsidomwindow nsidomdocument nsiwebprogress nsiclipboardcommands nsiprompt related interfaces: nsiprompt nsiwebbrowserchrome nsiwebbrowsersitewindow nsiwebprogresslistener nsicontextmenulistener nsiprintoptions overview: most of gecko's functionality is exposed through the nswebbrowser component. the webbrowser provides a simple mech...
...a the nsiprintoptions interface. on most platforms this involves displaying a native print dialog box. once all of the options have been set, the nsiwebbrowserprint interface is used to print the contents of the desired domwindow. searching searching within a nswebbrowser is controlled via the nsiwebbrowserfind interface. the search is always performed within the domwindow which currently has the
focus.
focus management
focus managment within the webbrowser is accessed via the nsiwebbrowser
focus interface. this interface serves two purposes. first, it provides methods for the embedding application to notify a webbrowser of activation/deactivation and to control tabbing order... this interface also allows access to the currently
focused domwindow and domelement. context menu notifications right-...
... nsiwebbrowserprint this interface allows printing of individual (or a collection of) dom windows within a nswebbrowser component. interface status... being reviewed interface definition: nsiwebbrowserprint.idl nsiwebbrowserfind this interface exposes the searching capabilities of the nswebbrowser component. interface status... none interface definition: nsiwebbrowserfind.idl nsiwebbrowser
focus this interface provides access to the
focus information of a nswebbrowser instance. interface status... being reviewed interface definition: nsiwebbrowser
focus.idl nsiwebprogress interface status... interface definition: nsiwebprogresslistener interface status... interface definition: nsiprompt interface status... interface definition: nsiprefs interface status... interface definition...
Release phase
it! you've setup up your local and remote environments, you've selected your l10n tools and projects, done some localization and even some testing! now you're ready for the final phase: becoming an official l10n release. here, we'll continue to stay true to the original intent of this guide and only present you with the technical information you need to become an official release. we'll primarily
focus on getting your release repository setup and the mercurial commands you'll need to know to use that repository. for more information on the release part of the l10n process, visit the mozilla wiki here. your official release repository now that your locale has been registered, the localization files will live on mozilla mercurial server at hg.mozilla.org. depending on which branch you work on, th...
...ach process? technical and sign-off reviews apply to different localizations in different ways. here's the basic difference between the two. technical review sign-off review performed as a qa measure on a revision pushed to a new locale's l10n aurora repo in mercurial. very comprehensive. covers the entire product.
focus is on technical accuracy and completion of l10n work; not translation quality. only performed on the first revision a new locale wants to have released to the public. must be approved prior to migrating your revision from one release channel to the next (e.g., aurora to beta). performed as a qa measure for maintaining a localization fr...
...rior to migrating your revision from one release channel to the next (e.g., aurora to beta). performed as a qa measure for maintaining a localization from release-to-release. only new l10n work is evaluated. this is done by generating a diff between the new release revision being considered and the previously approved release revision.
focus is still on technical accuracy and completion of l10n work; not translation quality. release revisions are evaluated, not entire l10n repos. sign-offs do not need to be approved before revision merge between release channels, although it is recommended. there is a specific process to follow in bugzilla for requesting these reviews: file a bug reques...
Profiling with the Firefox Profiler
it can be used in a variety of situations where external profilers are not available, and can provide more information and insight into what the browser is doing. using the firefox profiler visit profiler.firefox.com to get started. it has instructions for enabling the profiler menu button, and getting going. ...
... tree by holding down your right arrow key. alternatively, expand an entire tree segment by holding alt and clicking on the arrow to the left of the collapsed tree segment. as we progress into a more specific part of the tree, you'll notice that the 'running time' decreases. this happens when a function has 2 or more non-trivial calls: the running time will be split between its children. tip:
focus on one section of the tree by clicking on the "arrow-in-a-circle" icon that appears to the right of the tree element as you hover over it. a "tree breadcrumb" will appear similar to the range breadcrumbs noted above. clicking the "javascript only" option will only show javascript code in the call tree. you could compare the time with this option checked and the total time to get an idea of how ...
...ou need to liberally use auto_profiler_label throughout the code. see geckoprofiler.h for more variations like auto_profiler_label_dynamic. because of the non-zero overhead of the instrumentation, the sample label shouldn't be placed inside hot loops. a profile reporting that a large portion is spent in "unknown" code indicates that the area being executed doesn't have any sample labels. as we
focus on using this tool and add additional sample labels coverage should improve. sharing, saving and loading profiles after capturing and viewing a profile you will see "share..." and "save as file..." buttons in the top-right of the window. sharing will upload your profile to profiler.firefox.com and make it public. more information on sharing profiles is available. profiling a hung process it i...
Hacking Tips
arks with your js shell. using the gecko profiler (browser / xpcshell) see the section dedicated to profiling with the gecko profiler. this method of profiling has the advantage of mixing the javascript stack with the c++ stack, which is useful to analyze library function issues. one tip is to start looking at a script with an inverted js stack to locate the most expensive js function, then to
focus on the frame of this js function, and to remove the inverted stack and look at c++ part of this function to determine from where the cost is coming from. using the jit inspector (browser) install the jit inspector addon in your browser. this addon provides estimated cost of ionmonkey , the baseline compiler, and the interpreter. in addition it provides a clean way to analyze if instructions are...
...ll-non-file. $ valgrind --tool=callgrind --callgrind-out-file=bench.clg \ --smc-check=all-non-file --vex-iropt-register-updates=allregs-at-mem-access ./js ./run.js the output file can then be use with kcachegrind which provides a graphical view of the call graph. using ionmonkey spew (js shell) ionmonkey spew is extremely verbose (not as much as the infer spew), but you can filter it to
focus on the list of compiled scripts or channels, ionmonkey spew channels can be selected with the ionflags environment variable, and compilation spew can be filtered with ionfilter. ionflags contains the names of each channel separated by commas. the logs channel produces 2 files in /tmp/, one (/tmp/ion.json) made to be used with iongraph (made by sean stangl) and another one (/tmp/ion.cfg) made to ...
... compilation logs and spew can be filtered with the ionfilter environment variable which contains locations as output in other spew channels. multiple locations can be separated with comma as a separator of locations. $ ionfilter=pdfjs.js:16934 ionflags=logs,scripts,osi,bailouts ./js --ion-offthread-compile=off ./run.js 2>&1 | less the bailouts channel is likely to be the first thing you should
focus on, because this means that something does not stay in ionmonkey and fallback to the interpreter. this channel output locations (as returned by the id() function of both instructions) of the latest mir and the latest lir phases. these locations should correspond to phases of the logs and a filter can be used to remove uninteresting functions. using the arm simulator the arm simulator can be use...
Examine and edit HTML - Firefox Developer Tools
mmand in the context menu reference: edit as html create new node duplicate node delete node attributes add attribute copy attribute value edit attribute remove attribute break on ... ...
...the context menu reference: edit as html create new node duplicate node delete node attributes add attribute copy attribute value edit attribute remove attribute break on ... ...
... the debugger. open file in style-editor (only when invoked over a link to a css source) opens the linked source in the style editor. copy link address (only when invoked over a url) copy the url. (change pseudo-class) hover set the :hover css pseudo-class. (change pseudo-class) active set the :active css pseudo-class. (change pseudo-class)
focus set the :
focus css pseudo-class. (change pseudo-class)
focus-within set the :
focus-within css pseudo-class. (change pseudo-class) visited set the :visited css pseudo-class. editing html you can edit the html — tags, attributes, and content — directly in the html pane: double-click the text you want to edit, change it, and press enter to see the changes refle...
CSS.registerProperty() - Web APIs
y, --my-color, using registerproperty(), as a color, give it a default value, and have it not inherit its value: window.css.registerproperty({ name: '--my-color', syntax: '<color>', inherits: false, initialvalue: '#c0ffee', }); in this example, the custom property --my-color has been registered using the syntax <color> . we can now use that property to transition a gradient on hover or
focus. ...
...d using the syntax <color> . we can now use that property to transition a gradient on hover or
focus. ...
...--my-color: #c0ffee; background-image: linear-gradient(to right, #fff, var(--my-color)); transition: --my-color 1s ease-in-out; } .registered:hover, .registered:
focus { --my-color: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:
focus { --unregistered: #b4d455; } button { font-size: 3vw; } we can add these styles to some buttons: <button class="registered">background registered</button> <button class="unregistered">background not registered</button> specifications specification status comment css properties and values api level 1the definition of 'the registerproperty() function' in that spec...
Client.url - Web APIs
the url read-only property of the client interface returns the url of the current service worker client. syntax var clienturl = client.url; value a usvstring. ...
... working draft initial definition. ...
... working draft initial definition. ...
Document - Web APIs
location as a string. properties included from documentorshadowroot the document interface includes the following properties defined on the documentorshadowroot mixin. note that this is currently only implemented by chrome; other browsers still implement them directly on the document interface. documentorshadowroot.activeelementread only returns the element within the shadow tree that has
focus. document.fullscreenelementread only the element that's currently in full screen mode for this document. documentorshadowroot.pointerlockelement read only returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document. documentorshadowroot.stylesheetsread only returns a stylesheetl...
...lled when an auxclick event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button). globaleventhandlers.onblur is an eventhandler representing the code to be called when the blur event is raised. globaleventhandlers.onerror is an onerroreventhandler representing the code to be called when the error event is raised. globaleventhandlers.on
focus is an eventhandler representing the code to be called when the
focus event is raised. globaleventhandlers.oncancel is an eventhandler representing the code to be called when the cancel event is raised. globaleventhandlers.oncanplay is an eventhandler representing the code to be called when the canplay event is raised. globaleventhandlers.oncanplaythrough is an eventhandler representing the...
...xtended for such documents: document.clear() in majority of modern browsers, including recent versions of firefox and internet explorer, this method does nothing. document.close() closes a document stream for writing. document.execcommand() on an editable document, executes a formating command. document.getelementsbyname() returns a list of elements with the given name. document.has
focus() returns true if the
focus is currently located anywhere inside the specified document. document.open() opens a document stream for writing. document.querycommandenabled() returns true if the formating command can be executed on the current range. document.querycommandindeterm() returns true if the formating command is in an indeterminate state on the current range. document.querycommand...
Element: keypress event - Web APIs
uation keys. examples of keys that don't produce a character value are modifier keys such as alt, shift, ctrl, or meta. since this event has been deprecated, you should look to use beforeinput or keydown instead. ...
... to use beforeinput or keydown instead. interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and
focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key after
focussing the <input> element. ...
...face keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and
focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key after
focussing the <input> element. ...
HTMLSelectElement - Web APIs
e4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlselectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement, and of element and node. htmlselectelement.auto
focus a boolean reflecting the auto
focus html attribute, which indicates whether the control should have input
focus when the page loads, unless the user overrides it, for example by typing in a different control. only one form-associated element in a document can have this attribute specified. htmlselectelement.disabled a boolean reflecting the disabled html attribute, which indicates whether the ...
...eread only a boolean that indicates whether the button is a candidate for constraint validation. it is false if any conditions bar it from constraint validation. methods this interface inherits the methods of htmlelement, and of element and node. htmlselectelement.add() adds an element to the collection of option elements for this select element. htmlselectelement.blur() removes input
focus from this element. this method is now implemented on htmlelement. htmlselectelement.checkvalidity() checks whether the element has any constraints and whether it satisfies them. if the element fails its constraints, the browser fires a cancelable invalid event at the element (and returns false). htmlselectelement.
focus() gives input
focus to this element. this method is now implemented on ht...
...cation status comment html living standardthe definition of 'htmlselectelement' in that specification. living standard since the latest snapshot, html5, it adds the autocomplete property and the reportvalidity() method. html5the definition of 'htmlselectelement' in that specification. recommendation is a snapshot of html living standard. it adds the auto
focus, form, required, labels, selectedoptions, willvalidate, validity and validationmessage properties. the tabindex property and the blur() and
focus() methods have been moved to htmlelement. the methods item(), nameditem(), checkvalidity() and setcustomvalidity(). document object model (dom) level 2 html specificationthe definition of 'htmlselectelement' in that specification. ob...
NotificationEvent.notification - Web APIs
ationclick', function(event) { console.log('on notification click'); // data can be attached to the notification so that you // can process it in the notificationclick handler. ...
... living standard living standard. ...
... living standard living standard. ...
NotificationEvent - Web APIs
hods inherits methods from its parent, extendableevent. extendableevent.waituntil() extends the lifetime of the event. tells the browser that work is ongoing. ...
... living standard living standard. note: this interface is specified in the notifications api, but accessed ...
...fication click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and //
focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && '
focus' in client) return client.
focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment notifications apithe definition of 'notificationevent' in that specification. living standard living standard. note: this interface is specified in the notifications api, but accessed through serviceworkerglobalscope. brow...
Selection API - Web APIs
hange represents the event handler that is called when a selectionchange event is fired on the current object (i.e. when the selected text range changes). specifications specification status comment selection apithe definition of 'selection' in that specification. working draft the selection api specification is based on the html editing apis specification and
focuses on the selection-related functionality. html editing apisthe definition of 'selection' in that specification. editor's draft initial (older) definition, which is now outdated. browser compatibility selection the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-com...
... nochrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yes
focusnode experimentalchrome full support yesedge full support 12firefox full support 3.6ie full support 10opera full support yessafari full support ...
... opera full support yessafari full support yeswebview a...
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
de the serviceworkerglobalscope using the notification() constructor will throw an error. syntax serviceworkerglobalscope.onnotificationclick = function(notificationevent) { ... ...
... living standard initial definition. this property is specified on the notifications_api even though it's part of serv...
...fication click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and //
focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && '
focus' in client) return client.
focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status comment notifications apithe definition of 'onnotificationclick' in that specification. living standard initial definition. this property is specified on the notifications_api even though it's part of serviceworkerglobalscope. ...
A simple RTCDataChannel sample - Web APIs
andle events indicating a change in the status of the channel's connection. ...
...messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; } } } if the channel's state has changed to "open", that indicates that we have finished establishing the link between the two peers. the user interface is updated correspondingly by enabling the text input box for the message to send,
focusing the input box so that the user can immediately begin to type, enabling the "send" and "disconnect" buttons, now that they're usable, and disabling the "connect" button, since it is not needed when the conneciton is open. if the state has changed to "closed", the opposite set of actions occurs: the input box and "send" button are disabled, the "connect" button is enabled so that the user can o...
...event which occurred; this will be an rtcdatachannelevent. sending messages when the user presses the "send" button, the sendmessage() method we've established as the handler for the button's click event is called. that method is simple enough: function sendmessage() { var message = messageinputbox.value; sendchannel.send(message); messageinputbox.value = ""; messageinputbox.
focus(); } first, the text of the message is fetched from the input box's value attribute. this is then sent to the remote peer by calling sendchannel.send(). that's all there is to it! the rest of this method is just some user experience sugar -- the input box is emptied and re-
focused so the user can immediately begin typing another message. receiving messages when a "message" event occurs on th...
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
p below. zooming among the best known camera effects is the zoom. zooming is performed in a physical camera by altering the focal length of the lens; this is the distance between the center of the lens itself and the camera's light sensors. thus, zooming doesn't actually involve moving the camera at all. instead, a zoom shot changes the magnification of the camera over time to make the area of
focus seem closer to or farther away from the viewer, without actually physically moving the camera. a slow move can bring a sense of movement, ease, or
focus to a scene, while a rapid zoom can create a sense of anxiety, surprise, or tension. because a zoom does not move the camera's position, the resulting effect is unnatural. the human eye doesn't have a zoom lens on it. we make things smaller or la...
...ra downward, while negative values of angle will tilt upward. dollying (moving in or out) a dolly shot is one in which the entire camera is moved forward and backward. in classic filmmaking, this is typically done with the camera mounted on a track or on a moving vehicle. the resulting motion can create impressively smooth effects, especially if moving along with the person or object that's the
focus of your shot. while a dolly shot and a zoom seem like they ought to look about the same, they don't. the fact that zooming alters the camera's focal length means that the spatial relationship between the target and its surroundings doesn't change even as the target gets larger or smaller in the frame. on the other hand, a dolly shot, by actually moving the camera, replicates the sense of physi...
...cene. contrariwise, negative values of dollydistance move the world away from the user, causing the camera to appear to move backward from the target. trucking (moving left or right) trucking using a physical camera uses the same kind of rigging as dollying, but instead of moving the camera forward and backward, it moves from left to right or vice-versa. the camera doesn't rotate at all, so the
focus of the shot slowly glides off the screen. this can suggest concentration, time passing, or contemplation when attempting to establish emotion in a scene. it's also used frequently in "walk-and-talk" scenes, wherein the camera glides alongside the characters and they walk through the scene. to move the camera left and right, translate the view matrix along the x axis in the opposite direction f...
Fundamentals of WebXR - Web APIs
ternal device such as a desktop computer, and are either tethered to the computer using a cable or use a wireless network to receive the imagery to display to the user. headsets most immersive vr experiences take place using goggles or a headset of some kind. a vr headset is worn on the head, with a strap that goes behind the head to fasten it in place, and one or two displays whose screens are
focused into the eyes using lenses. by presenting a slightly different image to each eye, the illusion of depth is created, giving the user a simulated 3d experience. the vast majority of headsets use a single display whose frame is divided in half, with one half
focused onto each of the user's eyes. for example, if a headset uses a 2560x1440 screen, with the left half being used for the left eye's vi...
...a common example of this is google cardboard, a type of headset first created by google which can be cheaply created using cardboard or other inexpensive materials. ...
... the results are correct. virtual reality sickness virtual reality sickness is a condition in which a person experiencing virtual reality feels discomfort, disorientation, or even serious nausea during and sometimes for a short time after the experience. there are a number of theories surrounding exactly what about virtual reality causes some people to feel uncomfortable or sick, most of which
focusing on the idea that even subtle differences between what the brain thinks should be happening and what is being seen can cause these symptoms. defects, misalignments, or distortion can confuse the eyes and the brain, resulting in anything from aching eyes or headache to in some cases vertigo, dizziness, or potentially severe nausea. it's also important to be alert for anything you may display th...
Window: blur event - Web APIs
the blur event fires when an element has lost
focus. the opposite of blur is
focus. bubbles no cancelable no interface
focusevent event handler property onblur sync / async sync composed yes examples live example this example changes the appearance of a document when it loses
focus. it uses addeventlistener() to monitor
focus and blur events. ...
...us. bubbles no cancelable no interface
focusevent event handler property onblur sync / async sync composed yes examples live example this example changes the appearance of a document when it loses
focus. it uses addeventlistener() to monitor
focus and blur events. html <p id="log">click on this document to give it
focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = '
focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has
focus. ...
...nitor
focus and blur events. html <p id="log">click on this document to give it
focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = '
focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has
focus. click outside the document to lose
focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('
focus', play); result specifications specification status comment ui events working draft added info that this event is composed. document object model (dom) level 3 events specification obsolete initial definition ...
XRSession.visibilityState - Web APIs
the read-only visibilitystate property of the xrsession interface is a string indicating whether the webxr content is currently visible to the user, and if it is, whether it's the primary
focus. every time the visibility state changes, a visibilitychange event is fired on the xrsession object. syntax visibilitystate = xrsession.visibilitystate; value a domstring containing one of the values defined in the enumerated type xrvisibilitystate; this string indicates whether or not the xr content is visible to the user and if it is, whether or not it's currently the primary
focus. the possible values of visibilitystate are: hidden the virtual scene generated by the xrsession is not currently visible to the user, so its requestanimationframe() callbacks are not being executed unti...
... the possible values of visibilitystate are: hidden the virtual scene generated by the xrsession is not currently visible to the user, so its requestanimationframe() callbacks are not being executed until thevisibilitystate changes. input controllers are not being handled for the session. ...
...in order to optimize resource utilization, the user agent may be handling the session's requestanimationframe() callbacks at a throttled rate. input controllers are not being processed for the session. ...
Alerts - Accessibility
character. if the above criteria is not met, the field’s aria-invalid attribute will be given a value of “true”. if the criteria was not met, the user will be notified via an alert. instead of using the javascript ‘alert’ function, we’ll use a simple wai-aria widget for notification. this notifies the user of the error, but allows for them continue modifying the form without losing
focus (caused by the “onblur” handler in javascript's default ‘alert’ function). below is example javascript code which could be inserted above the closing “head” tag: <script type="application/javascript"> function removeoldalert() { var oldalert = document.getelementbyid("alert"); if (oldalert){ document.body.removechild(oldalert); } } function addalert(amsg) { ...
...der, try the following: enter only your first name as the name. when tabbing, you’ll hear an alert that tells you you’ve entered an invalid name. you can then shift-tab back and correct the error. enter an e-mail address without the “@” symbol. when tabbing out of this field, you should hear a warning that says you didn’t enter a valid e-mail address. in both cases, when returning
focus to the field in question, your screen reader should tell you that this field is invalid. jaws 9 supports this, but jaws 8 does not, so this may not work in all versions of the screen readers supported. a few questions that you might have q. why did you put both “(required)” in the label text and the aria-required attribute on some of the inputs? a. if this were a real live form, and the ...
...rsions of the screen readers supported. a few questions that you might have q. why did you put both “(required)” in the label text and the aria-required attribute on some of the inputs? a. if this were a real live form, and the site was being visited by a browser that does not yet support aria, we’d still want to give an indication that this is a required field. q. why don’t you set
focus back to the invalid field automatically? a. because this is not allowed by the windows api specs, and possibly others. also, letting the
focus jump around without real user interaction too often is not a nice thing to do in general. tbd: let's rethink this -- personally, i think setting
focus might be good if done without causing a keyboard trap. ...
An overview of accessible web applications and widgets - Accessibility
users, all features of a web application or widget should also be controllable with the keyboard, without requiring a mouse. in practice, this usually involves following the conventions supported by similar widgets on the desktop, taking full advantage of the tab, enter, spacebar, and arrow keys. traditionally, keyboard navigation on the web has been limited to the tab key. a user presses tab to
focus each link, button, or form on the page in a linear order, using shift-tab to navigate backwards. it's a one-dimensional form of navigation—forward and back, one element at a time. on fairly dense pages, a keyboard-only user often has to press the tab key dozens of times before accessing the needed section. implementing desktop-style keyboard conventions on the web has the potential to significa...
...element at a time. on fairly dense pages, a keyboard-only user often has to press the tab key dozens of times before accessing the needed section. implementing desktop-style keyboard conventions on the web has the potential to significantly speed up navigation for many users. here's a summary of how keyboard navigation should work in an aria-enabled web application: the tab key should provide
focus to the widget as a whole. for example, tabbing to a menu bar should not put
focus on the menu's first element. the arrow keys should allow for selection or navigation within the widget. for example, using the left and right arrow keys should move
focus to the previous and next menu items. when the widget is not inside a form, both the enter and spacebar keys should select or activate the contro...
...in a form, the spacebar key should select or activate the control, while the enter key should submit the form's default action. if in doubt, mimic the standard desktop behavior of the control you are creating. so, for the tabs widget example above, the user should be able to navigate into and out of the widget's container (the <ol> in our markup) using the tab and shift-tab keys. once keyboard
focus is inside the container, the arrow keys should allow the user to navigate between each tab (the <li> elements). from here, conventions vary from platform to platform. on windows, the next tab should automatically be activated when the user presses the arrow keys. on mac os x, the user can press either enter or the spacebar to activate the next tab. an in-depth tutorial for creating keyboard-navig...
Accessibility documentation index - Accessibility
aria: form role aria, aria role, aria figure, accessibility, reference, rôle, form the form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form. 64 aria: grid role aria, html the grid role is for a widget that contains one or more rows of cells. the position of each cell is significant and can be
focused using keyboard input. 65 aria: gridcell role aria, html the gridcell role is used to make a cell in a grid or treegrid. it is intended to mimic the functionality of the html td element for table-style grouping of information. 66 aria: heading role aria, aria role, aria heading, reference the heading role defines this element as a heading to a page or se...
...y guidelines wcag, web content accessibility guidelines this set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the w3c web content accessibility guidelines 2.0 or 2.1 (or just wcag, for the purposes of this writing). ...
...ity guidelines 2.0 or 2.1 (or just wcag, for the purposes of this writing). 96 keyboard accessibility, keyboard if an element can be
focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option). 97 operable accessibility,
focus, navigation, principle 2, timing, wcag, web content accessibility guidelines, headings, keyboard, keyboard trap, labels, operable, seizures this article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the operable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1. operable states that user interface co...
Mozilla CSS extensions - CSS: Cascading Style Sheets
once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after...
...default-color -moz-cellhighlight -moz-cellhighlighttext -moz-field -moz-fieldtext -moz-dialog -moz-dialogtext -moz-dragtargetzone -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-
focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-menuhover -moz-menuhovertext -moz-win-communicationstext -moz-win-mediatext -moz-nativehyperlinktext display -moz-box -moz-inline-block -moz-inline-box -moz-inline-gridobsolete since gecko 62 -moz-inline-stackobsolete since gecko 62 -moz-inline-table -moz-gridobsolete since gecko 62 -moz-grid-gr...
...x-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 and :visited] :-moz-broken ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-
focus-inner ::-moz-
focus-outer :-moz-
focusring :-moz-full-screen :-moz-full-screen-ancestor :-moz-handler-blocked :-moz-handler-crashed :-moz-handler-disabled ::-moz-inline-table l :-moz-last-node :-moz-list-bullet :-moz-list-number :-moz-loading :-moz-locale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :-moz-lwtheme-darktext n – r :-moz-native-a...
HTML5 - Developer guides
loading interactively new information. the contenteditable attribute: transform your website to a wiki! html5 has standardized the contenteditable attribute. learn more about this feature. drag and drop the html5 drag and drop api allows support for dragging and dropping items within and between web sites. this also provides a simpler api for use by extensions and mozilla-based applications.
focus management in html the new html5 activeelement and has
focus attributes are supported. web-based protocol handlers you can now register web applications as protocol handlers using the navigator.registerprotocolhandler() method. requestanimationframe allows control of animations rendering to obtain optimal performance. fullscreen api controls the usage of the whole screen for a web page or a...
...ns as protocol handlers using the navigator.registerprotocolhandler() method. requestanimationframe allows control of animations rendering to obtain optimal performance. fullscreen api controls the usage of the whole screen for a web page or application, without the browser ui displayed. pointer lock api allows locking the pointer to the content, so games and similar applications don't lose
focus when the pointer reaches the window limit. online and offline events in order to build a good offline-capable web application, you need to know when your application is actually offline. incidentally, you also need to know when your application has returned to an online status again. device access touch events handlers to react to events created by a user pressing touch screens. using ge...
... device orientation get the information when the device on which the browser runs changes orientation. this can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape). pointer lock api allows locking the pointer to the content, so games and similar application don't lose
focus when the pointer reaches the window limit. styling css has been extended to be able to style elements in a much more complex way. this is often referred as css3, though css is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered. new background styling features it is now...
HTML attribute: multiple - HTML: Hypertext Markup Language
rs.com</option> <option>dopey@woodworkers.com</option> <option>doc@woodworkers.com</option> </select> </p> <p> <input type="submit" value="submit"> </p> </form> note the difference in appearance between the two form controls. ...
...the selection of non-contiguous is not as well supported: items should be able to be selected and deselected by pressing space , but support varies between browsers. ...
...cate any required and optional input, data formats, and other relevant information. when using the multiple attribute, inform the user that multiple values are allowed and provide directions on how to provide multiple values, such as "separate email addresses with a comma." setting size="1" on a multiple select can make it appear as a single select in some browsers, but then it doesn't expand on
focus, harming usability. don't do that. if you do change the appearance of a select, and even if you don't, make sure to inform the user that more than one option can be selected by another method. ...
SVG documentation index - SVG: Scalable Vector Graphics
dered along a path. 189 specularconstant filters, svg, svg attribute the specularconstant attribute controls the ratio of reflection of the specular lighting. it represents the ks value in the phong lighting model. the bigger the value the stronger the reflection. 190 specularexponent filters, svg, svg attribute the specularexponent attribute controls the
focus for the light source. the bigger the value the brighter the light. 191 spreadmethod svg, svg attribute the spreadmethod attribute determines how a shape is filled beyond the defined edges of a gradient. 192 startoffset svg, svg attribute the startoffset attribute defines an offset from the start of the path for the initial current text position along the ...
...ute represents the height of the surface for a light filter primitive. 212 systemlanguage svg, svg attribute the systemlanguage attribute represents a list of supported language tags. this list is matched against the language defined in the user preferences. 213 tabindex svg, svg attribute the tabindex attribute allows you to control whether an element is
focusable and to define the relative order of the element for the purposes of sequential
focus navigation. 214 tablevalues svg, svg attribute the tablevalues attribute defines a list of numbers defining a lookup table of values for a for a color component transfer function. 215 target svg, svg attribute the target attribute should be used when there are multipl...
...image> element allows for raster images to be rendered within an svg object. 288 texts intermediate, svg, svg:tutorial when talking about text in svg we have to differentiate two almost completely separate topics. the one is the inclusion and display of text in an image, and the other are svg fonts. the latter may be described in a later section of the tutorial, while we will
focus completely on the first part: bringing text into an svg image. 289 tools for svg intermediate, needsupdate, svg, tools now that we covered the basics of the svg internals, we will take a look at some tools to work with svg files. 290 svg animation with smil animation, firefox 4, gecko 2.0, svg, svg animation firefox 4 introduced support for animating svg ...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
implemented yet (bug 1325319). ...
... with inline svg applying to whole document content implementation status unknown presentation attributes on any svg namespaced element implementation status unknown display behavior of <style> defined via ua style sheet implementation status unknown !important user agent style rules controlling never-rendered elements implementation status unknown :
focus and ::selection styles implementation status unknown geometry change notes x and y attributes removed from <pattern> and <filter> implementation status unknown auto value of width and height computes to 0 but 100% on <svg> not implemented coordinate systems, transformations and units change notes exception for bad...
...abort, error, and unload instead of svgload, svgabort, svgerror, and svgunload not implemented (bug 620002) only structurally external elements and outermost <svg> element fire load events implementation status unknown resize and scroll instead of svgresize and svgscroll implementation status unknown domactivate removed implementation status unknown
focusin and
focusout instead of dom
focusin and dom
focusout implementation status unknown keyboard events implementation status unknown mutation events removed implementation status unknown svgzoomevent removed implementation status unknown <cursor> element deprecated implementation status unknown linking change notes li...
Display a Popup - Archive of obsolete content
dit-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline. 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. it means that the panel's about // to be shown. ...
...e the newline. 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. it means that the panel's about // to be shown. // // set the
focus to the text area so the user can // just start typing. ...
Tree - Archive of obsolete content
getting the cell from a mouse click your first choice i...
...y-tree"); var cellindex = 0; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(cellindex)); alert(celltext); } getting the tree item from the
focused row assuming <tree id="my-tree">, you can use the following to get the tree item: var view = document.getelementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 if the tree is not
focused var treeitem = view.getitematindex(sel); note that the current index may be unselected (for example, a multi-select tree). getting the cell from a mouse click your first choice is likely to try <treecell onclick="yourfunc();"/> or something similar. but this will not work. you can't add event handlers to <treecell>. instead, you can add the event handler to the <tree> element. you can then ...
View Source for XUL Applications - Archive of obsolete content
ser (optional) the browser containing the document that we would like to view the source of. this is optional if outerwindowid is not passed. outerwindowid (optional) the outerwindowid of the content window containing the document that we want to view the source of. pass this if you want to attempt to load the document source out of the network cache. linenumber (optional) the line number to
focus on once the source has loaded. deprecated api this api is likely to go away in the future, and should no longer be used. the viewsource method will also accept the following arguments in place of the object: aurl a string url for the document to view the source of. apagedescriptor (optional) a "descriptor" that allows the source to be retrieved from the network cache. this is usually...
... ...
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
input controls xul includes a number of input control elements that are very similar to html's form-related elements. labels use the label element for individual text labels, such as descriptive text. the value of the value attribute is the text that will be displayed. the control attribute takes as its value an id reference to another xul element with that id; clicking that label or giving it
focus can be used to pass the
focus to the referenced xul element. this can also be used to display longer chunks of text. if you want to insert long strings that automatically wrap to the window’s width, you can use the flex attribute as shown in listing 14, which will automatically expand it; in this case you don't set the value using the value attribute, instead you should place it in the content...
...rtcuts (pressing a key while holding down modifier keys like control or shift.) in a dhtml-based interface, you need a script that will intercept keyboard inputs. in xul, you can define keyboard shortcuts simply by using the key element, as shown in listing 19. <key id="key-save" key="s" modifiers="accel,shift" oncommand="save();"/> <key id="key-scroll-up" keycode="vk_page_up" oncommand="advance
focus(-1);"/> listing 19: defining keyboard shortcuts to make letters, numbers, symbols, or the space bar act as triggers, declare that character as the key attribute’s value. you can use either uppercase and lowercase letters and they will be handled the same. for triggers on other special keys, use the keycode attribute with the appropriate keycode name value. in general you can use the keycode...
Getting Started with Firefox Extensions - Archive of obsolete content
ng from a toolbar button to a completely new feature. they allow the application to be customized to fit the personal needs of each user if they need additional features, while keeping the applications small to download. taken from the extensions page. as described in the quoted text, an extension is a small application that adds something new to one or more mozilla applications. this tutorial
focuses on extensions for firefox, but the same (or very similar) principles apply to creating extensions for other applications such as thunderbird, seamonkey, and flock. it is also worth noting that there are differences between the definition of extension and add-on. all extensions are add-ons, but add-ons can also be themes, plugins, or language packs. this tutorial is about extension development,...
...dvanced and complex extensions, and you'll learn most of what it takes to create extensions like these. extensions now exist in 3 different forms: add-ons sdk extensions (also known as jetpacks), bootstrapped extensions and traditional extensions. if you're only getting started developing add-ons, the add-ons sdk provides a great way to quickly create simple ones and build on them. this tutorial
focuses on traditional extensions, which are created differently. bootstrapped extensions are a step above traditional ones in complexity, so you should go through this tutorial before giving them a try. we'll begin the tutorial by analyzing a very simple extension. the hello world extension our sample extensions and this tutorial in general are meant for modern versions of firefox, but most of it w...
Handling Preferences - Archive of obsolete content
make the window modal in systems where the instant apply rule is not used. notice that this is a preference that users can switch, so checking for the operating system is not good enough. the ge...
... make the window modal in systems where the instant apply rule is not used. notice that this is a preference that users can switch, so checking for the operating system is not good enough. ...
XUL user interfaces - Archive of obsolete content
showstatus(thedate) } catch (ex) {} } setday(thedate) } // internal function setday(adate) { if (currentday) currentday.setattribute("disabled", "true") if (adate == null) currentday = null else { var d = adate.getday() currentday = daybox.firstchild while (d-- > 0) currentday = currentday.nextsibling currentday.removeattribute("disabled") } datebox.
focus(); } function showstatus(adate) { if (adate == null) { status.removeattribute("warning") status.setattribute("label", "") } else if (adate === false || isnan(adate.gettime())) { status.setattribute("warning", "true") status.setattribute("label", "date is not valid") } else { status.removeattribute("warning") status.setattribute("label", adate.tolocaledates...
...on the document. challenge use the dom inspector tool to examine the date textbox. it is made up of other elements that are generated by its xbl binding. discover the class of its html:input element. this is the element that actually receives user input. using this knowledge, add a rule to the stylesheet that makes the background of the date box pale blue when it has keyboard
focus (but white when keyboard
focus is somewhere else). what next? if you had difficulty understanding this page, or if you have other comments about it, please contribute to its discussion page. in this demonstration, you see the standard rectangular shapes that are common to most user interfaces. mozilla also supports a specialized graphics language for creating shapes, using css styleshee...
Basics - Archive of obsolete content
e.string jetpack.notifications.show("hello world");var mybody = " my first message body on jetpack";var myicon = "http://www.mozilla.com/favicon.ico";jetpack.notifications.show({title: "my first message on jetpack", body: mybody, icon: myicon}); class tabs in this class you can find information about the tabs in your firefox window. the namespace for this class is jetpack.tabs. ...
...ions.show({title: "my first message on jetpack", body: mybody, icon: myicon}); class tabs in this class you can find information about the tabs in your firefox window. the namespace for this class is jetpack.tabs. blah(lengthstring
focusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring
focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded. on
focus()changing the
focus of a tab. methods open(urlstring)opens a new tab in your browser with a defined url. urlurl to be openedstring jetpack.tabs.open("htt...
findbar - Archive of obsolete content
ser element lets you set and get the browser in which the findbar is located. findmode type: integer read only. the find mode in use. ...
...command( findprevious ) return type: no return value call this method to handle your application's "find next" and "find previous" commands. you should specify true as the input parameter to perform a "find previous" operation, or false to perform a "find next." startfind( mode ) return type: no return value call this method to handle your application's "find" command. this opens the findbar,
focuses the edit field for the search term, and selects its contents. the first time this is called for a given findbar, the findbar will flash to draw attention to itself. the mode should be one of find_normal, find_typeahead, or find_links. if you don't pass a mode, the last-used mode for the same findbar is used. if the findbar hasn't been used before, find_normal is the default. togglehighlig...
ContextMenus - Archive of obsolete content
can also be opened by pressing the menu key on the keyboard (the key on many keyboards next to control with a menu image) or by pressing shift+f10. you should not assume that a user has used the mouse to open a context menu. when using the mouse to open a context menu, the context is the element that was clicked. when using the keyboard, the context is the element in the window that is currently
focused. although there are several ways to open a context menu, a single event may be used to listen for any of these situations; the 'contextmenu' event is fired in any case. <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attach...
... certain circumstances, but should be hidden when they would never apply to the element that was clicked on. determining what was context clicked it is important to remember that a context menu may be opened in other ways than just with the mouse. however, even when using the keyboard, there will still be a node (the context) that the menu applies to, which will be the element that is currently
focused. when the mouse is used, the context will be the element that is clicked. you can retrieve this element using the popup's triggernode property. in firefox 3.6 and earlier, the document's popupnode property was used; this is now deprecated. in this example, the triggernode property is checked for a popup attached to a browser to determine whether an image is clicked: <script> function showhide...
Extensions - Archive of obsolete content
extension, depending on the order in which the overlays are applied. as you cannot predict this order, you should not rely on any menuitems being in particular positions in the presence of other extensions. modifying the context menu an extension may wish to modify the context menu associated with the browser area. normally, this menu displays menu items specific to what was context clicked or
focused. for instance, opening a context menu for a link displays items to open the link in a new window or tab and to save or bookmark the link. an extension may modify the context menu to show additional items that either appear always, or appear only when certain content is selected. in firefox, the browser area that displays web pages has only one context menu. instead of having separate context m...
... may wish to use these properties instead of determining the type yourself, as the code already handles various special and complex cases that would take a lot of code to deal with manually. the following are the most common properties that you can check. an example follows. target the element that was context clicked. if the keyboard was used to open a context menu, this will be the
focused element. ontextinput true if the target is a plain or password type input, a textarea, or an editable area. this would be used to enable or disable commands related to text editing. onimage true if the target is an image. hasbgimage true if the target or an ancestor has a background image. onmathml true if the target is a mathml element. ...
OpenClose - Archive of obsolete content
is a child of another menu and the parent menu is not open. in this case, the parent menu must be opened first. if you do want to open a submenu, open the parent menu first, and then open the child menu in a popupshown event listener. see the popupshown event for an example of how to do this. a menu in an unprivileged content window (such as a web page) can only open a popup while its window is
focused, and it is in the currently active tab. that means that a document in a background tab cannot open a menu or popup. closing menus menus will close automatically once the user has made a selection from the menu. when an menu item is selected, it fires a command event so that code may be used to perform an action. the user may cancel selecting a command from a menu by pressing the escape key. ...
...zing a popup. the fifth argument to openpopup, iscontextmenu, is a flag which indicates whether a popup is being opened as a context menu. pass true if so, or false if not. it should be obvious from how you are calling openpopup what to set this argument to. note that the same menu can be opened in either manner so this flag doesn't affect how the popup appears. what it does do is affect how the
focus and highlighting of the menu is handled. as long as you pass the right value depending on the situation, it isn't too important to know the specifics of the difference between both cases. however, you can see the effect of the flag when using the firefox bookmarks. try opening a submenu of a bookmark (a bookmark folder) and note how the highlighting still changes as the mouse is moved over other...
Code Samples - Archive of obsolete content
-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice) .loadurl(uri) compose an e-mail to compose an e-mail, use the same code as in the section open a web page above. change the first line to specify: const url = "mailto://" open an application window to open one of the application's windows, use code like this. ...
...f the application's windows, use code like this. if the window already exists, this code just
focusses it. otherwise it opens the window: const name = "...internal name of the window..." const uri = "...chrome uri of the window..." var w = components .classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator) .getmostrecentwindow(name) if (w) w.
focus() else components .classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher) .openwindow(null, uri, name, "chrome,resizable", null) change the first two lines to specify the window that you want to open. here are the names and uris of some windows: thunderbird configuration const name = "preferences:configmanager"...
Adding Labels and Images - Archive of obsolete content
hat will wrap onto several lines.</label> as with html, line breaks and extra whitespace are collapsed into a single space. later, we'll find out how to constrain the width of elements so that we can see the wrapping more easily. control attribute you can use the control attribute to set which control the label is associated with. when the user clicks on an associated label, that control will be
focused. this association is also important for accessibility, so that screen readers read aloud the label for the control as the user tabs to it. set the value of the control attribute to the id of the element to be
focused. example 3 : source view <label value="click here:" control="open-button"/> <button id="open-button" label="open"/> in the example above, clicking the label will cause the button ...
...description element for descriptive text not associated with any particular control, you can use the description tag. ...
Using the Editor from XUL - Archive of obsolete content
editorshell. this editor command dispatching is described separately. the following event listeners are registered: in nshtmleditor::installeventlisteners(), we install the following. these get installed for all types of editor (i.e. for text widgets and composer): nstexteditorkeylistener (as a nsidomkeylistener) nstexteditormouselistener (as a nsidommouselistener) nstexteditor
focuslistener (as a nsidom
focuslistener) nstexteditortextlistener (as a nsidomtextlistener) nstexteditorcompositionlistener (as a nsidomcompositionlistener) nstexteditordraglistener (as a nsidomdraglistener) in nseditorshell::preparedocumentforediting(), we install a mouse listener. this only happens for situations where the nseditorshell is used (i.e. not for text widgets): ...
...icitly it passes on to nshtmleditor::editorkeypress(), which is where normal typing keys end up. note that it only responds to the keypress event; keydown and keyup events are ignored. nstexteditormouselistener the mouse listener is used to do middle-mouse paste (which is a unix copy/paste feature). this happens in response to mouseclick with button 2. it also forces an ime commit. nstexteditor
focuslistener editor responds to
focus and blur events by showing and hiding the caret or selection as appropriate. nstexteditortextlistener the nsidomtextlistener interface that this implements is used by the ime code. in response to the handletext event, the editor sets the inline input composition string. nstexteditorcompositionlistener nstexteditorcompositionlistener implements another ime-rel...
caption - Archive of obsolete content
determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. tabindex type: integer the tab order of the element. the tab order is the order in which the
focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties accesskey type: character gets and sets the value of the accesskey attribute. crop type: string gets and sets the value of the crop attribute. image type: image url gets and sets the value of the image att...
...image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. tabindex type: integer gets and sets the value of the tabindex attribute. ...
commandset - Archive of obsolete content
s. events type: comma-separated list a comma-separated list of event names that the command updater will update upon. if this attribute is not specified, or you set it to the value '*', all events are valid. valid events are listed below, or you can use your own events. you can send a custom event by calling the updatecommands method of the command dispatcher.
focus: occurs when the
focused element changes. select: occurs when the selected text changed. clipboard: occurs when the clipboard is changed. undo: occurs when the undo buffer is changed. oncommandupdate type: script code this event occurs when a command update occurs. you would use this to update the disabled status of items. targets ...
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
key - Archive of obsolete content
(example needed) attributes command type: id set to the id of a command element that is being observed by the element. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
keyset - Archive of obsolete content
nt, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listcell - Archive of obsolete content
the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listhead - Archive of obsolete content
ead, one for each column. attributes disabled properties acesssibletype, disabled examples (example needed) attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listheader - Archive of obsolete content
</listitem> <listitem> <listcell label="roger"/> <listcell label="swashbuckler"/> </listitem> </listbox> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
menu - Archive of obsolete content
the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be
focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to m...
... in firefox 3. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
prefwindow - Archive of obsolete content
opened by default the next time the preferences dialog is opened. preferencepanes type: dom nodelist holds a list of all the prefpane elements in the window. type type: string gets and sets the value of the type attribute. ...
...e. if the child dialog is also a prefwindow, set its type attribute to child so that preferences will be saved properly when the main dialog is closed. openwindow( windowtype, url, features, params ) return type: window open a child window. the windowtype is a string specifying a window type. if a window with that type is already open, this method will just switch that window to the front and
focus it instead of opening another window. if a window of the type is not open, a new one is opened displaying the supplied url. showpane( prefpane ) return type: no return value switch to a particular pane. notes usage patterns opening/initializing a prefwindow note that you can define an initwithparams() function in your sub window - to handle parameters passed using ope...
tabbox - Archive of obsolete content
lick me"/></tabpanel> <tabpanel><!-- tabpanel fourth elements go here --></tabpanel> </tabpanels> </tabbox> attributes eventnode type: one of the values below indicates where keyboard navigation events are listened to. if this attribute is not specified, events are listened to from the tabbox. thus, if this attribute is not used, the tabbox or an element inside it must have the
focus for the keyboard navigation to apply. parent keyboard navigation is captured at the parent of the tabbox. window keyboard navigation is captured at the window level. tab navigation will occur as long as any element in the window is
focused. document keyboard navigation is captured at the document level. tab navigation will occur as long as any element in the document is
focused. ...
...tabs element. assign a value to this property to modify the currently selected tab. tabs type: tabs element the tabs element contained within the tabbox. tabpanels type: tabpanels element the tabpanels element contained within the tabbox. ...
titlebar - Archive of obsolete content
d dragged, the window moves with it. this element can't be used to change the platform-native titlebar of normal windows; instead, it's used to create custom titlebars for chromeless windows. if the titlebar is in a panel element, dragging it will move the panel. elements inside the titlebar usually don't receive any mouse events, so e.g. buttons inside it can't be clicked and textboxes can't be
focused with the mouse. if you don't want this behavior, you can override it by setting allowevents="true" on the titlebar element. the titlebar will send a command event after the move is complete. examples this xul file will create a hud-style window that can be moved with the mouse. it will close if the mouse button is released. <?xml version="1.0"?> <window title="movable hud window" xm...
...datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
-ms-accelerator - Archive of obsolete content
erator attribute in a <u> element to specify that the "n" in the <label> element is a keyboard shortcut. when the option to "hide keyboard navigation indicators until i use the alt key" is enabled in the user's display properties, the "n" is not underlined until the user presses the alt key. when alt + n is pressed, the <input> element that defines an accesskey attribute value of "n" receives the
focus. <!doctype html> <html> <head> <title>accelerator</title> </head> <body> <label for="oname"><u style="-ms-accelerator: true; accelerator: true">n</u>ame: </label> <input type="text" id="oname" size="25" accesskey="n" value="your name here" /> </body> </html> specifications not part of any specification. remarks this property is supported by windo...
.../html> specifications not part of any specification. remarks this property is supported by windows 2000 and later. it enables users to hide navigation indicators for menu items and controls until the alt key is pressed. an access key is a single character used as a keyboard shortcut for selecting an object. the user presses the alt key and holds it while pressing the character to move input
focus to the object, and to invoke the default event associated with the object. in internet explorer 8 (ie8) the -ms-accelerator attribute is an extension to css, and can be used as a synonym for accelerator in ie8 standards mode. ...
XForms Custom Controls - Archive of obsolete content
the processor. below is the structure of the interface. as always, please refer directly to the source code to be sure that you are using the latest, up-to-date version: extensions/xforms/nsixformsuiwidget.idl. interface nsixformsuiwidget : nsidomelement { /** * is called when control should be updated to reflect the value of the bound node. */ void refresh(); /** * is called when
focus is advanced to the xforms element. */ boolean
focus(); /** * is called when control should be disabled. * this really only applies to the submit element. */ void disable(in boolean disable); /** * is called to get current value of control. */ string getcurrentvalue(); } notes: getcurrentvalue() should return the current value of the control as seen by a user. the c...
...e() should return the current value of the control as seen by a user. the current value of a control could differ from the value of the bound node in cases where @incremental='false'. disable() is called by the xforms processor to indicate to a submit element that it needs to disable/enable due to the beginning/ending of the submission process. currently it has no meaning outside of this context.
focus() is used by the processor to tell the control that it is getting
focus through one of a variety of ways (i.e. through xf:set
focus action) and that the control needs to ensure that the proper widget is given
focus. with rare exception, your control should only need to implement the nsixformsuiwidget interface. but certain xforms controls need to implement additional interfaces. such elements inc...
XForms Select Element - Archive of obsolete content
ally group these pre-defined items by using the choices (see the spec) element to contain them. note, some representations of the select element do not support visual grouping. attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control. accesskey - used to specify the keyboard shortcut for
focusing this control. single-node binding special selection - isn't currently supported. this attribute, when set to 'open', allows the user to provide free entry to the list. possible values are open and closed, default is closed. incremental - supported, default value is true properties selection - see corresponding attribute incremental - see corresponding attribute type restrictions ...
...sed when appearance = 'full' (xhtml/xul) list displaying a listbox is the default representation (xhtml/xul). characteristics analogous widgets are <html:select size="5" multiple="true"/> and <xul:listbox seltype="multiple"/> visual grouping by choices element isn't implemented if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e. loses
focus), otherwise it is updated upon item selection check group the select is represented as group of checkboxes (xhtml/xul). characteristics appearance attribute contains the value full there are no analogue widgets in xhtml or in xul visual grouping by choices element is supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:model> ...
Mozilla XForms User Interface - Archive of obsolete content
e processor as to which widget to use to represent the xforms control. three possible values are available to the author: minimal, compact and full. generally speaking, the main purpose for these values is to reflect how much space (screen real estate) the displayed widget will take. tabindex - defines the keyboard navigation sequence between controls. accesskey - keyboard shortcut for moving
focus to an xforms element. binding attributes single-node (see the spec) and node-set (see the spec) attributes are used to bind xforms elements to instance nodes. these attributes are: ref, nodeset, model and bind. xforms elements almost every xforms element can be presented as one of serveral different kinds of widgets. this section contains a short description of each xforms element and its repres...
...ntrols described above. label specifies the label for the xforms control (see the spec). every form control other than the output element must contain a label element. it is valid for a form control to have an empty label element. help specifies contextual help for the containing form control (see the spec). the help will be displayed if the f1 key is pressed while the containing form control has
focus. hint similar to a tooltip (see the spec). the hint is displayed when the mouse moves and pauses over the containing form control. alert this message will be shown when the form control cannot properly bind to instance data or when the instance data value is invalid or out of the specified range of selectable values (see the spec). message used in combination with event listeners to display a mes...
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
ed into the css specification, is very popular for the styling of text links, particularly those that are supposed to look and act like javascript-driven "rollovers." however, advancing css support in browsers has caused some unexpectedly aggressive hovering behavior on some pages. hover and non-link elements section 5.11.3 of css2 defines the three dynamic pseudo-classes (:hover, :active, and :
focus) and then goes on to say: css doesn't define which elements may be in the above states, or how the states are entered and left. scripting may change whether elements react to user events or not, and different devices and uas may have different ways of pointing to, or activating elements. thus, although authors are used to thinking of these states as applying exclusively to hyperlinks, they are ...
... element names in dynamic-state pseudo-classes that are meant to be applied to hyperlinks. furthermore, combining pseudo-classes prevents hover styles from being applied to non-hyperlink anchors. thus, a:hover should always be used instead of just :hover, and a:link:hover (and a:visited:hover) are preferred to the simpler a:hover related links the dynamic pseudo-classes: :hover, :active, and :
focus :hover pseudo-class (msdn) original document information author(s): eric a. meyer, netscape communications last updated date: published 07 mar 2003; revised 21 mar 2003 copyright information: copyright © 2001-2003 netscape. all rights reserved. note: this reprinted article was originally part of the devedge site. ...
Index - Game development
u wait for it to become famous. 8 game distribution cocoonio, game, game publishing, games, gaming, html5, javascript, mobile game distribution, phonegap, web stores, distribution distribution is the way to give the world access to your game. there are many options available and there's no single good answer as to which is the best. when you've published the game it's time to
focus on promotion — letting people know your game exists. without promotion, they wouldn't even be able to learn about it and play it. 9 game monetization games, html5, javascript, monetization, advertisements, branding, iap, licensing there are many ways to earn money — everything that applies to the "normal" aaa gaming world can be, more or less, applied to casual html5 game...
...people know your game exists. without promotion, they wouldn't even be able to learn about it and play it. 9 game monetization games, html5, javascript, monetization, advertisements, branding, iap, licensing there are many ways to earn money — everything that applies to the "normal" aaa gaming world can be, more or less, applied to casual html5 games. you might however also
focus on selling licenses, doing branding, or earning on a revenue share basis from the advertisements. it's totally up to you which path you're going to follow. 10 game promotion community, games, javascript, promotion, blog, competitions, youtube any way of promoting your game is good. you have a whole lot of options to chose from with most of them being free, so it's only about ...
Game distribution - Game development
bit of time depending on the size of the game and your network speed. in any case, it's a lot easier to promote the game if you can drive traffic directly where you want it and don't have to jump through lots of hoops to play. desktop vs mobile the vast majority of the traffic we are interested in — people playing html5 games — comes from mobile devices so that's something you will have to
focus on if you truly want to succeed. mobile devices are where html5 technology can truly shine and show its advantages. there's no flash, and html5 is fully multiplatform. trying to compete with desktop games directly is very difficult. you can put your html5 games into the same arena (see native desktop, later on) and you should because it's good to diversify the platforms you support, but you have...
...— is an open-sourced and cross-platform tool from github. manifold.js — this tool from the microsoft team can create native distributions of html5 games from ios, android, and windows. summary distribution is the way to give the world access to your game. there are many options available and there's no single good answer as to which is the best. when you've published the game it's time to
focus on promotion — letting people know your game exists. without promotion, they wouldn't even be able to learn about it and play it. ...
Game promotion - Game development
you've implemented already. that way everyone benefits — people learn new skills, your game gets promoted, and if you're lucky you can even get paid for writing a tutorial if it's good enough. there are portals like tuts+ game development which will be more than happy if you write for them - they pay for the content, but not all topic ideas will be accepted. when writing a tutorial remember to
focus on delivering something valuable to the reader. they want to learn something - offer your expertise and use your game as a case study.
focus on one aspect and try to explain it throughout and in detail. also remember to follow up discussion in comments if people have any questions. if portals you contact are not interested in your content because you don't have any experience yet, try writing tu...
...l and global, gives you the ability to meet your fans face to face, as well as other members of the development community. value the fact that they spent their time seeing you. conferences there are many conferences where you can give a talk explaining some technical difficulties you overcame, or how you implemented specific apis; again — use your games as examples for that. it's important to
focus on the knowledge part and tone down the marketing — devs are sensitive on this matter and you may end up with an angry crowd if you just try to sell them something. fairs the other event-related option is fairs (or expos) — at such an event you can get a booth among other devs and promote your game to all the attendees passing by. if you do so, try to be unique and original, so you easily s...
GLSL Shaders - Game development
ditional properties. the 3d coordinate system defines space and the vertices help define shapes in that space. shader types a shader is essentially a function required to draw something on the screen. shaders run on a gpu (graphics processing unit), which is optimized for such operations. using a gpu to deal with shaders offloads some of the number crunching from the cpu. this allows the cpu to
focus its processing power on other tasks, like executing code. vertex shaders vertex shaders manipulate coordinates in a 3d space and are called once per vertex. the purpose of the vertex shader is to set up the gl_position variable — this is a special, global, and built-in glsl variable. gl_position is used to store the position of the current vertex. the void main() function is a standard way o...
...xplain those shaders in action. be sure to read three.js tutorial first to grasp the concept of the scene, its objects, and materials. note: remember that you don't have to use three.js or any other library to write your shaders — pure webgl (web graphics library) is more than enough. we've used three.js here to make the background code a lot simpler and clearer to understand, so you can just
focus on the shader code. three.js and other 3d libraries abstract a lot of things for you — if you wanted to create such an example in raw webgl, you'd have to write a lot of extra code to actually make it work. environment setup to start with the webgl shaders you don't need much. you should: make sure you are using a modern browser with good webgl support, such as the latest firefox or chrom...
3D games on the Web - Game development
r dynamic 3d graphics with javascript that is hardware accelerated. documentation and browser support the webgl project documentation and specification is maintained by the khronos group, not the w3c as with most of the web apis. support on modern browsers is very good, even on mobile, so you don't have to worry about that too much. the main browsers are all supporting webgl and all you need to
focus on is optimizing the performance on the devices you use. there's an ongoing effort on releasing webgl 2.0 (based on opengl es 3.0) in the near future, which will bring many improvements and will help developers build games for the modern web using current, powerful hardware. explaining the basic 3d theory the basics of 3d theory centers around shapes represented in a 3d space, with a coordinat...
...ll want to get to grips with it in the long run, as your projects get more advanced (see our webgl documentation to get started.) for real-world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. using a framework for 3d games also helps optimize the performance as a lot is taken care of by the tools you use, so you can
focus on building the game itself. the most popular javascript 3d library is three.js, a multi-purpose tool that makes common 3d techniques simpler to implement. there are other popular game development libraries and frameworks worth checking too; a-frame, playcanvas and babylon.js are among the most recognizable ones with rich documentation, online editors and active communities. building up a basic...
2D maze game with device orientation - Game development
it’s quite new, but growing rapidly thanks to the passionate community involved in the development process. you can check it out on github where it’s open sourced, read the online documentation and go through the big collection of examples. the phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can
focus on the game idea itself. starting with the project you can see cyber orb source code on github. the folder structure is quite straightforward: the starting point is the index.html file where we initialize the framework and set up an <canvas> to render the game on. you can open the index file in your favourite browser to launch the game and try it. there are also three folders in the director...
...ty is used to set the bounciness of the ball when it hits the obstacles. controlling the ball it’s cool to have the ball ready to be thrown around in the play area, but it’s also important to be able to actually move it! now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the device orientation api. let’s
focus on the keyboard first by adding the following to the create() function : this.keys = this.game.input.keyboard.createcursorkeys(); as you can see there’s a special phaser function called createcursorkeys(), which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right. next we will add the following code to the update() function, so it will be...
RAIL - MDN Web Docs Glossary: Definitions of Web-related terms
in acronym order, the main tenets are: response respond to users immediately, acknowledging any user input in 100ms or less. ...
...in acronym order, the main tenets are: response respond to users immediately, acknowledging any user input in 100ms or less. ...
Advanced styling effects - Learn web development
the button has a simple black box s...
...the button has a simple black box shadow set on it by default, plus a couple of inset shadows, one light and one dark, placed on opposite corners of the button to give it a nice shading effect. ...
Pseudo-classes and pseudo-elements - Learn web development
eudo classes some pseudo-classes only apply when the user interacts with the document in some way. these user-action pseudo-classes, sometimes referred to as dynamic pseudo-classes, act as if a class had been added to the element when the user interacts with it. examples include: :hover — mentioned above; this only applies if the user moves their pointer over an element, typically a link. :
focus — only applies if the user
focuses the element using keyboard controls. what is a pseudo-element? pseudo-elements behave in a similar way, however they act as if you had added a whole new html element into the markup, rather than applying a class to existing elements. pseudo-elements start with a double colon ::. ::pseudo-element-name note: some early pseudo-elements used the single col...
...matches an element that has no children except optionally white space. :enabled matches user interface elements that are in an enabled state. :first in paged media, matches the first page. :first-child matches an element that is first among its siblings. :first-of-type matches an element which is first of a certain type among its siblings. :
focus matches when an element has
focus. :
focus-visible matches when an element has
focus and the
focus should be visible to the user. :
focus-within matches an element with
focus plus an element with a descendent that has
focus. :future matches the elements after the current element. :hover matches when the user hovers over an element. :indete...
What are hyperlinks? - Learn web development
rl whenever you want to access a document. this is where hyperlinks revolutionized everything. links can correlate any text string with a url, such that the user can instantly reach the target document by activating the link. links stand out from the surrounding text by being underlined and in blue text. tap or click a link to activate it, or if you use a keyboard, press tab until the link is in
focus and hit enter or spacebar. links are the breakthrough that made the web so useful and successful. in the rest of this article, we discuss the various types of links and their importance to modern web design. deeper dive as we said, a link is a text string tied to a url, and we use links to allow easy jumping from one document to another. that said, there are some nuances worth considering: ...
...lse's webpage. without external links, there is no web, since the web is a network of webpages. use external links to provide information besides the content available through your webpage. incoming links a link from someone else's webpage to your site. it's the opposite of an external link. note that you don't have to link back when someone links to your site. when you're building a website,
focus on internal links, since those make your site usable. find a good balance between having too many links and too few. we'll talk about designing website navigation in another article, but as a rule, whenever you add a new webpage, make sure at least one of your other pages links to that new page. on the other hand, if your site has more than about ten pages, it's counter-productive to link to ever...
Example 3 - Learn web development
na</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:
focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : b...
...elect'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }, false); select.addeventlistener('
focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { if (event.keycode === 27) { deactivateselect(select); } }); }); }); result ...
Example 4 - Learn web development
na</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:
focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : b...
...rall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('
focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex...
Example 5 - Learn web development
ion" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:
focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : b...
...x); optionlist.foreach(function (option, index) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('
focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index...
Other form controls - Learn web development
ure, it is all rendered as if it was plain text content. (using contenteditable on non-form controls provides an api for capturing html/"rich" content instead of plain text). visually, the text entered wraps and the form control is by default resizable. modern browsers provide a drag handle that you can drag to increase/decrease the size of the text area. the following screenshots show default,
focused, and disabled <textarea> elements in firefox 71 and safari 13 on macos, and edge 18, yandex 14, firefox 71 and chrome 79 on windows 10. note: you can find a slightly more interesting example of text area usage in the example we put together in the first article of the series (see the source code also). controlling multi-line rendering <textarea> accepts three attributes to control its re...
...d="simple" name="simple"> <option value="banana">big, beautiful yellow banana</option> <option value="cherry">succulent, juicy cherry</option> <option value="lemon">sharp, powerful lemon</option> </select> by default, the height of the select box is enough to display a single value. the optional size attribute provides control over how many options are visible when the select does not have
focus. multiple choice select box by default, a select box only lets the user select a single value. by adding the multiple attribute to the <select> element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down cmd/ctrl and clicking multiple values on desktop). <select id="multi" name="multi" multiple size="2"> <optgroup ...
Your first form - Learn web development
ning your form before starting to code, it's always better to step back and take the time to think about your form. designing a quick mockup will help you to define the right set of data you want to ask your user to enter. from a user experience (ux) point of view, it's important to remember that the bigger your form, the more you risk frustrating people and losing users. keep it simple and stay
focused: ask only for the data you absolutely need. designing forms is an important step when you are building a site or application. it's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles: smashing magazine has some good articles about forms ux, including an older but still relevant extensive guide ...
.../* uniform size & alignment */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width: 300px; box-sizing: border-box; /* match form field borders */ border: 1px solid #999; } input:
focus, textarea:
focus { /* additional highlight for
focused elements */ border-color: #000; } textarea { /* align multiline text fields with their labels */ vertical-align: top; /* provide space to type some text */ height: 5em; } .button { /* align buttons with the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra margin represent r...
From object to iframe — other embedding technologies - Learn web development
— copy this. insert it into the input box below, and see what the result is in the output. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see an answer. ...
...ext) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.
focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = te...
Ember interactivity: Events, classes and state - Learn web development
d pass that text along to the todo list component to display. we can capture the keydown event via the on modifier, which is just ember syntactic sugar around addeventlistener and removeeventlistener (see this explanation if needed). add the new line shown below to your header.hbs file: <input class='new-todo' aria-label='what needs to be done?' placeholder='what needs to be done?' auto
focus {{on 'keydown' this.onkeydown}} > this new attribute is inside double curly braces, which tells you it is part of ember's dynamic templating syntax. the first argument passed to on is the type of event to respond to (keydown), and the last argument is the event handler — the code that will run in response to the keydown event firing. as you may expect from dealing with vanilla javascript obj...
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos
focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
React interactivity: Editing, filtering, conditional rendering - Learn web development
do not meet its criteria. the count in the heading above the list will also change to reflect the list! summary so that's it — our app is now functionally complete. however, now that we’ve implemented all of our features, we can make a few improvements to ensure that a wider range of users can use our app. our next article rounds things off for our react tutorials by looking at including
focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users. previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: eve...
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos
focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Working with Svelte stores - Learn web development
ollowing import statement below the existing ones: import { alert } from '../stores.js' update your addtodo() function like so: function addtodo(name) { todos = [...todos, { id: newtodoid, name, completed: false }] $alert = `todo '${name}' has been added` } update removetodo() like so: function removetodo(todo) { todos = todos.filter(t => t.id !== todo.id) todosstatus.
focus() // give
focus to status heading $alert = `todo '${todo.name}' has been deleted` } update the updatetodo() function to this: function updatetodo(todo) { const i = todos.findindex(t => t.id === todo.id) if (todos[i].name !== todo.name) $alert = `todo '${todos[i].name}' has been renamed to '${todo.name}'` if (todos[i].completed !== todo.completed) $alert ...
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos
focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Vue conditional rendering: editing existing todos - Learn web development
or click event. result: oncancel() method is invoked, which emits the edit-cancelled event (which is then listened for inside todoitem.vue, see above). summary this article has been fairly intense, and we covered a lot here. we've now got edit and delete functionality in our app, which is fairly exciting. we are nearing the end of our vue series now. the last bit of functionality to look at is
focus management, or put another way, how we can improve our app's keyboard accessibility. previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interacti...
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos
focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Adding a new todo form: Vue events, methods, and models - Learn web development
difier changes when v-model syncs the value for text inputs. as mentioned earlier, v-model syncing works by updating the variable using events. for text inputs, this sync happens using the input event. often, this means that vue is syncing the data after every keystroke. the .lazy modifier causes v-model to use the change event instead. this means that vue will only sync data when the input loses
focus or the form is submitted. for our purposes, this is much more reasonable since we only need the final data. to use both the .lazy modifier and the .trim modifier together, we can chain them, e.g. v-model.lazy.trim="label". update your v-model attribute to chain lazy and trim as shown above, and then test your app again. try for example, submitting a value with whitespace at each end. passing d...
...ooter functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos
focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Command line crash course - Learn web development
talling is potentially much larger than the benefits. however, for now we'll err on the side of simplicity and install globally to keep things simple. we'll look more at local installs and why they're good in the next article. installing prettier for this article we will install prettier as a global command line utility. prettier is an opinionated code formatting tool for front end developers,
focusing around javascript-based languages and adding support for html, css, scss, json and more. prettier can: save the cognitive overhead of getting the style consistent manually across all your code files; prettier can do this for you automatically. help newcomers to web development format their code in best-practice fashion. be installed on any operating system and even as a direct part of pr...
...f our code wants adjusting. cd into your directory, and try running this command: prettier --check index.js you should get on output along the lines of checking formatting... index.js code style issues found in the above file(s). forgot to run prettier? so there's some code styles that can be fixed. no problem. adding the --write option to the prettier command will fix those up, leaving us to
focus on actually writing useful code. now try running this version of the command: prettier --write index.js you’ll get an output like this checking formatting... index.js code style issues fixed in the above file(s). but more importantly, if you look back at your javascript file you’ll find it has been reformatted to something like this: const myobj = { a: 1, b: { c: 2 }, }; function pr...
CSUN Firefox Materials
nt articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users. in fact, the same keyboard commands are still available, so users can become comfortable and productive right away. screen magnifier users can also benefit from firefox's powerful features today, as caret and
focus tracking are fully enabled. mozilla corporation is currently reaching out to work with ai squared, the makers of zoomtext, in order to enable complete support of advanced zoomtext features such as the doc reader and app reader. firefox on linux currently boasts the best onscreen keyboard support in the industry via gok, the gnome onscreen keyboard. basic screen reader accessibility is available v...
...hopefully) share their tricks with everyone! ie tab allows you to embed internet explorer into firefox tabs. this extension is useful for making ie specific sites, or site that read better in ie, open directly in firefox, while using the internet explorer engine tab mix plus completely enhances firefox's tab browsing capabilities. it includes such features as duplicating tabs, controlling tab
focus, tab clicking options, undo closed tabs and windows, plus much more. it also includes a full-featured session manager with crash recovery that can save and restore combinations of opened tabs and windows. fire vox is a screen reader extension built just for firefox which can read mathml the accessibility extension, from the university of illinois, provides new menus and keyboard shortcuts for...
Embedding API for Accessibility
ading */ moz 0.8 link appearance setcharpref("browser.anchor_color", "#abcdef" /* hex color value */); setcharpref("browser.visited_color", "#abcdef" /* hex color value */); setboolpref("browser.underline_anchors", boolunderlinelinks); moz 0.8
focus appearance setboolpref("browser.display.use_
focus_colors", use
focuscolors); setcharpref("browser.display.
focus_background_color", colorstring); setcharpref("browser.display.
focus_text_color", colorstring); setcharpref("browser.display.
focus_ring_width", numpixels); /* 0-4 */ moz 0...
... timer speed setintpref("timer.relative_speed", percent); /* 100 corresponds to normal speed, 200 to double speed */ no allow cycling in lists and links setboolpref("keyboardnav.allow_cycling", allowcycling); no mouse pointer moves with keyboard
focus setboolpref("keyboardnav.mouse_follows_keyboard_
focus", mousefollows); /* if this pref is set, the mouse pointer will always be move to the 0,0 pixel of the current keyboard
focus frame */ no browse with caret setboolpref("accessibility.browsewithcaret", usecaret); /* if this pref is ...
Mozilla Plugin Accessibility
plugins in gecko-based browsers have a lot of accessibility issues. here is a rundown of problems and the planned solutions: new! see the plugin keyboard navigation proposal to see how the largest problems can be solved. problem planned solution owner targeted completion 1. all browser keys unavailable when plugin has
focus focused plugins currently have no choice but to consume all keyboard events. the new plugin api will allow plugins to bubble unused keypresses to the browser. this will allow keyboard users to still access menus, close the current page, scroll, move back and forward in history, etc. if the plugin needs those keystrokes, the can consume them and not pass them on. see the plugin keyboard navigation proposal for the...
... and forward in history, etc. if the plugin needs those keystrokes, the can consume them and not pass them on. see the plugin keyboard navigation proposal for the implementation plan. the same solution will be used for bug 140566 (full page plugins) and bug 78414 (partial page plugins), as well as the linux-specific bug 84159 and mac-specific bug 180426. ? no target 2.
focus gets stuck in plugin. user cannot keyboard navigate out of a plugin we will apply the same solution as in problem 4 above. the plugin will be responsible for bubbling up shift+tab and tab when the user has reached the end of the tab cycle within the plugin. the bug tracking this work is bug 93149. ? no target 3. many plugins lack accessibility api support m...
Adding a new event
lasses which are dispatched in content and do not represent user action. typically, events in this header file never cross process boundary. mouseevents.h this header file should be used for defining input events from pointing devices such as mouse. textevents.h this header file should be used for defining input events from keyboard or ime and also other text edit related events like querying
focused content information. touchevents.h this header file should be used for defining input events from touch devices. miscevents.h if the new event class isn't proper any header files above, you should use this. each event class should implement following methods manually. virtual internalfooevent* asfooevent() moz_override this method should just return this. this method is used for retri...
...oss process boundary. in such cases, you may need to add new paramtraits for the new event class in nsguieventipc.h. modify utility methods of widgetevent widgetevent class has some utility mehtods and all of them are implemented in widgeteventimple.cpp. e.g., if your event shouldn't cause dom event, you need to modify widgetevent::isallowedtodispatchdomevent(). if your event should be fired on
focused node, you need to modify widgetevent::istargetedat
focusedcontent(). how to implement a dom event class if you're in the case 3 (non-dom events), you can skip this section. create webidl of the event write a dom event definition with webidl. it should be created under dom/webidl/. see webidl bindings for the detail. if your new event shouldn't be created with event constructor such as: v...
Contributing to the Mozilla code base
on. ...
...boarding firefox browser (core layers) c++ firefox developers documentation firefox (front-end) javascript and/or html/css firefox developers documentation devtools javascript and/or html/css contribute to devtools add-ons javascript and/or html/css contribute to add-ons firefox
focus for android java contribute to firefox
focus for android firefox for fire tv java contribute to firefox for fire tv firefox preview (mobile browser, codename: "fenix") kotlin contribute to firefox preview firefox for ios swift contribute to firefox for ios firefox
focus for ios swift contribute to firefox
focus for ios mozilla hubs javascript and/or html/css, vr cont...
Experimental features in Firefox
ered circling around a center point rather than radiating from it. see bug 1175958 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.webrender.all pseudo-class: :
focus-visible allows
focus styles to be applied to elements like buttons and form controls, only when they are
focused using the keyboard (e.g. when tabbing between elements), and not when they are
focused using a mouse or other pointing device. see bug 1617600 for more details. release channel version added enabled by default? nightly 75 no developer editio...
...see bug 1565562 for more details. ...
How to implement a custom autocomplete search component
this can happen when using an autcomplete panel in a panel (for example if an autcomplete textbox is set in a panel that shows and hides). the solution is to de...
... display of the autocomplete panel (this is the panel where the autocomplete results/suggestions are displayed): the autocomplete panel seems to appear seldom and very erratically. this can happen when using an autcomplete panel in a panel (for example if an autcomplete textbox is set in a panel that shows and hides). the solution is to define a custom autocomplete panel as follows with the noauto
focus="true" attribute (very important, don't miss this part): <panel id="popup_autocomplete" type="autocomplete" noauto
focus="true" /> <textbox type="autocomplete" autocompletesearch="custom-autocomplete" autocompletepopup="popup_autocomplete" /> there is another example of the use of an autocomplete panel in autocomplete code snippets. tips clear caches! if you are using xulrun...
Index
it! you've setup up your local and remote environments, you've selected your l10n tools and projects, done some localization and even some testing! now you're ready for the final phase: becoming an official l10n release. here, we'll continue to stay true to the original intent of this guide and only present you with the technical information you need to become an official release. we'll primarily
focus on getting your release repository setup and the mercurial commands you'll need to know to use that repository. 16 translation phase localization, localization:tools congratulations on completing the initial setup! as a reward for your efforts, you get to move on to the very reason you've come here: to localize mozilla projects. 17 localization sign-off reviews ...
...cts, from first sign-in to finalizing your contributions. along the way, we'll point out some sweet features that will make you more efficient and make your l10n contributions easier. 27 localizing without a specialized tool from the create a new localization document, an interested localizer can follow a technical step-by-step process that starts the localization process by
focusing on how to localize two of the primary types of localization files (dtd and properties) used in the mozilla source code. with that document, users can see immediately two localized files in their user interface by following closely and carefully the steps to create a language pack or a binary file that is ready for installation. repeating the process allows a localizer to create a testable pack...
Gecko Profiler FAQ
this, i think. [ehsan] try clicking the toolbar icon for the extension, expanding the settings section, and enter the secret cheat code “,” in the threads field and click on “apply (restart profiler)”. this will capture all of the threads that the gecko profiler has been hooked to. this mode is usually recommended when you want to find a thread you want to do more
focused profiling on, so that you can find its name and then construct a more useful thread filter string based on the found thread name. how can i run (micro-?) benchmarks on the memory allocator to see if changes in it (or entire allocator replacements) are slower/faster? what you *don’t* want to do is writing a micro-benchmark that call malloc/free in a loop and the like a...
... how do we know when profiler output is statistically significant (for comparing across runs / across machines)? [mstange] hard to say. prefer to do comparisons by measuring your timings with code instead of by inspecting profiles. always keep in mind that profiler overhead has the potential to skew the results. is it better to profile across multiple platforms, or to
focus time on windows (since that's the bulk of our users)? [mstange] in my opinion, as long as you double-check that the problems you find are actually present on windows, it doesn’t matter much what platform you find them on. [ehsan] that being said, we do see a lot of windows-specific issues that you will not find on other platforms, for example sometimes code calls into a ...
Preference reference
set it to true to enable it, or false to disable it.browser.dom.window.dump.filebrowser.dom.window.dump.file redirects the ouput of window.dump() calls to a file whose address is specified in this preference if browser.dom.window.dump.enabled is set to true. ...
...n creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give
focus to it and load it in the foreground or keep
focus on the current tab and open it in the background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe preference browser.urlbar.trimurls controls whe...
Gecko events
ynchronous is supported: yes event_asynch_significant_change an object had a significant layout change which could affect the type of accessible object -- this is a layout occurance and is thus asynchronous is supported: yes event_active_decendent_changed the active descendant of a component has changed. the active descendant is used in objects with transient children. is supported: no event_
focus an object has received the keyboard
focus. is supported: yes event_state_change an object's state has changed. is supported: yes states: state_
focused, state_busy, xxx: event_location_change an object has changed location, shape, or size. is supported: no event_name_change an object's name property has changed. is supported: yes targets: table_cell - the cell of <xul:tree/>, any accessi...
...elected to unselected or from unselected to selected. event_hypertext_link_activated one of the links associated with the hypertext object has been activated. event_hypertext_link_selected one of the links associated with the hypertext object has been selected. event_hyperlink_start_index_changed the starting index of this link within the containing string has changed. event_hypertext_changed
focus has changed from one hypertext object to another, or
focus moved from a non-hypertext object to a hypertext object, or
focus moved from a hypertext object to a non-hypertext object. event_hypertext_nlinks_changed the number of hyperlinks associated with a hypertext object changed. event_object_attribute_changed an object's attributes changed. also see event_text_attribute_changed. event_page_ch...
Gecko states
ilable, i.e. disabled. applied to: all roles. state_selected the object is selected, i.e. indicates this object is the child of an object that allows its children to be selected and that this child is one of those children that has been selected. applied to: role_menuitem, role_cell, role_outlineitem, xxx: continue events: event_state_change Сoncomitant state: state_selectable state_
focused the object is
focused applied to: events: concomitant state: state_
focusable state_pressed the object is pressed. state_checked the object is checked state_mixed indicates that the state of a three-state check box or toolbar button is not determined. the check box is neither checked nor unchecked and is therefore in the third or mixed state. state_readonly the object is designate...
... with a mouse and dragging the mouse. state_moveable indicates that the object can be moved. for example, a user can click on the titlebar for the object and drag the object to a new location. state_selfvoicing the object or child uses text-to-speech (tts) technology for description purposes. a speech-based accessibility aid does not announce information when an object with this state has the
focus because the object automatically announces information. isn't used state_
focusable the object can be
focused. applied to: events: concomitant state: state_
focused state_selectable the object can be selected. applied to: events: concomitant state: state_selected state_linked indicates that the object is formatted as a hyperlink. the object role will usually be role_text_leaf.
Starting WebLock
getting called at startup no person is an island to himself, and neither are components. the sample component you've built up so far doesn't do anything. ...
...the weblock component starts automatically when xpcom is started up because it's been registered as a category in xpcom. when weblock is called, one of the first things it wants to do is read in a file that lists the urls that the browser is allowed to load. this file can exist anywhere on the local system, but we've placed it next to the...
nsIAccessibleEvent
cription 1.7 - 1.8.1 1.9 - 1.9.2 2.0 event_show 0x8002 0x0001 an object has been created. event_hide 0x8003 0x0002 an object has been destroyed. event_reorder 0x8004 0x005c 0x0003 an object's children have changed. event_active_decendent_changed 0x0007 0x0004 the active descendant of a component has changed. the active descendant is used in objects with transient children. event_
focus 0x8005 0x0008 0x0005 an object has received the keyboard
focus. event_state_change 0x800a 0x0009 0x0006 an object's state has changed. event_location_change 0x800b 0x000a 0x0007 an object has changed location, shape, or size. event_name_change 0x800c 0x000b 0x0008 an object's name property has changed. event_description_change 0x000c 0x0009 an object's description property has changed. ...
...ext_link_activated 0x0054 0x0050 one of the links associated with the hypertext object has been activated. event_hypertext_link_selected 0x0055 0x0051 one of the links associated with the hypertext object has been selected. event_hyperlink_start_index_changed 0x0056 0x0052 the starting index of this link within the containing string has changed. event_hypertext_changed 0x0057 0x0053
focus has changed from one hypertext object to another, or
focus moved from a non-hypertext object to a hypertext object, or
focus moved from a hypertext object to a non-hypertext object. event_hypertext_nlinks_changed 0x0058 0x0054 the number of hyperlinks associated with a hypertext object changed. event_object_attribute_changed 0x0059 0x0055 an object's attributes changed. also see event_te...
nsIAccessibleHyperLink
e object that owns this hyperlink. read only. note: the link itself is represented by one embedded character within the parent text, so the endindex should be startindex + 1. exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. selected boolean determines whether the element currently has the
focus, for example after returning from the destination page. read only. note: aria links can only be
focused if they have the tabindex attribute set. also, state_
focused should then be set on the accessible for this link. exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. startindex long the of...
...ri geturi( in long index ); parameters index the 0-based index of the uri to be returned. return value the nsiuri object containing the specifications for the uri. isselected() obsolete since gecko 1.9 (firefox 3) note: has been replaced by the selected attribute. boolean isselected(); parameters none. return value true if the element currently has the
focus. isvalid() obsolete since gecko 1.9 (firefox 3) note: has been replaced by the valid attribute. boolean isvalid(); parameters none. return value true if the hyperlink is valid. remarks anchors, image maps, xul:labels with class="text-link" implement this interface. see also nsiaccessible nsiuri ...
nsIAccessibleStates
stants msaa state flags - used for bitfield. more than 1 allowed. constant value description state_unavailable 0x00000001 the object is unavailable, that is disabled. state_selected 0x00000002 the object is selected, that is it indicates this object is the child of an object that allows its children to be selected and that this child is one of those children that has been selected. state_
focused 0x00000004 the object is
focused. state_pressed 0x00000008 the object is pressed. state_checked 0x00000010 the object is checked. state_mixed 0x00000020 indicates that the state of a three-state check box or toolbar button is not determined. the check box is neither checked nor unchecked and is therefore in the third or mixed state. state_readonly 0x00000040 the object is designated rea...
... mouse and dragging the mouse. state_moveable 0x00040000 the object can be moved. for example, a user can click on the titlebar for the object and drag the object to a new location. state_selfvoicing 0x00080000 the object or child uses text-to-speech (tts) technology for description purposes. a speech-based accessibility aid does not announce information when an object with this state has the
focus because the object automatically announces information. currently unused. state_
focusable 0x00100000 the object can be
focused. state_selectable 0x00200000 the object can be selected. state_linked 0x00400000 the object is formatted as a hyperlink. the object role will usually be role_text_leaf. (see nsiaccessiblerole.constants). state_traversed 0x00800000 the object is a hyperlink that ha...
nsIAlertsService
clic...
...alertsservice); var notiflistener = { observe: function(asubject, atopic, adata) { console.error('incoming notification observer:', asubject, atopic, adata); if (atopic == 'alertclickcallback') { console.error('user clicked trying to throw click'); services.prompt.alert(services.wm.getmostrecentwindow('navigator:firefox'), '
focus firefox', 'will now
focus fireox and then
focus the tab'); } else if (atopic == 'alertshow') { console.log('just showed notification'); } else if (atopic == 'alertfinished') { console.log('just alertfinished') } } }; as.showalertnotification('chrome://branding/content/icon64.png', 'stackoverflow - new messages', 'there are ## new messages. click here to
focus the tab', ...
nsICompositionStringSynthesizer
tr_convertedtext); compositionstringsynthesizer.appendclause("bar".length, compositionstringsynthesizer.attr_selectedconvertedtext); compositionstringsynthesizer.appendclause("-buzz".length, compositionstringsynthesizer.attr_convertedtext); // set caret position in the composition string. (optional) compositionstringsynthesizer.setcaret("foo-bar".length, 0); // dispatch dom events to modify the
focused editor compositionstringsynthesizer.dispatchevent(); when you modify the composing string, you don't need to recreate the instance anymore. the composing string information is cleared by a call of .dispatchevent(). for example, if the "bar" is converted to "bar": compositionstringsynthesizer.setstring("foo-bar-buzz"); compositionstringsynthesizer.appendclause("foo-".length, compositionstrin...
...ing of setstring(). void appendclause(in unsigned long alength, in unsigned long aattribute); parameters alength the length of appending clause. aattribute the attribute of appending clause. must be one of attr_* constants. dispatchevent() dispatches dom events for setting the composition string which are specified by setstring(), appendclause() and setcaret() to the
focused editor. if appendclause() hasn't been called, this dispatches events to set composition string without clause information. in other words, commits composition string. if appendclause() and/or setcaret() are not called properly, e.g., sum of alength of calls of appendclause() is not same as composition string set by setstring(), this throws an exception. after a call of this, all stored compo...
nsIEditorIMESupport
oid forcecompositionend(); void getpreferredimestate(out unsigned long astate); native code only! void getquerycaretrect(in nsquerycaretrecteventreplyptr areply); native code only! obsolete since gecko 1.9.1 void getreconversionstring(in nsreconversioneventreplyptr areply); native code only! obsolete since gecko 1.9.1 void notifyimeonblur(); obsolete since gecko 1.9.1 void notifyimeon
focus(); obsolete since gecko 1.9.1 void querycomposition(in nstexteventreplyptr areply); native code only! obsolete since gecko 2.0 void setcompositionstring(in domstring acompositionstring, in nsiprivatetextrangelistptr atextrange, in nstexteventreplyptr areply); native code only! obsolete since gecko 2.0 attributes attribute type description composing boolean whether this editor has act...
...reconversion string. void getreconversionstring( in nsreconversioneventreplyptr areply ); parameters areply notifyimeonblur() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. notify for ime when the editor lost
focus. void notifyimeonblur(); parameters none. notifyimeon
focus() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. notify for ime when the editor got
focus. void notifyimeon
focus(); parameters none. native code only!que...
nsIMacDockSupport
.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).
focus() }) macmenu.appendchild(macmenuitem); var mainpopupset = win.document.getelementbyid('mainpopupset'); mainpopupset.appendchild(macmenu); let dockmenuelement = macmenu; //document.getelementbyid("menu_mac_dockmenu");66 let nativemenu = cc["@mozilla.org/widget/standalonenativemenu;1"].createinstance(ci.nsistandalonenativemenu); console.log('dockmenuelement:', dockmenuelement); nativemenu.init(d...
...two types of elements: menu (if you would like to have sub menu items, make sure to set a label on the "menu" element) menuitem (like in example above) elements can be hidden by adding...
nsITextInputProcessorCallback
1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) nsitextinputprocessorcallback is defined for receiving requests and notifications to ime from gecko. this interface has a "function" attribute. therefore, js-ime can implement this as a function. ...
...e js-ime: var simpleime = { _has
focus: false, _hasrightstocompose: false, _tip: null, _callback: function simpleime_callback(atip, anotification) { try { switch (anotification.type) { case "request-to-commit": atip.commitcomposition(); break; case "request-to-cancel": atip.cancelcomposition(); break; case "notify-
focus": this._has
focus = true; break; case "notify-blur": this._has
focus = false; break; case "notify-detached": this._has
focus = false; this._hasrightstocompose = false; break; } return true; } catch (e) { return false; } }, setcomposition: function simpleime_setcomposition(atext, aclaus...
nsITextInputProcessorNotification
is requested, the callback should commit composition synchronously, i.e., nsitextinputprocessor.commitcomposition() should be called. if the callback doesn't want to commit the composition synchronously, it's okay to commit it later (i.e., asynchronously). however, gecko will commit the composition with the last composing string internally. this is typically notified when user clicks somewhere,
focus is moved, or web contents modify the value of the editor during composition. "request-to-cancel" this is required to be handled. when this is requested, the callback should cancel composition synchronously, i.e., nsitextinputprocessor.cancelcomposition() should be called. if the callback doesn't want to cancel the composition synchronously, it's okay to cancel it later (i.e., asynchronously).
...t want to cancel the composition synchronously, it's okay to cancel it later (i.e., asynchronously). however, gecko will cancel the composition with empty string internally. this is typically notified when the editor is being removed from the dom tree during composition. "notify-detached" when the nsitextinputprocessor instance loses the rights to create composition, this is notified. "notify-
focus" when an editable editor gets
focus, this is notified. "notify-blur" when an editable editor loses
focus, this is notified. ...
nsIWebBrowser
bedder must create one chrome object for each browser object that is instantiated. the embedder must associate the two by setting this property to point to the chrome object before creating the browser window via the browser's nsibasewindow interface. the chrome object must also implement nsiembeddingsitewindow. the chrome may optionally implement nsiinterfacerequestor, nsiwebbrowserchrome
focus, nsicontextmenulistener and nsitooltiplistener to receive additional notifications from the browser object. the chrome object may optionally implement nsiwebprogresslistener instead of explicitly calling addwebbrowserlistener() and removewebbrowserlistener() to register a progress listener object. if the implementation does this, it must also implement nsiweakreference. note: the implemen...
... listener was successfully added. ...
nsIWebBrowserFind
it does not by default search subframes or iframes. to change this behavior, and to explicitly set the frame to search, queryinterface to nsiwebbrowserfindinframes. ...
...it does not by default search subframes or iframes. to change this behavior, and to explicitly set the frame to search, queryinterface to nsiwebbrowserfindinframes. ...
XPCOM Interface Reference
vicensiftpchannelnsiftpeventsinknsifactorynsifavicondatacallbacknsifaviconservicensifeednsifeedcontainernsifeedelementbasensifeedentrynsifeedgeneratornsifeedpersonnsifeedprocessornsifeedprogresslistenernsifeedresultnsifeedresultlistenernsifeedtextconstructnsifilensifileinputstreamnsifileoutputstreamnsifilepickernsifileprotocolhandlernsifilespecnsifilestreamsnsifileurlnsifileutilitiesnsifileviewnsi
focusmanagernsiformhistory2nsiframeloadernsiframeloaderownernsiframemessagelistenernsiframemessagemanagernsiframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensiglobalhistorynsiglobalhistory2nsiglobalhistory3nsihtmleditornsihttpheaderlistenernsihapticfeedbacknsihttpactivitydistributornsihttpactivityobservernsihttpchannelnsihttpchannelinternalnsihttphead...
...erterservicensiutf8stringenumeratornsiuuidgeneratornsiupdatensiupdatechecklistenernsiupdatecheckernsiupdateitemnsiupdatemanagernsiupdatepatchnsiupdatepromptnsiupdatetimermanagernsiuploadchannelnsiuploadchannel2nsiurllistmanagercallbacknsiusercertpickernsiuserinfonsivariantnsiversioncomparatornsiweakreferencensiwebbrowsernsiwebbrowserchromensiwebbrowserchrome2nsiwebbrowserchrome3nsiwebbrowserchrome
focusnsiwebbrowserfindnsiwebbrowserfindinframesnsiwebbrowserpersistnsiwebcontenthandlerregistrarnsiwebnavigationnsiwebnavigationinfonsiwebpagedescriptornsiwebprogressnsiwebprogresslistenernsiwebprogresslistener2nsiwebsocketchannelnsiwebsocketlistenernsiwebappssupportnsiwifiaccesspointnsiwifilistenernsiwifimonitornsiwinaccessnodensiwinapphelpernsiwintaskbarnsiwindowcreatornsiwindowmediatornsiwindowwatch...
Standard OS Libraries
he way made ssh), netbsd, etc. gtk+ and qt are graphic frameworks, the graphic stack under unix is xorg (x11/x). gtk+ builds over x11. xorg is being re-written at the moment, it is known as wayland. wayland is not considered stable, but it's supposed to replace xorg in the long term. gtk+ and qt have begun porting their code to wayland. as wayland is not out yet in the wild this article does not
focus on wayland, it will
focus on gtk+ and xorg(x11/x). gdk is a stack under gtk+. gtk+ is the toolkit to build apps, gdk is more low-level. to be precise, x is "just" like a display machine. on top of which everybody uses "window managers" (known as "wm"s) such as fluxbox, i3, awesome, openbox, mutter (used by gnome 3), plasma (used by kde) etc. gnome and kde are "desktop environments" (known as "d...
...can be used by js-ctypes through the jni libraries. thankfully all the js-ctypes was abstracted away into jni.jsm. undrestanding js-ctypes is important as arrays and other features used in jni.jsm will require us to create arrays from the types available to the ctypes.jsm module. although jni is done completely through js-ctypes, a jsm was created to abstract away the js-ctypes so developers can
focus on the jni aspect. therefore elaboration on this technique is not done in the js-ctypes section but it is done in the jni.jsm article. this article links to a fully funcitonal demo that can be copied and pasted into scratchpad, as a quick reference here is the link to that demo: following the android toasts tutorial from a jni prespective. see also finding window handles - os specific example...
Accessibility Inspector - Firefox Developer Tools
ibility tree hierarchy. indexinparent — an index value indicating what number child the item is, inside its parent. if the item is the first item inside its parent, it has a value of 0. if it is the second, it has a value of 1. and so on. states — a list of the different accessibility-relevant states that can apply to the current item. for example, one of the links in one demo has states of
focusable, linked, selectable text, opaque, enabled, and sensitive. for a full list of internal states, see gecko states. relations — a list of the accessiblity-relevant relationships between this item and other items. for example, in a form, an entry item could have a "labelled by" relation with a label item, which in turn has a "label for" relation to the entry item. attributes — a list of all ...
...ecko object attributes. note: the exposed information is the same across all platforms — the inspector exposes gecko's accessibility tree, rather than information from the platform accessibility layer. keyboard controls the accessibility tab is fully keyboard-accessible: you can tab between the turn off accessibility features button and left and right panels. when one of the panels is
focused, you can move the
focus up and down items using the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree). print accessibility tree to json you can print the contents of the accessibility tree to json by right-clicking on an entry in the accessibility tab and selecting print to json: ...
DOM Inspector FAQ - Firefox Developer Tools
how do i inspect a web site/window? the file menu contains approaches which will allow you to inspect a document. inspect content document inspect content, e.g., unprivileged web pages loaded in a browser tab. inspect chrome document inspect application chrome, including open xul windows, e.g., the browser window. inspect a url this just
focuses the dom inspector's address bar, which allow you to inspect arbitrary documents which can be accessed via a url. this causes the document to be loaded in the browser pane. these can include chrome documents, but it's not suggested that you inspect xul documents by directly inspecting them via url, since some behavior may rely on the document being contained in another xul document, or the converse, where it won't behave correctly becaus...
...know anything about the node, you can try to select it by clicking on it. scroll the node into view, choose the select-by-click toolbar button, and then click on the element you wish to inspect. the edit menu also includes a select element by click menu item. how do i inspect pseudo-classes and pseudo-elements in the css rules viewer? dom inspector allows you to force the :hover, :active, and :
focus pseudo-classes to apply to a given node. from the dom nodes viewer, select the node and bring up the context menu. you should notice the set pseudo-classes menu item, which will allow you to set the content state for the aforementioned pseudo-classes. there is currently no way to inspect dynamically-applied rules for other pseudo-classes or any pseudo-elements from the dom inspector ui. you can,...
Migrating from Firebug - Firefox Developer Tools
ithin the panel and copying the selection by pressing ctrl+c or via the context menu. the rules side panel of the devtools is smarter when it comes to pasting css into it. you can paste whole style declarations into an existing rule property declarations which are commented out are automatically disabled. toggle pseudo-classes firebug lets you toggle the css pseudo-classes :hover, :active and :
focus for an element via the options menu of the style side panel. in the devtools there are two ways to do the same. the first one is to toggle them via the pseudo-class panel within the rules side panel. the second one is to right-click and element within the node view and toggle the pseudo-classes via the context menu. examine css shorthand properties css shorthand properties can be split into the...
...utton in the performance tool. the output of the call tree is the one that comes nearest to the output in firebug, but the performance panel provides much more information than just the javascript performance. e.g. it also provides information about html parsing or layout. this is the part where firebug and the devtools differ the most, because the outputs are completely different. while firebug
focuses on javascript performance and provides detailed information about javascript function calls during the profiling session, the performance tool in the devtools offers a broad spectrum of information regarding a website's performance but doesn't go into detail regarding javascript function calls. view javascript call performance what comes nearest to firebug's profiler output is the call tree v...
Network request list - Firefox Developer Tools
laceholder text block resource when url contains. reload the page to test it with the specified url blocked. other actions you can take with request blocking: to turn all request blocking off or on: toggle the checkbox next to enable request blocking. to turn a specific block off or on: toggle the checkbox next to that item. to delete a blocked item, click the x icon that appears when you
focus the item. (starting with firefox 77) right-click any item in the list and choose from the context menu: enable all enables blocking of all items in the list. disable all disables blocking of all items in the list. remove all deletes all items in the list. blocking a specific url from the request list you can also block a url from the request list: hover over the item you...
... or—as of firefox 75—using regular expressions (by writing the regexp bracketed within slashes; "/.+corp.*/" will look for any occurrence of "corp" which has at least one character before it and may or may not have any characters after it, for example). the third-party add-on websocket sniffer may be helpful as well. url use the filter urls box in the toolbar. you can
focus it by clicking in the filter box, or by pressing ctrl + f (or cmd + f on a mac); then start typing. the list of network requests is filtered to include only requests that contain your filter string, in either the domain or the file portions. you can filter requests that don't contain your filter string by prefixing your query with the "-" operator. for example, the query "-google.com" will s...
Call Tree - Firefox Developer Tools
lculated from self time as a percentage of the total number of samples in the selected portion of the recording. in the current version of the call tree, these are the most important columns. functions with a relatively high self cost are good candidates for optimization, either because they take a long time to run, or because they are called very often. the inverted call tree is a good way to
focus on these self cost values. this screenshot tells us something we probably already knew: bubble sort is a very inefficient algorithm. we have about six times as many samples in bubble sort as in selection sort, and 13 times as many as in quicksort. walking up the call tree next to each function name is a disclosure arrow: click that, and you can see the path back up the call tree, from the fun...
...use they add a great deal of noise, and the details are not likely to be useful to people not working on firefox. if you want to see the details, check "show gecko platform data" in the settings. using an inverted, aka bottom-up, call tree an inverted call tree reverses the order of all stacks, putting the leafmost function calls at the top. the direct consequence is that this is a view that
focuses more on the function's self time information. this is a very useful view to find some hot spot in your code. to display this view, click the gear icon on the right-hand end of the performance tab and select invert call tree. ...
Document: keypress event - Web APIs
uation keys. examples of keys that don't produce a character value are modifier keys such as alt, shift, ctrl, or meta. since this event has been deprecated, you should look to use beforeinput or keydown instead. ...
...stead. interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and
focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key. ...
Element - Web APIs
t is hosted by the element, or null if no open shadow root is present. element.openorclosedshadowroot read only returns the shadow root that is hosted by the element, regardless if its open or closed. available only to webextensions. element.slot returns the name of the shadow dom slot the element is inserted in. element.tabstop is a boolean indicating if the element can receive input
focus via the tab key. element.tagname read only returns a string with the name of the tag for the given element. element.undomanager read only returns the undomanager associated with the element. element.undoscope is a boolean indicating if the element is an undo scope host, or not. note: dom level 3 defined namespaceuri, localname and prefix on the node interface. in dom4 they were mov...
...position system such as an input method editor completes or cancels the current composition session. compositionstart fired when a text composition system such as an input method editor starts a new composition session. compositionupdate fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor.
focus events blur fired when an element has lost
focus. also available via the onblur property.
focus fired when an element has gained
focus. also available via the on
focus property
focusin fired when an element is about to gain
focus.
focusout fired when an element is about to lose
focus. fullscreen events fullscreenchange sent to an element when it transitions into or out of full-sc...
Using files from web applications - Web APIs
accessible. use the visually-hidden technique instead. ...
...nput type="file" id="fileelem" multiple accept="image/*" class="visually-hidden"> <label for="fileelem">select some files</label> and this css: .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* separate rule for compatibility, :
focus-within is required on modern firefox and chrome */ input.visually-hidden:
focus + label { outline: thin dotted; } input.visually-hidden:
focus-within + label { outline: thin dotted; } there is no need to add javascript code to call fileelem.click(). also in this case you can style the label element as you wish. you need to provide a visual cue for the
focus status of the hidden input field on its label, be it an outline as shown above, or background-color or box-shadow.
Using the Gamepad API - Web APIs
on the window object for reading gamepad and controller (hereby referred to as gamepad) state. in addition to these events, the api also adds a gamepad object, which you can use to query the state of a connected gamepad, and a navigator.getgamepads() method which you can use to get a list of gamepads known to the page. connecting to a gamepad when a new gamepad is connected to the computer, the
focused page first receives a gamepadconnected event. if a gamepad is already connected when the page loaded, the gamepadconnected event is dispatched to the
focused page when the user presses a button or moves an axis. in firefox, gamepads are only exposed to a page when the user interacts with one with the page visible. this helps prevent gamepads being used for fingerprinting the user. once one ga...
.... %d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); each gamepad has a unique id associated with it, which is available on the event's gamepad property. disconnecting a gamepad when a gamepad is disconnected, and if a page has previously received data for that gamepad (e.g. gamepadconnected), a second event is dispatched to the
focused window, gamepaddisconnected: window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); the gamepad's index property will be unique per-device connected to the system, even if multiple controllers of the same type are used. the index property also functions as the index into the array returned by...
GlobalEventHandlers.onblur - Web APIs
the onblur property of the globaleventhandlers mixin is the eventhandler for processing blur events. it's available on element, document, and window. the blur event is raised when an element loses
focus. note: the opposite of onblur is on
focus. syntax target.onblur = functionref; value functionref is a function name or a function expression. the function receives a
focusevent object as its sole argument. example this example uses onblur and on
focus to change the text within an <input> element. ...
...syntax target.onblur = functionref; value functionref is a function name or a function expression. the function receives a
focusevent object as its sole argument. example this example uses onblur and on
focus to change the text within an <input> element. html <input type="text" value="click here"> javascript let input = document.queryselector('input'); input.onblur = inputblur; input.on
focus = input
focus; function inputblur() { input.value = '
focus has been lost'; } function input
focus() { input.value = '
focus is here'; } result try clicking in and out of the form field, and watch its contents change accordingly. specifications specification status comment html living standardthe definition of 'onblur' in that specification. living standard ...
HTMLBodyElement - Web APIs
ed. windoweventhandlers.onunload is an eventhandler representing the code to be called when the unload event is raised. specifications specification status comment html living standardthe definition of 'htmlbodyelement' in that specification. living standard technically, the event-related properties onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, on
focus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload, have been moved to windoweventhandlers. htmlbodyelement implements this interface. html 5.1the definition of 'htmlbodyelement' in that specification. recommendation html5the definition of 'htmlbodyelement' in that specification. recommendation the ...
...ce. html 5.1the definition of 'htmlbodyelement' in that specification. recommendation html5the definition of 'htmlbodyelement' in that specification. recommendation the following properties are now obsolete: alink, bgcolor, background, link, text, and vlink. the following properties have been added: onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, on
focus, onhashchange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload. document object model (dom) level 2 html specificationthe definition of 'htmlbodyelement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 specificationthe definition of 'htmlbodyelement' ...
HTMLButtonElement - Web APIs
co,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbuttonelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlbuttonelement.accesskey is a domstring indicating the single-character keyboard key to give access to the button. htmlbuttonelement.auto
focus is a boolean indicating whether or not the control should have input
focus when the page loads, unless the user overrides it, for example by typing in a different control. only one form-associated element in a document can have this attribute specified. htmlbuttonelement.disabled is a boolean indicating whether or not the control is disabled, meaning that it does not accept any clicks. htmlbu...
...he definition of 'htmlbuttonelement' in that specification. recommendation the following attribute has been added: menu. the type attribute can take one more value, "menu". html5the definition of 'htmlbuttonelement' in that specification. recommendation the attributes tabindex and accesskey, are now defined on htmlelement. the following attributes have been added: auto
focus, formaction, formenctype, formmethod, formnovalidate, formtarget, labels, validity, validationmessage, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(). the type attribute is no more read-only. document object model (dom) level 2 html specificationthe definition of 'htmlbuttonelement' in that specification. obsolete no change fro...
HTMLElement: change event - Web APIs
the html specification lists the <input> types that should fire the change event. examples <select> element html <label>choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">select one …</option> <option value="chocolate">chocola...
...rid-area: result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses
focus. 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 ...
Using the MediaStream Recording API - Web APIs
kbox hack, which abuses the fact that you can click on the <label> of a checkbox to toggle it checked/unchecked. in web dictaphone this powers the information screen, which is shown/hidden by clicking the question mark icon in the top right hand corner. ...
...we then use the mediarecorder api to record the stream, and output each recorded snippet into the source of a genera...
MediaTrackConstraints - Web APIs
mple size or range of sample sizes which are acceptable and/or required. volume a constraindouble specifying the volume or range of volumes which are acceptable and/or required. properties of image tracks whitebalancemode a string specifying one of "none", "manual", "single-shot", or "continuous". exposuremode a string specifying one of "none", "manual", "single-shot", or "continuous".
focusmode a string specifying one of "none", "manual", "single-shot", or "continuous". pointsofinterest the pixel coordinates on the sensor of one or more points of interest. this is either an object in the form { x:value, y:value } or an array of such objects, where value is a double-precision integer. exposurecompensation a constraindouble (a double-precision integer) specifying f-stop adjustme...
...onstraindouble (a double-precision integer) specifying a desired brightness setting. contrast a constraindouble (a double-precision integer) specifying the degree of difference between light and dark. saturation a constraindouble (a double-precision integer) specifying the degree of color intensity. sharpness a constraindouble (a double-precision integer) specifying the intensity of edges.
focusdistance a constraindouble (a double-precision integer) specifying distance to a
focused object. zoom a constraindouble (a double-precision integer) specifying the desired focal length. torch a boolean defining whether the fill light is continuously connected, meaning it stays on as long as the track is active. properties of video tracks aspectratio a constraindouble specifying the vide...
Notification.onclick - Web APIs
note: this feature is available in web workers. the onclick property of the notification interface specifies an event listener to receive click events. these events occur when the user clicks on a displayed notification. syntax notification.onclick = function(event) { ... }; the default behavior is to move the
focus to the viewport of the notification's related browsing context. if you don't want that behaviour, call preventdefault() on the event object. ...
... the notification's related browsing context. if you don't want that behaviour, call preventdefault() on the event object. examples in the following example, we use an onclick handler to open a webpage in a new tab (specified by the inclusion of the '_blank' parameter) once a notification is clicked: notification.onclick = function(event) { event.preventdefault(); // prevent the browser from
focusing the notification's tab window.open('http://www.mozilla.org', '_blank'); } specifications specification status comment notifications apithe definition of 'onclick' in that specification. living standard living standard. ...
RTCDataChannel: open event - Web APIs
handler property onopen examples this example adds to the rtcdatachannel dc a handler for the open event that adjusts the user interface to indicate that a chat window is ready to be used after a connection has been established. it enables the message input box and send button as well as enabling the disconnect button and disabling the connect button. finally, the message input box is
focused so the user can immediately begin to type. dc.addeventlistener("open", ev => { messageinputbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; messageinputbox.
focus(); }, false); this can also be done by directly setting the value of the channel's onopen event handler property. dc.onopen = ev => { messagein...
...lse; disconnectbutton.disabled = false; connectbutton.disabled = true; messageinputbox.
focus(); }, false); this can also be done by directly setting the value of the channel's onopen event handler property. ...
Selection.extend() - Web APIs
if not specified, the default value 0 is used. specifications specification status comment selection apithe definition of 'selection.extend()' in that specification. working draft current browser compatibility the compatibility table on this page is generated from structured data. ...
...if not specified, the default value 0 is used. specifications specification status comment selection apithe definition of 'selection.extend()' in that specification. working draft current browser compatibility the compatibility table on this page is generated from structured data. ...
ServiceWorkerGlobalScope: notificationclick event - Web APIs
no interface notificationevent event handler onnotificationclick examples you can use the notificationclick event in an addeventlistener method: self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and //
focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && '
focus' in client) return client.
focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); or use the onnotificationclick event handler prop...
... && '
focus' in client) return client.
focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); or use the onnotificationclick event handler property: self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and //
focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && '
focus' in client) return client.
focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status ...
ShadowRoot - Web APIs
the shadowroot interface of the shadow dom api is the root node of a dom subtree that is rendered separately from a document's main dom tree. you can retrieve a reference to an element's shadow root using its element.shadowroot property, provided it was created using element.attachshadow() with the mode option set to open. properties shadowroot.delegates
focus read only returns a boolean that indicates whether delegates
focus was set when the shadow was attached (see element.attachshadow()). shadowroot.host read only returns a reference to the dom element the shadowroot is attached to. shadowroot.innerhtml sets or returns a reference to the dom tree inside the shadowroot. shadowroot.mode read only the mode of the shadowroot — either open or closed. this defines whether or no...
...accessible from javascript. properties included from documentorshadowroot the shadowroot interface includes the following properties defined on the documentorshadowroot mixin. note that this is currently only implemented by chrome; other browsers still implement them on the document interface. documentorshadowroot.activeelement read only returns the element within the shadow tree that has
focus. documentorshadowroot.stylesheets read only returns a stylesheetlist of cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document. methods the shadowroot interface includes the following methods defined on the documentorshadowroot mixin. note that this is currently only implemented by chrome; other browsers still implement them on the document interface. doc...
WebXR permissions and security - Web APIs
acking feature policy. once that check is passed, the request to enter immersive-vr mode is allowed if all of the following are true: the requestsession() call was issued by code executing within the handler for a user event, or the from the startup code for a user-launched web application. the document is considered trustworthy, in that it is responsible and is both currently active and has
focus. the user's intent to enter immersive vr mode is well understood; see user intent below for details. if all of that is true, the promise returned by requestsession() is resolved, and the new xrsession object is passed into the fulfillment handler. otherwise, an appropriate exception is thrown, such as securityerror if the document doesn't have permission to enter immersive mode. inline presen...
...alse is delivered to the promise's fulfillment handler. if the document making the request isn't the one which is responsible for the script, the request is denied. if the document making the request isn't trustworthy, the request is denied and false is returned through the promise's fulfillment routine. a trustworthy document is one which is both responsible and active, and which currently has
focus. if the user's intent to open an inline xr presentation is not well understood, the request is denied. understanding of the user's intent may be either implicit or explicit. note: additional requirements may be put into effect due to the specific features requested by the options object when calling requestsession(). user intent user intent is the concept of whether or not an action being ...
Starting up and shutting down a WebXR session - Web APIs
ill, you can simplify this to just the specific case you need. permissions and security there are a number of security measures in place revolving around webxr. first among these is that use of immersive-vr mode—which entirely replaces the user's view of the world—requires that the xr-spatial-tracking feature policy be in place. on top of that, the document needs to be secure and currently
focused. finally, you must call requestsession() from a user event handler, such as the handler for the click event. for more specifics about securing webxr actitvities and usage, see the article permissions and security for webxr. confirming the session type you need is available before trying to create a new webxr session, it's often wise to first check to see if the user's hardware and software s...
... over the course of your webxr session, you may receive any of a number of events which indicate changes to the state of the session, or which let you know about things you need to do to keep the session operating properly. detecting changes to session's visibility state when the state of the xrsession's visibility changes—such as when the session is hidden or displayed, or when the user has
focused another context—the session receives an eventvisibilitychange event. session.onvisibilitychange = (event) => { switch(event.session.visibilitystate) { case "hidden": myframerate = 10; break; case "blurred-visible": myframerate = 30; break; case "visible": default: myframerate = 60; break; } }; this example changes a variable myframerat...
Window.blur() - Web APIs
specification specification status comment html living standardthe definition of 'window.blur()' in that specification. ...
... specification specification status comment html living standardthe definition of 'window.blur()' in that specification. ...
Window.captureEvents() - Web APIs
the window.captureevents() method registers the window to capture all events of the specified type. syntax window.captureevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.
focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example <!doctype html> <html lang="en"> <head> <!-- ... --> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click ...
... <!doctype html> <html lang="en"> <head> <!-- ... --> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised in the dom by user activity (such as clicking buttons or shifting
focus away from the current document) generally pass through the high-level window and document objects first before arriving at the object that initiated the event. when you call the captureevents() method on the window, events of the type you specify (for example, event.click) no longer pass through to "lower" objects in the hierarchy. in order for events to "bubble up" in the way that they normally...
XRVisibilityState - Web APIs
the xrvisibilitystate enumerated type defines the string values which are valid for the xrsession interface's visibilitystate property, which indicates whether or not an xr session is currently visible to the user, and if it is, whether or not it's currently the primary
focus. values hidden the virtual scene generated by the xrsession is not currently visible to the user, so its requestanimationframe() callbacks are not being executed until thevisibilitystate changes. input controllers are not being handled for the session. visible the virtual scene rendered by the xrsession is currently visible to the user and is the primary
focus of the user's attention. to that end, the session's requestanimationframe() callbacks are being processed at the xr device's native refresh rate and input co...
...in order to optimize resource utilization, the user agent may be handling the session's requestanimationframe() callbacks at a throttled rate. input controllers are not being processed for the session. ...
Using the alertdialog role - Accessibility
tions provided in the 'using the dialog role' technique are applicable to the alertdialog role as well: the alert dialog must always be given an accessible name (through aria-labelledby or aria-label) , and in most cases the alert text will have to be marked up as the alert dialog's accessible description (using aria-describedby). unlike regular alerts, an alert dialog must have at least one
focusable control and
focus must be moved to that control when the alert dialog appears. generally alert dialogs have at least a confirmation, close or cancel button that can be used to move
focus to. additionally, alert dialogs can have other interactive controls such as text fields, tabs or checkboxes. which particular control
focus should be moved to depends on the purpose of the dialog. the tab or...
...d assistive technology when the alertdialog role is used, the user agent should do the following: expose the element as a dialog in the operating system's accessibility api. fire an accessible alert event using the operating system's accessibility api if it supports it. when the alert dialog appears, screen readers should announce the alert. when the alert dialog is correctly labeled and
focus is moved to a control inside the dialog, screen readers should announce the dialog's accessible role, name and optionally description before announcing the
focused element. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: a basic alert dialog the code sn...
Using the aria-hidden attribute - Accessibility
den="true" to an element removes that element and all of its children from the accessibility tree. this can improve the experience for assistive technology users by hiding: purely decorative content, such as icons or images duplicated content, such as repeated text offscreen or collapsed content, such as menus according to the fourth rule of aria, aria-hidden="true" should not be used on a
focusable element. additionally, since this attribute is inherited by an element's children, it should not be added onto the parent or ancestor of a
focusable element. using aria-hidden="false" will not re-expose the element to assistive technology if any of its parents specify aria-hidden="true". wai-aria authoring practices 1.1 notes that aria-hidden="false" currently behaves inconsistently acro...
...specify aria-hidden="true". wai-aria authoring practices 1.1 notes that aria-hidden="false" currently behaves inconsistently across browsers. deciding between aria-hidden="true", role="presentation", and role="none" on the surface, the aria-hidden="true", role="presentation", and role="none" attributes seem similar because they: hide content from assistive technology cannot be used on a
focusable element cannot be used on the parent of an interactive element despite these similarities, the intent behind each attribute is different. aria-hidden="true" will remove the entire element from the accessibility api. role="presentation" and role="none" will remove the semantic meaning of an element while still exposing it to assistive technology. values false (default) the el...
ARIA: checkbox role - Accessibility
or="chk1-label">remember my preferences</label> description the native html checkbox form control can only have two checked states ("checked" or "not checked"), with an indeterminate state settable via javascript. similarly, an element with role="checkbox" can expose three states through the aria-checked attribute: true, false, or mixed. since a checkbox is an interactive control, it must be
focusable and keyboard accessible. if the role is applied to a non-
focusable element, use the tabindex attribute to change this. the expected keyboard shortcut for activating a checkbox is the space key. the developer is required to change the value of the aria-checked attribute dynamically when the checkbox is activated. associated wai-aria roles, states, and properties aria-checked the val...
...amically when the checkbox is activated. associated wai-aria roles, states, and properties aria-checked the value of aria-checked defines the state of a checkbox. this attribute has one of three possible values: true the checkbox is checked false the checkbox is not checked mixed the checkbox is partially checked, or indeterminate tabindex="0" used to make it
focusable so the assistive technology user can tab to it and start reading right away. keyboard interactions key function space activates the checkbox required javascript required event handlers onclick handle mouse clicks that will change the state of the checkbox by changing the value of the aria-checked attribute and the appearance of the checkbox so it appears...
HTML To MSAA - Accessibility
attribute state_system_ selectable if @name attribute is presented state_system_ linked if @href attribute is presented or click event listener is registered state_system_ traversed if link is traversed n/a "jump" if @href is valid n/a br role_system_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a button role_system_ pushbutton from child nodes n/a state_system_
focusable state_system_ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to table element div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping text equivalent from child legend element n/a n/a labelled_by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/...
...stem_ listitem from @label attribute, from child text nodes n/a state_system_ selected if option is selected n/a "select" event_object_ selectionwithin event_object_ selectionadd if selected event_object_ selectionremove if unselected select @size > 1 role_system_ list n/a n/a state_system_ multiselectable if multiselectable n/a n/a n/a select @size = 1 role_system_ combobox n/a name of
focused option state_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup state_system_
focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/...
Accessibility Information for Web Authors - Accessibility
ines (wcag) 1.0 another important set of guidelines from the w3c web accessibility initiative (wai). the european union is looking to base their upcoming accessibility regulations on these guidelines. these guidelines are discussed on the wai interest group discussion list. how-to's key-navigable custom dhtml widgets in mozilla & ie this document discusses how to use tabindex, element.
focus() and onkeypress to make custom dhtml widgets such as menus or tree views keyboard accessible. accessible web page authoring ibm has put together a simple, practical resource for web authors to learn accessibility the fast and painless way. highly recommended, an excellent resource. dive into accessibility by mark pilgrim an excellent, easy-to-understand resource (available in english a...
... a plan which is being developed by ibm, mozilla and wai protocols and formats working group (pfwg) to address the issue of accessible dhtml. dynamic web content is not accessible, because it uses vanilla <div>'s and <span>'s combined with javascript rather than declarative markup to describe the behavior of custom widgets such as menus and tree views. these widgets are usually not even keyboard
focusable. furthermore, assistive technologies do not understand what these widgets are supposed to be, or what state they are in or what they are capable of. this document tackles such difficulties and shows several interactive desktop-style widgets such as tree views, menu bars and spreadsheets which are accessible both with the keyboard and assistive technologies such as screen readers, screen magn...
Perceivable - Accessibility
unctionality occurs when the following styles are applied: line height (line spacing) to at least 1.5 times the font size spacing following paragraphs to at least 2 times the font size letter spacing (tracking) to at least 0.12 times the font size word spacing to at least 0.16 times the font size understanding text spacing 1.4.13 content on hover or
focus (aa) added in 2.1 while additional content may appear and disappear in coordination with hover and keyboard
focus, this success criterion specifies three conditions that must be met: dismissable (can be closed/removed) hoverable (the additional content does not disappear when the pointer is over it) persistent (the additional content does not disappear without user a...
...ay appear and disappear in coordination with hover and keyboard
focus, this success criterion specifies three conditions that must be met: dismissable (can be closed/removed) hoverable (the additional content does not disappear when the pointer is over it) persistent (the additional content does not disappear without user action) understanding content on hover or
focus note: also see the wcag description for guideline 1.4: distinguishable: make it easier for users to see and hear content including separating foreground from background.. see also wcag perceivable operable understandable robust ...
:-moz-ui-invalid - CSS: Cascading Style Sheets
the :-moz-ui-invalid css pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, in certain circumstances. this pseudo-class is applied according to the following rules: if the control does not have
focus, and the value is invalid, apply this pseudo-class. if the control has
focus, and the value was valid (including empty) when it gained
focus, do not apply the pseudo-class. if the control has
focus, and the value was invalid when it gained
focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. the result is that if the control was valid when the user started interacting with it, the validity styling is changed...
...however, if the user is trying to correct a previously-flagged value, the control shows immediately when the value becomes valid. required items have the pseudo-class applied only if the user changes them or attempts to submit an unchanged valid value. ...
::after (:after) - CSS: Cascading Style Sheets
"this is a fancy orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result tooltips this example uses ::after, in conjunction with the attr() css expression and a data-descr custom data attribute, to create tooltips. no javascript is required! we can also support keyboard users with this technique, by adding a tabindex of 0 to make each span keyboard
focusable, and using a css :
focus selector. this shows how flexible ::before and ::after can be, though for the most accessible experience a semantic disclosure widget created in some other way (such as with details and summary elements) is likely to be more appropriate. html <p>here we have some <span tabindex="0" data-descr="collection of words and punctuation">text</span> with a few <span tabi...
...to be more appropriate. html <p>here we have some <span tabindex="0" data-descr="collection of words and punctuation">text</span> with a few <span tabindex="0" data-descr="small popups that appear when hovering">tooltips</span>. ...
:disabled - CSS: Cascading Style Sheets
/* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. it uses the javascript change event to let the user enable/disable the billing fields. ...
... /* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. it uses the javascript change event to let the user enable/disable the billing fields. ...
Ordering Flex Items - CSS: Cascading Style Sheets
nt.” note: for some years firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other browsers. this has now been fixed. you should always take the source order as the logical order of the document as all up-to-date user agents will be following the specification and doing so. in the live example below i have added a
focus style in order that as you tab from link to link you can see which is highlighted. if you change the order using flex-direction you can see how the tab order continues to follow the order that the items are listed in the source. in the same way that changing the value of flex-direction does not change the order in which items are navigated to, changing this value does not change paint order. i...
...order is potentially creating a strange experience for anyone not using a pointing device of some kind. to read more about this disconnect of visual order and logical order and some of the potential problems it raises for accessibility, see the following resources. flexbox and the keyboard navigation disconnect html source order vs css display order the responsive order conflict for keyboard
focus use cases for order there are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful. used carefully the order property can allow for some useful common patterns to be easily implemented. you might have a design, perhaps a card that will display a news item. the heading of the news item is the key thing to highl...
matrix3d() - CSS: Cascading Style Sheets
ansformation applies to the 3d space and can't be represented on the plane. a generic 3d affine transformation can't be represented using a cartesian-coordinate matrix, as translations are not linear transformations. a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4 examples cube squashing example the following example shows a 3d cube created from dom elements and transforms, which can be hovered/
focused to apply a matrix3d() transform to it. html <section id="example-element" tabindex="0"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; tr...
...div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="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: center; justify-content: center; 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,...
Audio and video manipulation - Developer guides
audio manipulation playbackrate aside, to manipulate audio you'll typically use the web audio api. selecting an audio source the web audio api can receive audio from a variety of sources, then process it and send it back out to an audiod...
... common audio filters these are some of the common types of audio filter you can apply: low pass: allows frequencies below the cutoff frequency to pass through and attenuates ...
DOM onevent handlers - Developer guides
the web platform provides several ways to be notified of dom events. two common approaches are addeventlistener() and the specific onevent handlers. this page
focuses on how the latter work. registering onevent handlers the onevent handlers are properties on certain dom elements to manage how that element reacts to events. elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <body> element). events are actions like: being clicked detecting pressed keys getting
focus the onevent handler is usually named with the event it reacts to, like onclick, onkeypress, on
focus, etc. you can specify an on<…> event handler for a particular event (such as click) for a given object in different ways: adding an html attribute named ...
...ick(event)'); log(`changed the property to: <code> ${el.onclick.tostring()} </code>`); log(`now even the html attribute has changed: <code> ${el.getattribute("onclick")} </code><br>`); result for historical reasons, some attributes/properties on the <body> and <frameset> elements instead set event handlers on their parent window object. (the html specification names these: onblur, onerror, on
focus, onload, and onscroll.) event handler's parameters, this binding, and the return value when the event handler is specified as an html attribute, the specified code is wrapped into a function with the following parameters: event — for all event handlers except onerror. event, source, lineno, colno, and error for the onerror event handler. note that the event parameter actually contains the...
Making content editable - Developer guides
ch text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.
focus(); } } function validatemode() { if (!document.compform.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.
focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.createtextnode(odoc.innerhtml); odoc.innerhtml = ""; var opre = document.createelement("pre"); odoc.contenteditable = false; ...
... opre.appendchild(ocontent); odoc.appendchild(opre); document.execcommand("defaultparagraphseparator", false, "div"); } else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.
focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.clos...
Mobile-friendliness - Developer guides
th elements sized for a touchscreen would be much more appropriate. that’s why this first goal is all about presenting your content in a way that makes life easy for users on mobile device. goal #2 (content) “adjust your content for mobile users.” think about what your users want to do at your site if they are on a phone. a great example of this is alaska air’s website. their desktop site
focuses on getting visitors to book trips. mobile users, however, are probably more interested in checking-in for a flight or seeing if their flight is delayed. they’ve adjusted their site’s content to reflect this, and it meets the needs of mobile users. goal #3 (performance) “give your users a smooth experience, even on a slow connection.” though things have been getting better in recent year...
...ly sending the user the bits they will actually need. know your audience while not strictly a part of the definition of being mobile friendly, defining who your target audience is makes these goals much more concrete. for example, it is absolutely critical to keep in mind which browsers and devices you will target when picking a mobile strategy. if your audience is full of early-adopters, you can
focus on tablets and smartphones with standards-friendly browsers. on the other hand, if many of your site’s users are on devices with less capable browsers, that may eliminate certain strategies as viable options. approaches to mobile web development the following approaches aim to achieve each of these goals by different means. separate sites responsive design a hybrid approach original ...
HTML attribute reference - HTML: Hypertext Markup Language
e elements or adjust their behavior in various ways to meet the criteria the users want. attribute list attribute name elements description accept <form>, <input> list of types the server accepts, typically a file type. accept-charset <form> list of supported charsets. accesskey global attribute keyboard shortcut to activate or add
focus to the element. action <form> the uri of a program that processes the information submitted via the form. align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> specifies the horizontal alignment of the element. allow <iframe> specifies a feature-policy for the iframe. alt ...
...image can't be displayed. async <script> executes the script asynchronously. autocapitalize global attribute sets whether input is automatically capitalized when entered by user autocomplete <form>, <input>, <select>, <textarea> indicates whether controls in this form can by default have their values automatically completed by the browser. auto
focus <button>, <input>, <keygen>, <select>, <textarea> the element should be automatically
focused after the page loaded. autoplay <audio>, <video> the audio or video should play as soon as possible. background <body>, <table>, <td>, <th> specifies the url of an image file. note: although browsers and email clients may still support this attribute, it is obsolet...
HTML documentation index - HTML: Hypertext Markup Language
ns css styling declarations to be applied to the element. note that it is recommended for styles to be defined in a separate file or files. this attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes. 31 tabindex global attributes, html, reference the tabindex global attribute indicates that its element can be
focused, and where it participates in sequential keyboard navigation (usually with the tab key, hence the name). 32 title global attributes, html, reference, title the title global attribute contains text representing advisory information related to the element it belongs to. 33 translate experimental, global attributes, html, reference the translate global att...
...ete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. 52 disabled attribute, attributes, constraint validation, forms, required the boolean disabled attribute, when present, makes the element not mutable,
focusable, or even submitted with the form. the user can neither edit nor
focus on the control, nor it's form control descendants. 53 html documentation index html, index, mdn meta a comprehensive index list of all the available html documentation. 54 html elements reference basic, element, html, reference, web, l10n:priority this page lists all the html elemen...
Codecs used by WebRTC - Web media technologies
codec's name. complete details of what video codecs and configurations webrtc is required to support can be found in rfc 7742: webrtc video processing and codec requirements. it's worth noting that the rfc covers a variety of video-related requirements, including color spaces (srgb is the preferred, but not required, default color space), recommendations for webcam processing features (automatic
focus, automatic white balance, automatic light level), and so on. note: these requirements are for web browsers and other fully-webrtc compliant products. non-webrtc products that are able to communicate with webrtc to some extent may or may not support these codecs, although they're encouraged to by the specification documents. in addition to the mandatory codecs, some browsers support additional...
...de to video codecs used on the web. of the two mandatory codecs for video—vp8 and avc/h.264—only vp8 is completely free of licensing requirements. if you select avc, make sure you're; aware of any potential fees you may need to pay; that said, the patent holders have generally said that most typical web site developers shouldn't need to worry about paying the license fees, which are typically
focused more on the developers of the encoding and decoding software. warning: the information here does not constitute legal advice! be sure to confirm your exposure to liability before making any final decisions where potential exists for licensing issues. power needs and battery life another factor to consider—especially on mobile platforms—is the impact a codec may have on battery life. if...
Performance budgets - Web Performance
s where your users are coming from (e.g. a ~$200 android device over a 3g connection), using multiple tools. these time-based metrics will translate into file-size budgets. a default baseline to reduce bounce rate is to achieve time to interactive under 5 seconds in 3g/4g, and under 2 seconds for subsequent loads. however, based on the specific goals and content of your site, you might choose to
focus on other metrics. for a text-heavy site such as a blog or a news site, the first contentful paint metric could reflect more closely the user behavior. (i.e. how fast can users start reading), which will inform file specific budgets (e.g. font size), and their optimizations. (e.g. using font-display to improve perceived performance). the ultimate value of a performance budget is to correlate the...
...entful paint metric could reflect more closely the user behavior. (i.e. how fast can users start reading), which will inform file specific budgets (e.g. font size), and their optimizations. (e.g. using font-display to improve perceived performance). the ultimate value of a performance budget is to correlate the impact of performance on business or product goals. when defining metrics, you should
focus on user experience, which will dictate not only the bounce or conversion rate but how likely is that user to return. how do i implement a performance budget? during development, there are a few tools to run checks against new or modified assets: a module bundler (e.g. webpack), has performance features that will notify you when assets exceed specified limits. bundlesize, allows you to defin...
Web Performance
age load times. navigation and resource timingsnavigation timings are metrics measuring a browser's document navigation events. resource timings are detailed network timing measurements regarding the loading of an application's resources.optimizing startup performanceregardless of platform, it's always a good idea to start up as quickly as possible. since that's a universal issue, we won't be
focusing on it too much here. instead, we're going to look at a more important issue when building web apps: starting up as asynchronously as possible. that means not running all your startup code in a single event handler on the app's main thread.performance budgetsa performance budget is a limit to prevent regressions. it can apply to a file, a file type, all files loaded on a page, a specific metric...
...ed on each user agent's capability, size, and pixel density is possible. additional tips like removing audio tracks from background videos can improve performance even further. in this article we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible. css performance features css may be a less important optimization
focus for improved performance, but there are some css features that impact performance more than others. in this article we look at some css properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted. javascript performance best practices javascript, when used properly, can allow for interactive and immersive web experiences — or it ca...
Progressive web app structure - Progressive web apps (PWAs)
ucture is fast, and also feels fast as the user sees "something" instantly, instead of a loading spinner or a blank page. it also allows the website to be accessible offline if the network connection is not available. we can control what is requested from the server and what is retrieved from the cache with a service worker, which will be explained in detail in the next article — for now let's
focus on the structure itself. why should i use it? this architecture allows a website to benefit the most from all the pwa features — it caches the app shell and manages the dynamic content in a way that greatly improves the performance. in addition to the basic shell, you can add other features such as add to home screen or push notifications, safe in the knowledge that the app will still work ok...
...r javascript application is initialized. the <body> is split into the <header> (containing linked image), <main> page (with title, description and place for a content), and <footer> (copy and links). the app's only job is to list all the a-frame entries from the js13kgames 2017 competition. as you can see it is a very ordinary, one page website — the point is to have something simple so we can
focus on the implementation of the actual pwa features. the css the css is also as plain as possible: it uses @font-face to load and use a custom font, and it applies some simple styling of the html elements. the overall approach is to have the design look good on both mobile (with a responsive web design approach) and desktop devices. the main app javascript the app.js file does a few things we wi...
SVG Event Attributes - SVG: Scalable Vector Graphics
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, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, on
focus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumecha...
...ad, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, on
focusin, on
focusout ...
specularExponent - SVG: Scalable Vector Graphics
the bigger the value the brighter the light. ...
..." height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, specularexponent defines the exponent value for the specular term. value <number> default value 1 animatable yes fespotlight for <fespotlight>, specularexponent defines the exponent value controlling the
focus for the light source. value <number> default value 1 animatable yes specifications specification status comment filter effects module level 1the definition of 'specularexponent for <fespecularlighting>' in that specification. working draft no change filter effects module level 1the definition of 'specularexpon...
SVG Attribute reference - SVG: Scalable Vector Graphics
nt attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, on
focus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumecha...
...ad, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, on
focusin, on
focusout ...
Using shadow DOM - Web Components
as you use for the regular dom manipulation: let para = document.createelement('p'); shadow.appendchild(para); // etc. working through a simple example now let's walk through a simple example to demonstrate the shadow dom in action inside a custom element — <popup-info> (see a live example also). this takes an image icon and a text string, and embeds the icon into the page. when the icon is
focused, it displays the text in a pop up information box to provide further in-context information. to begin with, in our javascript file we define a class called popupinfo, which extends htmlelement: class popupinfo extends htmlelement { constructor() { // always call super first in constructor super(); // write element functionality in here ... } } inside the class definition...
...reateelement('style'); style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; position: absolute; bottom: 20px; left: 10px; z-index: 3; } img { width: 1.2rem; } .icon:hover + .info, .icon:
focus + .info { opacity: 1; }`; attaching the shadow dom to the shadow root the final step is to attach all the created elements to the shadow root: // attach the created elements to the shadow dom shadow.appendchild(style); shadow.appendchild(wrapper); wrapper.appendchild(icon); wrapper.appendchild(info); using our custom element once the class is defined, using the element is as simple as de...
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
ucing server load with client-side processing. at present, gecko (the layout engine behind firefox) supports two forms of xml stylesheets. for basic control of appearance — fonts, colors, position, and so forth — gecko uses css. css1 and css2 are well supported and support for the emerging css3 standard is under development. for further information about css, see eric meyer's css pages. our
focus here is on the second type of stylesheet that gecko supports: the xslt stylesheet. xslt stands for extensible stylesheet language/transform and the name is apt. xslt allows a stylesheet author to transform a primary xml document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format ...
...ylesheet that gecko supports: the xslt stylesheet. xslt stands for extensible stylesheet language/transform and the name is apt. xslt allows a stylesheet author to transform a primary xml document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format (and in the case of firefox, the
focus is on converting it on the fly into html which can then be displayed by the browser). xslt/xpath reference elements xsl:apply-imports (supported) xsl:apply-templates (supported) xsl:attribute (supported) xsl:attribute-set (supported) xsl:call-template (supported) xsl:choose (supported) xsl:comment (supported) xsl:copy (supported) xsl:copy-of (supported) xsl:decimal-format (supported...
Content Scripts - Archive of obsolete content
ou can attach content scripts to the page, to access and manipulate the page's dom. context-menu: use a content script to interact with the page in which the menu is invoked. additionally, some sdk user interface components - panel, sidebar, frame - are specified using html, and use separate scripts to interact with this content. in many ways these are like content scripts, but they're not the
focus of this article. to learn about how to interact with the content for a given user interface module, please see the module-specific documentation: panel, sidebar, frame. almost all the examples presented in this guide are available as complete, but minimal, add-ons in the addon-sdk-content-scripts repository on github. loading content scripts you can load a single script by assigning a string ...
windows - Archive of obsolete content
close(callback) close the window. parameters callback : function a function to be called when the window finishes its closing process. this is an optional argument. properties title the current title of the window. usually the title of the active tab, plus an app identifier. this property is read-only. tabs a live list of tabs in this window. ...
window/utils - Archive of obsolete content
s a "windowtype" of "chrome://browser/content/browser.xul". parameters window : nsidomwindow returns boolean getwindowtitle(window) get the title of the document hosted by the given window parameters window: nsidomwindow returns string: this document's title. isxulbrowser(window) returns true if the given window is a xul window. parameters window : nsidomwindow returns boolean get
focusedwindow() gets the child window within the topmost browser window that is
focused. see nsi
focusmanager for more details. returns nsidomwindow get
focusedelement() get the element that is currently
focused. this will always be an element within the document loaded in the
focused window, or null if no element in that document is
focused. returns nsidomelement getframes(window) get the frame...
Storing annotations - Archive of obsolete content
this is implemented as a panel that's shown in response to the widget's right-click message. the panel has three new files associated with it: a content-script which builds the panel content a simple html file used as a template for th...
Developing for Firefox Mobile - Archive of obsolete content
because there's a lot of other debug output in the shell, it's not easy to follow. the command adb logcat prints adb's log, so you can filter the debug output after running the add-on. for example, on mac os x or linux you can use a command like the one below to filter only the lines of console output: adb logcat | grep console you can experiment with different filter strings on adb logcat to
focus in on the lines relevant to you. running jpm-mobile test is identical: jpm-mobile test --adb /path/to/adb packaging mobile add-ons to package a mobile add-on as an xpi, use the command: jpm xpi actually installing the xpi on the device is a little tricky. the easiest way is probably to copy the signed xpi somewhere on the device: adb push my-addon.xpi /mnt/sdcard/ then open firefox mob...
Autocomplete - Archive of obsolete content
turning autocomplete on for a xul widget this article is about xul widgets and not about html form inputs. first, declare a panel with the "autocomplete" type, like so: <panel id="popup_autocomplete" type="autocomplete" noauto
focus="true" /> now set the autocompletepopup attribute of your <browser> element to the id of the panel you just declared: <browser id="my_browser" ... autocompletepopup="popup_autocomplete" /> finally, make sure that the value of the browser.formfill.enable pref is set to true. see also textbox (toolkit autocomplete) how to implement custom autocomplete search component ...
Canvas code snippets - Archive of obsolete content
as2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'draw
focusring', 'ispointinpath', 'measuretext', // draw
focusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'linejoin', 'linew...
Styling a Tree - Archive of obsolete content
ound-color: rgb(80%, 80%, 80%); } default properties the properties list for tree elements contain a small number of default properties, which you can also use in a style sheet. you can use these extra properties to set the appearance of containers or selected rows. the following properties are automatically set as needed: checked this property is set cells whose column is type="checkbox"
focus this property is set if the tree currently has the
focus. selected this property is set for rows or cells that are currently selected. current this property is set if the keyboard cursor is at the row. only one row will have this property set at a time. hover this property is set if the mouse cursor is on the row. only one row will have this property set at a time. container this propert...
Templates - Archive of obsolete content
kmark. you can see that the template contains a single button. this single button is used as a basis for all the buttons that need to be created. you can see in the image that the set of buttons has been created, one for each bookmark. try adding a bookmark in the browser while you have the example window open. you'll notice that the buttons in the example get updated instantly. (you may have to
focus the window for it to change.) container and datasources the template itself is placed inside a vertical box. the box has two special attributes that allow it to be used for templates, which are used to specify where the data comes from. the first attribute on the box is the datasources attribute. this is used to declare what rdf datasource will be providing the data to create the elements. in t...
Tree Box Objects - Archive of obsolete content
. additional scroll methods include the scrollbylines(), scrollbypages() and ensurerowisvisible() functions. the scrollbylines() scrolls up or down by a certain number of rows. use a positive number to go down and a negative number to go up. the scrollbypages() function scrolls by a number of pages and is called automatically when the user presses the page up or page down keys while the tree is
focused. a page is equal to the number of visible rows. for example if the tree shows 10 rows at a time, a page will be equivalent to 10 rows. this is a convenient method since when the user resizes a flexible tree, the page size will grow and shrink, so you don't need to calculate the page size manually. this isn't too hard to calculate manually anyway since the tree box object also provides a getpage...
XUL Tutorial - Archive of obsolete content
the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handlers more event handlers keyboard shortcuts
focus and selection commands updating commands broadcasters and observers document object model document object model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree selection custom tree views tree view details tree box objects rdf and templates introduction to rdf templates trees and templates ...
XUL Questions and Answers - Archive of obsolete content
you can modify are documented here: http://www.xulplanet.com/references/...tsettings.html how can i send xml/xul document fragment to the server instead of using get or post variables? you can send documents using send(document), so you should be able to insert the fragment into an empty document. how can i manage scrolling outside the browser? this problem can be solved by capturing the
focus events and giving the
focus to another xul element or capturing and canceling the keypress events. how to display addressbook rdf and menulist on the same list? mailing lists are children of directories. as such, you cannot use a template to display them in the same list. the best you can do is a cascading menu along the lines of the move/copy menus, but then of course you lose the ability to...
XUL Event Propagation - Archive of obsolete content
et up higher into the node hiearchy, event capturing intercepts an event before it is received by other elements, even by the event target itself. the combination of basic these two basic event flow mechanisms, event bubbling and event capturing, mean that events raised in the interface can be caught anywhere above the element that raised the event. this flexibility in the xul event model is the
focus of this article. the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="...
action - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
assign - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
bbox - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
binding - Archive of obsolete content
, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
bindings - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
box - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
broadcaster - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
broadcasterset - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
browser - Archive of obsolete content
so contains the load constants used by reloadwithflags and loaduriwithflags. webprogress type: nsiwebprogress this read-only property contains an nsiwebprogress object which is used to monitor the progress of a document loading. ...
column - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
columns - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
conditions - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
content - Archive of obsolete content
valuated, it scans through each resource in the rdf datasource looking for a match. each resource is placed in the variable specified in the uri attribute in turn. then, the other rules are evaluated for a match. this attribute should always be present. ...
deck - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
dialog - Archive of obsolete content
et, but if it is, it specifies the default button in the dialog. typically, this means that the button will be activated when the enter key is pressed. this should be set to one of the same values as those for the buttons attribute. ...
dialogheader - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
dropmarker - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
editor - Archive of obsolete content
hich contains methods for manipulating an html document. pass the editor's contentwindow as the argument. makeeditable( editortype, waitforload ) return type: no return value this function enables editing for an editor. specify text or html as the editortype. ...
grid - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
grippy - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
groupbox - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
hbox - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
iframe - Archive of obsolete content
s read-only property contains the nsiwebnavigation object for the document. most of its methods are callable directly on the element itself, such as goback and goforward. it also contains the load constants used by reloadwithflags and loaduriwithflags. ...
image - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listcol - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
listcols - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
member - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
menubar - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
menupopup - Archive of obsolete content
be hidden. this state will occur during the popuphiding event. triggernode type: nsidomnode this read-only property holds the dom node that generated the event triggering the opening of the popup. the value is null if the popup isn't open. ...
notification - Archive of obsolete content
e attribute. value type: string gets and sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
notificationbox - Archive of obsolete content
notificationshidden type: boolean indicating whether the notification area should be hidden. events alertactive type: event fired when a notification element is shown. alertclose type: event fired when a notification element is closed. ...
observes - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
page - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
param - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
popupset - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
preferences - Archive of obsolete content
ute of the element. see also the description of change event of <preference>. void observe(in nsisupports asubject, in string atopic, in wstring adata); nsiobserver method used internally to react to changes to preferences listed as children of this element. ...
prefpane - Archive of obsolete content
changes tracked for it includes the checkbox element, whose state is tracked automatically when the "command" event fires. void writepreferences(in boolean flushtodisk); writes all changes in this pane to preferences, optionally flushes to disk. ...
progressmeter - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
query - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
queryset - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
resizer - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
row - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
rows - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
rule - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
script - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
scrollbar - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
scrollbox - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
scrollcorner - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
separator - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
spacer - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
spinbuttons - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
splitter - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
stack - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
statusbar - Archive of obsolete content
, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
<statusbarpanel> - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
stringbundle - Archive of obsolete content
the position of the corresponding parameter explicitly. if you need to handle substitutions involving plurals, take a look at localization and plurals. getstring( key ) return type: string returns the string with the given key name from the string bundle. ...
stringbundleset - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
tabbrowser - Archive of obsolete content
lso contains the load constants used by reloadwithflags and loaduriwithflags. webprogress type: nsiwebprogress this read-only property contains an nsiwebprogress object which is used to monitor the progress of a document loading. ...
tabpanel - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
tabpanels - Archive of obsolete content
selected selectedpanel type: element holds a reference to the currently selected panel within a <tabbox> element. assigning a value to this property will modify the selected panel. a select event will be sent when the selected panel is changed. ...
template - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
textnode - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbar - Archive of obsolete content
e. some special ids may also be used to create special spacing items: separator: a separator, which is drawn as a vertical bar. spacer: a non-flexible space. spring: a flexible space. the method returns the dom element for the created item. ...
toolbargrippy - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbaritem - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbarpalette - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbarseparator - Archive of obsolete content
, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbarset - Archive of obsolete content
, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbarspacer - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbarspring - Archive of obsolete content
, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
toolbox - Archive of obsolete content
red to be members of this toolbox, even if they are not actually children of the toolbox. palette firefox only type: element the toolbarpalette within the toolbox. toolbarset firefox only type: element the toolbarset within the toolbox. ...
tooltip - Archive of obsolete content
reen. showing: a request has been made to open the popup, but it has not yet been shown. this state will occur during the popupshowing event. hiding: the popup is about to be hidden. this state will occur during the popuphiding event. ...
treecell - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treechildren - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treecol - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treecols - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treeitem - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treerow - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
treeseparator - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
triple - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
vbox - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
where - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
window - Archive of obsolete content
datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
wizard - Archive of obsolete content
at appears at the top of the wizard. this is overridden by the label attribute on the individual pages. wizardpages type: dom nodelist of wizardpage elements this property holds the list of wizardpage elements in the wizard. ...
wizardpage - Archive of obsolete content
x, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand,
focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenod...
MacFAQ - Archive of obsolete content
s() { var singletonwindowtype = nspreferences.copyunicharpref("toolkit.singletonwindowtype"); var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var win = windowmediator.getmostrecentwindow(singletonwindowtype); if (win) { window.close(); win.
focus(); } } if (window.arguments && window.arguments[0]){ try { var cmdline = window.arguments[0] .queryinterface(components.interfaces.nsicommandline); for (var i = 0; i < cmdline.length; ++i) { debug(cmdline.getargument(i)) } } catch(ex) { debug(window.arguments[0]) // do something with window.argu...
XULRunner tips - Archive of obsolete content
("browser.download.manager.showalertoncomplete", true); pref("browser.download.manager.showalertinterval", 2000); pref("browser.download.manager.retention", 2); pref("browser.download.manager.showwhenstarting", true); pref("browser.download.manager.usewindow", true); pref("browser.download.manager.closewhendone", true); pref("browser.download.manager.opendelay", 0); pref("browser.download.manager.
focuswhenstarting", false); pref("browser.download.manager.flashcount", 2); // pref("alerts.slideincrement", 1); pref("alerts.slideincrementtime", 10); pref("alerts.totalopentime", 4000); pref("alerts.height", 50); if you are missing preferences that a dialog requires, you will get the following errors: component returned failure code: 0x8000ffff (ns_error_unexpected) [nsiprefbranch.getboolpref] er...
Archived Mozilla and build documentation - Archive of obsolete content
pressions for a microsummary generator a regular expression is a special kind of string (i.e. a sequence of characters) that matches patterns of characters in other strings. microsummary generators use them to identify the pages that the generators know how to summarize by matching patterns in those pages' urls. dehydra the development
focus switched to dxr (where the "d" comes from "dehydra"), which is based on clang instead of gcc. try dxr instead, or else try the gcc python plugin: https://fedorahosted.org/gcc-python-plugin/. developing new mozilla features tips for contributing new features to mozilla. devmo 1.0 launch roadmap comments, ideas, questions and other discuss...
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.apps.firefox - november 10, 2006 - november 17, 2006 announcements none this week. discussions mozilla access to http? to snipurl? user is looking for advice how to access http or snipurl. no replies as of yet. firefox 2.0 - window.
focus() user questions where the change in behaviour in window.
focus() is a bug or was intented. firefox 2.0 javascript popup issue user seeks advice about a line of javascript code that worked in firefox 1.5.0.x, but not in firefox 2.0 balloon help user inquires if anyone can explain how to disable the balloon help in firefox 2.0. two questions: (1) launching a separate intance of firefox.exe, and (2) programmatically closing a window us...
2006-10-06 - Archive of obsolete content
. any test case ideas specific to vista are welcomed. check posting for details. firefox 2 rc2 testing - tim riley announced the l10n builds were completed last night. to help out with testing meet in irc chat room #qa. test results will be posted here. discussions none for this week meetings community test day - on friday october 6th, 2006 in irc chat room #testday there will be a test day
focusing on safe browsing between 7am to 5pm pdt. bug day - in irc chat room #bugday on oct 3rd. reminder from tracy. check posting for times in your region. authors mark d'souza (mdsouza) mohamed attar (mojo) ...
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.quality - october 27-november 3, 2006 announcements a change in tp2's numbers - rob helmer is going to be landing a patch that adam guthrie made to fix how tp2 reports its average pageload times. discussions none meetings community test day - on friday, november 3, 2006 another community test day
focusing on security and stability release, and you can help by verifying bugs, and by running the litmus test cases under the ffts or the bfts. authors mark d'souza (mdsouza) mohamed attar (mojo) ...
Adobe Flash - Archive of obsolete content
ript. in particular, the macromedia® flash™ plugin exposes certain plugin functionality for access via javascript. it can also access javascript methods from within the plugin. this article explains how javascript can be used to access methods from within the flash plugin, as well as how a feature called fscommands can be used to access javascript functions from within the flash animation. the
focus of this article is to present tips on scripting flash within gecko™-based web browsers. detecting the right flash plugin (and browser) adobe flash has exposed the scriptability feature in netscape gecko browsers since flash 6r49 and later. versions of flash prior to flash 6r49 (such as flash 5) are not scriptable in netscape gecko browsers. thus client-side detection for the right version of ...
XEmbed Extension for Mozilla Plugins - Archive of obsolete content
.x days. the use of the xt mainloop has been a problem for modern plugin development because very few modern applications that want to take advantage of the capabilities of newer toolkits use xt. also, when included with builds of mozilla that are based on gtk 1.2 or gtk 2.x, the xt code that hosts the plugins is at best hacky and has been the source for many minor problems including inconsistent
focus behavior as well as occasional crashes. it's recommended that you have a look at the gecko plugin api reference since this document will include information that assumes that you are already familiar with the way that plugins are currently hosted as well as the apis. key differences all of the interfaces that you would normally expect to exist in the plugins will still exist when using xembed plu...
Syndicating content with RSS - Archive of obsolete content
ontent by organizing it into a form that's easy for machines to parse and reuse. this article provides a simple guide to using rss to syndicate web content. syndicating with rss consists of three steps: creating an rss feed. adding a special <link> element to html page(s). adding a special <a> element to html page(s). we've already discussed the first step—creating rss feeds— so we'll
focus on the other two steps here. adding the <link> often the data in an rss feed is also made available on an html web page. when this is the case, the html web page can let people and machines know about the feed by using the <link> element, like this: <link rel="alternate" type="application/rss+xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is power...
Security Controls - Archive of obsolete content
quired functionality to each authorized user, so that no one can use functions that are not necessary. this principle is known as least privilege. limiting functionality and resolving security weaknesses have a common goal: give attackers as few opportunities as possible to breach a system. there are three types of security controls, as follows: management controls: the security controls that
focus on the management of risk and the management of information system security. operational controls: the security controls that are primarily implemented and executed by people (as opposed to systems). technical controls: the security controls that are primarily implemented and executed by the system through the system's hardware, software, or firmware. all three types of controls are necessary...
Vulnerabilities - Archive of obsolete content
provide root-level access to a system, while another vulnerability might only permit read access to an insignificant file. ultimately, organizations need to know how difficult it is for someone to exploit each vulnerability and, if a vulnerability is exploited, what the possible impact would be. website vulnerabilities owasp or open web security project is a non-profit charitable organization
focused on improving the security of software and web applications. according to the open web application security project, xss was the seventh most common web app vulnerability in 2017. the organization publishes a list of top web security vulnerabilities based on the data from various security organizations. the web security vulnerabilities are prioritized depending on exploitability, detectability...
HTMLInputElement: search event - Web APIs
the search event is fired when a search is initiated usinng an <input> element of type="search". bubbles yes cancelable no interface event event handler property onsearch there are several ways a search can be initiated, such as by pressing enter while the <input> is
focused, or, if the incremental attribute is present, after a ua-defined timeout elapses since the most recent keystroke (with new keystrokes resetting the timeout so the firing of the event is debounced). current ua implementations of <input type="search"> have an additional control to clear the field. using this control also fires the search event. in that case the value of the <input> element will be the empty string. examples // addeventlistener version const input =...
HTMLInputElement.select() - Web APIs
lement or in an <input> element that includes a text field. syntax element.select(); example click the button in this example to select all the text in the <input> element. html <input type="text" id="text-box" size="20" value="hello world!"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.
focus(); input.select(); } result notes calling element.select() will not necessarily
focus the input, so it is often used with htmlelement.
focus(). in browsers where it is not supported, it is possible to replace it with a call to htmlinputelement.setselectionrange() with parameters 0 and the input's value length: <input onclick="this.select();" value="sample text" /> <!-- equivalent to --> <...
HTMLInputElement.setRangeText() - Web APIs
example click the button in this example to replace part of the text in the text box. the newly inserted text will be highlighted (selected) afterwards. html <input type="text" id="text-box" size="30" value="this text has not been updated."> <button onclick="selecttext()">update text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.
focus(); input.setrangetext('already', 14, 17, 'select'); } result specifications specification status comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification. living standard no change html5the definition of 'htmlinputelement.setselectionrange()' in that specification. recommendation initial defi...
HTMLInputElement.setSelectionRange() - Web APIs
nknown or irrelevant. default value. example click the button in this example to select the third, fourth, and fifth characters in the text box ("zil" in the word "mozilla"). html <input type="text" id="text-box" size="20" value="mozilla"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.
focus(); input.setselectionrange(2, 5); } result specifications specification status comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification. living standard no change html 5.1the definition of 'htmlinputelement.setselectionrange()' in that specification. recommendation no change html5the...
HTMLKeygenElement - Web APIs
n element interface as specified, not as currently implemented by gecko. see bug 101019 for details and status. the <keygen> elements expose the htmlkeygenelement interface, which provides special properties and methods (beyond the regular element object interface they also have available to them by inheritance) for manipulating the layout and presentation of keygen elements. properties auto
focus is a boolean that reflects the auto
focus html attribute, indicating that the form control should have input
focus when the page loads. challenge is a domstring that reflects the challenge html attribute, containing a challenge string that is packaged with the submitted key. form read only is a htmlformelement that indicates the control's form owner, reflecting the form html attribute if it ...
HTMLElement.blur() - Web APIs
the htmlelement.blur() method removes keyboard
focus from the current element. syntax element.blur(); examples remove
focus from a text input html <input type="text" id="mytext" value="sample text"> <br><br> <button type="button" onclick="
focusinput()">click me to gain
focus</button> <button type="button" onclick="blurinput()">click me to lose
focus</button> javascript function
focusinput() { document.getelementbyid('mytext').
focus(); } function blurinput() { document.getelementbyid('mytext').blur(); } result specification specification status comment html living standardthe definition of 'blur' in that specification. living standard html 5.1the definition of 'blur' in that specification. recommendation html5the defin...
HTMLOutputElement - Web APIs
eckvalidity() checks the validity of the element and returns a boolean holding the check result. htmloutputelement.reportvalidity() this method reports the problems with the constraints on the element, if any, to the user. if there are problems, fires an invalid event at the element, and returns false; if there are no problems, it returns true. when the problem is reported, the user agent may
focus the element and change the scrolling position of the document or perform some other action that brings the element to the user's attention. user agents may report more than one constraint violation if this element suffers from multiple problems at once. if the element is not rendered, then the user agent may report the error for the running script instead of notifying the user. htmloutputelement...
Key Values - Web APIs
" presents a list of recently-used applications which lets the user change apps quickly. keycode_app_switch (181) "call" the call key. dials the number which has been entered. qt::key_call (0x01100004) keycode_call (5) "camera" the camera key. activates the camera. qt::key_camera (0x01100020) keycode_camera (27) "camera
focus" the
focus key.
focuses the camera. qt::key_camera
focus (0x01100021) keycode_
focus (80) "endcall" the end call or hang up button. qt::key_hangup (0x01100005) keycode_endcall (6) "goback" the back button. keycode_back (4) "gohome" [1] the home button. returns the user to the phone's main screen (usually an applicatio...
KeyboardEvent - Web APIs
he keyup event occurs; the inter-spaced keydown events are not sent. linux the event behavior depends on the specific platform. it will either behave like windows or mac depending on what the native event model does. note: manually firing an event does not generate the default action associated with that event. for example, manually firing a key event does not cause that letter to appear in a
focused text input. in the case of ui events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself. example <!doctype html> <html> <head> <script> 'use strict'; document.addeventlistener('keydown', (event) => { const keyname = event.key; if (keyname === 'control') { // do not alert when only control key is pressed.
Capabilities, constraints, and settings - Web APIs
; this simply stops the active tracks, sets the videotrack and audiotrack variables to null so we know they're gone, and removes the stream from the <video> element by setting htmlmediaelement.srcobject to null. simple tab support in the editor this code adds simple support for tabs to the <textarea> elements by making the tab key insert two space characters when either constraint edit box is
focused. function keydownhandler(event) { if (event.key == "tab") { let elem = event.target; let str = elem.value; let position = elem.selectionstart; let newstr = str.substring(0, position) + " " + str.substring(position, str.length); elem.value = newstr; elem.selectionstart = elem.selectionend = position + 2; event.preventdefault(); } } videoconstrainte...
MouseEvent.relatedTarget - Web APIs
arget the pointing device entered to the eventtarget the pointing device exited from dragenter 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.
focusevent.relatedtarget is a similar property for
focus events. syntax var target = instanceofmouseevent.relatedtarget return value an eventtarget object or null. example try moving your mouse cursor into and out of the red and blue boxes. html <body id="body"> <div id="outer"> <div id="red"></div> <div id="blue"></div> </div> <p id="log"></p> </body> css #outer { width: 250...
Page Visibility API - Web APIs
information doesn't want to poll the server for updates when the page isn't visible a page wants to detect when it is being prerendered so it can keep accurate count of page views a site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off) developers have historically used imperfect proxies to detect this. for example, watching for blur and
focus events on the window helps you know when your page is not the active page, but it does not tell you that your page is actually hidden to the user. the page visibility api addresses this. note: while onblur and on
focus will tell you if the user switches windows, it doesn't necessarily mean it's hidden. pages only become hidden when the user switches tabs or minimizes the browser window containin...
PaymentRequest.PaymentRequest() - Web APIs
use case. for example, in english speaking countries you would say "pizza delivery" not "pizza shipping". valid values are "shipping", "delivery", and "pickup". quotation marks must be included. the default value is "shipping". return value a new paymentrequest object, configured for use as configured by the input parameters. examples the following example shows minimal functionality and
focuses instead on showing the complete context of instantiating a paymentrequest object. var supportedinstruments = [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }]; var details = { total: {label: 'donation', amount: {currency: 'usd', value: '65.00'}}, displayitems: [ ...
Pointer Lock API - Web APIs
can continue to rotate or manipulate a 3d model by moving the mouse without end. without pointer lock, the rotation or manipulation stops the moment the pointer reaches the edge of the browser or screen. game players can now click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse
focus away from the game. basic concepts pointer lock is related to mouse capture. mouse capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is released. pointer lock is different from mouse capture in the following ways: it is persistent: pointer lock does not release the mouse until an explicit api call is made or t...
RTCDataChannel.onopen - Web APIs
lishes an open event handler which updates some user interface elements to prepare them for being used to send messages over the data channel. let dc = mypeerconnection.createdatachannel("message channel"); dc.onopen = function(event) { let messagebox = document.getelementbyid("messagebox"); let sendbutton = document.getelementbyid("sendbutton"); messagebox.disabled = false; messagebox.
focus(); sendbutton.disabled = false; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onopen' in that specification. candidate recommendation initial specification. ...
Rendering and the WebXR frame animation callback - Web APIs
that each eye sees a slightly different part of the world in front of it, and from a slightly different angle. the left eye sees the die from a little bit to the left of center, and the right eye sees it from a bit to the right of center. as a result, the left eye sees just a little bit more of the left side of the object and a little bit less of the right, and vice versa. these two images are
focused onto the retinas and the resulting signal transmitted over the optic nerves to the brain's visual cortex, located at the back of the occipital lobe. tha brain takes those signals from the left and right eyes and constructs a single, unified, 3d image of the world in the viewer's brain, and that image is what is seen. and because of those differences between what is seen by the left eye versus ...
Using the Web Animations API - Web APIs
h before: css animations. css animations have a familiar syntax that breaks down nicely for demonstration purposes. the css version here’s a tumbling animation written in css showing alice falling down the rabbit hole that leads to wonderland (see the full code on codepen): notice that the background moves, alice spins, and her color changes at an offset from her spinning. we’re going to
focus on just alice for this tutorial. here’s the simplified css that controls alice’s animation: #alice { animation: alicetumbling infinite 3s linear; } @keyframes alicetumbling { 0% { color: #000; transform: rotate(0) translate3d(-50%, -50%, 0); } 30% { color: #431236; } 100% { color: #000; transform: rotate(360deg) translate3d(-50%, -50%, 0); } } this changes...
Web Authentication API - Web APIs
rvice that it has a key pair and that the authentication request is valid and approved. options publickeycredentialcreationoptions the options passed to credentialscontainer.create(). publickeycredentialrequestoptions the options passed to credentialscontainer.get(). examples for security reasons, web authentication calls (create() and get()) are cancelled if the browser window loses
focus while the call is pending. // sample arguments for registration var createcredentialdefaultargs = { publickey: { // relying party (a.k.a. - service): rp: { name: "acme" }, // user: user: { id: new uint8array(16), name: "john.p.smith@example.com", displayname: "john p. smith" }, pubkeycr...
Window.getAttention() - Web APIs
tattention() method attempts to get the user's attention. the mechanism for this happening depends on the specific operating system and window manager. syntax window.getattention(); notes on windows, the taskbar button for the window flashes, if this hasn't been disabled by the user. on linux, the behaviour varies from window manager to window manager - some flash the taskbar button, others
focus the window immediately. this may be configurable as well. on macintosh, the icon in the upper right corner of the desktop flashes. the function is disabled for web content. neither gecko nor internet explorer supports this feature now for web content. getattention will still work when used from chrome in a gecko application. specification dom level 0. not part of specification. ...
Window.getSelection() - Web APIs
getselection(), which works identically to window.getselection(). it is worth noting that currently getselection() doesn't work on the content of <textarea> and <input> elements in firefox, edge (legacy) and internet explorer. htmlinputelement.setselectionrange() or the selectionstart and selectionend properties could be used to work around this. notice also the difference between selection and
focus. document.activeelement returns the
focused element. specifications specification status comment selection apithe definition of 'window.getselection()' in that specification. working draft new spec. ...
Window.releaseEvents() - Web APIs
summary releases the window from trapping events of a specific type. syntax window.releaseevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.
focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example window.releaseevents(event.keypress) notes note that you can pass a list of events to this method using the following syntax: window.releaseevents(event.keypress | event.keydown | event.keyup). see also window.captureevents ( ). specification this is not part of any specification. brows...
WindowClient.visibilityState - Web APIs
ient. this value can be one of "hidden", "visible", or "prerender". syntax var myvisstate = windowclient.visibilitystate; value a domstring (see document.visibilitystate for values). example event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (let i = 0; i < clientlist.length; i++) { let client = clientlist[i]; if (client.url == '/' && '
focus' in client) { if (client.visibilitystate === 'hidden') return client.
focus(); } } } if (clients.openwindow) { return clients.openwindow('/'); } })); }); specifications specification status comment service workersthe definition of 'visibilitystate' in that specification. working draft initial definition. ...
Using XMLHttpRequest - Web APIs
quest origin (at the creation of the xmlhttprequest) has changed when the xmlhttprequest is subsequently open(). this case can happen, for example, when one has an xmlhttprequest that gets fired on an onunload event for a window, the expected xmlhttprequest is created when the window to be closed is still there, and finally sending the request (in otherwords, open()) when this window has lost its
focus and another window gains
focus. the most effective way to avoid this problem is to set a listener on the new window's activate event which is set once the terminated window has its unload event triggered. workers setting overridemimetype does not work from a worker. see bug 678057 for more details. other browsers may handle this differently. specifications specification status ...
XRSession: visibilitychange event - Web APIs
upon receiving the event, you can check the value of the session's visibilitystate property to determine the new visibility state. bubbles yes cancelable no interface xrsessionevent event handler property onvisibilitychange when the xrsession receives this event, the visibility state has already been changed. ...
XRView.transform - Web APIs
eye, this will be the left half of the canvas, while the right eye will use the right half. then we iterate over each object that makes up the scene. each object's model view matrix is computed by multiplying its own matrix which describes the object's own position and orientation by the additional position and orientation adjustments needed to match the camera's movement. to convert the "camera
focused" transform matrix into an "object
focused" transform, we use the transform's inverse, thus taking the matrix returned by view.transform.inverse.matrix. the resulting model view matrix will apply all the transforms needed to move and rotate the object based on the relative positions of the object and the camera. this will simulate the movement of the camera even though we're actually moving the ...
Web APIs
t event eventlistener eventsource eventtarget extendableevent extendablemessageevent f featurepolicy federatedcredential fetchevent file fileentrysync fileerror fileexception filelist filereader filereadersync filerequest filesystem filesystemdirectoryentry filesystemdirectoryreader filesystementry filesystementrysync filesystemfileentry filesystemflags filesystemsync
focusevent fontface fontfaceset fontfacesetloadevent formdata formdataentryvalue formdataevent fullscreenoptions g gainnode gamepad gamepadbutton gamepadevent gamepadhapticactuator geolocation geolocationcoordinates geolocationposition geolocationpositionerror geometryutils gestureevent globaleventhandlers gyroscope h htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlba...
ARIA guides - Accessibility
accessible rich internet applications (aria) defines ways to make the web more accessible to people with disabilities. a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets. error handling in forms labeling widgets labeling composite widgets and regions managing
focus in composite widgets (aria-activedescendant vs roving tabindex) using landmark roles handling dynamic updates & live regions virtual vs. non virtual mode in at products using drag & drop notifying users of non-aria screen readers fixing structure with presentation role hiding layout tables managing modal and non modal dialogs using aria with html5 how to test aria aria on mobile devices ...
Using the alert role - Accessibility
t.getelementbyid("expirationwarning").classname = ""; working examples: alert role example using an aria alert box alert example using a modal aria dialog box notes using the alert role on an element implies that element has aria-live="assertive". the alert role should only be used for static text content. the element that the alert role is used on does not have to be able to receive
focus, as screen readers will automatically announce the alert regardless of where keyboard
focus is currently located. if an alert also provides interactive controls (such as form controls that allow the user to rectify a problem, or an "ok" button that discards the alert) the alertdialog role should be used instead. aria attributes used alert related aria techniques using the alertdialog...
Using the aria-activedescendant attribute - Accessibility
this article describes the aria-activedescendant property. description the aria-activedescendant attribute contains the id of the currently active child object that is part of a composite widget within the document object model. it makes do with the overhead of having all or more than one child
focusable. as the name specifies, it helps in managing the current active child of the composite widget. possible effects on user agents and assistive technology the user agent, which is any software that retrieves, renders and facilitates end user interaction with web content, uses the aria-activedescendant property to inform the assistive technology about the active child which has
focus. this active child using the aria-activedescendant property must always be visible on screen and must b...
Using the group role - Accessibility
element becomes visible, the user agent should do the following: expose the element as having a group role in the operating system's accessibility api. fire an accessible group event using the operating system's accessibility api if it supports it. assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce the group when
focus first lands on a control inside it, and if aria-describedby has been set, the description may be spoken. following this the
focused control may be announced. screen magnifiers may enlarge the group. note: opinons may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: using t...
Using the slider role - Accessibility
allows a user to select a value from within a given range. the slider role is assigned to the "thumb," the control that is adjusted to change the value. as the user interacts with the thumb, the application must programmatically adjust the slider's aria-valuenow (and possible aria-valuetext) attribute to reflect the current value. see the examples section below for more information. keyboard and
focus the slider should be keyboard
focusable and operable. when the user tabs
focus to the slider, it should land on the thumb: the control a mouse user would drag. arrow keys should operate as follows (localization for right-to-left languages should reverse the direction of the arrows): key(s) action right and up arrows increase the selected value left and down ...
Using the status role - Accessibility
ion for the user that is not important enough to justify an alert, and is often presented as a status bar. when the role is added to an element, the browser will send out an accessible status event to assistive technology products which can then notify the user about it. status information content must be provided within a status object, and it should be ensured that this object does not receive
focus. if another part of the page controls what appears in the status, the relationship should be made explicit via the aria-controls attribute. assistive technologies may reserve some cells of a braille display to render the status. possible effects on user agents and assistive technology when the status role is added to an element, or such an element becomes visible, the user agent should do the...
Using ARIA: Roles, states, and properties - Accessibility
cle, unless the element already has appropriate aria semantics (via use of an appropriate html element). addition of aria semantics only exposes extra information to a browser's accessibility api, and does not affect a page's dom. roles widget roles button checkbox gridcell link menuitem menuitemcheckbox menuitemradio option progressbar radio scrollbar searchbox separator (when
focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles. combobox grid (including row, gridcell, rowheader, columnheader roles) listbox (including option role) menu menubar radiogroup (see radio role) tablist (including tab and tabpanel roles) tree treegr...
ARIA: alert role - Accessibility
de the user with important, and usually time-sensitive, information, and often to tell the user an element has been dynamically updated. the alert role is added to the node containing an alert message, not the element causing the alert to be triggered. alerts are assertive live regions. setting role="alert" is equivalent to setting aria-live="assertive" and aria-atomic="true". they don't receive
focus, and therefore
focus does not need to be managed and no user interaction should be required. the most important thing to know about the alert role is that it is for dynamic content. it is perfect for situations such as when a user fills out a form and javascript is used to add an error message - the alert would immediately read out the message. it should not be used on html where the user hasn't...
ARIA: gridcell role - Accessibility
and treegrids editable cells both td elements and elements with a role of gridcell applied to them can be made editable, mimicking functionality similar to editing a spreadsheet. this is done by applying the html contenteditable attribute. <td contenteditable="true">notes</td> <div role="gridcell" contenteditable="true">item cost</div> contenteditable will make the element it is applied to
focusable via the tab key. if a gridcell is conditionally toggled into a state where editing is prohibited, toggle aria-readonly on the gridcell element. expandable cells in a treegrid, gridcells may be made expandable by toggling the aria-expanded attribute. note that if this attribute is provided, it applies only to the individual gridcell. associated wai-aria roles, states, and properties g...
ARIA: switch role - Accessibility
="checkbox", there is no indeterminate or mixed state. the switch role does not support the value mixed for the aria-checked attribute; assigning a value of mixed to a switch instead sets the value to false. assistive technologies may choose to represent switch widgets with a specialized presentation to reflect the notion of an on/off switch. since a switch is an interactive control, it must be
focusable and keyboard accessible. if the role is applied to a non-
focusable element, use the tabindex attribute to change this. the expected keyboard shortcut for toggling the value of a switch is the space key. the developer is required to change the value of the aria-checked attribute dynamically when the switch is toggled. associated aria roles, states, and properties aria-checked attribute th...
ARIA: table role - Accessibility
an> </div> <div role="row" aria-rowindex="18"> <span role="cell">rowgroup</span> <span role="cell">thead</span> </div> <div role="row" aria-rowindex="24"> <span role="cell">term</span> <span role="cell">dt</span> </div> </div> </div> description an element with role="table" is a static tabular structure with rows containing cells. the cells are not
focusable or selectable, though widgets within individual cells of the table can be interactive. using a native html table element whenever possible is strongly encouraged. if a table maintains a selection state, has two-dimensional navigation, or allows the user to rearrange cell order use grid or treegrid instead. to create an aria table, add role="table" to the container element. within that con...
WAI-ARIA Roles - Accessibility
e images, code snippets, or other content that puts across information in a different way to a regular flow of text.aria: form rolethe form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form.aria: grid rolethe grid role is for a widget that contains one or more rows of cells. the position of each cell is significant and can be
focused using keyboard input.aria: gridcell rolethe gridcell role is used to make a cell in a grid or treegrid. it is intended to mimic the functionality of the html td element for table-style grouping of information.aria: heading rolethe heading role defines this element as a heading to a page or section. to give the page more structure, a level should also be provided to indicate relationships betwee...
Mobile accessibility checklist - Accessibility
ero opacity, z-index order and off-screen placement must not be used exclusively to handle visibility. everything other than the currently visible screen must be truly invisible (especially relevant for single page apps with multiple cards): use the hidden attribute or visibility or display style properties. unless absolutely unavoidable, aria-hidden attribute should not be used.
focus all activatable elements must be
focusable: standard controls such as links, buttons, and form fields are
focusable by default. non-standard controls must have an appropriate aria role assigned to them, such as button, link, or checkbox.
focus should be handled in a logical order and consistent manner. text equivalents text equivalent must be provided for every non-strictl...
Web Accessibility: Understanding Colors and Luminance - Accessibility
but it can also hurt. the implication is that web developers who seek to improve legibility of text in which the ambient conditions of a room have changed can take advantage of css media queries 5 environment media features, when these features become available. saturation saturation deserves special mention in discussions about color ("hues") and accessibility. generally speaking, most of the
focus is on luminance when attempting to ensure that there is enough contrast between text and its background, or, in evaluating for the possibility of inducing seizures in those sensitive to photosensitive seizures. there is one aspect about color ("hues"), however, independent of luminance, that deserves special attention as it applies to accessibility, and that is the concept of saturation. this is...
Robust - Accessibility
orously. note: to read the w3c definitions for robust and its guidelines and success criteria, see principle 4: robust — content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. guideline 4.1 — compatible: maximize compatibility with current and future user agents, including assistive technologies this guideline
focuses on making content as compatible as possible, not only with current user agents (e.g. browsers), but also with future ones too. success criteria how to conform to the criteria practical resource 4.1.1 parsing (a) content should be well-formed so it can be parsed successfully by browsers and other user agents such as screenreaders. to pass this criterion,...
-moz-user-input - CSS: Cascading Style Sheets
*/ -moz-user-input: inherit; -moz-user-input: initial; -moz-user-input: unset; for elements that normally take user input, such as a <textarea>, the initial value of -moz-user-input is enabled. note: -moz-user-input was one of the proposals leading to the proposed css 3 user-input property, which has not yet reached candidate recommendation (call for implementations). a similar property, user-
focus, was proposed in early drafts of a predecessor of the css3 ui specification, but was rejected by the working group. syntax values none the element does not respond to user input, and it does not become :active. enabled the element accepts user input. for textboxes, this is the default behavior. please note that this value is no longer supported in firefox 60 onwards (bug 1405087). disab...
:-moz-ui-valid - CSS: Cascading Style Sheets
the :-moz-ui-valid css pseudo-class represents any validated form element whose value validates correctly based on its validation constraints. this pseudo-class is applied according to the following rules: if the control does not have
focus, and the value is valid, apply this pseudo-class. if the control has
focus, and the value was valid (including empty) when it gained
focus, apply this pseudo-class. if the control has
focus, and the value was invalid when it gained
focus, re-validate on every keystroke. if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form. the result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts fo...
::part() - CSS: Cascading Style Sheets
"tab">tab 3</div> </template> <tabbed-custom-element></tabbed-custom-element> css tabbed-custom-element::part(tab) { color: #0c0c0dcc; border-bottom: transparent solid 2px; } tabbed-custom-element::part(tab):hover { background-color: #0c0c0d19; border-color: #0c0c0d33; } tabbed-custom-element::part(tab):hover:active { background-color: #0c0c0d33; } tabbed-custom-element::part(tab):
focus { box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } tabbed-custom-element::part(active) { color: #0060df; border-color: #0a84ff !important; } javascript let template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template.id, class extends htmlelement { constructor() { super(); this.at...
:enabled - CSS: Cascading Style Sheets
/* selects any enabled <input> */ input:enabled { color: blue; } syntax :enabled examples the following example makes the color of text and button <input>s green when enabled, and gray when disabled. this helps the user understand which elements can be interacted with. ...
Video player styling basics - Developer guides
rder:none; cursor:pointer; background:transparent; background-size:contain; background-repeat:no-repeat; } by default, all <button> elements have a border, so this is removed. since background images will be used to display appropriate icons, the background colour of the button is set to be transparent, non-repeated, and the element should fully contain the image. simple :hover and :
focus states are then set for each button that simply alters the opacity of the button: .controls button:hover, .controls button:
focus { opacity:0.5; } to obtain appropriate button images, a set of free common control set icons was downloaded from the web. each image was then converted to a base64 encoded string (using an online base64 image encoder), since the images are quite small, the resultan...
Printing - Developer guides
> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>mdn example</title> <script type="text/javascript"> function closeprint () { document.body.removechild(this.__container__); } function setprint () { this.contentwindow.__container__ = this; this.contentwindow.onbeforeunload = closeprint; this.contentwindow.onafterprint = closeprint; this.contentwindow.
focus(); // required for ie this.contentwindow.print(); } function printpage (surl) { var ohiddframe = document.createelement("iframe"); ohiddframe.onload = setprint; ohiddframe.style.position = "fixed"; ohiddframe.style.right = "0"; ohiddframe.style.bottom = "0"; ohiddframe.style.width = "0"; ohiddframe.style.height = "0"; ohiddframe.style.border = "0"; ohiddframe.src = surl; do...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
in areas of the element that have no foreground content. column-rule-color the color to use when drawing the line separating columns of text. outline-color the color to use when drawing an outline around the outside of the element. this outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). it's generally used as a
focus indicator, to show which element will receive input events. borders any element can have a border drawn around it. a basic element border is a line drawn around the edges of the element's content. see box properties in the box model to learn about the relationship between elements and their borders, and the article styling borders using css to learn more about applying styles to borders. you ...
HTML attribute: minlength - HTML: Hypertext Markup Language
that is at least 5 letters long</label> <input type="text" minlength="5" id="fruit"> we can use pseudoclasses to style the element based on whether the value is valid. the value will be valid as long as it is either null (empty) or five or more characters long. lime is invalid, lemon is valid. input { border: 2px solid currentcolor; } input:invalid { border: 2px dashed red; } input:invalid:
focus { background-image: linear-gradient(pink, lightgreen); } specifications specification status html living standardthe definition of 'minlength attribute' in that specification. living standard html 5.1the definition of 'minlength attribute' in that specification. recommendation ...
HTML attribute: pattern - HTML: Hypertext Markup Language
ible text near the control. additionally, include a title attribute which gives a description of the pattern. user agents may use the title contents during constraint validation to tell the user that the pattern is not matched. some browsers show a tooltip with title contents, improving usability for sighted users. additionally, assistive technology may read the title aloud when the control gains
focus, but this should not be relied upon for accessibility. constraint validation if the input’s value is not the empty string and the value does not match the entire regular expression, there is a from a patternmismatch . the pattern's regular expression, when matched against the value, must have its start anchored to the start of the string and its end anchored to the end of the string, which i...
HTML attribute: readonly - HTML: Hypertext Markup Language
g disabled, so the readonly attribute does not apply. when an input has the readonly attribute, the :read-only pseudo-class also applies to it. conversely, inputs that support the readonly attribute but don't have the attribute set match the :read-write pseudo-class. attribute interactions the difference between disabled and readonly is that read-only controls can still function and are still
focusable, whereas disabled controls can not receive
focus and are not submitted with the form and generally do not function as controls until they are enabled. because a read-only field cannot have it's value changed by a user interaction, required does not have any effect on inputs with the readonly attribute also specified. the only way to modify dynamically the value of the readonly attribute is ...
<a>: The Anchor element - HTML: Hypertext Markup Language
im: links and hypertext - hypertext links mdn / understanding wcag, guideline 3.2 g200: opening new windows and tabs from a link only when necessary g201: giving users advanced warning when opening a new window skip links a skip link is a link placed as early as possible in <body> content that points to the beginning of the page's main content. usually, css hides a skip link offscreen until
focused. <body> <a href="#content">skip to main content</a> <header> … </header> <main id="content"> <!-- the skip link jumps to here --> .skip-link { position: absolute; top: -3em; background: #fff; } .skip-link:
focus { top: 0; } skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation. skip links are especially useful for ...
<body>: The Document Body element - HTML: Hypertext Markup Language
text links. this method is non-conforming, use css color property in conjunction with the :link pseudo-class instead. onafterprint function to call after the user has printed the document. onbeforeprint function to call when the user requests printing of the document. onbeforeunload function to call when the document is about to be unloaded. onblur function to call when the document loses
focus. onerror function to call when the document fails to load properly. on
focus function to call when the document receives
focus. onhashchange function to call when the fragment identifier part (starting with the hash ('#') character) of the document's current address has changed. onlanguagechange function to call when the preferred languages changed. onload function to call when the doc...
<details>: The Details disclosure element - HTML: Hypertext Markup Language
imes called "twisties." a <details> widget can be in one of two states. the default closed state displays only the triangle and the label inside <summary> (or a user agent-defined default string if no <summary>). this might look like the following: here we see a standard disclosure widget with the label "system requirements", in its default closed state. when the user clicks on the widget or
focuses it then presses the space bar, it "twists" open, revealing its contents: from there, you can use css to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute. by default when closed, the widget is only tall enough to display the disclosure triangle and summary. when open, it expands to display the details contained within.
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
disabled, which allows you to disable the <fieldset> and all its contents in one go. attributes this element includes the global attributes. disabled if this boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the <form>. they won't receive any browsing events, like mouse clicks or
focus-related events. by default browsers display such controls grayed out. note that form elements inside the <legend> element won't be disabled. form this attribute takes the value of the id attribute of a <form> element you want the <fieldset> to be part of, even if it is not inside the form. name the name associated with the group. note: the caption for the fieldset is given by the first <lege...
<input type="email"> - HTML: Hypertext Markup Language
ddresses. as a final touch, the list attribute contains the id of a <datalist> whose <option>s specify a set of suggested values the user can choose from. as an added touch, the <label> element is used to establish a label for the email entry box, with its for attribute referencing the emailaddress id of the <input> element. by associating the two elements in this way, clicking on the label will
focus the input element. <label for="emailaddress">email</label><br/> <input id="emailaddress" type="email" placeholder="user@example.gov" list="defaultemails" size="64" maxlength="256" multiple> <datalist id="defaultemails"> <option value="jbond007@mi6.defence.gov.uk"> <option value="jbourne@unknown.net"> <option value="nfury@shield.org"> <option value="tony@starkindustries.com"> <o...
<input type="file"> - HTML: Hypertext Markup Language
the spec. examples in this example, we'll present a slightly more advanced file chooser that takes advantage of the file information available in the htmlinputelement.files property, as well as showing off a few clever tricks. note: you can see the complete source code for this example on github — file-example.html (see it live also). we won't explain the css; the javascript is the main
focus. first of all, let's look at the html: <form method="post" enctype="multipart/form-data"> <div> <label for="image_uploads">choose images to upload (png, jpg)</label> <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> </div> <div class="preview"> <p>no files currently selected for upload</p> </div> <div> <button>submit</butt...
<input type="hidden"> - HTML: Hypertext Markup Language
odid" name="prodid" type="hidden" value="xm234jq"> value a domstring representing the value of the hidden data you want to pass back to the server. events none. supported common attributes autocomplete idl attributes value methods none. note: the input and change events do not apply to this input type. hidden inputs cannot be
focused even using javascript (e.g. hiddeninput.
focus()). value the <input> element's value attribute holds a domstring that contains the hidden data you want to include when the form is submitted to the server. this specifically can't be edited or seen by the user via the user interface, although you could edit the value via browser developer tools. important: while the value isn't displayed to t...
<keygen> - HTML: Hypertext Markup Language
ssociated element, palpable content. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. permitted parents any element that accepts phrasing content. permitted aria roles none dom interface htmlkeygenelement attributes this element includes the global attributes. auto
focus this boolean attribute lets you specify that the control should have input
focus when the page loads, unless the user overrides it, for example by typing in a different control. only one form element in a document can have the auto
focus attribute, which is a boolean. challenge a challenge string that is submitted along with the public key. defaults to an empty string if not specified. disable...
<label> - HTML: Hypertext Markup Language
examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. associating a <label> with an <input> element offers some major advantages: the label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. this means that, for example, a screenreader will read out the label when the user is
focused on the form input, making it easier for an assistive technology user to understand what data should be entered. you can click the associated label to
focus/activate the input, as well as the input itself. this increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device. to associate the <label> with an <input> element, you need...
<optgroup> - HTML: Hypertext Markup Language
permitted aria roles no role permitted dom interface htmloptgroupelement note: optgroup elements may not be nested. attributes this element includes the global attributes. disabled if this boolean attribute is set, none of the items in this option group is selectable. often browsers grey out such control and it won't receive any browsing events, like mouse clicks or
focus-related ones. label the name of the group of options, which the browser can use when labeling the options in the user interface. this attribute is mandatory if this element is used. examples <select> <optgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgroup label="group 2"> <option>option 2.1</option> <option>option 2.2</option> </optgroup> <optgroup ...
<option>: The HTML Option element - HTML: Hypertext Markup Language
> or a <datalist> element. implicit aria role option permitted aria roles no role permitted dom interface htmloptionelement attributes this element includes the global attributes. disabled if this boolean attribute is set, this option is not checkable. often browsers grey out such control and it won't receive any browsing event, like mouse clicks or
focus-related ones. if this attribute is not set, the element can still be disabled if one of its ancestors is a disabled <optgroup> element. label this attribute is text for the label indicating the meaning of the option. if the label attribute isn't defined, its value is that of the element text content. selected if present, this boolean attribute indicates that the option is initially selected. ...
<output>: The Output element - HTML: Hypertext Markup Language
eint(a.value)+parseint(b.value)"> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> = <output name="result" for="a b">60</output> </form> accessibility concerns many browsers implement this element as an aria-live region. assistive technology will thereby announce the results of ui interactions posted inside it without requiring that
focus is switched away from the controls that produce those results. specifications specification status comment html living standardthe definition of '<output>' in that specification. living standard html5the definition of '<output>' in that specification. recommendation ...
Resource URLs - HTTP
composed of two parts: a prefix (resource:), and a url pointing to the resource you want to load: resource://<url> an example: resource://gre/res/svg.css when arrows are found in the resource url's ('->'), it means that the first file loaded the next one: resource://<file-loader> -> <file-loaded> please refer to identifying resources on the web for more general details. in this article, we
focus on resource uris, which are used internally by firefox to point to built-in resources. threats because some of the information shared by resource: urls is available to websites, a web page could run internal scripts and inspect internal resources of firefox, including the default preferences, which could be a serious security and privacy issue. for example, a script on browserleaks highlights ...
Browser detection using the user agent - HTTP
n of gecko. gecko puts the gecko version number in the comment part of the user agent after the rv: string. from gecko 14 for the mobile version and gecko 17 for the desktop version, it also puts this value in the gecko/version token (previous version put there the build date, then a fixed date called the geckotrail). os the operating system is given in most user agent strings (although not web-
focused platforms like firefox os), but the format varies a lot. it is a fixed string between two semi-colons, in the comment part of the user agent. these strings are specific for each browser. they indicate the os, but also often its version and information on the relying hardware (32 or 64 bits, or intel/ppc for mac). like in all cases, these strings may change in the future, one should use them on...
Grammar and types - JavaScript
k escape and an escaped line break at the end of each line: var poem = 'roses are red,\n\ violets are blue.\n\ sugar is sweet,\n\ and so is foo.' ecmascript 2015 introduces a new type of literal, namely template literals. this allows for many new features, including multiline strings! var poem = `roses are red, violets are blue. sugar is sweet, and so is foo.` more information this chapter
focuses on basic syntax for declarations and types. to learn more about javascript's language constructs, see also the following chapters in this guide: control flow and error handling loops and iteration functions expressions and operators in the next chapter, we will have a look at control flow constructs and error handling. « previousnext » ...
Logical OR assignment (||=) - JavaScript
ise assignment operators. examples setting default content if the "lyrics" element is empty, set the innerhtml to a default value: document.getelementbyid('lyrics').innerhtml ||= '<i>no lyrics.</i>' here the short-circuit is especially beneficial, since the element will not be updated unnecessarily and won't cause unwanted side-effects such as additional parsing or rendering work, or loss of
focus, etc. note: pay attention to the value returned by the api you're checking against. if an empty string is returned (a falsy value), ||= must be used, otherwise you want to use the ??= operator (for null or undefined return values). specifications specification logical assignment operatorsthe definition of 'assignment operators' in that specification. ...
Web video codec guide - Web media technologies
licensing proprietary with numerous patents. commercial use requires a license. note that multiple patent pools may apply. [1] firefox support for avc is dependent upon the operating system's built-in or preinstalled codecs for avc and its container in order to avoid patent concerns. h.263 itu's h.263 codec was designed primarily for use in low-bandwidth situations. in particular, its
focus is for video conferencing on pstn (public switched telephone networks), rtsp, and sip (ip-based videoconferencing) systems. despite being optimized for low-bandwidth networks, it is fairly cpu intensive and may not perform adequately on lower-end computers. the data format is similar to that of mpeg-4 part 2. h.263 has never been widely used on the web. variations on h.263 have been used as the ...
OpenSearch description format
engine for itself, so that a browser or other client application can use that search engine. opensearch is supported by (at least) firefox, edge, internet explorer, safari, and chrome. (see reference material for links to other browsers' documentation.) firefox also supports additional features not in the opensearch standard, such as search suggestions and the <searchform> element. this article
focuses on creating opensearch-compatible search plugins that support these additional firefox features. opensearch description files can be advertised as described in autodiscovery of search plugins, and can be installed programmatically as described in adding search engines from web pages. opensearch description file the xml file that describes a search engine follows the basic template below. sec...
Critical rendering path - Web Performance
and layout occurs, the pixels can be painted to the screen. onload, the entire screen is painted. after that, only impacted areas of the screen will be repainted, as browsers are optimized to repaint the minimum area required. paint time depends on what kind of updates are being applied to the render tree. while painting is a very fast process, and therefore likely not the most impactful place to
focus on in improving performance, it is important to remember to allow for both layout and re-paint times when measuring how long an animation frame may take. the styles applied to each node increase the paint time, but removing style that increases the paint by 0.001ms may not give you the biggest bang for your optimization buck. remember to measure first. then you can determine whether it should be ...
Performance fundamentals - Web Performance
hese effects in css along with the rest of your app's look-and-feel, using a standardized syntax. css animations give you very granular control over your effects using keyframes, and you can even watch events fired during the animation process in order to handle other tasks that need to be performed at set points in the animation process. you can easily trigger these animations with the :hover, :
focus, or :target, or by dynamically adding and removing classes on parent elements. if you want to create animations on the fly or modify them in javascript, james long has written a simple library for that called css-animations.js. use css transforms instead of tweaking absolute positioning and fiddling with all that math yourself, use the transform css property to adjust the position, scale, and ...
Populating the page: how browsers work - Web Performance
p slow start, after receipt of the initial packet, the server doubles the size of the next packet to around 28kb. subsequent packets increase in size until a predetermined threshold is reached, or congestion is experienced. if you’ve ever heard of the 14kb rule for initial page load, tcp slow start is the reason why the initial response is 14kb, and why web performance optimization calls for
focusing optimizations with this initial 14kb response in mind. tcp slow start gradually builds up transmission speeds appropriate for the network's capabilities to avoid congestion. congestion control as the server sends data in tcp packets, the user's client confirms delivery by returning acknowledgements, or acks. the connection has a limited capacity depending on hardware and network conditions. ...
Optimizing startup performance - Web Performance
an often overlooked aspect of app software development—even among those
focusing on performance optimization—is startup performance. how long does your app take to start up? does it seem to lock up the device or the user's browser while the app loads? that makes users worry that your app is crashed, or that something else is wrong. it's always a good idea to take the time to ensure that your app starts up nicely. this article offers tips and suggestions to help you achieve that goal, both when writing a new app and when porting an app from another platform to the web. starting up nicely regardless of platform, it's always a good idea to start up as quickly as possible. since that's a universal issue, we won't be
focusing on it too much here. instead, we're going to look at a mor...
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
the app without any client-side intervention, and its operation is handled by the app's service worker. notifications can be used by the service worker to show new information to the user, or at least alert them when something has been updated. they work outside of the browser window, just like service workers, so updates can be pushed and notifications can be shown when the app's page is out of
focus or even closed. notifications let's start with notifications — they can work without push, but are very useful when combined with them. let’s look at them in isolation to begin with. request permission to show a notification, we have to request permission to do so first. instead of showing the notification immediately though, best practice dictates that we should show the popup when the u...
Structural overview of progressive web apps - Progressive web apps (PWAs)
cture is fast, and also feels fast as the user sees "something" instantly, instead of a loading spinner or a blank page. it also allows the website to be accessible offline if the network connection is not available. we can control what is requested from the server and what is retrieved from the cache with a service worker, which will be explained in detail in the next article — for now let's
focus on the structure itself. benefits of the app shell pattern this architecture allows a web site to benefit the most from all the pwa features — it caches the app shell and manages the dynamic content in a way that greatly improves the performance. in addition to the basic shell, you can add other features such as add to home screen or push notifications, safe in the knowledge that the app will...
SVG Core Attributes - SVG: Scalable Vector Graphics
ould be written in. the tag contains one single entry value in the format defined in the tags for identifying languages (bcp47) ietf document. svg 2 introduce the new lang attributes. if both lang and xml:lang attribute are used, xml:lang has priority over lang. value: any valid language id; animatable: no tabindex the tabindex svg attribute allows you to control whether an element is
focusable and to define the relative order of the element for the purposes of sequential
focus navigation. value type: <integer>; animatable: no xml:base specifies a base iri other than the base iri of the document. value type: <iri>; animatable: no xml:lang it is a universal attribute allowed in all xml dialects to mark up the natural human language that an element contains. it's almost identi...
begin - SVG: Scalable Vector Graphics
that determines the time at which the element's animation should begin. the animation start time is defined relative to the time that the specified event is fired. a valid event-value consists of an element id followed by a dot and one of the supported events for that element. all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are:
focus, blur,
focusin,
focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent. an optional offset value as defined in <offset-value> can be appended. <...
end - SVG: Scalable Vector Graphics
set that determines the time at which the element's animation should end. the animation end time is defined relative to the time that the specified event is fired. a valid event-value consists of an element id followed by a dot and one of the supported events for that element. all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are:
focus, blur,
focusin,
focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent . an optional offset value as defined in <offset-value> can be appended. ...
requiredFeatures - SVG: Scalable Vector Graphics
te>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <feoffset>, <fetile>, <fefuncr>, <fefuncg>, <fefuncb> and <fefunca> elements http://www.w3.org/tr/svg11/feature#documenteventsattribute the browser supports the onunload, onabort, onerror, onresize, onscroll and onzoom attributes http://www.w3.org/tr/svg11/feature#graphicaleventsattribute the browser supports the on
focusin, on
focusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout and onload attributes http://www.w3.org/tr/svg11/feature#animationeventsattribute the browser supports the onbegin, onend, onrepeat and onload attributes http://www.w3.org/tr/svg11/feature#cursor the browser supports the <cursor> element http://www.w3.org/tr/svg11/feature#hyperlinking ...
tabindex - SVG: Scalable Vector Graphics
the tabindex attribute allows you to control whether an element is
focusable and to define the relative order of the element for the purposes of sequential
focus navigation. all elements are using this attribute. html, body, svg { height: 100%; } <?xml version="1.0"?> <svg viewbox="0 0 260 260" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="15" tabindex="1" /> <circle cx="60" cy="160" r="30" tabindex="3" /> <circle cx="160" cy="60" r="30" tabindex="2" /> <circle cx="160" cy="160" r="60" tabindex="4" /> </svg> usage notes value valid integer default value none animatable no valid integer relative order of the element for the purposes of sequential
focus navigation. specifications specificatio...
visibility - SVG: Scalable Vector Graphics
usage notes value visible | hidden | collapse default value visible animatable yes visible this value indicates that the element will be painted. hidden this value indicates that the element will not be painted. though it is still part of the rendering tree, i.e. it may receive pointer events depending on the pointer-events attribute, may receive
focus depending on the tabindex attribute, contributes to bounding box calculations and clipping paths, and does affect text layout. collapse this value is equal to hidden. example the following example toggles the css visibility of the svg image path. html <button id="nav-toggle-button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" class="button-icon"> ...
<feConvolveMatrix> - SVG: Scalable Vector Graphics
ch convolution theory as described in many computer graphics textbooks. to illustrate, suppose you have a input image which is 5 pixels by 5 pixels, whose color values for one of the color channels are as follows: 0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255 and you define a 3-by-3 convolution kernel as follows: 1 2 3 4 5 6 7 8 9 let's
focus on the color value at the second row and second column of the image (source pixel value is 120). assuming the simplest case (where the input image's pixel grid aligns perfectly with the kernel's pixel grid) and assuming default values for attributes ‘divisor’, ‘targetx’ and ‘targety’, then resulting color value will be: (9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220...
Basic shapes - SVG: Scalable Vector Graphics
inal straight line would be drawn from (2,2) to (0,0). path a <path> is the most general shape that can be used in svg. using a path element, you can draw rectangles (with or without rounded corners), circles, ellipses, polylines, and polygons. basically any of the other types of shapes, bezier curves, quadratic curves, and many more. for this reason, the next section in this tutorial will be
focused on paths. but for now, note that there is a single parameter used to control its shape. <path d="m20,230 q40,205 50,230 t90,230" fill="none" stroke="blue" stroke-width="5"/> d a list of points and other information about how to draw the path. see the paths section for more information. « previousnext » ...
Texts - SVG: Scalable Vector Graphics
« previousnext » when talking about text in svg we have to differentiate two almost completely separate topics. the one is the inclusion and display of text in an image, and the other are svg fonts. the latter may be described in a later section of the tutorial, while we will
focus completely on the first part: bringing text into an svg image. basics we have seen in the introducing example, that the text element can be used to put arbitrary text in svg documents: <text x="10" y="10">hello world!</text> the x and y attributes determine, where in the viewport the text will appear. the attribute text-anchor, which can have the values "start", "middle", "end" or "inherit", decides in which direction the text flows from this point. the attribute dominant-baseline decides the v...
Same-origin policy - Web security
e very limited access to window and location objects, as described in the next two sections. to communicate between documents from different origins, use window.postmessage. specification: html living standard § cross-origin objects. window the following cross-origin access to these window properties is allowed: methods window.blur window.close window.
focus window.postmessage attributes window.closed read only. window.frames read only. window.length read only. window.location read/write. window.opener read only. window.parent read only. window.self read only. window.top read only. window.window read only. ...
Tutorials
d how the different browsers support them. creating a simple web page with html an html guide for beginners that includes explanations of common tags, including html5 tags. also includes a step-by-step guide to creating a basic web page with code examples. html challenges use these challenges to hone your html skills (for example, "should i use an <h2> element or a <strong> element?"),
focusing on meaningful markup. intermediate level multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages. html tables representing tabular data on a webpage in an understandable, accessible way can be a challenge. this m...
Using custom elements - Web Components
ount" }). working through some simple examples at this point, let's go through some more simple examples to show you how custom elements are created in more detail. autonomous custom elements let's have a look at an example of an autonomous custom element — <popup-info-box> (see a live example). this takes an image icon and a text string, and embeds the icon into the page. when the icon is
focused, it displays the text in a pop up information box to provide further in-context information. to begin with, the javascript file defines a class called popupinfo, which extends the generic htmlelement class. class popupinfo extends htmlelement { constructor() { // always call super first in constructor super(); // write element functionality in here ... } } the preceding...
Compiling from Rust to WebAssembly - WebAssembly
sm). this tutorial takes you through all you need to know to compile a rust project to wasm and use it in an existing web app. rust and webassembly use cases there are two main use cases for rust and webassembly: to build an entire application — an entire web app based in rust. to build a part of an application — using rust in an existing javascript frontend. for now, the rust team is
focusing on the latter case, and so that's what we cover here. for the former case, check out projects like yew. in this tutorial, we build an npm package using wasm-pack, a tool for building npm packages in rust. this package will contain only webassembly and javascript code, and so the users of the package won't need rust installed. they may not even notice that it's written in webassembly. rust en...