LockedFile.active - Web APIs
the active property allows to know if the lockedfile object is still usable (true) or not (false).
... if the object is inactive then it is impossible to perform any read or write operation with it.
... typically, a lockedfile object becomes inactive when the lockedfile.abort() method is called or if an error occurs.
... syntax var state = instanceoflockedfile.active value a boolean.

MediaSource.activeSourceBuffers - Web APIs
the activesourcebuffers read-only property of the mediasource interface returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within sourcebuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.
... syntax var myactivesourcebuffers = mediasource.activesourcebuffers; value a sourcebufferlist containing the sourcebuffer objects for each of the active tracks.
...iers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.activesourcebuffers); // will contain the source buffer that was added above, // as it is selected for playing in the video player video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
... specifications specification status comment media source extensionsthe definition of 'activesourcebuffers' in that specification.

PerformanceNavigationTiming.domInteractive - Web APIs
the dominteractive read-only property returns a timestamp representing the time value equal to the time immediately before the user agent sets the current document readiness of the current document to interactive.
... syntax perfentry.dominteractive; return value a timestamp representing the time value equal to the time immediately before the user agent sets the current document readiness of the current document to interactive.
...vents var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status com...
...ment navigation timing level 2the definition of 'dominteractive' in that specification.

ServiceWorkerRegistration.active - Web APIs
the active property of the serviceworkerregistration interface returns a service worker whose serviceworker.state is activated.
... an active worker controls a serviceworkerclient if the client's url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) note: this feature is available in web workers.
... syntax var serviceworker = serviceworkerregistration.active; value a serviceworker object's property, if it is currently in an activated state.
... specifications specification status comment service workersthe definition of 'serviceworkerregistration.active' in that specification.

ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
now you can use your plug-ins in any recent version of ie or in any other activex container for that matter.
...this 100k activex control contains the entire np api implementation and probably worked much like pluginhostctrl.dll does now.
...assuming you have cvs somewhere in your path, type this from a command prompt: c:\> set cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot c:\> set home=\temp c:\> cvs login (logging in to anonymous@cvs-mirror.mozilla.org) cvs password: anonymous c:\> cvs -z3 co mozilla/embedding/browser/activex/src/pluginhostctrl this fetches the source for the control into mozilla\embedding\browser\activex\src\pluginhostctrl.

First interactive - MDN Web Docs Glossary: Definitions of Web-related terms
first interactive, also known as first cpu idle, is a non-standard web performance metric that measures when the user's window is quiet enough to handle user input, or what is termed as minimally interactive.
... minimally interactive is defined as when some, but not necessarily all, ui elements on the page have loaded and are interactive, and, on average, respond to user input in a reasonable amount of time.
... more information first interactive is a variation of time to interactive, which is split into first interactive and consistently interactive.

HTMLIFrameElement.getActive()
the getactive() method of the htmliframeelement indicates whether the current browser <iframe> is the currently active frame.
... syntax var amiactive = instanceofhtmliframeelement.getactive(); returns a boolean indicating whether the current browser <iframe> is the currently active frame (true) or not (false.) parameters none.
... example var browser = document.queryselector('iframe'); var amiactive = browser.getactive(); specification not part of any specification.

menuactive - Archive of obsolete content
« xul reference home menuactive type: boolean this attribute is set on an item in a menu when it is being hovered over.
...a dommenuitemactive event will be sent to the item when the item is hovered over, and a dommenuiteminactive event will be sent to the item when the selection moves away.

PerformanceTiming.domInteractive - Web APIs
the legacy performancetiming.dominteractive read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the parser finished its work on the main document, that is when its document.readystate changes to 'interactive' and the corresponding readystatechange event is thrown.
... syntax time = performancetiming.dominteractive; specifications specification status comment navigation timingthe definition of 'performancetiming.dominteractive' in that specification.

WebGLActiveInfo.name - Web APIs
the read-only webglactiveinfo.name property represents the name of the requested data returned by calling the getactiveattrib() or getactiveuniform() methods.
... examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.name; var activeuniform = gl.getactiveuniform(program, index); activeuniform.name; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.name' in that specification.

WebGLActiveInfo.size - Web APIs
the read-only webglactiveinfo.size property is a number representing the size of the requested data returned by calling the getactiveattrib() or getactiveuniform() methods.
... examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.size; var activeuniform = gl.getactiveuniform(program, index); activeuniform.size; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.size' in that specification.

WebGLActiveInfo.type - Web APIs
the read-only webglactiveinfo.type property represents the type of the requested data returned by calling the getactiveattrib() or getactiveuniform() methods.
... examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.type; var activeuniform = gl.getactiveuniform(program, index); activeuniform.type; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.type' in that specification.

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
msaa is the microsoft active accessibility (msaa) api, used on windows operating systems to support assistive technologies for users with disabilities.
...the listbox will still visually appear to be active, but the screen reader behavior is improved by not echoing too much spoken information for each keypress.

activetitlebarcolor - Archive of obsolete content
« xul reference home activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).

inactivetitlebarcolor - Archive of obsolete content
« xul reference home inactivetitlebarcolor type: color string specify background color of the window's titlebar when it is inactive (background).

sortActive - Archive of obsolete content
« xul reference home sortactive type: boolean this should be set to true for the column which should be sorted by default.

DOMMenuItemActive - Archive of obsolete content
the dommenuitemactive event is executed when a <menu> or a <menuitem> has been hovered or highlighted.

DOMMenuItemInactive - Archive of obsolete content
the dommenuiteminactive event is executed when a <menu> or a <menuitem> in no longer hovered or highlighted.

Time to interactive - MDN Web Docs Glossary: Definitions of Web-related terms
time to interactive (tti) is a non-standardized web performance 'progress' metric defined as the point in time when the last long task finished and was followed by 5 seconds of network and main thread inactivity.

Index - Web APIs
this will be unresolved if the animation was not associated with a timeline at the time the event was generated or if the associated timeline was inactive.
... 97 animationtimeline.currenttime api, animation, animationtimeline, experimental, property, read-only, reference, web animations, currenttime, waapi, web animations api the currenttime read-only property of the web animations api's animationtimeline interface returns the timeline's current time in milliseconds, or null if the timeline is inactive.
... 328 bluetoothremotegattcharacteristic.startnotifications() api, bluetooth, bluetoothremotegattcharacteristic, experimental, property, reference, web bluetooth api, startnotifications() the bluetoothremotegattcharacteristic.startnotifications() method returns a promise to the bluetoothremotegattcharacteristic instance when there is an active notification on it.
...And 88 more matches

Windows Media in Netscape - Archive of obsolete content
netscape 7.1 has the ability to load the microsoft® windows media player™ as an activex control, and thus developers can now build multimedia experiences that script the windows media player in netscape 7.1, just as they do in internet explorer.
... netscape 7.1 will work with both the windows media player 6.4 activex control as well as versions 7 through 9.
... this article explains how to embed the windows media player activex control in web pages to support netscape 7.1, how to control the windows media player activex control using javascript and provides working examples.
...And 37 more matches

Box-shadow generator - CSS: Cascading Style Sheets
gin: 5px 0; padding: 5px; text-align: center; background-color: #eee; border: 1px solid #ddd; font-size: 0.75em; line-height: 1.5em; color: #333; border-radius: 3px; position: relative; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #layer_manager .node:hover { color: #fff; background-color: #3380c4; cursor: pointer; } /* active element styling */ #layer_manager [data-active='layer'] { color: #fff; border: none; background-color: #379b4a; } #layer_manager [data-active='subject'] { color: #fff; background-color: #467fc9; } /* delete button */ #layer_manager .delete { width: 1.5em; height: 100%; float: right; border-radius: 3px; background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png")...
...: 3px; background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); background-position: center center; background-repeat: no-repeat; position: absolute; top: 0; right: 5px; display: none; } #layer_menu .delete:hover { background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); } #layer_menu .button:hover .delete { display: block; } /* * active element styling */ #layer_menu [data-active='subject'] { color: #fff; background-color: #379b4a; border: 1px solid #379b4a; } /* checkbox */ #layer_menu .ui-checkbox > label { height: 15px; line-height: 17px; font-weight: normal; width: 46px; margin: 0 5px 0 0; } #layer_menu .ui-checkbox > input:checked + label { display: none; } /*************************************************...
...px; position: absolute; top: 2px; } #output .button { width: 90px; height: 22px; margin: 0 5px 0 0; text-align: center; line-height: 20px; font-size: 14px; color: #fff; background-color: #999; border-top-left-radius: 3px; border-top-right-radius: 3px; bottom: -5px; float:left; } #output .button:hover { color: #fff; background-color: #666; cursor: pointer; } #output .menu [data-active="true"] { color: #777; background-color: #fff; border: 1px solid #ccc; border-bottom: none; } #output .menu [data-topic="before"] { left: 100px; } #output .menu [data-topic="after"] { left: 200px; } #output .output { width: 480px; margin: 10px; padding: 10px; overflow: hidden; color: #555; font-size: 14px; border: 1px dashed #ccc; border-radius: 3px; display: none; -moz-box-si...
...And 21 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
linear-gradient generator html content <div id="container"> <div id="gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> ...
...d; position: relative; } #gradient-container[data-alpha="true"]:after { content: ""; width: 100%; height: 100%; background: url('images/canvas-pattern.png'); position: absolute; z-index: -1; } /** * gradient axis */ .gradient-axis { width: 125%; height: 4px; margin: -3px 0 0 0; border: 1px solid #ccc; position: absolute; top: 50%; left: 0; opacity: 0.5; } .gradient-axis[data-active='true'] { opacity: 1; z-index: 1; } .gradient-axis:after { content: ""; width: 25px; height: 100%; background-color: #ccc; position: absolute; left: 0; top: 0; } .gradient-axis .gradient-line { width: 80%; height: 100%; margin: 0px auto; position: relative; } .gradient-axis .gradient-line:hover { cursor: pointer; } .gradient-axis .gradient-line:after, .gradient-axis .gradient-li...
...; top: -7px; border-radius: 50%; background-color: #fff; border: 1px solid #999; position: absolute; z-index: 1; } .gradient-axis .gradient-point:after { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 1px solid #999; position: absolute; top: 4px; left: 4px; } .gradient-axis .gradient-point:hover:after, .gradient-axis .gradient-point[data-active="true"]:after { background-color: #ccc; } .gradient-axis .rotate-point { width: 25px; height: 25px; position: absolute; top: -10.5px; right: -12px; } .gradient-axis[axisid='0']:after { background-color: #da5c5c; } .gradient-axis[axisid='1']:after { background-color: #5cda9b; } .gradient-axis[axisid='2']:after { background-color: #5c9bda; } .gradient-axis[axisid='3']:after { backgro...
...And 20 more matches

tabs - Archive of obsolete content
usage open a tab you can open a new tab, specifying various properties including location: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); track tabs you can register event listeners to be notified when tabs open, close, finish loading dom content, or are made active or inactive: var tabs = require("sdk/tabs"); // listen for tab openings.
...in particular, you can enumerate it: var tabs = require('sdk/tabs'); for (let tab of tabs) console.log(tab.title); you can also access individual tabs by index: var tabs = require('sdk/tabs'); tabs.on('ready', function () { console.log('first: ' + tabs[0].title); console.log('last: ' + tabs[tabs.length-1].title); }); you can access the currently active tab: var tabs = require('sdk/tabs'); tabs.on('activate', function () { console.log('active: ' + tabs.activetab.url); }); track a single tab given a tab, you can register event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the "back-forward cache": var tabs = require("sdk/tabs"); function onopen(tab...
...here's an add-on that uses a toggle button to attach a stylesheet to the active tab, and detach it again.
...And 18 more matches

Index - Archive of obsolete content
357 activex control for hosting netscape plug-ins in ie add-ons, needsclassification, plugins microsoft has removed support for netscape plug-ins from ie 5.5 sp 2 and beyond.
... 381 chromeless update [this project may not be active — check github https://github.com/mozilla/chromeless] 382 compiling the npruntime sample plugin in visual studio add-ons, plugins no summary!
... 414 dtrace archive, dtrace, performance, profiling, qa, testing dtrace is sun microsystem's dynamic tracing 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.
...And 17 more matches

Template Logging - Archive of obsolete content
each result is logged in a form much like the following: in template with id root using ref http://www.some-fictitious-zoo.com/birds new active result for query 2 matching rule 1: http://www.some-fictitious-zoo.com/birds/emperorpenguin in the example above, a new result has been added.
...the final piece of information is the phrase 'new active result'.
... this indicates first, that this is a new result, as opposed to a result being removed, and second, that this result is 'active'.
...And 16 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
find the <h2> heading with an id of list-heading and replace the hardcoded number of active and completed tasks with dynamic expressions: <h2 id="list-heading">{completedtodos} out of {totaltodos} items completed</h2> go to the app, and you should see the "2 out of 3 items completed" message as before, but this time the information is coming from the todos array.
... reactive todos as we've already seen, every time the value of a component top-level variable is modified svelte knows how to update the ui.
... we can tell svelte that we want our totaltodos and completedtodos variables to be reactive by prefixing them with $:.
...And 16 more matches

Theme changes in Firefox 2 - Archive of obsolete content
global/inactivetab-left.png removed file.
... global/inactivetab-right.png removed file.
... browser.css the following styles used in firefox 1.5 themes are no longer used in firefox 2 and should be removed from your theme: #bookmarks-button:active #copy-button:active #cut-button:active #downloads-button:active #forward-button[buttondown="true"] #history-button:active #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active #new-tab-button[checked="true"] #new-window-button:active #new-window-button[checked="true"] #paste-button:active #print-button:a...
...And 15 more matches

Venkman Introduction - Archive of obsolete content
the interactive console also allows for execution of arbitrary javascript code.
... to see which version of venkman you have, type /version in the interactive session view.
...the source code view is empty until you select a script, and the interactive session view starts up with basic startup information.
...And 14 more matches

Using the Right Markup to Invoke Plugins - Archive of obsolete content
in ie, the object element is used to invoke a plugin that is built on the activex architecture.
.../shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> </object> in the above example, the classid attribute that goes along with the object element points to a "clsid:" urn followed by the unique identifier of an activex control (in the above example, the string beginning with "d27...").
...the codebase attribute used above points to a location that houses the cab file containing the activex control.
...And 14 more matches

Color picker tool - CSS: Cascading Style Sheets
0 10px 0 30px; overflow: hidden; position: relative; float: left; transition: all 0.2s; } #picker-samples .sample { width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; position: absolute; float: left; transition: all 0.2s; } #picker-samples .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #picker-samples .sample[data-active='true'] { border-color: #999; } #picker-samples .sample[data-active='true']:after { content: ""; position: absolute; background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #picker-samples #add-icon { width: 100%; height: 100%; position: relative; box-shadow: inset 0px 0px 2px 0px #ddd; } #picker-sa...
...; border: 1px solid #ddd; display: table; float: left; } #controls .icon:hover { cursor: pointer; } #controls .picker-icon { background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); } #controls #void-sample { margin-right: 10px; background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); background-position: center left; } #controls #void-sample[data-active='true'] { border-color: #ccc; background-position: center right; } #controls .switch { width: 106px; padding: 1px; border: 1px solid #ccc; font-size: 14px; text-align: center; line-height: 24px; overflow: hidden; float: left; } #controls .switch:hover { cursor: pointer; } #controls .switch > * { width: 50%; padding: 2px 0; background-color: #eee; float: left; } #controls .switc...
...h [data-active='true'] { color: #fff; background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-color: #777; } /** * trash can */ #delete { width: 100%; height: 94px; background-color: #ddd; background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-repeat: repeat; text-align: center; color: #777; position: relative; float: right; } #delete #trash-can { width: 80%; height: 80%; border: 2px dashed #fff; border-radius: 5px; background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; position: absolute; top: 10%; left: 10%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; transition: all 0.2s; } #delete[drag-state='enter'] { background-colo...
...And 14 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
47 cms cms, composing, content management system, glossary a cms (content management system) is software that allows users to publish, organize, change, or remove various kinds of content, not only text but also embedded images, video, audio, and interactive code.
... 79 client hints client hints, glossary, performance, reference, web performance client hints are a set of http request header fields for proactive content negotiation allowing clients to indicate a list of device and agent specific preferences.
...continuous media can be real-time (interactive), where there is a "tight" timing relationship between source and sink, or streaming (playback), where the relationship is less strict.
...And 13 more matches

How to build custom form controls - Learn web development
here is the result we want to achieve: this screenshot shows the three main states of our control: the normal state (on the left); the active state (in the middle) and the open state (on the right).
... 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.
...And 13 more matches

Index - Learn web development
accessibility, beginner, design, 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.
... beginner, composing, needsactivelearning, needsschema when starting with a web project, many people focus on the technical side.
... beginner, document, guide, needsactivelearning, web, web development, webmechanics, troubleshooting so you've published your website online?
...And 13 more matches

Working with Svelte stores - Learn web development
svelte also provides a very intuitive way to integrate stores into its reactivity system using the reactive $store syntax.
... this setup allows us to work with stores in a reactive way.
...there we assign a new value to a local variable, and thanks to svelte reactivity all our markup and reactive dependencies are updated accordingly.
...And 12 more matches

Routing in Ember - Learn web development
we'll use it to provide a unique url for each of the three todo views — "all", "active", and "completed".
... at the moment, we already have the "all" page, as we are currently not doing any filtering in the page that we've been working with, but we will need to reorganize it a bit to handle a different view for the "active" and "completed" todos.
... creating the routes let's start by creating three new routes: "index", "active" and "completed".
...And 11 more matches

Styling links - Learn web development
active: a link when it is being activated (e.g.
... clicked on), styled using the :active pseudo class.
... focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles are nearly the same as they were back in the early days of browsers in the mid-1990s.
...And 10 more matches

Video and Audio APIs - Learn web development
tener() lines below the previous ones: rwd.addeventlistener('click', mediabackward); fwd.addeventlistener('click', mediaforward); now on to the event handler functions — add the following code below your previous functions to define mediabackward() and mediaforward(): let intervalfwd; let intervalrwd; function mediabackward() { clearinterval(intervalfwd); fwd.classlist.remove('active'); if(rwd.classlist.contains('active')) { rwd.classlist.remove('active'); clearinterval(intervalrwd); media.play(); } else { rwd.classlist.add('active'); media.pause(); intervalrwd = setinterval(windbackward, 200); } } function mediaforward() { clearinterval(intervalrwd); rwd.classlist.remove('active'); if(fwd.classlist.contains('active')) { fwd.classlis...
...t.remove('active'); clearinterval(intervalfwd); media.play(); } else { fwd.classlist.add('active'); media.pause(); intervalfwd = setinterval(windforward, 200); } } you'll notice that first we initialize two variables — intervalfwd and intervalrwd — you'll find out what they are for later on.
... we use an if statement to check whether the active class has been set on the rwd button, indicating that it has already been pressed.
...And 9 more matches

Perceived performance - Learn web development
relevant measurements include first meaningful paint (fmp), largest contentful paint (lcp), time to interactive (tti), render start, dom interactive, and speed index.
...for this, time to interactive, is a good metric; it is the moment when the last long task of the load process finishes and the ui is available for user interaction with delay.
... how fast or slow something feels like it's taking depends a lot on whether the user is actively or passively waiting for this thing to happen.
...And 9 more matches

ARIA: tab role - Accessibility
the aria tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel.
...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.
...And 9 more matches

<color> - CSS: Cascading Style Sheets
activetext text of active links buttonface background of push buttons buttontext text of push buttons canvas background of application content or documents canvastext text in application content or documents field background of input fields fieldtext text in input fields graytext text that is disabled highlight background of items that are selected in a...
... control highlighttext text of items that are selected in a control linktext text of non-active, non-visited links visitedtext text of visited links deprecated system color keywords the following keywords were defined in earlier versions of the css color module.
... activeborder active window border.
...And 9 more matches

nsITextInputProcessor
return value true if the modifier state is active.
...stored modifier key information means that the modifier is active.
...if it's not stored, i.e., the modifier state is inactive, the instance stores the modifier key, otherwise forgets the key.
...And 8 more matches

TypeScript support in Svelte - Learn web development
nevertheless, if we think it makes our code easier to read, we could specify it like this: $: completedtodos = todos.filter((t: todotype) => t.completed).length most of the time typescript will be able to correctly infer the reactive variable type, but sometimes you might get an "implicitly has an 'any' type" error when working with reactive assignments.
... in those cases you can declare the typed variable in a different statement, like this: let completetodos: number $: completedtodos = todos.filter((t: todotype) => t.completed).length you can't specify the type in the reactive assignment itself.
...for more information read how do i type reactive assignments?
...And 7 more matches

IME handling guide
(fyi: "open" is also called "active" or "turned on".
... "closed" is also called "inactive" or "turned off") so, this document is useful when you're try to fix a bug for text input in gecko.
... if widget wants notifications even while all windows are deactive, imecontentobserver doesn't end observing the focused editor.
...And 7 more matches

Pointer events - Web APIs
terminology active buttons state the condition when a pointer has a non-zero value for the buttons property.
... active pointer any pointer input device that can produce events.
... a pointer is considered active if it can still produce further events.
...And 7 more matches

Screen Wake Lock API - Web APIs
only visible (active) documents can acquire the screen wake lock.
...a request may be rejected for a number of reasons, including system settings (such as power save mode or low battery level) or if the document is not active or visible.
...it can be released by the system, again if the battery power is too low or the document is not active or visible.
...And 7 more matches

Keyboard-navigable JavaScript widgets - Accessibility
using tabindex by default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused.
... 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.
...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).
...And 7 more matches

Mixed content - Web security
types of mixed content there are two categories for mixed content: mixed passive/display content and mixed active content.
...in the case of active content, the threat can lead to phishing, sensitive data disclosure, redirection to malicious sites, etc.
... passive content list this section lists all types of http requests which are considered passive content: <img> (src attribute) <audio> (src attribute) <video> (src attribute) <object> subresources (when an <object> performs http requests) mixed active content mixed active content is content that has access to all or parts of the document object model of the https page.
...And 7 more matches

windows - Archive of obsolete content
onactivate function a callback function that is called when the window is made active.
... ondeactivate function a callback function that is called when the window is made inactive.
... var windows = require("sdk/windows"); for (let window of windows.browserwindows) { console.log(window.title); } console.log(windows.browserwindows.length); the currently active window is given by browserwindows.activewindow: var windows = require("sdk/windows").browserwindows; windows.on('activate', function(window) { console.log("a window was activated."); var activewindowtitle = windows.activewindow.title; console.log("active window title is: " + activewindowtitle); }); events the browserwindows property emits the following events which can be listened to using its on function.
...And 6 more matches

ui/sidebar - Archive of obsolete content
called with no arguments, show() and hide() will operate on the currently active window.
...once a sidebar has been created it can be shown and hidden in the active window using its show() and hide() methods.
...if it is omitted, then the sidebar will be shown in the currently active window.
...And 6 more matches

nsIPromptService
void alert( in nsidomwindow aparent, in wstring adialogtitle, in wstring atext ); parameters aparent the parent window for the dialog, or null, in which case the parent window will be nsiwindowwatcher.activewindow.
...if set to null the parent window will be nsiwindowwatcher.activewindow.
...if set to null the parent window will be nsiwindowwatcher.activewindow.
...And 6 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the html <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
... the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...And 6 more matches

ui/button/toggle - Archive of obsolete content
ted from the global state: browser: label = "my default" w1 t1 > displays "my default" t2 > displays "my default" w2 t3 > displays "my default" t4 > displays "my default" if you then set a label specific to t3 as "my t3 label", then set a label state specific to w2 as "my w2 label", then the button displayed when t3 is the active tab will still show "my t3 label", but the button displayed when t4 is the active tab will show "my w2 label": browser: label = "my default" w1 t1 > displays "my default" t2 > displays "my default" w2 t3 > displays "my t3 label" t4 > displays "my w2 label" setting the properties on the button instance sets the button's glo...
...to set state like this, call state() with 2 parameters: the first parameter is a window or tab object or as a shorthand, the string "window" for the currently active window, or the string "tab" for the currently active tab the second parameter is an object containing the state properties you wish to update.
... here's an add-on with a button that disables itself when you click it, but only for the currently active window: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: disableforthiswindow }); function disableforthiswindow(state) { button.state("window", { disabled: true }); } to fetch the state for a specific window or tab, call state(), passing in the window or tab you are interested in, and it will return the state: var labelforactivetab = button.state("tab").label; to learn more about this, see the api documentation for state().
...And 5 more matches

Practical positioning examples - Learn web development
let's look at the html contained within the body: <section class="info-box"> <ul> <li><a href="#" class="active">tab 1</a></li> <li><a href="#">tab 2</a></li> <li><a href="#">tab 3</a></li> </ul> <div class="panels"> <article class="active-panel"> <h2>the first tab</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...secondly, we'll set a rule that puts the same styling on one of the tabs when a class of active is present on it.
...place the following css below your other styles: .info-box li a:focus, .info-box li a:hover { background-color: #a60000; color: white; } .info-box li a.active { background-color: #a60000; color: white; } styling the panels the next job is to style our panels.
...And 5 more matches

Accessibility API cross-reference
aria role denotes interactive (not browsable) content operable in ways that differ from any of the other interactive aria roles, and may be only a part of the main document.
...in aria, used to nest browsable rich text content inside interactive content document n/a n/a document document a drop down list, different from combobox droplist n/a n/a listbox for math & chemistry equation n/a n/a math a scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list.
... whitespace filler filler n/a &nbsp; <br> an interactive component of a graphical user interface.
...And 5 more matches

Keyboard - Accessibility
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="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").
...And 5 more matches

Border-image generator - CSS: Cascading Style Sheets
ff; border: 1px solid #ccc; position: absolute; z-index: 10; top: 15%; left: 10%; box-shadow: 0 0 3px 0 #bababa; transition-property: width, height; transition-duration: 0.1s; } #subject .guideline { background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.3); position: absolute; } #subject .guideline:hover { background-color: #f00; } #subject .guideline[data-active] { background-color: #f00; z-index: 10; } #subject .guideline[data-axis='x'] { width: 1px; height: 100%; top: -1px; } #subject .guideline[data-axis='y'] { width: 100%; height: 1px; left: -1px; } #subject .guideline[data-axis='x']:hover { cursor: w-resize; } #subject .guideline[data-axis='y']:hover { cursor: s-resize; } #subject .relative { position: relative; font-size: 12px; } ...
... #subject .tooltip, #subject .tooltip2 { width: 40px; height: 20px; line-height: 20px; font-size: 12px; text-align: center; position: absolute; opacity: 0.5; transition: opacity 0.25s; } #subject .tooltip { background: #eee; border-radius: 2px; border: 1px solid #ccc; } #subject .tooltip2{ color: #555; } #subject [data-active] > * { opacity: 1; } #subject .tooltip[data-info='top'] { top: -10px; right: -50px; } #subject .tooltip[data-info='right'] { bottom: -30px; right: -20px; } #subject .tooltip[data-info='bottom'] { top: -10px; left: -50px; } #subject .tooltip[data-info='left'] { top: -30px; right: -20px; } #subject .tooltip2[data-info='top'] { top: -10px; left: -50px; } #subject .tooltip2[data-info='right'] { top: -30px; right: -20px; } #subject .tooltip2[d...
...: 1.5em; } #unit-settings input { font-size: 12px; width: 40px !important; } #unit-settings .close { width: 16px; height: 16px; background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center; background-size: 75%; position: absolute; top: 4px; right: 4px; opacity: 0.5; } #unit-settings .close:hover { cursor: pointer; opacity: 1; } #unit-settings[data-active='true'] { opacity: 1; } #unit-settings[data-active='false'] { opacity: 0; top: -100px !important; } /* * css output code */ #output { padding: 10px; border: 2px dashed #888 !important; box-shadow: none !important; border-radius: 3px; overflow: hidden; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } @media (min-width: 880px) { #ou...
...And 5 more matches

<button>: The Button element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... content categories flow content, phrasing content, interactive content, listed, labelable, and submittable form-associated element, palpable content.
...And 5 more matches

HTML documentation index - HTML: Hypertext Markup Language
55 <a>: the anchor element content, element, html, html text-level semantics, html:flow content, html:interactive content, html:palpable content, html:phrasing content, inline element, reference, web the html <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a url can address.
... 89 <details>: the details disclosure element disclosure box, disclosure widget, element, html, html interactive elements, reference, web, details the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
... 91 <dialog>: the dialog element dialog, element, html, html interactive elements, reference, web, polyfill the html <dialog> element represents a dialog box or other interactive component, such as a dismissable alert, inspector, or subwindow.
...And 5 more matches

ui/button/action - Archive of obsolete content
to set state like this, call state() with 2 parameters: the first parameter is a window or tab object or as a shorthand, the string "window" for the currently active window, or the string "tab" for the currently active tab the second parameter is an object containing the state properties you wish to update.
... here's an add-on with a button that disables itself when you click it, but only for the currently active window: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: disableforthiswindow }); function disableforthiswindow(state) { button.state("window", { disabled: true }); } to fetch the state for a specific window or tab, call state(), passing in the window or tab you are interested in, and it will return the state: var labelforactivetab = button.state("tab").label; to learn more about this, see the api documentation for state().
...a special shortcut allows you to pass the string "window" or "tab" to select the currently active window or tab.
...And 4 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
all features are accessible through the user interface or through the debugger's interactive console.
...in internet explorer, you can achieve the same functionality using activex.
... the object created using new activexobject("microsoft.xmldom") has a loadxml method that can take in a string and generate a document from it.
...And 4 more matches

Desktop gamepad controls - Game development
here's the gamepadapi object, which contains useful variables and functions: var gamepadapi = { active: false, controller: {}, connect: function(event) {}, disconnect: function(event) {}, update: function() {}, buttons: { layout: [], cache: [], status: [], pressed: function(button, state) {} } axes: { status: [] } }; the controller variable stores the information about the connected gamepad, and there's an active boolean vari...
... after the gamepad is connected, the information about the controller is stored in the object: connect: function(event) { gamepadapi.controller = event.gamepad; gamepadapi.active = true; }, the disconnect function removes the information from the object: disconnect: function(event) { delete gamepadapi.controller; gamepadapi.active = false; }, the update() function is executed in the update loop of the game on every frame, so it contains the latest information on the pressed buttons: update: function() { gamepadapi.buttons.cache = []; for(var k=0; k<gamepad...
...to indicate that the gamepad controller is active we can show the user some custom text on the game's main menu screen.
...And 4 more matches

HTML: A good basis for accessibility - Learn web development
note: in addition to having good semantics and an attractive layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense.
...to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.click(); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard.
... we check what button was pressed via the event object's keycode property; if it is the keycode that matches return/enter, we run the function stored in the button's onclick handler using document.activeelement.click().
...And 4 more matches

HTML: A good basis for accessibility - Learn web development
note: in addition to having good semantics and an attractive layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense.
...to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.click(); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard.
... we check what button was pressed via the event object's keycode property; if it is the keycode that matches return/enter, we run the function stored in the button's onclick handler using document.activeelement.click().
...And 4 more matches

HTML text fundamentals - Learn web development
active learning: giving our content structure let's jump straight in with a live example.
... milk eggs bread hummus every unordered list starts off with a <ul> element—this wraps around all the list items: <ul> milk eggs bread hummus </ul> the last step is to wrap each list 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.
...0 meters up the road the markup structure is the same as for unordered lists, except that you have to wrap the list items in an <ol> element, rather than <ul>: <ol> <li>drive to the end of the road</li> <li>turn right</li> <li>go straight across the first two roundabouts</li> <li>turn left at the third roundabout</li> <li>the school is on your right, 300 meters up the road</li> </ol> active learning: marking up an ordered list try editing the live sample below to create your very own html ordered list.
...And 4 more matches

React interactivity: Editing, filtering, conditional rendering - Learn web development
toggling the <todo /> templates at long last, we are ready to make our final core feature interactive.
...we will be reapplying some skills we used in our <todo /> component to: create a hook for storing the active filter.
... render an array of <filterbutton /> elements that allow users to change the active filter between all, completed, and incomplete.
...And 4 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
this also means that in this case, a reactive statement like $: console.log('todos', todos) won't be very useful.
... note: if foo is a top level variable, you can easily tell svelte to update obj whenever foo is changed with the following reactive statement: $: foo, obj = obj.
...'check' : 'uncheck'} all</button> <button type="button" class="btn btn__primary" disabled={completedtodos === 0} on:click={removecompleted}>remove completed</button> </div> we've also declared a reactive completedtodos variable to enable or disable the remove completed button.
...And 4 more matches

Introduction to the JavaScript shell
it is the javascript equivalent of python's interactive prompt, the lisp read-eval-print loop, or ruby's irb.
...you can use it as an interactive shell, in which you type javascript code at a prompt and get instant gratification, which is handy for experimenting or testing new features.
... after following the build documentation and installing the built shell using make install, you can run the shell in interactive mode using the command: js [ if you get " symbol lookup error: ./js: undefined symbol: pr_setcurrentthreadname" e.g.
...And 4 more matches

Index
javaxpcom is not actively maintained.
...pyxpcom is actively used in activestate komodo products, for example.
...xpconnect is part of firefox and is actively used in xul applications.
...And 4 more matches

ServiceWorkerContainer - Web APIs
most importantly, it exposes the serviceworkercontainer.register() method used to register service workers, and the serviceworkercontainer.controller property used to determine whether or not the current page is actively controlled.
... properties serviceworkercontainer.controller read only returns a serviceworker object if its state is activated (the same object returned by serviceworkerregistration.active).
... this property returns null during a force-refresh request (shift + refresh) or if there is no active worker.
...And 4 more matches

WebGL constants - Web APIs
active_attributes 0x8b89 passed to getprogramparameter to get the number of attributes active in a program.
... active_uniforms 0x8b86 passed to getprogramparamter to get the number of uniforms active in a program.
... active_texture 0x84e0 the current active texture unit.
...And 4 more matches

Accessibility documentation index - Accessibility
this means that most of the instructions provided in the 'using the dialog role' technique are applicable to the alertdialog role as well: 17 using the aria-activedescendant attribute attribute, document object model, needscontent, property, widget, aria-activedescendant this article describes the aria-activedescendant property.
...the aria-hidden attribute can either expose or hide non-interactive content from the accessibility api.
... 57 aria: checkbox role aria, accessibility, needscontent, role(2), rôle the checkbox role is used for checkable interactive controls.
...And 4 more matches

Event reference
svg events svgabort svgerror svgload svgresize svgscroll svgunload svgzoom database events abort blocked complete error success upgradeneeded versionchange script events afterscriptexecute beforescriptexecute menu events dommenuitemactive dommenuiteminactive window events close popup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events chargingchange chargingtimechange dischargingtimechange levelchange call events alerting busy callschanged cfstatechange connecting dialing disconnected disconnecting error held, holding incoming resuming statechange voicechange sensor event...
... pointerdown pointerevent pointer events the pointer enters the active buttons state.
... pointerup pointerevent pointer events the pointer leaves the active button state.
...And 4 more matches

<a>: The Anchor element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... properties content categories flow content, phrasing content, interactive content, palpable content.
...And 4 more matches

Web Performance
web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions - is the scrolling smooth?
...web performance includes both objective measurements like time to load, frames per second, and time to become interactive, and subjective experiences of how long it felt like it took the content to load.
...it is important to minimize the loading and response times and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.
...And 4 more matches

Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
internet explorer handles this using activex; in firefox, we use the cross-platform component object model, or xpcom.
... get active window one thing that nsiwindowmediator is often used for is to get the active window.
... listing 4 shows how to get the active browser window and the number of open tabs.
...And 3 more matches

Index - Archive of obsolete content
11 activetitlebarcolor xul attributes, xul reference no summary!
... 157 inactivetitlebarcolor xul attributes, xul reference no summary!
... 190 menuactive xul attributes, xul reference no summary!
...And 3 more matches

XUL accessibility guidelines - Archive of obsolete content
in addition, there is an active community of accessibility developers within the mozilla project that will be happy to help you with any concerns or questions you have in regards to making your xul applications fully accessible.
... ensure that tab order is logical and all interactive elements can be accessed simply without the use of a mouse.
... interactive elements avoid small targets, which are difficult to see and click on.
...And 3 more matches

Server-side web frameworks - Learn web development
there are many other possible factors, including licensing, whether or not the framework is under active development, etc.
...in addition to "ease of use" of the language itself, high quality documentation/tutorials and an active community helping new users are your most valuable resources.
... do they have an active community?
...And 3 more matches

Introduction to client-side frameworks - Learn web development
these modern, complex, interactive websites are often referred to as web applications.
... the advent of modern javascript frameworks has made it much easier to build highly dynamic, interactive applications.
... tooling because each of the frameworks in this module have a large, active community, each framework's ecosystem provides tooling that improves the developer experience.
...And 3 more matches

Roll your own browser: An embedding how-to
activestate's komodo: development environment, based on mozilla's xul.
... activestate's komodo: development environment, based on mozilla's xul.
...(mozilla blurb) bradsoft's topstyle css builder: implements an internal browser using mozilla activex embedding control.obsolete since gecko 7.0 nxzilla: a set of libraries that allow mozilla to be used with a nanox server.
...And 3 more matches

nsIDocShell
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 optimizations such as image frame discarding.
... docshells are active if this is true, which is the default state.
...And 3 more matches

DevTools API - Firefox Developer Tools
if unspecified the previously active tool is shown.
... methods getcurrentpanel() get the currently active toolpanel.
... return value: the toolpanel object if the tool with the given toolid is active, otherwise undefined.
...And 3 more matches

Using IndexedDB - Web APIs
if you make a transaction and return to the event loop without using it then the transaction will become inactive.
... the only way to keep the transaction active is to make a request on it.
...if you return to the event loop without extending the transaction then it will become inactive, and so on.
...And 3 more matches

KeyboardEvent.getModifierState() - Web APIs
the keyboardevent.getmodifierstate() method returns the current state of the specified modifier key: true if the modifier is active (that is the modifier key is pressed or locked), otherwise, false.
... syntax var active = event.getmodifierstate(keyarg); returns a boolean parameters keyarg a modifier key value.
... "fn" not supported function key is pressed, but we're not sure what key makes the modifier state active.
...And 3 more matches

ARIA Test Cases - Accessibility
all table keys are active.
...- - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - listbox and option dojo nightly build single select listbox using aria-activedescendant listbox in an iframe -- this is an important case as it's an example of how a mashup widget can be built (the widget source simply comes from another url, and is tied in using an iframe) yui "carousel" listbox -- a more advanced test case expected at behavior: (mz) screen reader should announce the label and role of the listbox when it gains focus.
... markup used: role="listbox", "option" (listitem should only be used with list, which is for static document structures, could someone please make sure our examples follow this rule) aria-activedescendant notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca -...
...And 3 more matches

ARIA: listbox role - Accessibility
list a section containing listitem elements states and properties aria-activedescendant holds the id string of the currently active element within the listbox.
... update the aria-activedescendant value on the listbox to the id of the newly selected option visually handle the blur, focus, and selected states of the option toggling the state of an option in a multi select listbox when the user clicks on an option, hits space when focused on an option, or otherwise toggles the state of an option, the following must occur: toggle the aria-selected state of the currently focus...
... change the appearance of the option to reflect it's selected state update the aria-activedescendant value on the listbox to the id of the option the user just interacted with, even if they toggled the option to be unselected.
...And 3 more matches

Modifying the Page Hosted by a Tab - Archive of obsolete content
here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory.
...it has a click handler which fetches the active tab and loads a script into the page hosted by the active tab.
... for example, if we save the script above under the add-on's data directory in a file called my-script.js: var self = require("sdk/self"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscriptfile: self.data.url("my-script.js") }); } }); you can load more than one script, and the scripts can interact directly with each other.
...And 2 more matches

Forms related code snippets - Archive of obsolete content
this.otbody = document.createelement("tbody"); for (var nday, oday, niter = 0; niter < ntotal; niter++) { if (niter % 7 === 0) { otr = document.createelement("tr"); this.otbody.appendchild(otr); } nday = niter - nendblanks + 1; otd = document.createelement("td"); if (niter + 1 > nendblanks && niter < nend) { otd.classname = sprefs + "-active-cell"; otd.id = sprefs + "-day-" + this.id + "-" + nday; otd.onclick = ondayclick; otd.appendchild(document.createtextnode(nday)); } else { otd.classname = sprefs + "-empty-cell"; } otr.appendchild(otd); } this.display.innerhtml = smonthsnames[this.current.getmonth()] + " " + this.current.getfullyear(); this.container.appendchild(this...
...zdp-increase-year, span.zdp-decrease-month, span.zdp-decrease-year { display: block; padding: 0 2px; height: 16px; font-weight: bold; background-color: #999999; border-radius: 5px; cursor: pointer; } span.zdp-decrease-month, span.zdp-decrease-year { float: left; margin-right: 2px; } span.zdp-increase-month, span.zdp-increase-year { float: right; margin-left: 2px; } td.zdp-active-cell { padding: 1px 3px; cursor: pointer; color: #000000; text-align: center; vertical-align: middle; } td.zdp-active-cell:hover { background-color: #999999; cursor: pointer; } td.zdp-empty-cell { cursor: not-allowed; } </style> </head> <body> <form name="myform"> <p> from: <input type="text" readonly class="date-picker" name="date-from" /> to: <input type="text" rea...
... <th>t</th> <th>w</th> <th>t</th> <th>f</th> <th>s</th> <th>s</th> </tr> </thead> <tbody> <tr> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td id="zdp-day-1-1" class="zdp-active-cell">1</td> <td id="zdp-day-1-2" class="zdp-active-cell">2</td> </tr> <tr> <td id="zdp-day-1-3" class="zdp-active-cell">3</td> <td id="zdp-day-1-4" class="zdp-active-cell">4</td> <td id="zdp-day-1-5" class="zdp-active-cell">5</td> <td id="zdp-day-1-6" class="zdp-active-cell">6</td> <td id="zdp-day-1-7" class="zdp-active-cell">7</td> <td id="zdp-d...
...And 2 more matches

List of Former Mozilla-Based Applications - Archive of obsolete content
the following is a list of all known applications that at one point used mozilla technologies or that are no longer being actively maintained.
... a list of actively maintained mozilla-based applications is also available.
... software installation over internet no longer using mozilla technology -- need confirmation and details second life virtual world desktop client switched from embedded mozilla browser to a plugin architecture with a qtwebkit plugin applications that are no longer being developed name description additional information aphrodite browser inactive aol client for mac internet software no longer available beonex communicator internet software last news item on site from 2004 chameleon theme builder inactive civil netizen p2p file delivery (email attachment replacement) site not updated since 2006 compuserve client internet software no longer available doczill...
...And 2 more matches

List of Mozilla-Based Applications - Archive of obsolete content
the following is a list of all known active applications that are built using mozilla technologies.
...ce code batik java-based toolkit uses mozilla rhino bitbox security focused browser seemingly based on firefox blackbird browser for african american community bluegriffon wysiwyg editor next generation version of composer buzzbird twitter client built on xulrunner camino browser 2.5m downloads and ~400,000 active users ...
...s spidermonkey courtanet benefit (fr) underwriting software for french insurance brokers crosscheck browserless testing framework uses mozilla rhino crowbar server tool cycloctopus screen scraping console cyclone3 content management system danger mobile platform uses gecko on the server side -- no longer active?
...And 2 more matches

Tamarin build documentation - Archive of obsolete content
active development source resides at tamarin redux.
...to enable this go to eclipse preferences >> c/c++ >> indexer, then select 'use active build configuration' in the 'build configuration for the indexer' section.
...esc is under active development and will be able to generate tamarin applications later this year.
...And 2 more matches

XUL Events - Archive of obsolete content
this event would be used to update the disabled status of its commands.dommenuitemactivethe dommenuitemactive event is executed when a <menu> or a <menuitem> has been hovered or highlighted.dommenuiteminactivethe dommenuiteminactive event is executed when a <menu> or a <menuitem> in no longer hovered or highlighted.popuphiddenthe popuphidden event is executed when a <menupopup>, <panel> or <tooltip> has become hidden.popuphidingthe popuphiding event is executed when a <menupopup>, <p...
... attribute: onunderflow dommenuitemactive this event is sent when a menu or menuitem is hovered over, or highlighted.
... dommenuiteminactive this event is sent when a menu or menuitem is no longer being hovered over, or highlighted.
...And 2 more matches

Menus - Archive of obsolete content
accessing and setting the active item in a menu, there will usually be an item that is considered "active".
... however, there is a way to access the active item using the nsimenuboxobject interface: activeitem = xulmenu.boxobject.queryinterface(components.interfaces.nsimenuboxobject).activechild; where xulmenu is the menu, button, or toolbarbutton object.
... you can set the active item thusly so: xulmenu.boxobject.queryinterface(components.interfaces.nsimenuboxobject).activechild = item; when the active item is set this way, keyboard navigation will now continue from this point.
...And 2 more matches

Archive of obsolete content
list of former mozilla-based applications the following is a list of all known applications that at one point used mozilla technologies or that are no longer being actively maintained.
... list of mozilla-based applications the following is a list of all known active applications that are built using mozilla technologies.
... web standards the web standards project windows media in netscape netscape 7.1 has the ability to load the microsoft® windows media player™ as an activex control, and thus developers can now build multimedia experiences that script the windows media player in netscape 7.1, just as they do in internet explorer.
...And 2 more matches

Example 1 - Learn web development
<span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> 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; ...
...nd: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relat...
...ive; 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.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : i...
...And 2 more matches

What’s in the head? Metadata in HTML - Learn web development
the <h1> element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.) the <title> element is metadata that represents the title of the overall html document (not the document's content.) active learning: inspecting a simple example to start off this active learning, we'd like you to go to our github repo and download a copy of our title-example.html page.
... active learning: experiment with character encoding to try this out, revisit the simple html template you obtained in the previous section on <title> (the title-example.html page), try changing the meta charset value to iso-8859-1, and add the japanese to your page.
... specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed search engine optimization, or seo.) active learning: the description's use in search engines the description is also used on search engine result pages.
...And 2 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
you can do this the same way you stop timeouts — by passing the identifier returned by the setinterval() call to the clearinterval() function: const myinterval = setinterval(myfunction, 2000); clearinterval(myinterval); active learning: creating your own stopwatch!
... it was created in response to perceived problems with setinterval(), which for example doesn't run at a frame rate optimized for the device, sometimes drops frames, continues to run even if the tab is not the active tab or the animation is scrolled off the page, etc.
...this is the key to the whole operation — you are setting the variable defined earlier to an active requestanimation() call, which takes the draw() function as its parameter.
...And 2 more matches

Test your skills: Conditionals - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... conditionals 2 for this task you are given three variables: machineactive — contains an indicator of whether the answer machine is switched on or not (true/false) score — contains your score in an imaginary game.
...after you've entered your code, try changing machineactive to true, to see if it works.
...And 2 more matches

Componentizing our Svelte app - Learn web development
filterbutton.svelte: the all, active, and completed buttons that allow you to apply filters to the displayed todo items.
...ilter = 'all' </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={()=> filter = 'active'} > <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={()=> filter = 'completed'} > <span class="visually-hidden">show</spa...
... we will just declare the onclick prop assigning a dummy handler to prevent errors, like this: export let onclick = (clicked) => {} and we'll declare the following reactive statement — $: onclick(filter) — to call the onclick handler whenever the filter variable is updated.
...And 2 more matches

Handling common accessibility problems - Learn web development
to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.onclick(e); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard.
... we check what button was pressed via the event object's keycode property; if it is the keycode that matches return/enter, we run the function stored in the button's onclick handler using document.activeelement.onclick().
... activeelement gives us the element that is currently focused on the page.
...And 2 more matches

Using the Browser API
first, we declare a searchactive variable as false, which influences behaviour later on.
... var searchactive = false; prev.disabled = true; next.disabled = true; next, we add an event listener to the searchform so that when it is submitted, the htmliframeelement.findall() method is used to do a search for the string entered into the search input element (searchbar) within the text of the current page (the second parameter can be changed to 'case-insensitive' if you want a case-insensitive search.) we then enable the previous and next buttons, set searchactive to true, and blur() the search bar to make the keyboard disappear and stop taking up our screen once the search is submitted.
... searchform.addeventlistener('submit',function(e) { e.preventdefault(); browser.findall(searchbar.value, 'case-sensitive'); searchactive = true; prev.disabled = false; next.disabled = false; searchbar.blur(); }); with this all done, you'll see your search results are highlighted; you can cycle through these using the htmliframeelement.findnext() method (specify forward and backward to go in either direction through the results), which is what our next two event listeners do: prev.addeventlistener('touchend',function() { browser.findnext("backward"); }); next.addeventlistener('touchend',function() { browser.findnext("forward"); }); the last event listener in this section controls what happens when the search toggle button is pressed.
...And 2 more matches

Localization content best practices
dtd files <!-- localization note (entity name): {{privacy}} will be replaced at run-time by an active link.
...--> properties files # localization note(privacy-text): {{privacy}} will be replaced at run-time by an # active link.
...generalsiteidentity=this website is owned by %1$s\nthis has been verified by %2$s avoid concatenations, use placeholders instead consider this string: tos-text = by proceeding you accept the tos-link = terms of services most developers would consider this a good solution and display the concatenation of tos-text+tos-link, with an active link on the second part.
...And 2 more matches

Power profiling overview
the first is the ability to switch frequently (thousands of times per second) between active and idle states, and there are actually several different kinds of idle states.
...c0 is the active/busy state, where instructions are being executed.
...the important thing is that c0 is always the active state, and for the idle states a higher number always means less power consumption.
...And 2 more matches

nsIApplicationCache
each group has one "active" cache that will service future loads.
... inactive caches are removed from the cache when no longer referenced.
... count, [array, size_is(count)] out string keys); nsiapplicationcachenamespace getmatchingnamespace(in acstring key); unsigned long gettypes(in acstring key); void initashandle(in acstring groupid, in acstring clientid); void markentry(in acstring key, in unsigned long typebits); void unmarkentry(in acstring key, in unsigned long typebits); attributes attribute type description active boolean true if the cache is the active cache for this group, otherwise false.
...And 2 more matches

nsIApplicationCacheService
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void cacheopportunistically(in nsiapplicationcache cache, in acstring key); nsiapplicationcache chooseapplicationcache(in acstring key); nsiapplicationcache createapplicationcache(in acstring group); void deactivategroup(in acstring group); nsiapplicationcache getactivecache(in acstring group); nsiapplicationcache getapplicationcache(in acstring clientid); void getgroups([optional] out unsigned long count, [array, size_is(count), retval] out string groupids); methods cacheopportunistically() flags the specified key as one that should be cached opportunistically.
...deactivategroup() deactivates the currently active cache object for the specified cache group.
... getactivecache() returns the currently active cache object for a cache group.
...And 2 more matches

All keyboard shortcuts - Firefox Developer Tools
the same shortcuts will work to close tools hosted in the toolbox, if the tool is active.
... toolbox these shortcuts work whenever the toolbox is open, no matter which tool is active.
... command windows macos linux cycle through tools left to right ctrl + ] cmd + ] ctrl + ] cycle through tools right to left ctrl + [ cmd + [ ctrl + [ toggle between active tool and settings.
...And 2 more matches

Animation - Web APIs
if the animation lacks a timeline, is inactive or hasn't been played yet, its value is null.
...this will be active if the animation has been replaced, or persisted if animation.persist() has been invoked on it.
... animation.onremove allows you to set and run an event handler that fires when the animation is removed (i.e., put into an active replace state).
...And 2 more matches

AudioWorkletProcessor.process - Web APIs
syntax var isactivelyprocessing = audioworkletprocessor.process(inputs, outputs, parameters); parameters inputs an array of inputs connected to the node, each item of which is, in turn, an array of channels.
...if there is no active node connected to the n-th input of the node, inputs[n] will be an empty array (zero input channels available).
... return value a boolean value indicating whether or not to force the audioworkletnode to remain active even if the user agent's internal logic would otherwise decide that it's safe to shut down the node.
...And 2 more matches

Document.alinkColor - Web APIs
returns or sets the color of an active link in the document body.
... a link is active during the time between mousedown and mouseup events.
...one alternative is the css selector :active.
...And 2 more matches

KeyboardEvent - Web APIs
keyboardevent.altkey read only returns a boolean that is true if the alt ( option or ⌥ on os x) key was active when the key event was generated.
... keyboardevent.ctrlkey read only returns a boolean that is true if the ctrl key was active when the key event was generated.
... keyboardevent.metakey read only returns a boolean that is true if the meta key (on mac keyboards, the ⌘ command key; on windows keyboards, the windows key (⊞)) was active when the key event was generated.
...And 2 more matches

Service Worker API - Web APIs
as soon as there are no more pages to be loaded, the new service worker activates (becoming the active worker).
... activation can happen sooner using serviceworkerglobalscope.skipwaiting() and existing pages can be claimed by the active worker using clients.claim().
...a service worker client is either a document in a browser context or a sharedworker, which is controlled by an active worker.
...And 2 more matches

WebGLRenderingContext.getProgramParameter() - Web APIs
gl.active_attributes: returns a glint indicating the number of active attribute variables to a program.
... gl.active_uniforms: returns a glint indicating the number of active uniform variables to a program.
... when using a webgl 2 context, the following values are available additionally: gl.transform_feedback_buffer_mode: returns a glenum indicating the buffer mode when transform feedback is active.
...And 2 more matches

Migrating from webkitAudioContext - Web APIs
removal of audiocontext.activesourcecount the activesourcecount attribute has been removed from audiocontext.
... code using the activesourcecount attribute of the audiocontext, like this snippet: var src0 = context.createbuffersource(); var src1 = context.createbuffersource(); // set buffers and other parameters...
... console.log(context.activesourcecount); could be rewritten like that: // array to track the playing source nodes: var sources = []; // when starting the source, put it at the end of the array, // and set a handler to make sure it gets removed when the // audiobuffersourcenode reaches its end.
...And 2 more matches

Cognitive accessibility - Accessibility
timed content should also be avoided, with exceptions for non-interactive synchronized media and real-time events.
... focus order makes sense the order of focus for interactive elements should make sense.
... using active voice in the present tense.
...And 2 more matches

<embed>: The Embed External Content element - HTML: Hypertext Markup Language
this content is provided by an external application or other source of interactive content such as a browser plug-in.
... the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...And 2 more matches

HTML elements reference - HTML: Hypertext Markup Language
this content is provided by an external application or other source of interactive content such as a browser plug-in.
... <form> the html <form> element represents a document section containing interactive controls for submitting information.
... <input> the html <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
...And 2 more matches

tabindex - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... accessibility concerns avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input.
...And 2 more matches

Content negotiation - HTTP
the determination of the best suited representation is made through one of two mechanisms: specific http headers by the client (server-driven negotiation or proactive negotiation), which is the standard way of negotiating a specific kind of resource.
... the 300 (multiple choices) or 406 (not acceptable) http response codes by the server (agent-driven negotiation or reactive negotiation), that are used as fallback mechanisms.
... server-driven content negotiation in server-driven content negotiation, or proactive content negotiation, the browser (or any other kind of user-agent) sends several http headers along with the url.
...And 2 more matches

Archived Mozilla and build documentation - Archive of obsolete content
activex control for hosting netscape plug-ins in ie microsoft has removed support for netscape plug-ins from ie 5.5 sp 2 and beyond.
... chromeless [this project may not be active — check github https://github.com/mozilla/chromeless] creating a firefox sidebar extension this article describes how to create a registered sidebar for firefox 2 or greater.
... dtrace dtrace is sun microsystem's dynamic tracing 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.
... video presentations mozilla is actively working to produce video presentations that can help you learn how the mozilla codebase works and how to take advantage of its technology in your own applications and extensions.

Mobile touch controls - Game development
the most recently used pointer is available in the this.game.input.activepointer object — the most recent finger active on the screen.
...they are assigned dynamically, so if you put three fingers on the screen, then, pointer1pointer2, and pointer3 will be active.
... you can quickly get the coordinates of the most recently active pointer via the this.game.input.x and this.game.input.y variables.
... implementation the easiest way to add an interactive object that will listen for user input is to create a button: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); this one is formed in the mainmenu state — it will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and execute the clickenclave() function when it is touched.

Getting started with CSS - Learn web development
you can continue to work in styles.css locally, or you can use our interactive editor below to continue with this tutorial.
... the interactive editor acts as if the css in the first panel is linked to the html document, just as we have with our document above.
...if i want all paragraphs and all list items to be green my rule looks like this: p, li { color: green; } try this out in the interactive editor below (edit the code boxes), or in your local css document.
...take a look at the page for list-style-type and you will find an interactive example at the top of the page to try some different values in, then all allowable values are detailed further down the page.

Client-side form validation - Learn web development
box-sizing: border-box; } /* this is our style for the invalid fields */ input:invalid{ border-color: #900; background-color: #fdd; } input:focus:invalid { outline: none; } /* this is the style of our error messages */ .error { width : 100%; padding: 0; font-size: 80%; color: white; background-color: #900; border-radius: 0 0 5px 5px; box-sizing: border-box; } .error.active { padding: 0.3em; } now lets look at the javascript that implements the custom error validation.
... emailerror.textcontent = `email should be at least ${ email.minlength } characters; you entered ${ email.value.length }.`; } // set the styling appropriately emailerror.classname = 'error active'; } the comments explain things pretty well, but briefly: every time we change the value of the input, we check to see if it contains valid data.
...; box-sizing: border-box; } /* this is our style for the invalid fields */ input.invalid{ border-color: #900; background-color: #fdd; } input:focus.invalid { outline: none; } /* this is the style of our error messages */ .error { width : 100%; padding: 0; font-size: 80%; color: white; background-color: #900; border-radius: 0 0 5px 5px; box-sizing: border-box; } .error.active { padding: 0.3em; } the big changes are in the javascript code, which needs to do much more heavy lifting.
..."; error.classname = "error"; } else { email.classname = "invalid"; } }); // this defines what happens when the user tries to submit the data addevent(form, "submit", function () { const test = email.value.length === 0 || emailregexp.test(email.value); if (!test) { email.classname = "invalid"; error.innerhtml = "i expect an e-mail, darling!"; error.classname = "error active"; // some legacy browsers do not support the event.preventdefault() method return false; } else { email.classname = "valid"; error.innerhtml = ""; error.classname = "error"; } }); the result looks like this: as you can see, it's not that hard to build a validation system on your own.

Advanced text formatting - Learn web development
this is usually a feeling, thought, or piece of additional background information.</dd> <dd>in writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd> </dl> active learning: marking up a set of definitions it's time to try your hand at description lists; add elements to the raw text in the input field so that it appears as a description list in the output field.
... active learning: who said that?
... time for another active learning example!
... active learning: marking up an abbreviation for this simple active learning assignment, we'd like you to simply mark up an abbreviation.

Looping code - Learn web development
active learning: launch countdown!
... active learning <h2>live output</h2> <div class="output" style="height: 410px;overflow: auto;"> </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: 300px;width: 95%"> let output = document.queryselector('.output'); output.innerhtml = ''; // let i = 10; // const...
...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 = textarea.value; } updatecode(); }; active learning: filling in a guest list in this exercise, we want you to take a list of names stored in an array and put them into a guest list.
... active learning 2 <h2>live output</h2> <div class="output" style="height: 100px;overflow: auto;"> <p class="admitted">admit: </p> <p class="refused">refuse: </p> </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 people = ['chris', 'a...

Aprender y obtener ayuda - Learn web development
interactive code playgrounds you might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code.
...codecademy for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved.
... many mdn web docs reference pages provide interactive examples too, where you can alter the code and see how the live result changes.
... style hover/focus/active states of menu items appropriately.

Understanding client-side JavaScript frameworks - Learn web development
javascript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications.
...along the way, we'll look at using events in ember, creating component classes to contain javascript code to control interactive features, and setting up a service to keep track of the data state of our app.
...we'll use it to provide a unique url for each of the three todo views — "all", "active", and "completed".
... there is a variety of reasons for this: they are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.

Gecko info for Windows accessibility vendors
the base of our support for these products is msaa (microsoft active accessibility), external readonly dom support, and the keyboard api/user interface.
... microsoft active accessibility (msaa) an api devised by microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it.
... ajax: asynchronous javascript and xml ajax is a method of building interactive web applications that process user requests, user actions immediately in real time, unlike an http request, during which users must wait for a whole page to reload or for a new page to load.
... msaa support: iaccessible methods to use msaa with gecko, you'll need the tools and docs that come with the active accessibility 2.0 sdk tools.

JS_THREADSAFE
in js_threadsafe builds, the javascript engine calls this callback only from within an active request on cx.
...in a multithreaded program, even if the calling thread has been idle, other threads may be active or may call js_gc().
... the above rules mean that at any given moment, there can be either (a) multiple threads in active requests, or (b) one thread doing gc and all requests suspended.
...bunny's guide to activex even in js_threadsafe builds, threads cannot safely share objects or strings.

nsIDownloadManager
ng abegintime, in long long aendtime); void removelistener(in nsidownloadprogresslistener alistener); void resumedownload(in unsigned long aid); void retrydownload(in unsigned long aid); void savestate(); obsolete since gecko 1.8 void startbatchupdate(); obsolete since gecko 1.9.1 attributes attribute type description activedownloadcount long the number of files currently being downloaded.
... activedownloads nsisimpleenumerator an enumeration of active nsidownloads.
... exceptions thrown ns_error_failure the download is active.
... removedownloadsbytimeframe() removes all inactive downloads that were started inclusively within the specified time frame.

nsIFocusManager
attributes attribute type description activewindow nsidomwindow the most active (frontmost) window, or null if no window that is part of the application is active.
... setting the activewindow raises it, and focuses the current child window's current element, if any.
... focusedwindow nsidomwindow the child window within the activewindow that is focused.
... this will always be activewindow, a child window of activewindow or null if no child window is focused.

nsIHttpChannelInternal
this may throw an ns_error_not_available exception if accessed when the channel's endpoints haven't been determined yet, or any time the nsihttpactivityobserver.isactive attribute is false.
...this may throw an ns_error_not_available exception if accessed when the channel's endpoints haven't been determined yet, or any time the nsihttpactivityobserver.isactive attribute is false.
...this may throw an ns_error_not_available exception if accessed when the channel's endpoints haven't been determined yet, or any time the nsihttpactivityobserver.isactive attribute is false.
...this may throw an ns_error_not_available exception if accessed when the channel's endpoints haven't been determined yet, or any time the nsihttpactivityobserver.isactive attribute is false.

nsIWindowWatcher
inherits from: nsisupports last changed in gecko 0.9.6 usage notes: this component has an activewindow property.
... clients may expect this property to be always current, so to properly integrate this component the application will need to keep it current by setting the property as the active window changes.
...); nsidomwindow openwindow(in nsidomwindow aparent, in string aurl, in string aname, in string afeatures, in nsisupports aarguments); void registernotification(in nsiobserver aobserver); void setwindowcreator(in nsiwindowcreator creator); void unregisternotification(in nsiobserver aobserver); attributes attribute type description activewindow nsidomwindow the watcher serves as a global storage facility for the current active (front most non-floating-palette-type) window, storing and returning it on demand.
...this attribute will be null if the active window is not an nsidomwindow; for example, if the active window is an alert.

nsIXULTemplateBuilder
more than one of these results may match one of the rules in their respective queries, however only the result for the earliest matching query in the template becomes the active match and generates output.
...if a different match would become active, the content for the existing match is removed and the content for the new match is generated.
...if a different query would then match instead, it will become the active match.
...only one such result is returned and is always the result with that id associated with the active match.

Console messages - Firefox Developer Tools
the complete list of security messages is as follows: message details blocked loading mixed active content the page contained mixed active content: that is, the main page was served over https, but asked the browser to load "active content", such as scripts, over http.
... the browser blocked this active content.
... loading mixed (insecure) active content on a secure page the page contained mixed active content: that is, the main page was served over https, but asked the browser to load "active content", such as scripts, over http.
... the browser loaded this active content.

Document.hasFocus() - Web APIs
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.hasfocus(); return value false if the active element in the document has no focus; true if the active element in the document has focus.

Document.readyState - Web APIs
interactive the document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
... break; case "interactive": // the document has finished loading.
... console.log("the first css rule is: " + document.stylesheets[0].cssrules[0].csstext); break; } readystatechange as an alternative to domcontentloaded event // alternative to domcontentloaded event document.onreadystatechange = function () { if (document.readystate === 'interactive') { initapplication(); } } readystatechange as an alternative to load event // alternative to load event document.onreadystatechange = function () { if (document.readystate === 'complete') { initapplication(); } } readystatechange as event listener to insert or modify the dom before domcontentloaded document.addeventlistener('readystatechange', event => { if (event.target.rea...
...dystate === 'interactive') { initloader(); } else if (event.target.readystate === 'complete') { initapp(); } }); specifications specification status comment html living standardthe definition of 'document readiness' in that specification.

Document - Web APIs
documentorshadowroot.activeelementread only returns the element within the shadow tree that has focus.
... deprecated properties document.alinkcolor returns or sets the color of active links in the document body.
... pointerdown fired when a pointer becomes active.
... pointerup fired when a pointer is no longer active.

EffectTiming.fill - Web APIs
the web animations api's effecttiming dictionary's fill property specifies a fill mode, which defines how the element to which the animation is applied should look when the animation sequence is not actively running, such as before the time specified by iterationstart or after animation's end time.
... syntax var timingproperties = { fill: "none" | "forwards" | "backwards" | "both" | "auto" } value a domstring indicating the fill type to use in order to properly render an affected element when outside the animation's active interval (that is, when it's not actively animating).
...in other words, if the animation isn't in its active interval, the affected element is not visible.
...as defined above, the "none" fill mode means that the element will be rendered in its natural, unaltered condition anytime the animation isn't actively running.

KeyboardEvent.key - Web APIs
when key 2 is pressed, another keydown event is fired for this new key press, and the key property value for the event is set to the string @ for the u.s keyboard type and " for the uk keyboard type, because of the active modifier shift key.
... when key 2 is pressed, another keydown event is fired for this new key press, and the key property value for the event is set to be the string @ for the u.s keyboard type and " for the uk keyboard type, because of the active modifier shift key.
...at this point, notice that the key property value for the repeating keydown event of the key 2 key press is now "2" because the modifier shift key is no longer active.
... as we finally release the key 2, a keyup event is fired but the key property will be set to the string value 2 for both keyboard layouts because the modifier shift key is no longer active.

MediaRecorder.start() - Web APIs
then, each time that amount of media has been recorded, an event will be delivered to let you act upon the recorded media, while a new blob is created to record the next slice of the media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream.
... when the source stream ends, state is set to inactive and data gathering stops.
... invalidstateerror the mediarecorder is not in the inactive state; you can't start recording media if it's already being recorded.
... notsupportederror the media stream you're attempting to record is inactive, or one or more of the stream's tracks is in a format that can't be recorded using the current configuration.

MediaRecorder.stop() - Web APIs
when the stop() method is invoked, the ua queues a task that runs the following steps: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps.
... if the mediarecorder.state is not "inactive", continue on to the next step.
... set the mediarecorder.state to "inactive" and stop capturing media.
... syntax mediarecorder.stop() errors an invalidstate error is raised if the stop() method is called while the mediarecorder object’s mediarecorder.state is "inactive" — it makes no sense to stop media capture if it is already stopped.

RTCRtpTransceiver.currentDirection - Web APIs
value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "inactive" does not offer to send rtp data, and will not do so.
... [1] to determine if a sender has at least one active encoding, the user agent gets its parameters using rtcrtpsender.getparameters(), then looks at the parameters' encodings property; if any of the listed encodings has its active property set to true, the sender has an active encoding.

RTCRtpTransceiver.direction - Web APIs
value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "inactive" does not offer to send rtp data, and will not do so.
... [1] to determine if a sender has at least one active encoding, the user agent gets its parameters using rtcrtpsender.getparameters(), then looks at the parameters' encodings property; if any of the listed encodings has its active property set to true, the sender has an active encoding.

RTCRtpTransceiverDirection - Web APIs
value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1.
... "inactive" does not offer to send rtp data, and will not do so.
... [1] to determine if a sender has at least one active encoding, the user agent gets its parameters using rtcrtpsender.getparameters(), then looks at the parameters' encodings property; if any of the listed encodings has its active property set to true, the sender has an active encoding.

ServiceWorkerRegistration - Web APIs
the browser maintains a persistent list of active serviceworkerregistration objects.
... serviceworkerregistration.active read only returns a service worker whose state is activated.
...an active worker will control a serviceworkerclient if the client's url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) serviceworkerregistration.navigationpreload read only returns the instance of navigationpreloadmanager associated with the current service worker registration.
... serviceworkerregistration.pushmanager read only returns a reference to the pushmanager interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.

ServiceWorkerState - Web APIs
this is primarily used to ensure that the service worker is not active until all of the core caches are populated.
... activating the service worker in this state is considered an active worker.
... during this state, extendableevent.waituntil() can be called inside the onactivate event handler to extend the life of the active worker until the passed promise resolves successfully.
... activated the service worker in this state is considered an active worker ready to handle functional events.

TextTrack.mode - Web APIs
no cues are active, no events are being fired, and the user agent won't attempt to obtain the track's cues.
... hidden the text track is currently active but the cues aren't being displayed.
...the user agent is keeping a list of the active cues (in the track's activecues property) and events are being fired at the corresponding times, even though the text isn't being displayed.
...the activecues list is being maintained and events are firing at the appropriate times; the track's text is also being drawn appropriately based on the styling and the track's kind.

WebGL2RenderingContext - Web APIs
webgl2renderingcontext.getactiveuniforms() retrieves information about active uniforms within a webglprogram.
... webgl2renderingcontext.getactiveuniformblockparameter() retrieves information about an active uniform block within a webglprogram.
... webgl2renderingcontext.getactiveuniformblockname() retrieves the name of the active uniform block at a given index within a webglprogram.
... webgl2renderingcontext.uniformblockbinding() assigns binding points for active uniform blocks.

Using the Web Animations API - Web APIs
with the web animations api, we can move interactive animations from stylesheets to javascript, separating presentation from behavior.
...for building custom animation libraries and creating interactive animations, the web animations api might be the perfect tool for the job.
...we can, in fact, do so by referencing alicechange’s animation.effect property, which returns an object containing all the details of the effect(s) active on alice: alicechange.currenttime = alicechange.effect.getcomputedtiming().duration / 2; effect lets us access the animation’s keyframes and timing properties — alicechange.effect.getcomputedtiming() points to alice’s timing object (which is of type computedeffecttiming) — this contains her computedeffecttiming.duration.
...we can figure out whether she's on the large end or small end of her animation by getting her animation's currenttime and dividing it by her activeduration: var endgame = function() { // get alice's timeline's playhead location var aliceplayhead = alicechange.currenttime; var alicetimeline = alicechange.effect.getcomputedtiming().activeduration; // stops alice's and other animations stopplayingalice(); // depending on which third it falls into var aliceheight = aliceplayhead / alicetimeline; if (aliceheight <= .333){ ...

ARIA: row role - Accessibility
to create an interactive widget that has a tabular structure, use the grid pattern instead.
... role="table" one of the three possible contexts (along with grid and treegrid) in which you'll find a row, it identifies the row as being part of a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element.
... role="grid" one of the three possible contexts (along with table and treegrid) in which you'll find a row, it identifies the row as being part of a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element.
... aria-selected state only relevant if the row is in an interactive container, such as a grid or treegrid, but not relevant if the row is in a table.

Text labels and names - Accessibility
select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example.
...et> <legend>choose your favorite monster</legend> <input type="radio" id="kraken" name="monster"> <label for="kraken">kraken</label><br/> <input type="radio" id="sasquatch" name="monster"> <label for="sasquatch">sasquatch</label><br/> <input type="radio" id="mothman" name="monster"> <label for="mothman">mothman</label> </fieldset> </form> you can see a live, interactive version of this example on the <fieldset> reference page.
... example <img src="milkweed.jgp" alt="black and white close-up photo of milkweed flowers"> interactive elements must be labeled if an element is intended for users to interact with it, it should have a label.
... interactive elements include links (<a>), form elements, buttons, and any element that has a handler for mouse or keyboard events.

:empty - CSS: Cascading Style Sheets
--></p> </div> css body { display: flex; justify-content: space-around; } .box { background: pink; height: 80px; width: 80px; } .box:empty { background: lime; } result accessibility concerns assistive technology such as screen readers cannot parse interactive content that is empty.
... all interactive content must have an accessible name, which is created by providing a text value for the interactive control's parent element (anchors, buttons, etc.).
... accessible names expose the interactive control to the accessibility tree, an api that communicates information useful for assistive technologies.
... the text that provides the interactive control's accessible name can be hidden using a combination of properties that remove it visually from the screen but keep it parseable by assistive technology.

Border-radius generator - CSS: Cascading Style Sheets
(elem[i]); } return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe } })(); window.addeventlistener("load", function() { borderradius.init(); }); var borderradius = (function borderradius() { function getelembyid(id) { return document.getelementbyid(id); } /** * shadow dragging */ var previewmousetracking = (function drag() { var active = false; var lastx = 0; var lasty = 0; var subscribers = []; var init = function init(id) { var elem = getelembyid(id); elem.addeventlistener('mousedown', dragstart, false); document.addeventlistener('mouseup', dragend, false); } var dragstart = function dragstart(e) { if (e.button !== 0) return; active = true; lastx = e.clientx; lasty = e.clienty; docum...
...ent.addeventlistener('mousemove', mousedrag, false); } var dragend = function dragend(e) { if (e.button !== 0) return; if (active === true) { active = false; document.removeeventlistener('mousemove', mousedrag, false); } } var mousedrag = function mousedrag(e) { notify(e.clientx - lastx, e.clienty - lasty); lastx = e.clientx; lasty = e.clienty; } var subscribe = function subscribe(callback) { subscribers.push(callback); } var unsubscribe = function unsubscribe(callback) { var index = subscribers.indexof(callback); subscribers.splice(index, 1); } var notify = function notify(deltax, deltay) { for (var i in subscribers) subscribers[i](deltax, deltay); } return { init : init, subscribe : subscribe, unsubscribe : u...
...own ' + 'unit-' + topic; this.container.appendchild(this.select); } unitselector.prototype.setvalue = function setvalue(value) { this.salect.value = value; } var radiuscontainer = function radiuscontainer(node) { var radius = document.createelement('div'); var handle = document.createelement('div'); var x = node.getattribute('data-x'); var y = node.getattribute('data-y'); var active = false; this.id = node.id; this.node = node; this.radius = radius; this.handle = handle; this.width = 100; this.height = 50; this.size = 0; this.rounded = false; this.unitx = 0; this.unity = 0; this.unitr = 0; this.maxw = 100; this.maxh = 100; this.maxr = 100; this.topic = y + '-' + x; var sliderw = inputslidermanager.getnode(this.topic + '-w'); var sliderh...
...d(this)); if (x === 'left' && y == 'top') handle.classname = 'handle handle-top-left' if (x === 'right' && y == 'top') handle.classname = 'handle handle-top-right'; if (x === 'right' && y == 'bottom') handle.classname = 'handle handle-bottom-right'; if (x === 'left' && y == 'bottom') handle.classname = 'handle handle-bottom-left'; handle.addeventlistener("mousedown", function(e) { active = true; this.radius.style.display = 'block'; previewmousetracking.subscribe(this.updatecontainer.bind(this)); }.bind(this)); document.addeventlistener("mouseup", function(e) { this.radius.style.display = 'none'; if (active === true) previewmousetracking.unsubscribe(this.updatecontainer.bind(this)); }.bind(this)); inputslidermanager.subscribe(this.topic + '-w', this.setwi...

ime-mode - CSS: Cascading Style Sheets
/* keyword values */ ime-mode: auto; ime-mode: normal; ime-mode: active; ime-mode: inactive; ime-mode: disabled; /* global values */ ime-mode: inherit; ime-mode: initial; ime-mode: unset; the ime-mode property is only partially and inconsistently implemented in browsers.
... active the input method editor is initially active; text entry is performed through it unless the user specifically dismisses it.
... inactive the input method editor is initially inactive, but the user may activate it if they wish.
... formal definition initial valueautoapplies totext fieldsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | normal | active | inactive | disabled examples disabling input method support this example disables input method support for a form field.

Getting Started - Developer guides
its predecessor originated in internet explorer as an activex object called xmlhttp.
... then, mozilla, safari, and other browsers followed, implementing an xmlhttprequest object that supported the methods and properties of microsoft's original activex object.
... httprequest = new xmlhttprequest(); } else if (window.activexobject) { // ie 6 and older httprequest = new activexobject("microsoft.xmlhttp"); } note: for illustration purposes, the above is a somewhat simplified version of the code to be used for creating an xmlhttp instance.
...} the full list of the readystate values is documented at xmlhttprequest.readystate and is as follows: 0 (uninitialized) or (request not initialized) 1 (loading) or (server connection established) 2 (loaded) or (request received) 3 (interactive) or (processing request) 4 (complete) or (request finished and response is ready) next, check the http response status codes of the http response.

HTML5 - Developer guides
online and offline events firefox 3 supports whatwg online and offline events, which let applications and extensions detect whether or not there's an active internet connection, as well as to detect when the connection goes up and down.
... performance and integration web workers allows delegation of javascript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
...this is especially useful for pages loading interactively new information.
... focus management in html the new html5 activeelement and hasfocus attributes are supported.

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... content categories flow content, phrasing content, embedded content, interactive content, palpable content.
...this context shift can be confusing and time-consuming, especially for pages with multiple <iframe>s and/or if embeds contain interactive content like video or audio.

<input type="file"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...ype: none; border: 1px solid black; } form img { height: 64px; order: 1; } form p { line-height: 32px; padding-left: 10px; } form label, form button { background-color: #7f9ccb; padding: 5px 10px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto; } form label:hover, form button:hover { background-color: #2d5ba3; color: white; } form label:active, form button:active { background-color: #0d3f8f; color: white; } this is similar to what we've seen before — nothing special to comment on.
... const input = document.queryselector('input'); const preview = document.queryselector('.preview'); input.style.opacity = 0; note: opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive.

<label> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... examples simple label example <label>click me <input type="text"></label> using the "for" attribute <label for="username">click me</label> <input type="text" id="username"> accessibility concerns interactive content don't place interactive elements such as anchors or buttons inside a label.
... technical summary content categories flow content, phrasing content, interactive content, form-associated element, palpable content.

Performance budgets - Web Performance
time to interactive), a custom metric (e.g.
...time to interactive, first contentful paint).
... the warning level allows you to be proactive and plan any tech debt, while not blocking development or deploys.
... 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.

begin - SVG: Scalable Vector Graphics
become active.
...the element's animation start time is defined relative to the begin or active end of another animation.
... a valid syncbase-value consists of an id reference to another animation element followed by a dot and either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element.
...as soon as the element's active duration starts, the element identified by the href attribute is discarded.

restart - SVG: Scalable Vector Graphics
viewbox="0 0 220 200" xmlns="http://www.w3.org/2000/svg"> <rect y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document.getelementbyid("restart").addeventlistener("click", evt => { document.queryselectorall("animate").foreach(element => { element.beginelement(); }); }); usage notes value always | whennotactive | never default value always animatable no always this val...
... whennotactive this value indicates that the animation can only be restarted when it is not active (i.e.
... after the active end).
... attempts to restart the animation during its active duration are ignored.

Content Scripts - Archive of obsolete content
the content script simply replaces the content of the page: // main.js var tabs = require("sdk/tabs"); var contentscriptstring = 'document.body.innerhtml = "<h1>this page has been eaten</h1>";' tabs.activetab.attach({ contentscript: contentscriptstring }); the following high-level sdk modules can use content scripts to modify web pages: page-mod: enables you to attach content scripts to web pages that match a specific url pattern.
... this add-on adds a button to firefox: when the user clicks the button, the add-on attaches a content script to the active tab, sends the content script a message called "my-addon-message", and listens for a response called "my-script-response": //main.js var tabs = require("sdk/tabs"); var buttons = require("sdk/ui/button/action"); var self = require("sdk/self"); buttons.actionbutton({ id: "attach-script", label: "attach the script", icon: "./icon-16.png", onclick: attachscript }); function attachscript(...
...) { var worker = tabs.activetab.attach({ contentscriptfile: self.data.url("content-script.js") }); worker.port.on("my-script-response", function(response) { console.log(response); }); worker.port.emit("my-addon-message", "message from the add-on"); } // content-script.js self.port.on("my-addon-message", handlemessage); function handlemessage(message) { alert(message); self.port.emit("my-script-response", "response from content script"); } the port api see the reference page for the port object.

context-menu - Archive of obsolete content
the page context occurs when the user invokes the context menu on a non-interactive portion of the page.
...when the context menu is first shown and all of the declarative contexts for your item are current) and then remains active until you destroy your context menu item or the page is unloaded.
... show an "edit page source" item when the user right-clicks a non-interactive part of the page: require("sdk/context-menu").item({ label: "edit page source", contentscript: 'self.on("click", function (node, data) {' + ' self.postmessage(document.url);' + '});', onmessage: function (pageurl) { editsource(pageurl); } }); show an "edit image" item when the menu is invoked on an image: var cm = require("sdk/context-menu"); cm.i...

Implementing the widget - Archive of obsolete content
the widget will have two icons: one to display when it's active, one to display when it's inactive.
... data.url('widget/pencil-on.png') : data.url('widget/pencil-off.png'); }); widget.port.on('right-click', function() { console.log('show annotation list'); }); } the annotator is inactive by default.
...you should see the widget in the add-on bar: left- and right-clicks should produce the appropriate debug output, and a left-click should also change the widget icon to signal that it is active.

Enhanced Extension Installation - Archive of obsolete content
as installation - the user requests an action through the ui while the application is running and metadata is written (tobeuninstalled, tobedisabled, tobeenabled) and a .autoreg file created in the profile so that on the subsequent startup the extension system's startup routine can remove files (in the uninstall case) and write a new extensions.ini file listing the directories for the currently "active" items.
... ("active" items are items that are enabled.) a whole new world install locations we have several targets for where items can be installed.
... extension metadata the following files are now used to hold metadata: <profile>/extensions.ini -active items this file contains a list of active extension directories (i.e.

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
*/ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0px, 16px, 16px, 0px); } mac os x: /* the second and third selectors at the bottom are necessary to prevent conflicts with install...
...*/ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0px, 16px, 16px, 0px); } linux: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes.
... */ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar-large.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0px, 24px, 24px, 0px); } toolbar[iconsize="small"] #xulschoolhello-hello-world-button { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); -moz-image-region: rect(0px, 16px, 16px, 0px); } several css rules apply by default to all toolbar buttons.

Source code directories overview - Archive of obsolete content
accessible contains code to support microsoft active accessibility and sun's atk accessibility api for linux.
...activex) that is being supported.
...as plug-in, as activex component, as xpcom classes).

jspage - Archive of obsolete content
atform:{name:(window.orientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(document.evaluate),air:!!(window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?960:((document.getelementsbyclassname)?950:925)); },trident:function(){return(!window.activexobject)?false:((window.xmlhttprequest)?((document.queryselectorall)?6:5):4);},webkit:function(){return(navigator.taintenabled)?false:((browser.features.xpath)?((browser.features.query)?525:420):419); },gecko:function(){return(!document.getboxobjectfor&&window.mozinnerscreenx==null)?false:((document.getelementsbyclassname)?19:18);}}},browser||{});browser.platform[browser.platform.name]=true; brows...
...er.detect=function(){for(var b in this.engines){var a=this.engines[b]();if(a){this.engine={name:b,version:a};this.engine[b]=this.engine[b+a]=true; break;}}return{name:b,version:a};};browser.detect();browser.request=function(){return $try(function(){return new xmlhttprequest();},function(){return new activexobject("msxml2.xmlhttp"); },function(){return new activexobject("microsoft.xmlhttp");});};browser.features.xhr=!!(browser.request());browser.plugins.flash=(function(){var a=($try(function(){return navigator.plugins["shockwave flash"].description; },function(){return new activexobject("shockwaveflash.shockwaveflash").getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0+"."+a[1],10)||0,build:parseint(a[2],10)||0}; })();function $exec(b){if(!b){return b;}if(window.exe...
...send:function(a){var b=this.get("send"); b.send({data:this,url:a||b.options.url});return this;}});request.html=new class({extends:request,options:{update:false,append:false,evalscripts:true,filter:false},processhtml:function(c){var b=c.match(/<body[^>]*>([\s\s]*?)<\/body>/i); c=(b)?b[1]:c;var a=new element("div");return $try(function(){var d="<root>"+c+"</root>",g;if(browser.engine.trident){g=new activexobject("microsoft.xmldom"); g.async=false;g.loadxml(d);}else{g=new domparser().parsefromstring(d,"text/xml");}d=g.getelementsbytagname("root")[0];if(!d){return null;}for(var f=0,e=d.childnodes.length; f<e;f++){var h=element.clone(d.childnodes[f],true,true);if(h){a.grab(h);}}return a;})||a.set("html",c);},success:function(d){var c=this.options,b=this.response; b.html=d.stripscripts(function(e){b.j...

Mozilla Application Framework in Detail - Archive of obsolete content
in addition, if the organization maintains sophisticated, interactive websites, it will already possess a wealth of technical expertise that will be relevant for creating xul applications.
...by meeting the needs of developers and companies who are working to provide consumers with new interactive applications, solutions and services, gecko will become a key catalyst for new growth and innovation and for delivering anytime, anywhere access to millions of new users.
...flexible programming interfaces such as the web shell api, the java wrapper api and the gecko activex control make gecko easily embeddable into applications and devices.

Supporting private browsing mode - Archive of obsolete content
its value is "permanent" if private browsing is permanently enabled for the session, "temporary" if private browsing is temporarily enabled, or not defined at all if private browsing mode isn't active.
... if you want to use a different background color for the url bar when in private browsing mode, you could do the following: [browsingmode=private] #urlbar { -moz-appearance: none; background: #eee } similarly, if you want to theme the firefox button in firefox 4 differently when private browsing mode is permanent: #main-window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-window-inactive) { -moz-border-left-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); -moz-border-right-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); } this snippet is pulled directly from the standard skin; you can customize as you see fit.
...amo policy and private browsing in order to publicly list an add-on on addons.mozilla.org, the add-on must properly respect private browsing mode by not recording sensitive data while private browsing mode is active.

Using Breakpoints in Venkman - Archive of obsolete content
using breakpoints and the interactive view, you can change the values of the variables that venkman displays (only in the context of the debugging environment itself) and see how these changes affect the execution of the code.
... the log result checkbox tells venkman you want the result of the script to show up in the interactive session view.
...the result of the evaluation will be logged to the interactive session.

Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebarcolor afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed colo...
... 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 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 n...
...kertooltiptext 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 setfocus 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 validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...

Sorting Results - Archive of obsolete content
the sortactive attribute may be set to true or false and specifies which column the tree is sorted by.
... only one column should have the sortactive attribute set to true at a time.
...the sortactive attribute is not needed.

Trees and Templates - Archive of obsolete content
the final attribute, sortactive should be set to true for one column, the one that you would like to be sorted by default.
... the following example changes the columns in the earlier example to incorporate the extra features: <treecols> <treecol id="name" label="name" flex="1" primary="true" sortactive="true" sortdirection="ascending" sort="rdf:http://home.netscape.com/nc-rdf#name"/> <splitter/> <treecol id="date" label="date" flex="1" sort="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> </treecols> persisting column state one additional thing you might want to do is persist which column is currently sorted, so that it is remembered between sessions.
...the following example shows a sample column: <treecol id="date" label="date" flex="1" persist="width ordinal hidden sortactive sortdirection" sort="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> more details about the persist attribute will be described in the later section.

menu - Archive of obsolete content
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat style classes menu-iconic example <menubar id="sample-menubar"> <menu id="file-menu" label="file...
... menuactive type: boolean this attribute is set on an item in a menu when it is being hovered over.
...a dommenuitemactive event will be sent to the item when the item is hovered over, and a dommenuiteminactive event will be sent to the item when the selection moves away.

treecol - Archive of obsolete content
attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below.
... <tree flex="1" editable="true"> <treecols> <treecol label="active" type="checkbox" editable="true"/> <treecol label="name" flex="1" /> </treecols> <treechildren> <treeitem> <treerow> <treecell value="true"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> to make the checkbox visible on some platforms, the following styles need to be added to the stylesheet (see treecol.type).
... sortactive type: boolean this should be set to true for the column which should be sorted by default.

Theme changes in Firefox 3.5 - Archive of obsolete content
the value of this attribute is normal when the private browsing mode is inactive, and private when it's active.
... greying menus of inactive windows: active windows get attribute 'active="true"'.
... to do this only for 3.5 use a css selector that is only supported in 3.5, like so: window:not([active="true"]) menubar>menu:nth-child(1n) { color:threedshadow } private browsing: show private browsing state by coloring the url bar, or by adding an icon to the toolbox/tabbrowserbar.

GetObject - Archive of obsolete content
if the pathnameargument is omitted, getobject returns a currently active object of the specified type.
...if there is no current instance, and you don't want the object started with a file loaded, use the activexobject object.
... if an object has registered itself as a single-instance object, only one instance of the object is created, no matter how many times activexobject is executed.

Gecko FAQ - Gecko Redirect 1
gecko enables a pioneering new class of dynamic content that is more interactive and offers greater presentation control to web developers, using open and recommended internet standards instead of proprietary apis.
... are gecko's apis based on activex?
... additionally, on the windows platform, gecko's xpcom interfaces are wrapped in an activex control that vb developers can utilize (activex wrappers are not available on other platforms because activex is a windows-only technology).

First CPU idle - MDN Web Docs Glossary: Definitions of Web-related terms
first cpu idle measures when a page is minimally interactive, or when the window is quiet enough to handle user input.
...generally, it occurs when most, but not necessarily all visible ui elements are interactive, and the user interface responds, on average, to most user input within 50ms.
... it is also known as first interactive.

Example 3 - Learn web development
ss="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; ...
...dding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist')...
...nction (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
ss="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; ...
...dding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist')...
...reach(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 = getindex(select); select.t...

Example 5 - Learn web development
<li class="option" 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; ...
...dding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist')...
...ion (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 < length - 1) { index++; } ...

Getting started with HTML - Learn web development
active learning: creating your first html element edit the line below in the input area by wrapping it with the tags <em> and </em>.
... active learning: adding attributes to an element another example of an element is <a>.
... active learning: adding some features to an html document if you want to experiment with writing some html on your local computer, you can: copy the html page example listed above.

Images in HTML - Learn web development
active learning: embedding an image it is now your turn to play!
... this active learning section will have you up and running with a simple embedding exercise.
... active learning: creating a figure in this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure: wrap it in a <figure> element.

From object to iframe — other embedding technologies - Learn web development
active learning: classic embedding uses in this article we are going to jump straight into an active learning section, to immediately give you a real idea of just what embedding technologies are useful for.
...if you need interactivity, html and javascript can readily get the job done for you with no need for java applets or outdated activex/bho technology.
...as for activex, even microsoft's edge browser no longer supports it.

HTML table advanced features and accessibility - Learn web development
we'd recommend using the <caption> element instead, however, as summary is deprecated by the html5 spec, and can't be read by sighted users (it doesn't appear on the page.) active learning: adding a caption let's try this out, revisiting an example we first met in the previous article.
... active learning: adding table structure let's put these new elements into action.
... active learning: playing with scope and headers for this final exercise, we'd like you to first make local copies of items-sold.html and minimal-table.css, in a new directory.

HTML table basics - Learn web development
active learning: creating your first table we've talked table theory enough, so, let's dive into a practical example and build up a simple table.
... active learning: table headers let's have a go at improving this table.
... active learning: colgroup and col now it's time to have a go yourself.

Manipulating documents - Learn web development
active learning: basic dom manipulation to start learning about dom manipulation, let's begin with a practical example.
... active learning: getting useful information from the window object so far we've only really looked at using node and document features to manipulate documents, but there is no reason why you can't get data from other sources and use it in your ui.
... active learning: a dynamic shopping list to round off the article, 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.

Working with JSON - Learn web development
this allows you to construct a data hierarchy, like so: { "squadname": "super hero squad", "hometown": "metro city", "formed": 2016, "secretbase": "super tower", "active": true, "members": [ { "name": "molecule man", "age": 29, "secretidentity": "dan jukes", "powers": [ "radiation resistance", "turning tiny", "radiation blast" ] }, { "name": "madame uppercut", "age": 39, "secretidentity": "jane wilson", "powers": [ "million tonne punch", "damage resistance"...
...for example: superheroes.hometown superheroes['active'] to access data further down the hierarchy, you simply have to chain the required property names and array indexes together.
... active learning: working through a json example so, let's work through an example to show how we could make use of some json data on a website.

Test your skills: Object basics - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... once you've done this, you should then write a string to the variable bandinfo, which will contain a small biography detailing their name, nationality, years active, and style, and the title and release date of their first album.
... assessment or further help you can practice these examples in the interactive editors above.

What is web performance? - Learn web development
the measurement of how long it takes the site to get to a usable start after it has started loading is called time to interactive.
...it is important to minimize the loading and response times, and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.
... note: web performance includes both objective measurements like time to load, frames per second, and time to interactive, and subjective experiences of how long it felt like it took the content to load.

Ember app structure and componentization - Learn web development
type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> </ul> </section> <footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul class="filters"> <li> <a href="#">all</a> <a href="#">active</a> <a href="#">completed</a> </li> </ul> <button type="button" class="clear-completed"> clear completed </button> </footer> </section> the rendered output should now be as follows: this looks pretty complete, but remember that this is only a static prototype.
... now we need to break up our html code into dynamic components; later we'll turn it into a fully interactive app.
...<button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> footer.hbs should be updated to contain the following: <footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul class="filters"> <li> <a href="#">all</a> <a href="#">active</a> <a href="#">completed</a> </li> </ul> <button type="button" class="clear-completed"> clear completed </button> </footer> finally, the contents of application.hbs should be updated so that they call the appropriate components, like so: <section class="todoapp"> <h1>todos</h1> <header /> <todolist /> <footer /> </section> with these changes made, ru...

Starting our Svelte Todo list app - Learn web development
filter tasks by status: all tasks, active tasks, or completed tasks.
... mark all tasks as active/completed.
... </button> </form> <!-- filter --> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" aria-pressed="true"> <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> <!-- todosstatus --> <h2 id="list-heading">2 out of 3 items completed</h2> <!-- todos --> <ul role="list" class="...

Getting started with Svelte - Learn web development
highly interactive pages or complex visualizations: if you are building data-visualizations that need to display a large number of dom elements, the performance gains that come from a framework with no runtime overhead will ensure that user interactions are snappy and responsive.
...top-level variables is the way svelte handles the component state, and they are reactive by default.
... using the svelte repl a repl (read–eval–print loop) is an interactive environment that allows you to enter commands and immediately see the results — many programming languages provide a repl.

Software accessibility: Where are we today?
the most recent noteable attempt at solving this problem was put forth by microsoft in 1997, and is called microsoft active accessibility (msaa).
... realizing that complete accessibility was not possible without cooperation between applications and accessibility aids such as screen reading software or voice recognition software, microsoft active accessibility defines a windows-based standard by which applications can communicate context and other pertanent information to accessibility aids.
...enter open source software microsoft was on the right track with microsoft active accessibility, but because the source code to most popular desktop applications which are used in large corporations is not publicly available, they were never made fully accessible.

Mozilla’s UAAG evaluation report
(p1) ni still working on active accessibility support for other kinds of content 6.4 programmatic operation.
... (p1) vg can use keyboard api to control mozilla, by generating keystrokes programmatically when in-process, can use dom to generate events uses active accessibility to provide program access to controls do not support all active accessibility features for programmatic operation (put_accname, put_accvalue not yet supported) 6.5 programmatic alert of changes.
... (p1) g uses active accessibility to generate change events to assistive technology 6.6 conventional keyboard apis.

Accessible Toolkit Checklist
also, assistive technologies already understand native widgets so it is only necessary to implement microsoft active accessibility (msaa) api support for custom controls.
...for autocomplete lists, use the system color offset by 1, so that it looks active but the list items don't get echoed while they user's trying to simply type and edit.
... space bar toggles checkboxes the enter key should activate an item if double clicking would do so msaa support, including accessible selection, exposing current level and position in list, alternative text for informative or interactive images, selectable, multiselectable and extselectable states, statechange events for expanding/collapsing and toggling of checkbox children.

mozbrowserfindchange
details the details property returns an anonymous javascript object with the following properties: active a boolean indicating whether a search is currently active (true), or not (false.) searchstring a domstring representing the string that is currently being searched for.
... activematchordinal a number indicating the position of the currently highlighted search result, e.g.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsersecuritychange
mixedstate a domstring representing the current loading state of mixed active content.
... possible values are: loaded_mixed_active_content: indicates that the mixed active content has been loaded.
... blocked_mixed_active_content: indicates that the mixed active content has been blocked from loading.

IPDL Tutorial
ipdl tracks all active protocols between two endpoints.
... if if the child side crashes or becomes hung: any synchronous or rpc messages currently active will return false no further messages will be accepted (c++ methods will return false) each ipdl actor will receive an onerror message deallocpsubprotocol will be called on each manager protocol to deallocate any active subprotocols.
... when a manager protocol is destroyed, any subprotocols will be notified: no further messages will be accepted deallocpsubprotocol will be called on the manager protocol to deallocate any active subprotocols when the toplevel protocol is destroyed, this is equivalent to shutting down the entire ipdl machinery for that connection, because no more messages can be sent and all subprotocols are destroyed.

sslerr.html
if this occurs frequently on a server, an active attack (such as the "million question" attack) may be underway against the server.
...if this occurs frequently on a server, an active attack (such as the "million question" attack) may be underway against the server.
...if encountered repeatedly on a server socket, this can indicate that the server is actively under a "million question" attack.

Rhino shell
the javascript shell provides a simple way to run scripts in batch mode or an interactive environment for exploratory programming.
...the shell will also quit in interactive mode if an end-of-file character is typed at the prompt.
...the next invocation has no arguments, so the shell goes into interactive mode, reading and evaluating each line as it is typed in.

WebReplayRoadmap
retroactive console logging console logging is one of the primary tools most developers use to debug a page.
... retroactive console logging offers a large improvement to this workflow.
... if the debugger could perform this analysis then it could show this information to developers and help them understand the app even when they are not actively debugging a particular recording.

AT APIs Support
supported at apis at apis terms microsoft active accessibility (msaa) an api devised by microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it.
... windows platform we support msaa (microsoft active accessibility) and iaccessible2 on windows.
... msaa msaa sdk tools - version 1.3 is recommended instead of 2.0 because it includes source code for the tools iaccessible2 accessibility probe -- includes msaa support as well atk/at-spi accerciser - interactive python accessibility explorer for the gnome desktop gecko dom inspector has an ability to test gecko accessibility layer, supports base features.

PyXPCOM
pyxpcom is actively used in activestate komodo products, for example.
... history pyxpcom was initially developed by activestate tool corporation, and came out of their komodo project.
... other resources pythonext - extension that provides pyxpcom samples - demo applications using pyxpcom community python-xpcom bindings mailing list (activestate) #pyxpcom on irc.mozilla.org source code the pyxpcom code is available here: http://hg.mozilla.org/pyxpcom/ to build pyxpcom, see building pyxpcom.

Language bindings
javaxpcom is not actively maintained.plxpcomplxpcom (perl xpcom) provides language bindings letting you use xpcom from perl code.
...pyxpcom is actively used in activestate komodo products, for example.rbxpcomrbxpcom (ruby cross-platform com) provides bindings between the popular ruby programming language and xpcom.
...xpconnect is part of firefox and is actively used in xul applications.

Observer Notifications
user-interaction-active nsidomwindow null sent once every 5000ms while this chrome document sees some kind of user activity (for example, keyboard or mouse events), and at the exact moment of the state transition from idle to active.
... user-interaction-inactive nsidomwindow null sent when the chrome document has seen no user activity for a while.
...unlike the user-interaction-active and user-interaction-inactive topics listed above, the idle service monitors user activity in general, whether related to the mozilla application or not (acting somewhat like the user activity/inactivity events a screen saver would be interested in).

IAccessibleText
return value s_false if the caret is not currently active on this object, that is the caret is located on some other object.
...nselections() returns the number of active non-contiguous selections.
...selection() returns the character offsets of nth active text() selection.

nsIEventListenerInfo
methods getdebugobject() returns the debugger object if the debug service is active.
...return value if jsdidebuggerservice is active and the listener is implemented in js, this returns the listener as a jsdivalue.
...this is the method you should use if you want to get access to the actual listener, but the debugger service must be already active, which significantly slows down script execution.

nsIIdleService
the observer will get an 'idle' notification when the user is idle for that interval (or longer), and receive a 'back' (gecko 3 to 15) or 'active' (gecko 16+) notification when the user starts using their computer again.
...in other words, even if the user is working in other applications, the idle service will still consider the user to be active.
...when the user goes idle, the observer topic is 'idle' and when they get back, the observer topic is 'back' in gecko 15 and earlier or 'active' in gecko 16 and later.

nsIJumpListBuilder
method overview void abortlistbuild(); boolean addlisttobuild(in short acattype, in nsiarray items optional, in astring catname optional); boolean commitlistbuild(); boolean deleteactivelist(); boolean initlistbuild(in nsimutablearray removeditems); attributes attribute type description available short indicates whether jump list taskbar features are supported by the current host.
...deleteactivelist() deletes any currently applied taskbar jump list for this application.
...boolean deleteactivelist(); parameters none.

Zombie compartments
that more fine-graned representation may look like this │ ├───28.45 mb (05.71%) -- top(https://www.google.de/, id=141) │ │ ├──13.66 mb (02.74%) -- active/window(https://www.google.de/) │ │ │ ├───7.83 mb (01.57%) -- js-compartment(https://www.google.de/) │ │ │ │ ├──3.56 mb (00.71%) -- objects │ │ │ │ │ ├──3.04 mb (00.61%) ++ gc-heap │ │ │ │ │ ├──0.51 mb (00.10%) ++ malloc-heap │ │ │ │ │ └──0.00 mb (00.00%) ── non-heap/code/asm.js │ │ ...
... reactive checking if you look at about:memory and you see a compartment for www.foo.com, but you closed your last www.foo.com tab a while ago, there's a good chance you're seeing a zombie compartment.
... proactive checking of add-ons it's not uncommon for add-ons to cause zombie compartments, see bug 700547 for examples.

Plug-in Basics - Plugins
it embeds a variety of object types in an html page, including plug-ins, java components, activex controls, applets, and images.
...so, for example, though gecko does not support the classid attribute of the object element - which was used for java classes and activex plug-ins embedded in pages - object elements can be nested to support different plug-in implementations.
... see the mozilla activex project page in the plug-in references section below for more information about embedding activex controls in plug-ins or embedding plug-ins in activex applications.

Debugger.Frame - Firefox Developer Tools
this allows the code using each debugger instance to place whatever properties it likes on its debugger.frame instances, without worrying about interfering with other debuggers.) when the debuggee pops a stack frame (say, because a function call has returned or an exception has been thrown from it), the debugger.frame instance referring to that frame becomes inactive: its live property becomes false, and accessing its other properties or calling its methods throws an exception.
... note that frames only become inactive at times that are predictable for the debugger: when the debuggee runs, or when the debugger removes frames from the stack itself.
...all extant handler methods, breakpoints, and so on remain active during the call.

Debugger.Object - Firefox Developer Tools
all extant handler methods, breakpoints, and so on remain active during the call.
...all extant handler methods, breakpoints, and so on remain active during the call.
...all extant handler methods, breakpoints, and so on remain active during the call.

Debugger - Firefox Developer Tools
changing this flag when any frame of the debuggee is currently active on the stack will produce an exception.
... an html5 windowproxy object (an “outer window”, in firefox terminology), which is treated as if the window object of the browsing context’s active document (the “inner window”) were passed.
...the intent is to support interactive compilation - accumulate lines in a buffer until iscompilableunit is true, then pass it to the compiler.

Debugger.Object - Firefox Developer Tools
all extant handler methods, breakpoints, watchpoints, and so on remain active during the call.
...all extant handler methods, breakpoints, watchpoints, and so on remain active during the call.
...all extant handler methods, breakpoints, watchpoints, and so on remain active during the call.

Animation.replaceState - Web APIs
this will be active if the animation has been removed, or persisted if animation.persist() has been invoked on it.
...the value can be one of: active: the initial value of the animation's replace state; when the animation has been removed by the browser's automatically removing filling animations behavior.
...this will be active for each animation by default, or persisted if the persist() call is uncommented.

Element: click event - Web APIs
for ie9 only: set background-color: rgba(0,0,0,0) set opacity: 0 and an explicit background-color other than transparent for ie8 and ie9: set filter: alpha(opacity=0); and an explicit background-color other than transparent safari mobile safari mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g.
... use a typically interactive element (e.g., <a>) instead of one that isn't typically interactive (e.g., <div>).
... safari mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug): <a> (but it must have an href) <area> (but it must have an href) <button> <img> <input> <label> (but it must be associated with a form control) <textarea> this list is incomplete; you can help mdn by doing further testing/research and expanding it.

HTMLElement: animationcancel event - Web APIs
example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.q...
...xtcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.conta...
...ins('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...

HTMLElement: animationend event - Web APIs
n-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.query...
...xtcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.conta...
...ins('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...

HTMLElement: animationiteration event - Web APIs
example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.q...
...xtcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.conta...
...ins('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...

HTMLElement: animationstart event - Web APIs
example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.q...
...xtcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.conta...
...ins('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...

HTMLImageElement.useMap - Web APIs
map name="mainmenu-map"> <area shape="circle" coords="25, 25, 75, 75" href="/index.html" alt="return to home page"> <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="shop"> </map> given the image map named mainmenu-map, the image which uses it should look something like the following: <img src="menubox.png" usemap="#mainmenu-map"> for additional examples (including interactive ones), see the articles about the <map> and <area> elements, as well as the guide to using image maps.
... example 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.

IDBTransaction.commit() - Web APIs
the commit() method of the idbtransaction interface commits the transaction if it is called on an active transaction.
... if it is called on a transaction that is not active, it throws an invalidstateerror domexception.
... exceptions exception description invalidstateerror the transaction state is not active.

MediaDevices.getUserMedia() - Web APIs
they must also show an indicator that permission has been granted to use a device for input, even if the device is not actively recording at the moment.
...the device's physical light is used to indicate whether or not recording is currently active.
... if you've muted your camera (so-called "facemuting"), your camera's activity light goes out to indicate that the camera is not actively recording you, without discarding the permission to resume using the camera once muting is over.

MediaRecorder.resume() - Web APIs
when the resume() method is invoked, the browser queues a task that runs the following steps: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps.
... if mediarecorder.state is not "inactive", continue to the next step.
... syntax mediarecorder.resume() errors an invalidstate error is raised if the resume() method is called while the mediarecorder object’s mediarecorder.state is "inactive" — the recording cannot be resumed if it is not already paused; if mediarecorder.state is already "recording", resume() has no effect.

MediaStream - Web APIs
mediastream.active read only a boolean value that returns true if the mediastream is active, or false otherwise.
... active fired when the mediastream is activated.
... inactive fired when the mediastream is inactivated.

PointerEvent.isPrimary - Web APIs
in a multi-pointer scenario (such as a touch screen that supports more than one touch point), this property is used to identify a master pointer among the set of active pointers for each pointer type.
...a pointer representing pen input is considered the primary pen input if its pointerdown event was dispatched when no other active pointers representing pen input existed.
... a pointer representing touch input is considered the primary touch input if its pointerdown event was dispatched when no other active pointers representing touch input existed.

PointerEvent - Web APIs
pointerdown the event is fired when a pointer becomes active.
... pointerup this event is fired when a pointer is no longer active.
... pointercancel a browser fires this event if it concludes the pointer will no longer be able to generate events (for example the related device is deactived).

Push API - Web APIs
see the following articles for more information: cross-site request forgery (csrf) prevention cheat sheet preventing csrf and xsrf attacks for an app to receive push messages, it has to have an active service worker.
... when the service worker is active, it can subscribe to push notifications, using pushmanager.subscribe().
... serviceworkerregistration.pushmanager read only returns a reference to the pushmanager interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.

RTCIceCandidatePairStats - Web APIs
usage notes the currently-active ice candidate pair—if any—can be obtained by calling the rtcicetransport method getselectedcandidatepair(), which returns an rtcicecandidatepair object, or null if there isn't a pair selected.
... the active candidate pair describes the current configuration of the two ends of the rtcpeerconnection.
... any candidate pair that isn't the active pair of candidates for a transport gets deleted if the rtcicetransport performs an ice restart, at which point the state of the ice transport returns to new and negotiation starts once again.

RTCPeerConnection.createOffer() - Web APIs
icerestart optional to restart ice on an active connection, set this to true.
...set to either "sendonly" or "inactive").
...set to either "sendonly" or "inactive").

ServiceWorkerContainer.ready - Web APIs
the ready read-only property of the serviceworkercontainer interface provides a way of delaying code execution until a service worker is active.
... it returns a promise that will never reject, and which waits indefinitely until the serviceworkerregistration associated with the current page has an active worker.
... example if ('serviceworker' in navigator) { navigator.serviceworker.ready .then(function(registration) { console.log('a service worker is active:', registration.active); // at this point, you can call methods that require an active // service worker, like registration.pushmanager.subscribe() }); } else { console.log('service workers are not supported.'); } specifications specification status comment service workersthe definition of 'serviceworkerregistration.ready' in that specification.

ServiceWorkerGlobalScope.skipWaiting() - Web APIs
the serviceworkerglobalscope.skipwaiting() method of the serviceworkerglobalscope forces the waiting service worker to become the active service worker.
... use this method with clients.claim() to ensure that updates to the underlying service worker take effect immediately for both the current client and all other active clients.
... the following example causes a newly installed service worker to progress into the activating state, regardless of whether there is already an active service worker.

ServiceWorkerGlobalScope - Web APIs
an active service worker is automatically restarted to respond to events, such as serviceworkerglobalscope.onfetch or serviceworkerglobalscope.onmessage.
... events activate occurs when a serviceworkerregistration acquires a new serviceworkerregistration.active worker.
... methods serviceworkerglobalscope.skipwaiting() allows the current service worker registration to progress from waiting to active state while service worker clients are using it.

TextTrack - Web APIs
texttrack.activecues read only a texttrackcuelist object listing the currently active set of text track cues.
... track cues are active if the current playback position of the media is between the cues' start and end times.
... thus, for displayed cues such as captions or subtitles, the active cues are currently being displayed.

Using Touch Events - Web APIs
changedtouches - a list of the touch points whose items depends on the associated event type: for the touchstart event, it is a list of the touch points that became active with the current event.
... browsers typically dispatch emulated mouse and click events when there is only a single active touch point.
... multi-touch interactions involving two or more active touch points will usually only generate touch events.

Touch events - Web APIs
the touchevent interface encapsulates all of the touchpoints that are currently active.
... after that, we iterate over all the touch objects in the list, pushing them onto an array of active touchpoints and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4-pixel radius circle will show up neatly.
...this identifier is an opaque number, but we can at least rely on it differing between the currently-active touches.

VideoTrack.selected - Web APIs
the videotrack property selected controls whether or not a particular video track is active.
... syntax isvideoselected = videotrack.selected; videotrack.selected = true | false; value the selected property is a boolean whose value is true if the track is active.
... only a single video track can be active at any given time, so setting this property to true for one track while another track is active will make that other track inactive.

VideoTrack - Web APIs
the most common use for accessing a videotrack object is to toggle its selected property in order to make it the active video track for its <video> element.
... properties selected a boolean value which controls whether or not the video track is active.
... only a single video track can be active at any given time, so setting this property to true for one track while another track is active will make that other track inactive.

WebGL2RenderingContext.getTransformFeedbackVarying() - Web APIs
syntax webglactiveinfo gl.gettransformfeedbackvarying(program, index); parameters program a webglprogram.
... return value a webglactiveinfo object.
... examples activeinfo = gl.gettransformfeedbackvarying(program, 0); specifications specification status comment webgl 2.0the definition of 'gettransformfeedbackvarying' in that specification.

WebGL2RenderingContext.uniformBlockBinding() - Web APIs
the webgl2renderingcontext.uniformblockbinding() method of the webgl 2 api assigns binding points for active uniform blocks.
... syntax void gl.uniformblockbinding(program, uniformblockindex, uniformblockbinding); parameters program a webglprogram containing the active uniform block whose binding to assign.
... uniformblockindex a gluint specifying the index of the active uniform block within the program.

WebGLRenderingContext - Web APIs
state information webglrenderingcontext.activetexture() selects the active texture unit.
... webglrenderingcontext.getactiveattrib() returns information about an active attribute variable.
... webglrenderingcontext.getactiveuniform() returns information about an active uniform variable.

WebRTC connectivity - Web APIs
this exchange is handled using interactive connectivity establishment (ice, a protocol which lets two devices use an intermediary to exchange offers and answers even if the two devices are separated by network address translation (nat).
... tcp candidate types tcp candidates (that is, candidates whose protocol is tcp) can be of these types: active the transport will try to open an outbound connection but won't receive incoming connection requests.
... ice rollbacks when renegotiating a connection that's already active and a situation arises in which the negotiation fails, you don't really want to kill the already-running call.

WebRTC API - Web APIs
rtcicecandidate represents a candidate interactive connectivity establishment (ice) server for establishing an rtcpeerconnection.
... resources protocols webrtc-proper protocols application layer protocol negotiation for web real-time communications webrtc audio codec and processing requirements rtcweb data channels rtcweb data channel protocol web real-time communication (webrtc): media transport and use of rtp webrtc security architecture transports for rtcweb related supporting protocols interactive connectivity establishment (ice): a protocol for network address translator (nat) traversal for offer/answer protocol session traversal utilities for nat (stun) uri scheme for the session traversal utilities for nat (stun) protocol traversal using relays around nat (turn) uniform resource identifiers an offer/answer model with session description protocol (sdp) session traversal utilities fo...
... see also mediadevices mediastreamevent mediastreamconstraints mediastreamtrack messageevent mediastream media capture and streams api firefox multistream and renegotiation for jitsi videobridge peering through the webrtc fog with socketpeer inside the party bus: building a web app with multiple live video streams + interactive graphics web media technologies ...

Web Video Text Tracks Format (WebVTT) - Web APIs
the active text is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload.
... any text before the active text in the payload is previous text .
... any text beyond the active text is future text .

Using the alertdialog role - Accessibility
additionally, alert dialogs can have other interactive controls such as text fields, tabs or checkboxes.
... note: this role should only be used for alert messages that have associated interactive controls.
... if an alert dialog only contains static content and has no interactive controls at all, alertdialog is likely not the right role to use here.

ARIA: application role - Accessibility
associated wai-aria roles, states, and properties document, article used to indicate parts of the application that should be treated as normal web content aria-activedescendant used to manage focus inside the application.
...focus is being managed via aria-activedescendant.
... 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.

ARIA: grid role - Accessibility
ns --> </tr> <tr> <th scope="row">aisle 2</th> <td tabindex="-1"> <button id="2a" tabindex="-1">2a</button> </td> <td tabindex="-1"> <button id="2b" tabindex="-1">2b</button> </td> <!-- more columns --> </tr> </tbody> </table> description a grid widget contains one or more rows with one or more cells of thematically related interactive content.
... if the grid is used as an interactive widget, keyboard interactions need to be implemented.
...to activate the interactive component, they will use the return and space keys.

ARIA: table role - Accessibility
the table value of the aria role attribute identifies the element containing the role as having a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element.
...the cells are not focusable or selectable, though widgets within individual cells of the table can be interactive.
... to create an interactive widget that has a tabular structure, use the grid pattern instead.

ARIA: button role - Accessibility
xample</h1> <ul id="namelist"></ul> <label for="newname">enter your name: </label> <input type="text" id="newname"> <span role="button" tabindex="0" onclick="handlecommand()" onkeydown="handlecommand()">add name</span> css [role="button"] { padding: 2px; background-color: navy; color: white; cursor: default; } [role="button"]:hover, [role="button"]:focus, [role="button"]:active { background-color: white; color: navy; } ul { list-style: none; } javascript function handlecommand(event) { // handles both mouse clicks and keyboard // activate with enter or space // get the new name value from the input element let newnameinput = document.getelementbyid('newname'); let name = newnameinput.value; newnameinput.value = ''; // clear the te...
...</audio> css button, [role="button"] { padding: 3px; border: 2px solid transparent; } button:active, button:focus, [role="button"][aria-pressed="true"] { border: 2px solid #000; } javascript function handlebtnclick(event) { togglebutton(event.target); } function handlebtnkeydown(event) { // check to see if space or enter were pressed if (event.key === " " || event.key === "enter" || event.key === "spacebar") { // "spacebar" for ie11 support // prevent the default action to sto...
...etelementbyid('audio'); // check to see if the button is pressed var pressed = (element.getattribute("aria-pressed") === "true"); // change aria-pressed to the opposite state element.setattribute("aria-pressed", !pressed); // toggle the play state of the audio file if(pressed) { audio.pause(); } else { audio.play(); } } result accessibility concerns buttons are interactive controls and thus focusable.

ARIA: dialog role - Accessibility
the label given to the dialog will provide contextual information for the interactive controls inside the dialog.
... when the dialog is correctly labeled and focus is moved to an element (often an interactive element, such as a button) inside the dialog, screen readers should announce the dialog's accessible role, name and optionally description, along with announcing the focused element.
...it is important for developers to ensure that content outside of the modal dialog is inaccessible to all users while the modal dialog is active.

ARIA: textbox role - Accessibility
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.
... focus event handler and aria-activedescendent attribute if you are implementing a composite widget, such as a combobox composed of a text box and a listbox, you need to manage the aria-activedescendent attribute using a handler.

-ms-high-contrast - CSS: Cascading Style Sheets
active indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation.
... @media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors.
...microsoft edge versions 18 and higher will be using the forced-colors media feature instead, but the forced-colors media feature specification is still being actively worked on.

forced-colors - CSS: Cascading Style Sheets
values none forced colors mode is not active; the page’s colors are not being forced into a limited palette.
... active indicates that forced colors mode is active.
... html <div class="colors">weird color box</div> css .colors { background-color: red; color: grey; } @media (forced-colors: active) { .colors { background-color: white; color: black; } } result specifications specification status comment media queries level 5the definition of 'forced-colors' in that specification.

CSS Backgrounds and Borders - CSS: Cascading Style Sheets
border-image generator this interactive tool lets you visually create border images (the border-image property).
... border-radius generator this interactive tool lets you visually create rounded corners (the border-radius property).
... box-shadow generator this interactive tool lets you visually create shadows behind elements (the box-shadow property).

CSS Overflow - CSS: Cascading Style Sheets
basic example the following interactive example shows how changing the value of the overflow property, changes how the overflow of a fixed height box is dealt with.
... 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.

Mozilla CSS extensions - CSS: Cascading Style Sheets
border-style and outline-style -moz-bg-insetobsolete since gecko 1.9 -moz-bg-outsetobsolete since gecko 1.9 -moz-bg-solidobsolete since gecko 1.9 <color> keywords -moz-activehyperlinktext -moz-hyperlinktext -moz-visitedhyperlinktext -moz-buttondefault -moz-buttonhoverface -moz-buttonhovertext -moz-default-background-color -moz-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-accentlightes...
...thighlight -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-groupobsolete since gecko 62 -moz-grid-lineobsolete since gecko 62 -moz-groupbox -moz-deckobsolete since gecko 62 -moz-popupobsolete since gecko 62 -moz-stackobsolete since gecko 62 -moz-markerobsolete since gecko 62 empty-cells ...
...ree-cell-text :-moz-tree-cell-text(hover) :-moz-tree-checkbox :-moz-tree-column :-moz-tree-drop-feedback :-moz-tree-image :-moz-tree-indentation :-moz-tree-line :-moz-tree-progressmeter :-moz-tree-row :-moz-tree-row(hover) :-moz-tree-separator :-moz-tree-twisty u – x :-moz-ui-invalid :-moz-ui-valid :-moz-user-disabled ::-moz-viewport ::-moz-viewport-scroll :-moz-window-inactive ::-moz-xul-anonymous-block at-rules @-moz-document media features -moz-mac-graphite-theme -moz-maemo-classic -moz-device-pixel-ratio -moz-os-version -moz-scrollbar-end-backward -moz-scrollbar-end-forward -moz-scrollbar-start-backward -moz-scrollbar-start-forward -moz-scrollbar-thumb-proportional -moz-touch-enabled -moz-windows-accent-color-in-titlebar -moz-windows-classi...

align-content - CSS: Cascading Style Sheets
the interactive example below use grid layout to demonstrate some of the values of this property.
... the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

align-items - CSS: Cascading Style Sheets
the interactive example below demonstrates some of the values for align-items using grid layout.
... the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

box-shadow - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... box-shadow generator is an interactive tool allowing you to generate a box-shadow.

gap (grid-gap) - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...however, in order to support browsers that implemented grid-gap and not gap for grid, you will need to use the prefixed property as in the interactive example above.

justify-content - CSS: Cascading Style Sheets
the interactive example below demonstrates some of the values using grid layout.
... the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

row-gap (grid-row-gap) - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...however, in order to support browsers that implemented grid-row-gap and not row-gap for grid, you will need to use the prefixed property as in the interactive example above.

scroll-margin-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.

scroll-margin-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.

scroll-margin - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,4} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.

scaleZ() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... in the above interactive examples, perspective: 550px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube.

translateZ() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... in the above interactive examples, perspective: 550px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube.

transition - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...different states may be defined using pseudo-classes like :hover or :active or dynamically set using javascript.

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if it has a controls attribute: interactive content and palpable content.

<details>: The Details disclosure element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... content categories flow content, sectioning root, interactive content, palpable content.

<form> - HTML: Hypertext Markup Language
the html <form> element represents a document section containing interactive controls for submitting information.
... 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.

<img>: The Image Embed element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if the element has a usemap attribute, it also is a part of the interactive content category.

<input type="radio"> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...er-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; margin-right: 5px; position: relative; top: 4px; } input:checked { border: 6px solid black; } button, legend { color: white; background-color: black; padding: 5px 10px; border-radius: 0; border: 0; font-size: 14px; } button:hover, button:focus { color: #999; } button:active { background-color: white; color: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers).

<object> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... content categories flow content; phrasing content; embedded content, palpable content; if the element has a usemap attribute, interactive content; listed, submittable form-associated element.

<select>: The HTML Select element - HTML: Hypertext Markup Language
the html <select> element represents a control that provides a menu of options: 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.
... technical summary content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element permitted content zero or more <option> or <optgroup> elements.

<textarea> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... <textarea name="textarea" rows="5" cols="30" disabled>i am a disabled textarea</textarea> <textarea name="textarea" rows="5" cols="30" readonly>i am a readonly textarea</textarea> technical summary content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element.

<track>: The Embed Text Track element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); examples <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="samp...

<video>: The Video Embed element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if it has a controls attribute: interactive content and palpable content.

dir - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... this attribute can be overridden by the css properties direction and unicode-bidi, if a css page is active and the element supports these properties.

hidden - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... hidden elements shouldn't be linked from non-hidden elements, and elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.

Navigation and resource timings - Web Performance
as displayed in the image below, the navigation process goes from navigationstart, unloadeventstart, unloadeventend, redirectstart, redirectend, fetchstart, domainlookupstart, domainlookupend, connectstart , connectend, secureconnectionstart, requeststart, responsestart, responseend, domloading, dominteractive, domcontentloadedeventstart, domcontentloadedeventend, domcomplete, loadeventstart, and loadeventend.
... dominteractive when the parser finished its work on the main document, that is when its document.readystate changes to 'interactive' and the corresponding readystatechange event is thrown.
...once the user agent stops parsing the document, the user agent sets the document readiness to interactive.

Media - Progressive web apps (PWAs)
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.
... example these rules specify styles for a button that changes dynamically as the user interacts with it: .green-button { background-color:#cec; color:#black; border:2px outset #cec; padding: 5px 10px; } .green-button[disabled] { background-color:#cdc; color:#777; } .green-button:active, .green-button.active { border-style: inset; } <table> <tbody> <tr> <td><button class="green-button" disabled>click me</button></td> <td><button class="green-button">click me</button></td> <td><button class="green-button active">click me</button></td> </tr> <tr style="line-height:25%;"> <td>&nbsp;</td> </tr> <tr style="font-style:italic;"> <td>disabled</td> <td>...
...normal</td> <td>active</td> </tr> </tbody> </table> live sample a fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus.

end - SVG: Scalable Vector Graphics
the end attribute defines an end value for the animation that can constrain the active duration.
...the element's animation end time is defined relative to the begin or active end of another animation.
... a valid syncbase-value consists of an id reference to another animation element followed by a dot and either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element.

SVG documentation index - SVG: Scalable Vector Graphics
68 end needscompattable, svg, svg attribute the end attribute defines an end value for the animation that can constrain the active duration.
... 138 max svg, svg attribute the max attribute specifies the maximum value of the active animation duration.
... 141 min svg, svg attribute the min attribute specifies the minimum value of the active animation duration.

SVG: Scalable Vector Graphics
this allows developers to create rich animations and interactive images.
... some real eye-candy svg at svg-wow.org firefox extension (grafox) to add a subset of smil animation support interactive photos manipulation html transformations using svg's foreignobject mapping, charting, games & 3d experiments while a little svg can go a long way to enhanced web content, here are some examples of heavy svg usage.
... connect 4 jvectormap (interactive maps for data visualization) jointjs (javascript diagramming library) d3 ( javascript library for visualizing data with html, svg, and css ) ...

XUL Migration Guide - Archive of obsolete content
this simple example modifies the selected tab's css to enable the user to highlight the selected tab: function highlightactivetab() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var tab = require("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('background-color')) { tab.style.setproperty('background-color','','important'); } else { tab.style.setproperty('background-color','rgb(255,255,100)','important'); } } require("sdk/ui/button/action").actionbutto...
...n({ id: "highlight-active-tab", label: "highlight active tab", icon: "./icon-16.png", onclick: highlightactivetab }); security implications the sdk implements a security model in which an add-on only gets to access the apis it explicitly imports via require().

page-mod - Archive of obsolete content
for example, we might want to run a script in the context of the currently active tab when the user clicks a button: to block certain content, to change the font style, or to display the document's dom structure.
... the following add-on creates a button which, when clicked, highlights all the div elements in the document loaded into the active tab: require("sdk/ui/button/action").actionbutton({ id: "highlight-divs", label: "highlight divs", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'var divs = document.getelementsbytagname("div");' + 'for (var i = 0; i < divs.length; ++i) {' + 'divs[i].setattribute("style", "border: solid red 1px;");' + '}' }); } }); to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-on's ...

panel - Archive of obsolete content
so you can rewrite the above code like this: var mypanel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); panel positioning by default the panel appears in the center of the currently active browser window.
...border: 3px solid blue; }" }); mypanel.show(); var self = require("sdk/self"); var mypanel = require("sdk/panel").panel({ contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&useformat=mobile", contentstylefile: self.data.url("panel-style.css") }); mypanel.show(); private browsing if your add-on has not opted into private browsing, and it calls panel.show() when the currently active window is a private window, then the panel will not be shown.

dev/panel - Archive of obsolete content
optional onready function an event handler that will be called when the document in the panel becomes interactive.
... it's equivalent to document.readystate === "interactive".

tabs/utils - Archive of obsolete content
globals functions activatetab(tab, window) set the specified tab as the active, or selected, tab.
... getactivetab(window) given a browser window, get the active, or selected, tab.

window/utils - Archive of obsolete content
getxulwindow(window) returns the nsixulwindow for the given nsidomwindow: var { ci } = require('chrome'); var utils = require('sdk/window/utils'); var active = utils.getmostrecentbrowserwindow(); active instanceof ci.nsixulwindow // => false utils.getxulwindow(active) instanceof ci.nsixulwindow // => true parameters window : nsidomwindow returns nsixulwindow getbasewindow(window) returns the nsibasewindow for the given nsidomwindow: var { ci } = require('chrome'); var utils = require('sdk/window/utils'); var active = utils.getmostrecentbrowserw...
...indow(); active instanceof ci.nsibasewindow // => false utils.getbasewindow(active) instanceof ci.nsibasewindow // => true parameters window : nsidomwindow returns nsibasewindow gettoplevelwindow(window) returns the toplevel nsidomwindow for the given child nsidomwindow: var { ci } = require('chrome'); var utils = require('sdk/window/utils'); var browserwindow = utils.getmostrecentbrowserwindow(); var window = browserwindow.content; // `window` object for the current webpage utils.gettoplevelwindow(window) == browserwindow // => true parameters window : nsidomwindow returns nsidomwindow getwindowdocshell(window) returns the nsidocshell for the tabbrowser element.

Creating annotations - Archive of obsolete content
it is initially off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter event.
... $('*').mouseenter(function() { if (!active || $(this).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbgcolor = $(matchedelement).css('background-color'); $(matchedelement).css('background-color', 'yellow'); $(matchedelement).bind('click.annotator', function(event) { event.stoppropagation(); event.preventdefault(); self.po...

JavaScript timers - Archive of obsolete content
using javascript timers within animations (javascript daemons management) in computer science a daemon is a task that runs as a background process, rather than being under the direct control of an interactive user.
... basic animations since we're using script to control canvas elements it's also very easy to make (interactive) animations.

Extension Versioning, Update and Compatibility - Archive of obsolete content
windows users should consider hashtab for interactive (non-build-script) use.
... there are also gnu ports for win (besides usual suspects like cygwin), which are good for non-interactive use: sha256sum file there is also md5deep, which is cross platform: sha256deep file openssl also generates hashes for you: openssl sha256 file if you're on windows, hashtab is a shell extension...

Useful Mozilla Community Sites - Archive of obsolete content
« previous the mozilla community is very rich and active.
...the community is very active, and you can be sure to get translations for the most commonly used languages within a few days of submitting your extension.

Tabbed browser - Archive of obsolete content
get the most recent browser window using this code: var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var mainwindow = wm.getmostrecentwindow("navigator:browser"); mainwindow.gbrowser.addtab(...); opening a url in a new tab // add tab gbrowser.addtab("http://www.google.com/"); // add tab, then make active gbrowser.selectedtab = gbrowser.addtab("http://www.google.com/"); manipulating content of a new tab if you want to work on the content of the newly opened tab, you'll need to wait until the content has finished loading.
... changing active tab this moves one tab forward (to the right).

Updating addons broken by private browsing changes - Archive of obsolete content
nsidownloadmanager now has activeprivatedownloads, activeprivatedownloadcount, and privatedbconnection members to complement the existing public ones.
...the global private browsing service is actively being removed, and may not even exist as of firefox 21.

MMgc - Archive of obsolete content
so, some kind of reference counting is still attractive to lower the amount of work the gc has to do, and to get more immediacy on memory reclamation.
...so, it's attractive to find some form of reference counting that doesn't require maintaining reference counts for every single reference.

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
getldapattributes("ldap2.int-evry.fr","ou=people,dc=int-evry,dc=fr","uid=" + env_user,"uid,cn,mail,labeleduri"); // close the try, and call the catch() } catch(e) { displayerror("lockedpref", e); } thunderbird.cfg (version 2 with ad) using thunderbird 9.0.1 and try to use a active directory (windows server 2008) as ldap-source did not work with version 1.
... //note: for accessing the active directory of windows server later than 2000 //it is necessary to allow anonymous read access.

Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
no active maintainer has stepped forward, and the code broke in firefox 4.
...ntractid("@mozilla.org/embedcomp/window-watcher;1", nsiwindowwatcher.ns_iwindowwatcher_iid); // set the window creator (from step 6) windowwatcher.setwindowcreator(windowcreator); // create the root xul window: nsidomwindow win = windowwatcher.openwindow(null, "chrome://your-app/content/window.xul", "mywindow", "chrome,resizable,centerscreen", null); // set this as the active window windowwatcher.setactivewindow(win); // hand over the application to xpcom/xul, this will block: appstartup.run(); here is an example of a locationprovider that works : public class locationprovider implements iappfilelocprovider { private final file libxulpath; int counter = 0; public locationprovider(file grepath) { this.libxulpath =...

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
paste it into the new file: #custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1s.png");} /* common style for all custom buttons - modern */ #nav-bar .custombutton {-moz-image-region: rect( 0px 41px 39px 0px);} #nav-bar .custombutton:hover {-moz-image-region: rect( 0px 83px 39px 42px);} #nav-bar .custombutton:active {-moz-image-region: rect( 0px 125px 39px 84px);} .custombutton {-moz-image-region: rect(39px 49px 72px 0px);} .custombutton:hover {-moz-image-region: rect(39px 98px 72px 49px);} .custombutton:active {-moz-image-region: rect(39px 147px 72px 98px);} /* common style for all custom buttons - classic */ .custombutton {-moz-image-region: rect( 0px 145px 20px 126px);} .custombutton:hover ...
... {-moz-image-region: rect( 0px 164px 20px 145px);} .custombutton:active {-moz-image-region: rect( 0px 183px 20px 164px);} remove one of the common style sections, leaving the section for the theme that you use in seamonkey.

Skinning XUL Files by Hand - Archive of obsolete content
in this third type of style definition, the "a" element picks up the style information defined in the block only when it is, as a link, active.
... in short, xul provides the tools for anybody to create interfaces as complex and as attractive as any c++/mfc/visual ide/templates toolkit user's, and it does so in a way that makes these interfaces available on any platform.

XUL Questions and Answers - Archive of obsolete content
instead of <menulist id="abpopup"> <menupopup id="abpopup-menupopup" ref="moz-abdirectory://" datasources="rdf:addressdirectory" sortactive="true" sortdirection="ascending" sortresource="http://home.netscape.com/nc-rdf#dirtreenamesort"> <template> <rule nc:iswriteable="false"/> <rule nc:ismaillist="false"> <menuitem uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> <rule nc:ismaillist="true"> ...
... <menuitem uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> </template> </menupopup> </menulist> it should be written as follows: <menulist id="abpopup22"> <menupopup id="abpopup-menupopup" ref="moz-abmdbdirectory://abook.mab" datasources="rdf:addressdirectory" sortactive="true" sortdirection="ascending" sortresource="http://home.netscape.com/nc-rdf#dirtreenamesort"> <template> <rule nc:iswriteable="false"/> <rule nc:ismaillist="true"> <menuitem uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> </template> </menupopup> </menulist> draww...

dialog - Archive of obsolete content
accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio label="green" selected="true"/> <radio label="blue"/> </radiogroup> <label value="nickname"/> <textbox/> </groupbox> </dialog> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
... inactivetitlebarcolor type: color string specify background color of the window's titlebar when it is inactive (background).

prefwindow - Archive of obsolete content
el="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatically save backups" preference="pref-backup"/> <textbox label="duration:" preference="pref-backupduration"/> </prefpane> </prefwindow> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
... inactivetitlebarcolor type: color string specify background color of the window's titlebar when it is inactive (background).

window - Archive of obsolete content
activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
... inactivetitlebarcolor type: color string specify background color of the window's titlebar when it is inactive (background).

wizard - Archive of obsolete content
document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
... inactivetitlebarcolor type: color string specify background color of the window's titlebar when it is inactive (background).

Building XULRunner with Python - Archive of obsolete content
this gives access to python features and modules and builds on mark hammond's pyxpcom work from active state.
... mk_add_options moz_objdir=@topsrcdir@/../obj-xulrunner mk_add_options moz_co_project=xulrunner ac_add_options --enable-application=xulrunner ac_add_options --enable-extensions=python,default ac_add_options --disable-javaxpcom ac_add_options --disable-activex ac_add_options --disable-activex-scripting ac_add_options --disable-tests ac_add_options --enable-optimize to check out all the required source code and build it the first time with no local client.mk file, execute cd /c/projects cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk cd mozilla make -f client.mk for subsequent updates from cvs followed by a build, us...

XULRunner Hall of Fame - Archive of obsolete content
azardi free win/mac/linux epub 2/epub 3 desktop reader using html5 and latest css features of gecko for interactive e-books.
... inactive projects these projects appear to be less actively developed, with no updates since 2010.

What XULRunner Provides - Archive of obsolete content
extension manager file picker (uses native os filepicker as appropriate) find toolbar helper app dialog/ui security ui (maintenance of ssl keychains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-platform embedding (xre_initembedding) javaxpcom embedding gtkmozembed (linux only) activex control (windows only) (not yet complete) obsolete since gecko 7.0 nsview-based-widget (mac os x only) (not yet complete) the "maybe" list the following features have been discussed and may be included if developer time permits and code size is controlled: ldap support spellchecking support (with or without dictionaries provided) see bug 285977 core support for profile roaming (with ap...
...activestate uses pyxpcom in their products.

External resources for plugin creation - Archive of obsolete content
feature highlights include thread safety checks, unicode support (with std::wstring), activex support, built-in drawing model negotiation for mac, automatic type conversion (including javascript arrays and objects), advanced security features, and more.
... supported development environments are xcode, visual studio, gcc (and probably any other modern c++ compiler) browser plugins can be built as npapi (mac/windows), or activex (windows).

Common Firefox theme issues and solutions - Archive of obsolete content
-image: url(chrome://browser/skin/identity-icons-https.png); } .verifiedidentity > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } #identity-box:hover > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 32px, 16px, 16px); } #identity-box:hover:active > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon, #identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.5; } for more information about identity boxes please see the identity box section of the amo editors theme review gu...
...to accomplish this copy the file chrome://mozapps/skin/extensions/extensions.svg from the default theme into the mozapps/extensions/ folder of your theme and add the following style rule to the css file extensions.css: .addon[active="false"] .icon { filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); opacity:0.3; } about:memory about:memory nodes do not collapse the styling of about:memory is a little messed up in that nodes do not collapse as they should when clicked on.

Issues Arising From Arbitrary-Element hover - Archive of obsolete content
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.
...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.

3D games on the Web - Game development
webgl is basically an opengl es 2.0 for the web — it's a javascript api providing tools to build rich interactive animations and of course, also games.
...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.

Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
browsers limit the number of active connections for each domain.
...as browsers limit the number of active connections per domain, serving all the required resources from a single domain could be slow as assets need to be downloaded sequentially.

Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms
this measure relies on human perception, not an objective metric like time to interactive.
...perceived performance is not measured by when your site is done loading but when it has loaded enough for users to believe it has loaded and is interactive.

MDN Web Docs Glossary: Definitions of Web-related terms
endianness engine entity entity header event exception expando f fallback alignment falsy favicon fetch directive fetch metadata request header firefox os firewall first contentful paint first cpu idle first input delay first interactive first meaningful paint first paint first-class function flex flex container flex item flexbox forbidden header name forbidden response header name fork fragmentainer frame rate (fps) ftp ftu function fuzz testing g gaia g...
...origin stylesheet svg svn symbol symmetric-key cryptography synchronous syntax syntax error synthetic monitoring t tag tcp tcp handshake tcp slow start telnet texel thread three js time to first byte time to interactive tld tofu transmission control protocol (tcp) transport layer security (tls) tree shaking trident truthy ttl turn type type coercion type conversion u udp (user datagram protocol) ui undefined unicode uri url urn ...

Test your skills: CSS and JavaScript accessibility - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

CSS and JavaScript accessibility best practices - Learn web development
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).
... this kind of form validation is unobtrusive — you can still use the form absolutely fine without the javascript being available, and any sensible form implementation will have server-side validation active as well, because it is too easy for malicious users to bypass client-side validation (for example, by turning javascript off in the browser).

Test your skills: HTML accessibility - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: WAI-ARIA - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Advanced styling effects - Learn web development
: 150px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none; background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } this gives us the following result: here we've set up some button styling along with focus/hover/active states.
... when the button is pressed in, the active state causes the first box shadow to be swapped for a very dark inset shadow, giving the appearance of the button being pressed in.

Test your skills: The Cascade - Learn web development
note: you can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: Images and Form elements - Learn web development
note: you can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: Overflow - Learn web development
note: you can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: The Box Model - Learn web development
note: you can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: Selectors - Learn web development
note: you can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: sizing - Learn web development
note: you can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: tables - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: backgrounds and borders - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: values and units - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: Writing Modes and Logical Properties - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: Flexbox - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: floats - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test Your Skills: Fundamental layout comprehension - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: Grid Layout - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Beginner's guide to media queries - Learn web development
if we know the user cannot hover, we could display some interactive features by default.
... active learning: mobile first responsive design broadly, you can take two approaches to a responsive design.

Test your skills: Multicol - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: position - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Test your skills: Media Queries and Responsive Design - Learn web development
note: due to the need to test your design in multiple screen sizes we do not have an interactive editor for this task.
... assessment or further help you can practice these examples in the interactive editors mentioned above.

Fundamental text and font styling - Learn web development
a full example would look like this: font: italic normal bold normal 3em/1.5 helvetica, arial, sans-serif; active learning: playing with styling text in this active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce!
... you've reached the end of this article, and already did some skill testing in our active learning section, but can you remember the most important information going forward?

Web fonts - Learn web development
this video provides a nice walkthrough: active learning: a web font example with this in mind, let's build up a basic web font example from first principles.
... you've reached the end of this article, and already did some skill testing in our active learning sections, but can you remember the most important information going forward?

Test your skills: Advanced styling - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: Basic controls - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: Form structure - Learn web development
note: you can try out the solution in the interactive editor below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice this example in the interactive editor above.

Test your skills: HTML5 controls - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: Other controls - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Creating hyperlinks - Learn web development
active learning: creating your own example link create an html document using your local code editor and our getting started template.
...here's an example with a download link to the latest windows version of firefox: <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-us" download="firefox-latest-64bit-installer.exe"> download latest firefox for windows (64-bit) (english, us) </a> active learning: creating a navigation menu for this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website.

Debugging HTML - Learn web development
active learning: studying permissive code it's time to study the permissive nature of html code.
... active learning: validating an html document let's try this with our sample document.

Document and website structure - Learn web development
active learning: exploring the code for our example our example seen above is represented by the following code (you can also find the example in our github repository).
... active learning: create your own sitemap try carrying out the above exercise for a website of your own creation.

Test your skills: Advanced HTML text - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: HTML text basics - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: Links - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: HTML images - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: Multimedia and embedding - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: Events - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: Functions - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Making decisions in your code — conditionals - Learn web development
note: you can also find this example on github (see it running live on there also.) active learning: a simple calendar in this example, you are going to help us finish a simple calendar application.
.../ 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 = textarea.value; } updatecode(); }; active learning: more color choices!

Arrays - Learn web development
let removeditem = myarray.shift(); myarray; removeditem; active learning: printing those products!
...hat solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background-color: #f5f9fa; } active learning: top 5 searches a good use for array methods like push() and pop() is when you are maintaining a record of currently active items in a web app.

Test your skills: Arrays - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: Math - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: Strings - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: variables - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Test your skills: JSON - Learn web development
note: you can try out the solution in the interactive editor below.
... assessment or further help you can practice these examples in the interactive editor above.

Test your skills: Object-oriented JavaScript - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... assessment or further help you can practice these examples in the interactive editors above.

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
filters for all, active, and completed todos.
...now the only thing left to wire up the footer are the three filtering links: "all", "active", and "completed".

Ember resources and troubleshooting - Learn web development
see also: reactiveconf 2017: secrets of the glimmer vm what is the state of the mut helper?
... controllers are singletons, which may help manage the rendering context of the active route.

Beginning our React todo list - Learn web development
view a specific subset of tasks: all tasks, only the active task, or only the completed tasks.
...ception"> <button type="button" classname="btn toggle-btn" aria-pressed="true"> <span classname="visually-hidden">show </span> <span>all</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>active</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>completed</span> <span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining ...

Deployment and next steps - Learn web development
if you haven't already done it, make sure you go through the svelte interactive tutorial.
...you also have the interactive slides available here which are, unsurprisingly, built with svelte.

Vue resources - Learn web development
it went into active beta in april, 2020.
...you are required to be explicit about "reactive" properties when using this api.

Handling common JavaScript problems - Learn web development
the right-hand panel shows useful details pertaining to the current environment — breakpoints, callstack and currently active scopes.
... under scopes, you'll see the currently active scope for the function we are looking at.

Mozilla accessibility architecture
mozilla supports two accessibility apis: microsoft active accessibility (msaa) on windows and accessibility tool kit (atk) on linux and unix.
... gecko events (or callback) event type accessibility event focus, select standard html dom event event_focus dommenuitemactive, dommenubaractive mozilla dom event_focus domnodeinserted w3c dom mutation event event_create (atk) event_reorder (msaa) domsubtreemodified w3c dom mutation event event_reorder domnoderemoved w3c dom mutation event event_destroy (atk) event_reorder (msaa) checkboxstatechange, radiostate...

Mozilla's Section 508 Compliance
(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.
...we expose this information to assistive technology via microsoft active accessibility (msaa) (windows) and accessibility toolkit (atk) (linux/unix).

Developer guide
in active development.
...in active development.

Experimental features in Firefox
the hit region api allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.
...ightly 81 yes developer edition — — beta — — release — — preference name — security and privacy block plain text requests from flash on encrypted pages in order to help mitigate man-in-the-middle (mitm) attacks caused by flash content on encrypted pages, a preference has been added to treat object_subrequests as active content.

Performance
all their overhead is thus not just incurred by active tabs but by the total number of tabs in a session.
...remove interactive ui elements that would be inert with the addon ...

HTMLIFrameElement.clearMatch()
examples the following function is taken from our browser api demo, and (amongst other things) clears the search results when the search bar is hidden, if an existing search is active.
... searchtoggle.addeventlistener('touchend',function() { if(search.getattribute('class') === 'search') { search.setattribute('class', 'search shifted'); } else if(search.getattribute('class') === 'search shifted') { search.setattribute('class', 'search'); if(searchactive) { browser.clearmatch(); searchactive = false; prev.disabled = true; next.disabled = true; searchbar.value = ''; } } }); specification not part of any specification.

Browser API
htmliframeelement.setactive() sets the current <iframe> as the active frame, which has an effect on how it is prioritized by the process manager.
... htmliframeelement.getactive() indicates whether the current browser <iframe> is the currently active frame.

Getting Started with Chat
mozilla's channels are most active between 9am and 7pm pst monday to friday, excluding us holidays.
...this takes the channel off the public list of active channels and topics.

Download
you can use this property for scheduling download completion actions in the current session, for downloads that are controlled interactively.
... if the download is not controlled interactively, you should use the promise returned by the start() method instead, to check for success or failure.

Downloads.jsm
in general, you should be aware of the following highlights: there is no difference between active downloads and finished downloads.
... there is no separate count of active downloads.

Sqlite.jsm
please note that this is not a timer on the idle service and this could fire while the application is active.
...active cached statements will not be discarded.

Creating localizable web applications
sprintf(_("%d active daily users"), number_format($persona['popularity'])) .
...sprintf(ngettext("%d active daily user", "%d active daily users"), number_format($persona['popularity'])) .

NSS Tools modutil
-force disable the security module database tool's interactive prompts so it can be run from a script.
...pkcs #11 module: -undefault modulename -mechanisms mechanism-list enabling a specific slot or all slots within a module: -enable modulename [-slot slotname] disabling a specific slot or all slots within a module: -disable modulename [-slot slotname] enabling or disabling fips 140-2 compliance within the netscape communicator internal module: -fips [true | false] disabling interactive prompts for the security module database tool, to support scripted operation: -force jar installation file when a jar file is run by a server, by the security module database tool, or by any program that does not interpret javascript, a special information file must be included in the format described below.

Index
the intent is to support interactive compilation - accumulate lines in a buffer until js_bufferiscompilableunit is true, then pass it to the compiler.
... 442 js_saveframechain jsapi reference, spidermonkey these two functions are used to set aside cx's call stack while that stack is inactive.

JS_SetGCCallback
if a thread that is not in an active request calls js_gc while gc is already happening on another thread).
...other threads may be running in active requests.

Web Replay
js compilations and some other internal state are affected by the debugger's presence and which hooks/breakpoints are active, and so can differ between recording and replay.
... the ipc, rewind, and debugger components are all active while recording.

Handling Mozilla Security Bugs
organizational structure for handling security bugs we are organizing the investigation and fixing of mozilla security vulnerabilities similar to the way mozilla project activities are handled in general: there will be a security module owner, a small core of active contributors who can act as peers to the module owner, a larger group of less active participants, and other people who may become involved from time to time.
... representatives of the various companies and groups actively distributing mozilla-based products.

Gecko events
is shown -- this is a layout occurance and is thus asynchronous is supported: yes event_asynch_hide an object is hidden -- this is a layout occurance and is thus asynchronous is supported: yes event_asynch_significant_change an object had a significant layout change which could affect the type of accessible object -- this is a layout occurance and is thus asynchronous is supported: yes event_active_decendent_changed the active descendant of a component has changed.
... the active descendant is used in objects with transient children.

The Publicity Stream API
publicizeactivity( <activity>, [ { [ onsuccess: <function> ], [ onerror: <function> ] } ]): applications should call this method when an user-initiated activity deemed attractive to potential consumers occurs.
...it is suggested that the list be processed and condensed into an attractive, cohesive format for users (eg., multiple tweets show as 'adam tweeted 4 times').

JavaXPCOM
javaxpcom is not actively maintained.
...it has been removed in xulrunner 2, and is not actively maintained.

XPCShell Reference
(setting this option disables the "interactive" mode) -f this option specifies a script file to execute.
... -i this option turns on the "interactive" mode -s this option toggles the javascript strict option on and off.

mozIStorageConnection
note: the database engine does not support nested transactions, so attempting to start a transaction when one is already active will throw an exception.
... the cache must be active on the database for this to work.

nsIAccessibleEvent
event_active_decendent_changed 0x0007 0x0004 the active descendant of a component has changed.
... the active descendant is used in objects with transient children.

nsIContentView
when this view is active (that is it is being painted because it's in the visible region of the screen), this value is at first lined up with the content's scroll offset.
... note: when this view becomes inactive, the new content view will have scroll values that are reset to the default.

nsIDispatchSupport
gethostingflags() return the activex security and hosting flags.
... see nsiactivexsecuritypolicy for list of flags.

nsIWebBrowser
isactive boolean indicates whether this web browser is active.
... active means that it's visible enough that we want to avoid certain optimizations like discarding decoded image data and throttling the refresh driver.

nsIZipReader
ules/osfile.jsm'); cu.import('resource://gre/modules/fileutils.jsm'); var reusablestreaminstance = cc['@mozilla.org/scriptableinputstream;1'].createinstance(ci.nsiscriptableinputstream); var pathtoxpitoread = os.path.join(os.constants.path.profiledir, 'extensions', 'portabletester@jetpack.xpi'); var nsifilexpi = new fileutils.file(pathtoxpitoread); //services.ww.activewindow.alert(pathtoxpitoread); try { zr.open(nsifilexpi); //if file dne it throws here var entries = zr.findentries('*'); //we use asterik because we want everything listed out while (entries.hasmore()) { var entrypointer = entries.getnext(); //just a string of "zip path" (this means path to file in zip, and it uses forward slashes remember) var entry = z...
...reaminstance.init(inputstream); var filecontents = reusablestreaminstance.read(entry.realsize); console.log('contenst of file=', filecontents); } else { console.log('is directory, no stream to read'); } } } catch (ex) { console.warn('exception occured = ', ex); if (ex.name == 'ns_error_file_not_found') { services.ww.activewindow.alert('xpi at path does not exist!\n\npath = ' + pathtoxpitoread); } } finally { zr.close(); console.log('zr closed'); } see also nsizipentry nsizipwriter ...

Events
msgcreatedbview onactivecreatedview onactivemessagesloaded the active messages in the folder have been loaded oncreatedview a folder view has been created, but not yet shown.
... ondisplayingfolder a folder gets displayed onfolderloading a folder is being loaded onleavingfolder a folder is being unloaded, includes deletion onloadingfolder a folder is being loaded onmakeactive a folderdisplaywidget becomes active onmessagecountschanged the counts of the messages changed onmessagesloaded the messages in the folder have been loaded onmessagesremovalfailed removing some messages from the current folder failed onmessagesremoved some messages of the current message list have been removed onsearc...

Introduction to DOM Inspector - Firefox Developer Tools
basic actions of the dom nodes viewer selecting elements by click another powerful interactive feature of the dom inspector is that when you have the dom inspector open and have enabled this functionality by choosing edit > select element by click or by clicking the little magnifying glass icon in the upper left portion of the dom inspector application, you can click anywhere in a loaded web page or the the inspect chrome document, and the element you click will be shown in the document pa...
...note that when the dom inspector displays information about a particular node or subtree, it presents individual nodes and their values (in the dom, attributes are subnodes of elements, typically) in an active list.

Examine and edit CSS - Firefox Developer Tools
inactive rules (not shown): if a rule is inactive (e.g., padding on a :visited pseudo-element), it is colored gray, with an info icon that gives more information when clicked.
... :-moz-range-thumb :-moz-range-track :-moz-selection if the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle: clicking the triangle displays them: viewing common pseudo-classes there's a button to the right of the filter box: click the button to see checkboxes that you can use to enable the :hover, :active and :focus, :focus-within and :visited pseudo-classes for the selected element: this feature can also be accessed from the popup menu in the html view.

Examine and edit HTML - Firefox Developer Tools
subtree modification attribute modification node removal use in console show dom properties show accessibility properties change pseudo-class hover active focus focus-within visited screenshot node scroll into view copy inner html outer html css selector css path xpath image data-url attribute paste inner html outer html before after as first child as last child expand all collapse all open link in new tab * open file in debugger * open file in style-editor * copy link a...
... (change pseudo-class) active set the :active css pseudo-class.

Page inspector keyboard shortcuts - Firefox Developer Tools
command windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is active.
...on the search box in the html pane ctrl + f cmd + f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +enter f2 / cmd + return f2 / ctrl + enter copy the selected node's outer html ctrl + c cmd + c ctrl + c scroll the selected node into view s s s find the next match in the markup, when searching is active enter return enter find the previous match in the markup, when searching is active shift + enter shift + return shift + enter breadcrumbs bar these shortcuts work when the breadcrumbs bar is focused.

Toolbox - Firefox Developer Tools
keyboard shortcuts these shortcuts work whenever the toolbox is open, no matter which tool is active.
... command windows macos linux cycle through tools left to right ctrl + ] cmd + ] ctrl + ] cycle through tools right to left ctrl + [ cmd + [ ctrl + [ toggle between active tool and settings.

Animation.currentTime - Web APIs
if the animation lacks a timeline, is inactive, or hasn't been played yet, currenttime's return value is null.
...at the start of the game, her height is set between the two extremes by setting her animation's currenttime to half her keyframeeffect's duration: alicechange.currenttime = alicechange.effect.timing.duration / 2; a more generic means of seeking to the 50% mark of an animation would be: animation.currenttime = animation.effect.getcomputedtiming().delay + animation.effect.getcomputedtiming().activeduration / 2; reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation.currenttime might get rounded depending on browser settings.

AnimationTimeline.currentTime - Web APIs
the currenttime read-only property of the web animations api's animationtimeline interface returns the timeline's current time in milliseconds, or null if the timeline is inactive.
... syntax var currenttime = animationtimeline.currenttime; value a number representing the timeline's current time in milliseconds, or null if the timeline is inactive.

AudioContext() - Web APIs
example this example creates a new audiocontext for interactive audio (optimizing for latency) and a sample rate of 44.1khz.
... var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext({ latencyhint: 'interactive', samplerate: 44100, }); specifications specification status comment web audio apithe definition of 'audiocontext()' in that specification.

AudioContextLatencyCategory - Web APIs
"interactive" the audio is involved in interactive elements, such as responding to user actions or needing to coincide with visual cues such as a video or game action.
...useful for non-interactive playback, such as playing music.

AudioContextOptions.latencyHint - Web APIs
syntax audiocontextoptions.latencyhint = "interactive"; audiocontextoptions.latencyhint = 0.2; var latencyhint = audiocontextoptions.latencyhint; value the preferred maximum latency for the audiocontext.
...in fact, the default value of latencyhint is "interactive" (meaning the browser should try to use the lowest possible and reliable latency it can).

AudioContextOptions - Web APIs
"interactive" the audio is involved in interactive elements, such as responding to user actions or needing to coincide with visual cues such as a video or game action.
...useful for non-interactive playback, such as playing music.

BluetoothRemoteGATTCharacteristic - Web APIs
bluetoothremotegattcharacteristic.startnotifications() returns a promise when navigator.bluetooth is added to the active notification context.
... bluetoothremotegattcharacteristic.stopnotifications() returns a promise when navigator.bluetooth is removed from the active notification context.

CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
ate 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.fillstyle = active ?
... 'pink' : 'lightgray'; ctx.fillrect(x, y, width, height); // button text ctx.font = '15px sans-serif'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; ctx.fillstyle = active ?

DOMException - Web APIs
transactioninactiveerror a request was placed against a transaction that is currently not active or is finished (no legacy code value and constant name).
...adds the notreadableerror, unknownerror, constrainterror, dataerror, transactioninactiveerror, readonlyerror, versionerror, operationerror, and notallowederror values.

Document.fullscreen - Web APIs
note: since this property is deprecated, you can determine if full-screen mode is active on the document by checking to see if document.fullscreenelement is not null.
... example this simple function reports whether or not full-screen mode is currently active, using the obsolete fullscreen property.

Document.timeline - Web APIs
prior to establishing the navigationstart moment, the document timeline is inactive.
... note: a document timeline that is associated with a non-active document is also considered to be inactive.

DocumentTimeline.DocumentTimeline() - Web APIs
the documenttimeline() constructor of the web animations api creates a new instance of the documenttimeline object associated with the active document of the current browsing context.
...currently the only supported option is the origintime member which specifies the zero time for the documenttimeline as a real number of milliseconds relative to the navigationstart moment of the active document for the current browsing context.

DocumentTimeline - Web APIs
constructor documenttimeline() creates a new documenttimeline object associated with the active document of the current browsing context.
... animationtimeline.currenttime returns the time value in milliseconds for this timeline or null if it is inactive.

Element.part - Web APIs
here the part attribute is used to find the shadow parts, and the part property is then used to change the part identifiers of each tab so the correct styling is applied to the active tab when tabs are clicked.
... let tabs = []; let children = this.shadowroot.children; for(let elem of children) { if(elem.getattribute('part')) { tabs.push(elem); } } tabs.foreach((tab) => { tab.addeventlistener('click', (e) => { tabs.foreach((tab) => { tab.part = 'tab'; }) e.target.part = 'tab active'; }) console.log(tab.part); }) specifications specification status comment shadow partsthe definition of 'element.part' in that specification.

ExtendableMessageEvent - Web APIs
examples in the below example a page gets a handle to the serviceworker object via serviceworkerregistration.active, and then calls its postmessage() function.
... // in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registration => { registration.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specifications specification status comment service ...

Fullscreen API - Web APIs
properties the document interface provides properties that can be used to determine if full-screen mode is supported and available, and if full-screen mode is currently active, which element is using the screen.
... if full-screen mode is already active (fullscreenelement is not null), we call exitfullscreen() on the document to shut off full-screen mode.

Using the Gamepad API - Web APIs
html5 introduced many of the necessary components for rich, interactive game development.
...doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs.

HTMLElement - Web APIs
pointerdown fired when a pointer becomes active.
... pointerup fired when a pointer is no longer active.

HTMLTrackElement: cuechange event - Web APIs
bubbles no cancelable no interface event event handler oncuechange examples on the texttrack you can set up a listener for the cuechange event on a texttrack using the addeventlistener() method: track.addeventlistener('cuechange', function () { let cues = track.activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.activecues; // array of current cues } on the track element the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed.
... let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); specifications specification status html living standardthe definition of 'cuechange' in that specification.

IDBDatabaseException - Web APIs
more specific variants of this error includes: transaction_inactive_err and read_only_err.
... transaction_inactive_err 7 a request was made against a transaction that is either not currently active or is already finished.

Basic concepts - Web APIs
a database connection can have several active transactions associated with it at a time, so long as the writing transactions do not have overlapping scopes.
...and you don't even have to wait for the transaction to start or be active to abort it.

LockedFile - Web APIs
lockedfile.active read only a flag indicating if the file can be accessed (true) or not (false).
... lockedfile.abort() makes the lockedfile inactive and cancels all ongoing operations.

MediaDeviceInfo - Web APIs
for security reasons, the label field is always blank unless an active media stream exists or the user has granted persistent permission for media device access.
...nd + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= or if one or more media streams are active, or if persistent permissions have been granted: videoinput: facetime hd camera (built-in) id=cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone) id=rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: built-in microphone id=r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= specifications specification status comment media capture and ...

MediaRecorder.onerror - Web APIs
invalidstateerror an attempt was made to stop or pause or an inactive recorder, start or resume an active recorder, or otherwise manipulate the mediarecorder while in the wrong state.
...recording stops, the mediarecorder's state becomes inactive, one last dataavailable event is sent to the mediarecorder with the remaining received data, and finally a stop event is sent.

MediaRecorder.pause() - Web APIs
when a mediarecorder object’s pause()method is called, the browser queues a task that runs the below steps: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps.
... exceptions invalidstateerror the mediarecorder is currently "inactive"; you can't pause recording if it's not active.

Capabilities, constraints, and settings - Web APIs
otherwise, we follow these steps to apply the updated constraints to the already-active stream: buildconstraints() is called to construct updated mediatrackconstraints objects for the audio track (audioconstraints) and the video track (videoconstraints).
... document.getelementbyid("stopbutton").addeventlistener("click", function() { if (videotrack) { videotrack.stop(); } if (audiotrack) { audiotrack.stop(); } videotrack = audiotrack = null; videoelement.srcobject = null; }); 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.

MouseEvent.getModifierState() - Web APIs
the mouseevent.getmodifierstate() method returns the current state of the specified modifier key: true if the modifier is active (i.e., the modifier key is pressed or locked), otherwise, false.
... syntax var active =​ event.getmodifierstate(keyarg); returns a boolean parameters keyarg a modifier key value.

Page Visibility API - Web APIs
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.
... timers such as settimeout() are throttled in background/inactive tabs to help improve performance.

PaymentRequest.show() - Web APIs
note: in reality, despite the fact that the specification says this can't be done, some browsers, including firefox, support multiple active payment requests at a time.
... invalidstateerror the promise rejects with an invalidstateerror if the same payment has already been shown for this request (its state is interactive because it is being shown already).

Multi-touch interaction - Web APIs
in this application, when a pointer is placed down on an element, the background color of the element changes, depending on the number of active touch points the element has.
...in the target's cache var cache = get_cache(ev); cache.push(ev); } function remove_event(ev) { // remove this event from the target's cache var cache = get_cache(ev); for (var i = 0; i < cache.length; i++) { if (cache[i].pointerid == ev.pointerid) { cache.splice(i, 1); break; } } } update background color the background color of the touch areas will change as follows: no active touches is white; one active touch is yellow; two simultaneous touches is ping and three or more simultaneous touches is lightblue.

RTCDTMFSender.insertDTMF() - Web APIs
as long as the connection is active, you can send tones at any time.
... return value undefined exceptions invalidstateerror the dtmf tones couldn't be sent because the track has been stopped, or is in a read-only or inactive state.

RTCStatsReport - Web APIs
candidate pairs other than the currently active pair for the transport are deleted when the rtcpeerconnection changes its rtcpeerconnection.icegatheringstate to new during an ice restart.
... the active candidate pair is deleted after the transport switches to another candidate pair; this change cannot be detected otherwise.

RTCStatsType - Web APIs
candidate pairs other than the currently active pair for the transport are deleted when the rtcpeerconnection changes its rtcpeerconnection.icegatheringstate to new during an ice restart.
... the active candidate pair is deleted after the transport switches to another candidate pair; this change cannot be detected otherwise.

SVGAnimationElement: beginEvent event - Web APIs
it will be raised each time the element begins the active duration (i.e., when it restarts, but not when it repeats).
...scheduled or interactive) timeline play, as well as in the case that the element was begun with a dom method.

SVGAnimationElement: endEvent event - Web APIs
the endevent event of the svganimationelement interface is fired when at the active end of the animation is reached.
...scheduled or interactive) timeline play, as well as in the case that the element was ended with a dom method.

Selection - Web APIs
selection and input focus selection and input focus (indicated by document.activeelement) have a complex relationship that varies by browser.
... this is not the same as the focused element of the document, as returned by document.activeelement.

Sensor - Web APIs
accelerometer ambientlightsensor gyroscope linearaccelerationsensor magnetometer orientationsensor properties sensor.activated read only returns a boolean indicating whether the sensor is active.
... sensor.onactivate called when one of the sensor interface's becomes active.

ServiceWorker.onstatechange - Web APIs
var serviceworker; if (registration.installing) { serviceworker = registration.installing; document.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function(e) { logstate(e.target.state); }); } note that when statechange fires, the service worker's references may have changed.
... for example: navigator.serviceworker.register(..).then(function(swr) { swr.installing.state == "installing" swr.installing.onstatechange = function() { swr.installing == null; // at this point, swr.waiting or swr.active might be true.

ServiceWorker - Web APIs
a serviceworker object is available in the serviceworkerregistration.active property, and the serviceworkercontainer.controller property — this is a service worker that has been activated and is controlling the page (the service worker has been successfully registered, and the controlled page has been reloaded.) the serviceworker interface is dispatched a set of lifecycle events — install and activate — and functional events including fetch.
...egistration) { var serviceworker; if (registration.installing) { serviceworker = registration.installing; document.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { // logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function (e) { // logstate(e.target.state); }); } }).catch (function (error) { // someth...

ServiceWorkerContainer.controller - Web APIs
the controller read-only property of the serviceworkercontainer interface returns a serviceworker object if its state is activated (the same object returned by serviceworkerregistration.active).
... this property returns null if the request is a force refresh (shift + refresh) or if there is no active worker.

ServiceWorkerGlobalScope: message event - Web APIs
bubbles no cancelable no interface extendablemessageevent event handler property onmessage examples in the below example a page gets a handle to the serviceworker object via serviceworkerregistration.active, and then calls its postmessage() function.
... // in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registration => { registration.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specifications specification status service workersthe ...

ServiceWorkerRegistration.getNotifications() - Web APIs
origins can have many active but differently-scoped service worker registrations.
... notifications created by one service worker on the same origin will not be available to other active services workers on that same origin.

ServiceWorkerRegistration.showNotification() - Web APIs
the shownotification() method of the serviceworkerregistration interface creates a notification on an active service worker.
... requireinteraction: indicates that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it.

Streams API concepts - Web APIs
only one reader can read a stream at a time; when a reader is created and starts reading a stream (an active reader), we say it is locked to it.
... when a writer is created and starts writing to a stream (an active writer), it is said to be locked to it.

TextTrack: cuechange event - Web APIs
bubbles no cancelable no interface event event handler property globaleventhandlers.oncuechange examples on the texttrack you can set up a listener for the cuechange event on a texttrack using the addeventlistener() method: track.addeventlistener('cuechange', function () { let cues = track.activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.activecues; // array of current cues } on the track element the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed.
... let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); specifications specification status html living standardthe definition of 'cuechange' in that specification.

VideoTrackList.onchange - Web APIs
the videotracklist property onchange is an event handler which is called when the change event occurs, indicating that a videotrack in the videotracklist has been made active.
... syntax videotracklist.onchange = eventhandler; value set onchange to a function that should be called whenever a track is made active.

VideoTrackList - Web APIs
onchange an event handler to be called when the change event occurs — that is, when the value of the selected property for a track has changed, due to the track being made active or inactive.
... change fired when a video track has been made active or inactive.

WebGLRenderingContext.getParameter() - Web APIs
constant returned type description gl.active_texture glenum gl.aliased_line_width_range float32array (with 2 elements) gl.aliased_point_size_range float32array (with 2 elements) gl.alpha_bits glint gl.array_buffer_binding webglbuffer gl.blend glboolean gl.blend_color float32array (with 4 values) gl.blend_dst_alpha glenum ...
... gl.transform_feedback_active glboolean gl.transform_feedback_binding webgltransformfeedback or null see bindtransformfeedback.

WebGL: 2D and 3D graphics for the web - Web APIs
webgl (web graphics library) is a javascript api for rendering high-performance interactive 3d and 2d graphics within any compatible web browser without the use of plug-ins.
... reference standard interfaces webglrenderingcontext webgl2renderingcontext webglactiveinfo webglbuffer webglcontextevent webglframebuffer webglprogram webglquery webglrenderbuffer webglsampler webglshader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject extensions angle_instanced_arrays ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_b...

Signaling and video calling - Web APIs
this is where interactive connectivity establishment (ice) comes in.
... optionally, see rfc 8445: interactive connectivity establishment, section 2.3 ("negotiating candidate pairs and concluding ice") if you want greater understanding of how this process is completed inside the ice layer.

Inputs and input sources - Web APIs
by combining these two types of input with the changing of viewing position and/or orientation through the headset or other mechanisms, you can create an interactive simulated environment.
... when the user points a device along a target ray in your 3d space and then triggers a select action, the following events are sent to the active xrsession: a selectstart event, indicating that the user has performed the activity that begins the primary action.

WebXR permissions and security - Web APIs
the document is considered trustworthy, in that it is responsible and is both currently active and has focus.
...a trustworthy document is one which is both responsible and active, and which currently has focus.

Web Animations API Concepts - Web APIs
this means we can use it to create and manipulate css-like animations that go from one pre-defined state to another, or we can use variables, loops, and callbacks to create interactive animations that adapt and react to changing inputs.
...as of this writing, there’s only one kind of timeline object: the one based on the active document’s timeline.

Background audio processing using AudioWorklet - Web APIs
in general, the lifetime policy of any audio node is simple: if the node is still considered to be actively processing audio, it will continue to be used.
... in the case of an audioworkletnode, the node is considered to be active if its process() function returns true and the node is either generating content as a source for audio data, or is receiving data from one or more inputs.

Window.getComputedStyle() - Web APIs
the window.getcomputedstyle() method returns an object containing the values of all css properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
... <style> h3::after { content: ' rocks!'; } </style> <h3>generated content</h3> <script> var h3 = document.queryselector('h3'); var result = getcomputedstyle(h3, ':after').content; console.log('the generated content is: ', result); // returns ' rocks!' </script> notes the returned cssstyledeclaration object contains active values for css property longhand names.

Privileged features - Web APIs
alwaysraised if on, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.
... alwaysontop if on, the new window will always be displayed on top of all other windows (browser windows and otherwise), regardless of whether it is active or not.

WindowOrWorkerGlobalScope.setTimeout() - Web APIs
timeouts in inactive tabs throttled to ≥ 1000ms to reduce the load (and associated battery usage) from background tabs, timeouts are throttled to firing no more often than once per second (1,000 ms) in inactive tabs.
... firefox 50 no longer throttles background tabs if a web audio api audiocontext is actively playing sound.

Using XMLHttpRequest in IE6 - Web APIs
xmlhttprequest was first introduced by microsoft in internet explorer 5.0 as an activex control.
...sers, you can create a new xmlhttprequest object using the following code: var request = new xmlhttprequest() however, if you need to also support internet explorer 6 and older, you need to extend your code like this: if (window.xmlhttprequest) { //firefox, opera, ie7, and other browsers will use the native object var request = new xmlhttprequest(); } else { //ie 5 and 6 will use the activex control var request = new activexobject("microsoft.xmlhttp"); } see also using xmlhttprequest ...

XRSession.oninputsourceschange - Web APIs
the oninputsourcechange attribute of the xrsession object is the event handler for the inputsourcechange event, which is dispatched when session's list of active xr input sources has changed.
...} example xrsession.oninputsourceschange = function(event) { console.log("the list of active xr input sources has changed.") } specifications specification status comment webxr device apithe definition of 'xrsession.oninputsourceschange' in that specification.

XRSystem: requestSession() - Web APIs
while only one immersive vr session can be active at a time, multiple inline sessions can be in progress at once.
... exceptions this method doesn't throw true exceptions; instead, it rejects the returned promise, passing into it a domexception whose name is one of the following: invalidstateerror the requested session mode is immersive-vr but there is already an immersive vr session either currently active or in the process of being set up.

Using the aria-hidden attribute - Accessibility
the aria-hidden attribute can either expose or hide non-interactive content from the accessibility api.
... 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: cell role - Accessibility
table identifies the cell as being part of a non-interactive table structure containing data arranged in rows and columns, similar to the native html <table> element.
...grid identifies a cell as being part of a possibly interactive table structure containing data arranged in rows and columns, similar to the native <table> html element.

ARIA: Main role - Accessibility
if a document contains two main roles, say updating page content when triggered by javascript, the inactive main role's presence should be removed from assistive technology via techniques such as toggling the hidden attribute.
... <main> <h1>active <code>main</code> element</h1> <!-- content --> </main <main hidden> <h1>hidden <code>main</code> element</h1> <!-- content --> </main> best practices prefer html using the <main> element will automatically communicate a section has a role of main.

ARIA: rowgroup role - Accessibility
it identifies the row as being part of a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element.
...it identifies the row as being part of a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element.

ARIA: checkbox role - Accessibility
the checkbox role is used for checkable interactive controls.
... since a checkbox is an interactive control, it must be focusable and keyboard accessible.

WAI-ARIA Roles - Accessibility
to be supported, the cell must be nested in an element with the role of row.aria: checkbox rolethe checkbox role is used for checkable interactive controls.
...should be used on an element that wraps an element with an insertion role, and one with a deletion role.aria: switch rolethe aria switch role is functionally identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off."aria: tab rolethe aria tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel.aria: table rolethe table value of the aria role attribute identifies the element containing the role as having a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element.aria: tabpanel rolethe aria tabpanel role indicatesaria: textbox rolethe textbox rol...

::part() - CSS: Cascading Style Sheets
custom-element::part(foo) { /* styles to apply to the `foo` part */ } syntax ::part( <ident>+ ) examples html <template id="tabbed-custom-element"> <style type="text/css"> *, ::before, ::after { box-sizing: border-box; padding: 1rem; } :host { display: flex; } </style> <div part="tab active">tab 1</div> <div part="tab">tab 2</div> <div part="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-co...
...lor: #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.attachshadow({ mode: "open" }); this.shadowroot.appendchild(template.content); } }); result specifications specification status comment shadow partsthe definition of '::part' in that specification.

:hover - CSS: Cascading Style Sheets
/* selects any <a> element when "hovered" */ a:hover { color: orange; } styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :visited, or :active) that has at least equal specificity.
... to style links appropriately, put the :hover rule after the :link and :visited rules but before the :active one, as defined by the lvha-order: :link — :visited — :hover — :active.

:link - CSS: Cascading Style Sheets
/* selects any <a> that has not been visited yet */ a:link { color: red; } styles defined by the :link pseudo-class will be overridden by any subsequent link-related pseudo-class (:active, :hover, or :visited) that has at least equal specificity.
... to style links appropriately, put the :link rule before all other link-related rules, as defined by the lvha-order: :link — :visited — :hover — :active.

:visited - CSS: Cascading Style Sheets
/* selects any <a> that has been visited */ a:visited { color: green; } styles defined by the :visited pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :active) that has at least equal specificity.
... to style links appropriately, put the :visited rule after the :link rule but before the :hover and :active rules, as defined by the lvha-order: :link — :visited — :hover — :active.

Using Media Queries for Accessibility - CSS: Cascading Style Sheets
values active indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation.
... @media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } ...

Pseudo-classes - CSS: Cascading Style Sheets
index of standard pseudo-classes :active :any-link :blank :checked :current :default :defined :dir() :disabled :drop :empty :enabled :first :first-child :first-of-type :fullscreen :future :focus :focus-visible :focus-within :has() :host :host() :host-context() :hover :indeterminate :in-range :invalid :is() :lang() :last-child :last-of-type :left :link :local-link :not() :nth-ch...
... css level 1 recommendation defined :link, :visited and :active, but without the associated semantic meaning.

align-self - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

all - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

<angle> - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

animation-delay - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

animation-direction - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

animation-duration - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

animation-fill-mode - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

animation-iteration-count - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

animation-name - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

animation-play-state - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

animation-timing-function - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

animation - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

backface-visibility - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background-attachment - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background-blend-mode - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background-clip - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background-image - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background-origin - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background-position-x - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background-position-y - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background-position - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background-repeat - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background-size - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

background - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

<basic-shape> - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

block-size - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-block-end-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-block-end-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-block-end-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-block-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-block-start-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-block-start-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-block-start-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-block-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-bottom-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-bottom-left-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-bottom-right-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-bottom-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-bottom-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-bottom - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-collapse - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-image-outset - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-image-repeat - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-image-slice - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-image-source - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-image-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-image - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-inline-end-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-inline-end-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-inline-end-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-inline-start-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-inline-start-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-inline-start-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-left-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-left-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-left-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-left - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-right-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-right-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-right-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-right - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-spacing - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-top-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.