Index - Web APIs
778 domtokenlist.toggle() api, dom, domtokenlist, method, reference, toggle the toggle() method of the domtokenlist interface removes a given token from the list and returns false.
... 1171 element.toggleattribute() api, element, method, reference the toggleattribute() method of the element interface toggles a boolean attribute (removing it if it is present and adding it if it is not present) on the given element.
... 1606 htmldetailselement: toggle event event, htmldetailselement, reference, details, events, toggle the toggle event fires when the open/closed state of a <details> element is toggled.
...And 5 more matches

Border-image generator - CSS: Cascading Style Sheets
s/7b/dd37c1d691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="border5"/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="sep...
...px; opacity: 0.5; background-color: #fff; box-shadow: 0px 0px 3px 1px #bababa; } #image-gallery .image[selected="true"] { box-shadow: 0px 0px 3px 1px #3bba52; opacity: 1; } #image-gallery .image:hover { cursor: pointer; box-shadow: 0px 0px 3px 1px #30ace5; opacity: 1; } #image-gallery[data-collapsed='true'] { margin-top: -100px; } /* load menu */ #load-actions { margin: 10px 0; } #toggle-gallery { width: 30px; height: 25px; margin: 10px; color: #fff; background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); background-repeat: no-repeat; background-position: top 4px center; background-color: #888888 !important; border-radius: 2px; float: left; } #toggle-gallery:hover { cursor: pointer; } #toggle-gallery[data-action='show'] { background-im...
...age: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png'); background-color: #888888 !important; } #toggle-gallery[data-action='hide'] { background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); } .button { width: 100px; height: 25px; margin: 10px; color: #fff; text-align: center; font-size: 12px; line-height: 25px; background-color: #379b4a; border-radius: 2px; float: left; } .button:hover { cursor: pointer; background-color: #3380c4; } #load-image { float: left; } #load-remote { width: 30px; background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png'); background-repeat: no-repeat; background-position: center center; } #remote-url { width: 200px; height: 23px; margin: 10px; padding: 0 5px; border:...
...And 5 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
the dom level 1 methods, as shown in table 1, are commonly used to move an element to a certain position and toggle its visibility (menus, animations).
...however, mozilla allows you to toggle between html and css mode using the usecss execcommand and toggling it between true and false.
...rich text editing commands command name description argument bold toggles the selection's bold attribute.
...And 4 more matches

Tree View Details - Archive of obsolete content
when the user clicks the twisty to open a row, the tree will call the view's toggleopenstate method.
... note: as of this writing (gecko 2.0), custom nsitreeview implementations must be prepared to handle a call to toggleopenstate for any row index which returns true for a call to iscontainer, regardless of whether the container is empty.
... review of the methods here is a review of the methods needed to implement hierarchical views: getlevel(row) hasnextsibling(row, afterindex) getparentindex(row) iscontainer(row) iscontainerempty(row) iscontaineropen(row) toggleopenstate(row) the afterindex argument to hasnextsibling function is used as optimization to only start looking for the next sibling after that point.
...And 4 more matches

Vue conditional rendering: editing existing todos - Learn web development
to do this, we will take advantage of vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view, and an edit view where you can update todo item labels.
...specifically, we need to add a variable to track if the item is being edited, and a button to toggle that variable.
... <template> <div class="stack-small"> <div class="custom-checkbox"> <input type="checkbox" class="checkbox" :id="id" :checked="isdone" @change="$emit('checkbox-changed')" /> <label :for="id" class="checkbox-label">{{label}}</label> </div> <div class="btn-group"> <button type="button" class="btn" @click="toggletoitemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> <button type="button" class="btn btn__danger" @click="deletetodo"> delete <span class="visually-hidden">{{label}}</span> </button> </div> </div> </template> we’ve added a wrapper <div> around the whole template for layout purposes.
...And 4 more matches

Accessible Toolkit Checklist
the high contrast theme can be toggled dynamically with leftalt+leftshift+printscreen expose the spi_getscreenreader flag to xml/scripts so that apps can alter behavior use system highlight color where possible for item selection, but never use that exact color in more than 1 place at a time, otherwise screen reader will read everything with that color whenever highlight changes pay attention to spi_getcaretwidth fo...
... in autocomplete text fields, make sure that the left or right arrow closes the popup and starts moving through the text letter by letter msaa support, including accessible value that holds text, protected for password fields and readonly for read-only fields checkboxes space bar to toggle msaa support, including checkbox state and statechange event sliders keyboard support for moving slider: arrow keys, home, end, pgup, pgdn msaa support including role_slider, accessible value, value change events progress bars msaa support including accessible name, value, name and value change events grouped navigation widgets men...
... lists and combo boxes when a list is tabbed to, select the first item if nothing else is already selected f4, alt+down or alt+up toggle a combo box open and closed escape closes combo box if it was open (be careful not to have it cancel entire dialog) up/down arrow key navigation.
...And 4 more matches

Document.execCommand() - Web APIs
bold toggles bold on/off for the selection or at the insertion point.
... italic toggles italics on/off for the selection or at the insertion point.
... strikethrough toggles strikethrough on/off for the selection or at the insertion point.
...And 4 more matches

Controlling multiple parameters with ConstantSourceNode - Web APIs
html the html content for this example is primarily a button to toggle the oscillator tones on and off and an <input> element of type range to control the volume of two of the three oscillators.
... function setup() { context = new (window.audiocontext || window.webkitaudiocontext)(); playbutton = document.queryselector("#playbutton"); volumecontrol = document.queryselector("#volumecontrol"); playbutton.addeventlistener("click", toggleplay, false); volumecontrol.addeventlistener("input", changevolume, false); gainnode1 = context.creategain(); gainnode1.gain.value = 0.5; gainnode2 = context.creategain(); gainnode3 = context.creategain(); gainnode2.gain.value = gainnode1.gain.value; gainnode3.gain.value = gainnode1.gain.value; volumecontrol.value = gainnode1.gain.value; constantnode = context.createconstantso...
... then we assign a handler for the play button's click event (see toggling the oscillators on and off for more on the toggleplay() method), and for the volume slider's input event (see controlling the linked oscillators to see the very short changevolume() method).
...And 4 more matches

Window - Web APIs
window.locationbar read only returns the locationbar object, whose visibility can be toggled in the window.
... window.menubar read only returns the menubar object, whose visibility can be toggled in the window.
... window.personalbar read only returns the personalbar object, whose visibility can be toggled in the window.
...And 4 more matches

XForms Switch Module - Archive of obsolete content
the module defines for this switch, case and toggle elements.
... switch element the element (see the spec) is used in conjunction with case and toggle elements.
...the toggle element is an action that when triggered will make a case selected and visible and thereby hiding all other case elements contained by the same switch.
...And 3 more matches

React interactivity: Editing, filtering, conditional rendering - Learn web development
k has the same id as the edited task if (id === task.id) { // return {...task, name: newname} } return task; }); settasks(editedtasklist); } pass edittask into our <todo /> components as a prop in the same way we did with deletetask: const tasklist = tasks.map(task => ( <todo id={task.id} name={task.name} completed={task.completed} key={task.id} toggletaskcompleted={toggletaskcompleted} deletetask={deletetask} edittask={edittask} /> )); now open todo.js.
...="submit" classname="btn btn__primary todo-edit"> save <span classname="visually-hidden">new name for {props.name}</span> </button> </div> </form> ); const viewtemplate = ( <div classname="stack-small"> <div classname="c-cb"> <input id={props.id} type="checkbox" defaultchecked={props.completed} onchange={() => props.toggletaskcompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger" ...
...to see the editing template, you will have to change the default isediting state from false to true in your code for now; we will look at making the edit button toggle this in the next section!
...And 3 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
toggling and removing todos let's add some functionality to toggle the task status.
...let's add a handler to the on:click event of the checkbox input to toggle the completed value.
...in our app, the todos array value is updated directly every time a todo is toggled or deleted, and so svelte will update the dom automatically.
...And 3 more matches

ARIA: listbox role - Accessibility
if list items are checkable, space can be used to toggle checkboxes.
... for selectable list items, space toggles their selection, shift+space can be used to select contiguous items, ctrl+arrow moves without selecting, and ctrl+space can be used to select non-contiguous items.
... shift + down arrow (optional): moves focus to and toggles the selected state of the next option.
...And 3 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
down { width: 130px; height: 24px; } #controls .ui-dropdown-select { line-height: 24px; } #controls .ui-dropdown-list { height: 66px; line-height: 2.5em; overflow: hidden; } #delete-axis { margin: 0 38px 0 0; float: right !important; } /* tool controls */ #tool-section .property .name { width: 150px; } #canvas-bg { width: 16px; height: 16px; margin: 5px; background: url("images/toggle-background.png") center right no-repeat; } #canvas-bg:hover { cursor: pointer; } #canvas-bg[data-alpha='false'] { background-position: center left; } #canvas-bg[data-alpha='true'] { background-position: center right; } /* order gradients */ #order { margin-left: 24px; } #gradient-axes { width: 100%; height: 30px; padding: 0 0 0 15px; display: table; position: relative; } #gradient...
...ist'; select.classname = 'ui-dropdown-select'; while (node.firstelementchild !== null) { option = node.firstelementchild; option_value = option.getattribute('data-value'); if (option_value === null) option.setattribute('data-value', uval); list.appendchild(node.firstelementchild); uval++; } node.appendchild(select); node.appendchild(list); select.onclick = this.toggle.bind(this); list.onclick = this.updatevalue.bind(this); document.addeventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; dropdown.pro...
...totype.toggle = function toggle(state) { if (typeof(state) === 'boolean') this.state = state === false ?
...And 3 more matches

Adding a Button to the Toolbar - Archive of obsolete content
to add a button to the toolbar, use the action button or toggle button modules.
... attaching a panel if you need to attach a panel to a button, use the toggle button api.
... this is just like the action button api except it adds a boolean checked property which is toggled whenever the button is checked.
...And 2 more matches

Index - Archive of obsolete content
119 ui/button/toggle add a toggle button to the firefox user interface.
... 1322 togglehighlight no summary!
... 1323 toggleitemselection xul methods, xul reference no summary!
...And 2 more matches

nsIDOMWindowInternal
prompter nsiprompt readonly: menubar nsidombarprop readonly: returns the menubar object, whose visibility can be toggled in the window.
... toolbar nsidombarprop readonly: returns the toolbar object, whose visibility can be toggled in the window.
... locationbar nsidombarprop readonly: returns the locationbar object, whose visibility can be toggled in the window.
...And 2 more matches

nsITreeView
performactiononcell(in wstring action, in long row, in nsitreecolumn col); void performactiononrow(in wstring action, in long row); void selectionchanged(); void setcelltext(in long row, in nsitreecolumn col, in astring value); void setcellvalue(in long row, in nsitreecolumn col, in astring value); void settree(in nsitreeboxobject tree); void toggleopenstate(in long index); attributes attribute type description rowcount long the total number of rows in the tree (including the offscreen rows).
... note: nsitreeview implementations must be prepared to handle a call to toggleopenstate for any row index which returns true for a call to iscontainer, even if iscontainerempty returns true.
... toggleopenstate() called on the view when an item is opened or closed, e.g., by clicking the twisty, keyboard access, et cetera.
...And 2 more matches

Toolbox - Firefox Developer Tools
there are a few different ways to open the toolbox: select "toggle tools" from the web developer menu (under "tools" on os x and linux, or "firefox" on windows) click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "toggle tools" activate any tool hosted in the toolbox (for example, the javascript debugger or the page inspector) press ctrl + shift + i on windows and linux, or cmd + opt + i on os x.
...by default this array includes: toggle split console responsive design mode select a frame as the currently targeted document (this is only included by default from firefox 41 onwards).
... the following tools are not included in the toolbar by default, but you can add them in the settings: highlight painted area 3d view (note that this is not available in firefox 40) scratchpad grab a color from the page take a screenshot of the entire page: take a screenshot of the complete web page and saves it in your downloads directory toggle rulers for the page measure a portion of the page: measure a part of the website by selecting areas within the page toolbox controls finally there's a row of buttons to: close the window toggle the window between attached to the bottom of the browser window, and attached to the side of the browser window toggle the window between standalone and attached to the browser window access developer tool settings settings see the separate...
...And 2 more matches

ui - Archive of obsolete content
this module exports constructors for the following: actionbutton togglebutton frame toolbar sidebar each object has its own reference page, linked above: for all the details please refer to the reference page.
...if it's standalone, it appears in the toolbar at the top right of the browser window: togglebutton a toggle button is a special kind of button that's for representing a binary on/off state, like a checkbox.
... so they have a checked property which is toggled when the user clicks the button, and the icon gets a "pressed" look when the button is checked.
... from firefox 30 onwards, you can attach panels to toggle buttons, by passing the button into the panel's constructor or its show() method: frame a frame enables you to create an html iframe, using bundled html, css and javascript.

UI pseudo-classes - Learn web development
first of all, the html is a simple form containing text inputs, plus a checkbox to toggle disabling the billing address on and off.
... now finally, we've used some javascript to toggle the disabling of the billing address fields: // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').addeventlistener('change', togglebilling); }, false); function togglebilling() { // select the billing text fields let billingitems = document.queryselect...
...orall('#billing input[type="text"]'); // select the billing text labels let billinglabels = document.queryselectorall('.billing-label'); // toggle the billing text fields and labels for (let i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; if(billinglabels[i].getattribute('class') === 'billing-label disabled-label') { billinglabels[i].setattribute('class', 'billing-label'); } else { billinglabels[i].setattribute('class', 'billing-label disabled-label'); } } } it uses the change event to let the user enable/disable the billing fields, and toggle the styling of the associated labels.
... you can see the example in action below (also see it live here, and see the source code): read-only and read-write in a similar manner to :disabled and :enabled, the :read-only and :read-write pseudo-classes target two states that form inputs toggle between.

Ember app structure and componentization - Learn web development
update the application.hbs file again so its content looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > <section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>buy movie tickets</label> <button type="button" clas...
...s="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>go to movie</label> <button type="button" class="destroy" title="remove this todo" ></button> </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="#">ac...
... the header.hbs file should be updated to contain the following: <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > todo-list.hbs should be updated to contain this chunk of code: <section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <todo /> <todo /> </ul> </section> note: the only non-html in this new todo-list.hbs is the <todo /> component invocation.
... add the following into the todo.hbs file: <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>buy movie tickets</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> footer.hbs should be updated to contain the following: <footer class="footer"> <span class="todo-count"> ...

Beginning our React todo list - Learn web development
> </h2> <input type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" /> <button type="submit" classname="btn btn__primary btn__lg"> add </button> </form> <div classname="filters btn-group stack-exception"> <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"> ta...
...sks</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 </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <but...
...for example: <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> here, aria-pressed tells assistive technology (like screen readers) that the button can be in one of two states: pressed or unpressed.
...f; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-betwe...

All keyboard shortcuts - Firefox Developer Tools
ound (if the toolbox is in a separate window and not in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 close toolbox (if the toolbox is in a separate window and in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 open web console 1 ctrl + shift + k cmd + opt + k ctrl + shift + k toggle "pick an element from the page" (opens the toolbox and/or focus the inspector tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f7 shift + f7 * shift + f7 open profiler shift + f5 shift + f5 * shift + f5 open network monitor 2 ctrl + shift + e cmd + opt + e ctrl + shift + e toggle responsive desig...
... 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.
... f1 f1 f1 toggle toolbox between the last 2 docking modes ctrl + shift + d cmd + shift + d ctrl + shift + d toggle split console (except if console is the currently selected tool) esc esc esc these shortcuts work in all tools that are hosted in the toolbox.
...shift + f ctrl + shift + f find next in the current file ctrl + g cmd + g ctrl + g search for scripts by name ctrl + p cmd + p ctrl + p resume execution when at a breakpoint f8 f8 1 f8 step over f10 f10 1 f10 step into f11 f11 1 f11 step out shift + f11 shift + f11 1 shift + f11 toggle breakpoint on the currently selected line ctrl + b cmd + b ctrl + b toggle conditional breakpoint on the currently selected line ctrl + shift + b cmd + shift + b ctrl + shift + b 1.

Migrating from Firebug - Firefox Developer Tools
toggle pseudo-classes firebug lets you toggle the css pseudo-classes :hover, :active and :focus for an element via the options menu of the style side panel.
...the first one is to toggle them via the pseudo-class panel within the rules side panel.
... the second one is to right-click and element within the node view and toggle the pseudo-classes via the context menu.
...it also allows you to toggle individual style sheets.

Page inspector 3-pane mode - Firefox Developer Tools
it is enabled via a toggle control found in the tabs pane on the left hand side.
... press the toggle control to toggle between the 2- and 3-pane views.
... devtools.inspector.split-sidebar-toggle — this adds the ui toggle button that lets you toggle it on and off.
... in firefox 61, these preferences got renamed to: devtools.inspector.three-pane-enabled devtools.inspector.three-pane-toggle you need to flip these two to true in release/beta to test the feature in firefox 61.

CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
clicking the icon toggles the display of a grid overlay on the page, which appears over the element, laid out like a grid to show the position of its grid lines and tracks: the overlay is still shown when you select other elements, so you can edit related css properties and see how the grid is affected.
...allows overlay views to be toggled on and off.
... overlay grid each grid present on a page has an entry in the "overlay grid" section: each entry consists of (from left to right): a checkbox allowing you to toggle the grid overlay for that grid on and off.
...clicking this also toggles the grid overlay on and off.

Element.requestFullscreen() - Web APIs
to learn when other code has toggled full-screen mode on and off, you should establish listeners for the fullscreenchange event on the document.
... it's also important to listen for fullscreenchange to be aware when, for example, the user manually toggles full-screen mode, or when the user switches applications, causing your application to temporarily exit full-screen mode.
... examples this function toggles the first <video> element found in the document into and out of full-screen mode.
... function togglefullscreen() { let elem = document.queryselector("video"); if (!document.fullscreenelement) { elem.requestfullscreen().catch(err => { alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } if the document isn't already in full-screen mode—detected by looking to see if document.fullscreenelement has a value—we call the video's requestfullscreen() method.

Color masking - Web APIs
note that the calls to colormask() only occur when the user clicks on one of the toggle buttons.
... <p>tinting the displayed colors with color masking.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <button id="red-toggle">on</button> <button id="green-toggle">on</button> <button id="blue-toggle">on</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-family : serif; font-size : inherit; font-weight : 900; color : white; margin : auto;...
... padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); var canvas = document.queryselector("canvas"); var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation, 1000); var mask = [true, true, true]; var redtoggle = document.queryselector("...
...#red-toggle"), greentoggle = document.queryselector("#green-toggle"), bluetoggle = document.queryselector("#blue-toggle"); redtoggle.addeventlistener("click", setcolormask, false); greentoggle.addeventlistener("click", setcolormask, false); bluetoggle.addeventlistener("click", setcolormask, false); function setcolormask(evt) { var index = evt.target === greentoggle && 1 || evt.target === bluetoggle && 2 || 0; mask[index] = !mask[index]; if (mask[index] === true) evt.target.innerhtml="on"; else evt.target.innerhtml="off"; gl.colormask(mask[0], mask[1], mask[2], true); drawanimation(); }; function drawanimation () { var color = getrandomcolor(); gl.clearcolor(color[0], color[1], color[2], 1.0); gl.clear(gl.colo...

ARIA Test Cases - Accessibility
- - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - toggle button buttons with icons and without text -- under construction.
... only the bold/italic buttons should be toggle buttons, and they aren't currently toggleable.
... at should indicate that it is a toggle button (not a regular button) markup used: role="button" aria-pressed="false" (or true) notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass in non-v-pc-mode, button's state is announced when pressed, or when toggling it to pressed.
...ws 9 - - n/a n/a jaws 10 pass fail (changes not spoken) fail fail voiceover (leopard) n/a n/a - fail window-eyes pass pass fail (unchecked presented as checked, ie exposing incorrect state for no aria-checked attribute) fail fail nvda fail on #2 -- repetitive text spoken, first checkbox toggle speaks incorrect state n/a fail fail zoom (leopard) pass n/a pass pass zoomtext pass - fail fail orca pass n/a - - tristate checkbox testcases: both remove or unset for unchecked case expected at behavior: screen reader should announce accessible name, role and state.

:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.
...checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } result toggling elements with a hidden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using javascript.
... html <input type="checkbox" id="expand-toggle" /> <table> <thead> <tr><th>column #1</th><th>column #2</th><th>column #3</th></tr> </thead> <tbody> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable...
... { visibility: collapse; background: #ddd; } /* style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: #ccc; } result image gallery you can use the :checked pseudo-class to build an image gallery with full-size images that show only when the user clicks on a thumbnail.

:fullscreen - CSS: Cascading Style Sheets
html the page's html looks like this: <h1>mdn web docs demo: :fullscreen pseudo-class</h1> <p>this demo uses the <code>:fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using css.</p> <button id="fs-toggle">toggle fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode.
...the first establishes the background color of the "toggle full-screen mode" button when the element is not in a full-screen state.
... #fs-toggle:not(:fullscreen) { background-color: #afa; } when the document is in full-screen mode, the following css applies instead, setting the background color to a pale shade of red.
... #fs-toggle:fullscreen { background-color: #faa; } specifications specification status comment fullscreen apithe definition of ':fullscreen' in that specification.

Color picker tool - CSS: Cascading Style Sheets
background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat; position: absolute; top: 0; left: 0; display: none; } #canvas .sample .delete { width: 10px; height: 10px; margin: 5px; background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; position: absolute; top: 0; right: 0; display: none; } /** * canvas controls */ #canvas .toggle-bg { width: 16px; height: 16px; margin: 5px; background: url("images/canvas-controls.png") center left no-repeat; position: absolute; top: 0; right: 0; } #canvas .toggle-bg:hover { cursor: pointer; } #canvas[data-bg='true'] { background: none; } #canvas[data-bg='true'] .toggle-bg { background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat; ...
...node.setattribute('data-tutorial', 'dblclick'); } } }; var setactivesample = function setactivesample(sample) { colorpickersamples.unsetactivesample(); tool.unsetvoidsample(); unsetactivesample(); active = sample; active.activate(); }; var unsetactivesample = function unsetactivesample() { if (active) active.deactivate(); active = null; }; var createtogglebgbutton = function createtogglebgbutton() { var button = document.createelement('div'); var state = false; button.classname = 'toggle-bg'; canvas.appendchild(button); button.addeventlistener('click', function() { console.log(state); state = !state; canvas.setattribute('data-bg', state); }); }; var init = function init() { canvas = getelembyid('canvas'); z...
...index = getelembyid('zindex'); canvas.addeventlistener('dragover', allowdropevent); canvas.addeventlistener('drop', canvasdropevent); createtogglebgbutton(); uicolorpicker.subscribe('picker', function(color) { if (active) active.updatecolor(color); }); inputslidermanager.subscribe('z-index', function (value) { if (active) active.updatezindex(value); }); uicomponent.makeresizable(canvas, 'height'); }; return { init : init, unsetactivesample : unsetactivesample }; })(); var statebutton = function statebutton(node, state) { this.state = false; this.callback = null; node.addeventlistener('click', function() { this.state = !this.state; if (typeof this.callback === "function") this.callback(this.state); }.bind(this)); }; state...
...the "eyedropper" style color picker box can be toggled between hsl or hsv format.

Responsive Navigation Patterns - Progressive web apps (PWAs)
pattern 1: top toggle menu in this pattern, as the screen width is reduced, the top navigation items rearrange until there is not enough space.
...in the smallest screen, all navigation items live in a toggle menu, and the user has to tap to expand the toggle menu.
... pros: one button in header maximizes space for content on a small screen important items stay visiblein most screen sizes and you decide the item priorities legibility of navigation items is maintained with adequate spacing, by automatically hiding items that don't fit cons: navigation items might be less discoverable because some items are hidden in the drop-down or toggle menu users may not notice the button contains a navigation menu in the smallest screen size one more step is needed to access the hidden navigation items pattern 2: expandable bottom menu similar to the first pattern, the top navigation items rearrange for smaller widths until there is not enough space.
... pros: potentially displays more navigation items in a left navigation compared to a top navigation most items are always visible except in the smallest screen size one button in header maximizes space for content on a small screen cons: navigation items might be less discoverable because some items are hidden in the drop-down or toggle menu users may not notice the button contains a navigation menu in the smallest screen size one more step is needed to access the navigation items that are hidden ...

Implementing the widget - Archive of obsolete content
in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis.
... main.js now in the lib directory open main.js and add the following code: var widgets = require('sdk/widget'); var data = require('sdk/self').data; var annotatorison = false; function toggleactivation() { annotatorison = !annotatorison; return annotatorison; } exports.main = function() { var widget = widgets.widget({ id: 'toggle-switch', label: 'annotator', contenturl: data.url('widget/pencil-off.png'), contentscriptwhen: 'ready', contentscriptfile: data.url('widget/widget.js') }); widget.port.on('left-click', function() { console.log('activate/de...
...activate'); widget.contenturl = toggleactivation() ?

Creating a Firefox sidebar extension - Archive of obsolete content
</keyset> <broadcasterset id="mainbroadcasterset"> <broadcaster id="viewemptysidebar" label="&emptysidebar.title;" autocheck="false" type="checkbox" group="sidebar" sidebarurl="chrome://emptysidebar/content/emptysidebar.xul" sidebartitle="&emptysidebar.title;" oncommand="togglesidebar('viewemptysidebar');" /> </broadcasterset> </overlay> the overlay file consists of three entries, the menu definition, shortcut keys and the broadcaster.
...the first is it indirectly provides the arguments for the togglesidebar function.
... the second is it provides attributes to the menuitem, some of which are changed automatically when togglesidebar is called.

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
nts to look like so, to give the todo component access to the service: import component from '@glimmer/component'; import { inject as service } from '@ember/service'; export default class todocomponent extends component { @service('todo-data') todos; } next, go back again to our todo-data.js service file and add the following action just below the previous ones, which will allow us to toggle a completion state for each todo: @action togglecompletion(todo) { todo.iscompleted = !todo.iscompleted; } updating the template to show completed state finally, we will edit the todo.hbs template such that the checkbox's value is now bound to the iscompleted property on the todo, and so that on change, the togglecompletion() method on the todo service is invoked.
... in todo.hbs, first find the following line: <li> and replace it with this — you'll notice that here we're using some more conditional content to add the class value if appropriate: <li class="{{ if @todo.iscompleted 'completed' }}"> next, find the following line: <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > and replace it with this: <input class="toggle" type="checkbox" aria-label="toggle the completion of this todo" checked={{ @todo.iscompleted }} {{ on 'change' (fn this.todos.togglecompletion @todo) }} > note: the above snippet uses a new ember-specific keyword — fn.
... try restarting the dev server and going to localhost:4200 again, and you'll now see that we have a fully-operational battlestation “todos left” counter and clear button: if you're asking yourself why we're not just doing the toggle on the component, since the function is entirely self-contained and not at all needing anything from the service, then you are 100% right to ask that question!

Accessibility in React - Learn web development
focusing between templates when a user toggles a <todo/> template from viewing to editing, we should focus on the <input> used to rename it; when they toggle back from editing to viewing, we should move focus back to the "edit" button.
... again try using the "edit" and "cancel" buttons to toggle between the templates of your <todo /> component; you'll see the browser focus indicator move appropriately, without the problem we discussed at the start of this section.
... sometimes, the place we want to send our focus to is obvious: when we toggled our <todo /> templates, we had an origin point to "go back" to — the "edit" button.

Starting our Svelte Todo list app - Learn web development
</label> </h2> <input type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled="" class="btn btn__primary btn__lg"> add </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-press...
...for example: <button class="btn toggle-btn" aria-pressed="true"> <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> here, aria-pressed tells assistive technology (like screen readers) that the button can be in one of two states: pressed or unpressed.
...; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn__primary:disabled { color: darkgrey; background-col...

Using the Browser API
frameelement.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.
... we switch the class values on the element to toggle the show/hide.
... 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 = ''; } } }); note that whenever one of the search-rel...

OS.File for the main thread
function(areason) { console.log('writeatomic failed for reason:', areason); } ); }; r.readasarraybuffer(b); }, 'image/png'); }; //var path = os.path.tofileuri(os.path.join(os.contants.path.desktopdir, 'my.png')); //do it like this for images on disk var path = 'https://mozorg.cdn.mozilla.net/media/img/firefox/channel/toggler-beta.png?2013-06'; //do like this for images online img.src = path; example: append to file this example shows how to use open, write, and close to append to a file.
...toggles the "system" attribute, this is equivalent .
... unixhonorumask toggles the os.constants.sys.umask flag.

nsIMsgFolder
void updatesummarytotals(in boolean force); void summarychanged(); long getnumunread(in boolean deep); long gettotalmessages(in boolean deep); void clearnewmessages(); void clearrequirescleanup(); void setflag(in unsigned long flag); void clearflag(in unsigned long flag); boolean getflag(in unsigned long flag); void toggleflag(in unsigned long flag); void onflagchange(in unsigned long flag); void setprefflag(); nsimsgfolder getfolderswithflag(in unsigned long flags, in unsigned long resultsize, out unsigned long numfolders); nsisupportsarray getallfolderswithflag(in unsigned long aflag); void getexpansionarray(in nsisupportsarray expansionarray); acstring geturi...
... boolean getflag(in unsigned long flag); toggleflag() toggles a flag on the folder.
... void toggleflag(in unsigned long flag); onflagchange() called to notify the database and/or listeners of a change of flag.

nsINavHistoryResultViewObserver
inherits from: nsisupports last changed in gecko 1.9.0 method overview boolean candrop(in long index, in long orientation); void ondrop(in long row, in long orientation); void ontoggleopenstate(in long index); void oncycleheader(in nsitreecolumn column); void oncyclecell(in long row, in nsitreecolumn column); void onselectionchanged(); void onperformaction(in wstring action); void onperformactiononrow(in wstring action, in long row); void onperformactiononcell(in wstring action, in long row, in nsitreecolumn column); c...
... ontoggleopenstate() called when an item is opened or closed.
... void ontoggleopenstate( in long index ); parameters index the item being toggled.

nsITreeSelection
g i, out long min, out long max); long getrangecount(); void invalidateselection(); void invertselection(); boolean isselected(in long index); void rangedselect(in long startindex, in long endindex, in boolean augment); void select(in long index); void selectall(); void timedselect(in long index, in long delay); void toggleselect(in long index); attributes attribute type description count long the number of rows currently selected in this tree.
... toggleselect() toggle the selection state of the row at the specified index.
... void toggleselect( in long index ); parameters index row to toggle.

Network request list - Firefox Developer Tools
network request columns you can toggle columns on and off by right-clicking on the table header and choosing the specific column from the context menu.
... other actions you can take with request blocking: to turn all request blocking off or on: toggle the checkbox next to enable request blocking.
... to turn a specific block off or on: toggle the checkbox next to that item.

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item: the overlay will still be shown when you select other elements from the inspector panel, so you can edit related css properties and see how the flex items are affected by your changes.
...this will toggle a color picker so you can select a different color for the overlay.
... the switch on the right-hand side of the flex container section will also toggle the overlay on and off.

Examine and edit CSS - Firefox Developer Tools
you can: toggle pseudo-classes; toggle classes; add a new rule; change the display based on the color scheme preference (as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print media rules.
... enable/disable: if you hover over a declaration, a checkbox appears next to it: you can use this to toggle the declaration on or off.
... this makes it easy to see which rule is overriding the declaration: view @media rules for print you can toggle the display into a mode that emulates @media rules for print.

Responsive Design Mode - Firefox Developer Tools
toggling responsive design mode there are three ways to toggle responsive design mode: from the firefox menu: select responsive design mode from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos).
... dpr (pixel ratio) - beginning with firefox 68, the dpr is no longer editable; create a custom device in order to change the dpr throttling - a drop-down list where you can select the connection throttling to apply, for example 2g, 3g, or lte enable/disable touch simulation - toggles whether or not responsive design mode simulates touch events.
... the rdm settings menu close button - closes rdm mode and returns to regular browsing the settings menu includes the following commands: left-align viewport - when checked moves the rdm viewport to the left side of the browser window show user agent - when checked displays the user agent string the final two options define when the page is reloaded: reload when touch simulation is toggled: when this option is enabled, the page is reloaded whenever you toggle touch support.

Tips - Firefox Developer Tools
style editor the black box icon () in the style sheet pane toggles the visibility of a style sheet.
... click the options button in the style sheet pane and click "show original sources" to toggle the display of css preprocessor files.
... storage inspector right-click the column headers to open a menu allowing to toggle the display of the columns.

Element.classList - Web APIs
examples const div = document.createelement('div'); div.classname = 'foo'; // our starting state: <div class="foo"></div> console.log(div.outerhtml); // use the classlist api to remove and add classes div.classlist.remove("foo"); div.classlist.add("anotherclass"); // <div class="anotherclass"></div> console.log(div.outerhtml); // if visible is set remove it, otherwise add it div.classlist.toggle("visible"); // add/remove visible, depending on test conditional, i less than 10 div.classlist.toggle("visible", i < 10 ); console.log(div.classlist.contains("foo")); // add or remove multiple classes div.classlist.add("foo", "bar", "baz"); div.classlist.remove("foo", "bar", "baz"); // add or remove multiple classes using spread syntax const cls = ["foo", "bar"]; div.classlist.add(...cls); di...
...v.classlist.remove(...cls); // replace class "foo" with class "bar" div.classlist.replace("foo", "bar"); versions of firefox before 26 do not implement the use of several arguments in the add/remove/toggle methods.
...null : n} return nullcheck(this[i]); }; if (!domtokenlistproto.toggle || testclass.toggle("a",0)!==false) domtokenlistproto.toggle=function(val){ if (arguments.length > 1) return (this[arguments[1] ?

Element: fullscreenchange event - Web APIs
if the user clicks on the "toggle fullscreen mode" button, the click handler will toggle full-screen mode for the div.
... html <h1>fullscreenchange event example</h1> <div id="fullscreen-div"> <button id="toggle-fullscreen">toggle fullscreen mode</button> </div> javascript document.getelementbyid('fullscreen-div').addeventlistener('fullscreenchange', (event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one.
... if (document.fullscreenelement) { console.log(`element: ${document.fullscreenelement.id} entered fullscreen mode.`); } else { console.log('leaving full-screen mode.'); } }); document.getelementbyid('toggle-fullscreen').addeventlistener('click', (event) => { if (document.fullscreenelement) { // exitfullscreen is only available on the document object.

Guide to the Fullscreen API - Web APIs
pressing the return or enter key lets the user toggle between windowed and fullscreen presentation of the video.
... document.addeventlistener("keydown", function(e) { if (e.keycode == 13) { togglefullscreen(); } }, false); toggling fullscreen mode this code is called when the user hits the enter key, as seen above.
... function togglefullscreen() { if (!document.fullscreenelement) { document.documentelement.requestfullscreen(); } else { if (document.exitfullscreen) { document.exitfullscreen(); } } } this starts by looking at the value of the fullscreenelement attribute on the document (checking it prefixed with both moz, ms, or webkit).

Fullscreen API - Web APIs
pressing the return or enter key lets the user toggle between windowed and full-screen presentation of the video.
... document.addeventlistener("keypress", function(e) { if (e.keycode === 13) { togglefullscreen(); } }, false); toggling full-screen mode this code is called by the event handler above when the user hits the enter key.
... function togglefullscreen() { if (!document.fullscreenelement) { document.documentelement.requestfullscreen(); } else { if (document.exitfullscreen) { document.exitfullscreen(); } } } this starts by looking at the value of the document's fullscreenelement attribute.

GlobalEventHandlers.onanimationcancel - Web APIs
example html <div class="main"> <div id="box" onanimationcancel="handlecancelevent(event);"> <div id="text">box</div> </div> </div> <div class="button" id="togglebox"> hide the box </div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { width: 300px; height: 300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sa...
... function handlecancelevent(event) { log("animation canceled", event); }; then we add a method to handle toggle display between "flex" and "none" and establish it as the handler for a click event on the "hide/show" the box button: document.getelementbyid('togglebox').addeventlistener('click', function() { if (box.style.display == "none") { box.style.display = "flex"; document.getelementbyid("togglebox").innerhtml = "hide the box"; } else { box.style.display = "none"; document.getelemen...
...tbyid("togglebox").innerhtml = "show the box"; } }); toggling the box to display: none has the effect of aborting its animation.

HTMLMediaElement.play() - Web APIs
button, false); playvideo(); async function playvideo() { try { await videoelem.play(); playbutton.classlist.add("playing"); } catch(err) { playbutton.classlist.remove("playing"); } } function handleplaybutton() { if (videoelem.paused) { playvideo(); } else { videoelem.pause(); playbutton.classlist.remove("playing"); } } in this example, playback of video is toggled off and on by the async playvideo() function.
... when this example is executed, it begins by collecting references to the <video> element as well as the <button> used to toggle playback on and off.
... it then sets up an event handler for the click event on the play toggle button and attempts to automatically begin playback by calling playvideo().

animation - CSS: Cascading Style Sheets
ed slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.animation')); var button = array.from(document.queryselectorall('button')); function togglebutton (btn, type) { btn.classlist.remove('play', 'pause', 'restart'); btn.classlist.add(type); btn.title = type.touppercase(type); } function playpause (i) { var btn = button[i]; var anim = animation[i]; if (btn.classlist.contains('play')) { anim.style.animationplaystate = 'running'; togglebutton(btn, 'pause'); } else if (btn.classlist.contains('paus...
...e')) { anim.style.animationplaystate = 'paused'; togglebutton(btn, 'play'); } else { anim.classlist.remove('a' + (i + 1)); settimeout(function () { togglebutton(btn, i === 0 ?
... 'play' : 'pause'); anim.style.animationplaystate = ''; anim.classlist.add('a' + (i + 1)); }, 100) } } animation.foreach(function (node, index) { node.addeventlistener('animationstart', function () { togglebutton(button[index], 'pause'); }); node.addeventlistener('animationend', function () { togglebutton(button[index], 'restart'); }); }); button.foreach(function (btn, index) { btn.addeventlistener('click', function () { playpause(index); }); }); }) a description of which properties are animatable is available; it's worth noting that this description is also valid for css transitions.

Event reference
view events event name fired when fullscreenchange an element was toggled to or from fullscreen mode.
... fullscreenchange event full screen an element was toggled to or from fullscreen mode.
... fullscreen addons specific browser fullscreen mode has been toggled.

<command>: The HTML Command element - HTML: Hypertext Markup Language
radiogroup this attribute gives the name of the group of commands, with a type of radio, that will be toggled when the command itself is toggled.
... checkbox indicates that the command can be toggled using a checkbox.
... radio indicates that the command can be toggled using a radio button.

<details>: The Details disclosure element - HTML: Hypertext Markup Language
the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
... events in addition to the usual events supported by html elements, the <details> element supports the toggle event, which is dispatched to the <details> element whenever its state changes between open and closed.
... you can use an event listener for the toggle event to detect when the widget changes state: details.addeventlistener("toggle", event => { if (details.open) { /* the element was toggled open */ } else { /* the element was toggled closed */ } }); examples a simple disclosure example this example shows a <details> element with no provided summary.

<input type="checkbox"> - HTML: Hypertext Markup Language
additional attributes in addition to the common attributes shared by all <input> elements, "checkbox" inputs support the following attributes: attribute description checked boolean; if present, the checkbox is toggled on by default indeterminate a boolean which, if present, indicates that the value of the checkbox is indeterminate rather than true or false value the string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on checked a boolean attribute indicating whether or not this checkbox is checked by default (when the page l...
...r interests</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding" checked> <label for="coding">coding</label> </div> <div> <input type="checkbox" id="music" name="interest" value="music"> <label for="music">music</label> </div> </fieldset> providing a bigger hit area for your checkboxes in the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated <label> element as well as on the checkbox itself.
...this is a state in which it's impossible to say whether the item is toggled on or off.

<menuitem> - HTML: Hypertext Markup Language
radiogroup this attribute specifies the name of a group of commands to be toggled as radio buttons when selected.
... checkbox: represents a command that can be toggled between two different states.
... radio: represent one selection from a group of commands that can be toggled as radio buttons.

<maction> - MathML
toggle: when there is a click on the subexpression, the rendering alternates the display of selected subexpressions.
... the syntax is: <maction actiontype="toggle" selection="positive-integer" > expression1 expression2 expressionn </maction>.
... examples the following example uses the "toggle" actiontype: <math> <maction actiontype="toggle"> <mfrac> <mn>6</mn> <mn>8</mn> </mfrac> <mfrac> <mrow> <mn>3</mn> <mo>&sdot;</mo> <mn>2</mn> </mrow> <mrow> <mn>4</mn> <mo>&sdot;</mo> <mn>2</mn> </mrow> </mfrac> <mfrac> <mn>3</mn> <mn>4</mn> </mfrac> </maction> </math> specifications specification ...

panel - Archive of obsolete content
attaching panels to buttons you can attach a panel to a toggle button by passing the button itself as the position option to the panel's show() method or to its constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var sdkpanels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" ...
... this may be one of three things: a toggle button.

tabs - Archive of obsolete content
here's an add-on that uses a toggle button to attach a stylesheet to the active tab, and detach it again.
... the stylesheet is called "style.css" and is located in the add-on's "data" directory: var tabs = require("sdk/tabs"); var { attach, detach } = require('sdk/content/mod'); var { style } = require('sdk/stylesheet/style'); var { togglebutton } = require("sdk/ui/button/toggle"); var style = style({ uri: './style.css' }); var button = togglebutton({ id: "stylist", label: "stylist", icon: "./icon-16.png", onchange: function(state) { if (state.checked) { attach(style, tabs.activetab); } else { detach(style, tabs.activetab); } } }); private windows if your add-on has not opted into private browsing, then you won't see any tabs that are hosted by private browser windows.

ui/toolbar - Archive of obsolete content
you can supply three sorts of ui components: action buttons toggle buttons frames this add-on builds part of the user interface for a music player using action buttons for the controls and a frame to display art and the currently playing song: var { actionbutton } = require('sdk/ui/button/action'); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = actionbutton({ id: "previous", label: "previous", icon...
...each item in items must be an action button, a toggle button, or a frame instance.

Creating annotations - Archive of obsolete content
in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis.
... at the top of the file import the page-mod module and declare an array for the workers: var pagemod = require('sdk/page-mod'); var selectors = []; add detachworker(): function detachworker(worker, workerarray) { var index = workerarray.indexof(worker); if(index != -1) { workerarray.splice(index, 1); } } edit toggleactivation() to notify the workers of a change in activation state: function activateselectors() { selectors.foreach( function (selector) { selector.postmessage(annotatorison); }); } function toggleactivation() { annotatorison = !annotatorison; activateselectors(); return annotatorison; } we'll be using this url in all our screenshots.

Storing annotations - Archive of obsolete content
in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis.
... finally we need to connect this to the widget's right-click message: var widget = widgets.widget({ id: 'toggle-switch', label: 'annotator', contenturl: data.url('widget/pencil-off.png'), contentscriptwhen: 'ready', contentscriptfile: data.url('widget/widget.js') }); widget.port.on('left-click', function() { console.log('activate/deactivate'); widget.contenturl = toggleactivation() ?

Display a Popup - Archive of obsolete content
if you use a toggle button, you can attach the panel to the button.
... to learn more about buttons, see the action button and toggle button api reference.

Sidebar - Archive of obsolete content
you can use this function to show, hide, or toggle sidebars.
... // toggle the bookmarks sidebar (close it if it's open or // open it if it's currently closed) sidebarui.toggle("viewbookmarkssidebar"); // show the history sidebar, whether it's hidden or already showing sidebarui.show("viewhistorysidebar"); // hide the sidebar, if one is showing sidebarui.hide(); avoid opening the sidebar on startup.

Intercepting Page Loads - Archive of obsolete content
here's a code sample that keeps track of your progress listeners for all tabs: init : function() { gbrowser.browsers.foreach(function (browser) { this._toggleprogresslistener(browser.webprogress, true); }, this); gbrowser.tabcontainer.addeventlistener("tabopen", this, false); gbrowser.tabcontainer.addeventlistener("tabclose", this, false); }, uninit : function() { gbrowser.browsers.foreach(function (browser) { this ._toggleprogresslistener(browser.webprogress, false); }, this); gbrowser.tabcontainer.removeeventlistener("tabopen", thi...
...s, false); gbrowser.tabcontainer.removeeventlistener("tabclose", this, false); }, handleevent : function(aevent) { let tab = aevent.target; let webprogress = gbrowser.getbrowserfortab(tab).webprogress; this._toggleprogresslistener(webprogress, ("tabopen" == aevent.type)); }, _toggleprogresslistener : function(awebprogress, aisadd) { if (aisadd) { awebprogress.addprogresslistener(this, awebprogress.notify_all); } else { awebprogress.removeprogresslistener(this); } } this shouldn't be too hard to follow.

CSS3 - Archive of obsolete content
definition for the calc(), attr(), and toggle() functional notations.
... at risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module.

Download Manager preferences - Archive of obsolete content
the user may check a "don't ask" box on the ui to toggle this.
... in firefox 3 and earlier, the default is 0 (except on windows vista, where it's toggled to 1 on initial launch).

jspage - Archive of obsolete content
ttribute(m);return this;},removeproperties:function(){array.each(arguments,this.removeproperty,this);return this; },hasclass:function(l){return this.classname.contains(l," ");},addclass:function(l){if(!this.hasclass(l)){this.classname=(this.classname+" "+l).clean(); }return this;},removeclass:function(l){this.classname=this.classname.replace(new regexp("(^|\\s)"+l+"(?:\\s|$)"),"$1");return this;},toggleclass:function(l){return this.hasclass(l)?this.removeclass(l):this.addclass(l); },adopt:function(){array.flatten(arguments).each(function(l){l=document.id(l,true);if(l){this.appendchild(l);}},this);return this;},appendtext:function(m,l){return this.grab(this.getdocument().newtextnode(m),l); },grab:function(m,l){a[l||"bottom"](document.id(m,true),this);return this;},inject:function(m,l){a[l||"botto...
...$extend({link:"cancel"},a)); },get:function(a){if(a||!this.retrieve("tween")){if(a||!this.retrieve("tween:options")){this.set("tween",a);}this.store("tween",new fx.tween(this,this.retrieve("tween:options"))); }return this.retrieve("tween");}};element.implement({tween:function(a,c,b){this.get("tween").start(arguments);return this;},fade:function(c){var e=this.get("tween"),d="opacity",a; c=$pick(c,"toggle");switch(c){case"in":e.start(d,1);break;case"out":e.start(d,0);break;case"show":e.set(d,1);break;case"hide":e.set(d,0);break;case"toggle":var b=this.retrieve("fade:flag",this.get("opacity")==1); e.start(d,(b)?0:1);this.store("fade:flag",!b);a=true;break;default:e.start(d,arguments);}if(!a){this.eliminate("fade:flag");}return this;},highlight:function(c,a){if(!a){a=this.retrieve("highlight:origina...

Venkman Introduction - Archive of obsolete content
the pretty print button toggles pretty print mode.
...the debugger is built on top of an application framework that allows you to drag and drop, resize, and toggle all the available views, and even to create new views or modules for the debugger if you choose—though this latter is an advanced topic and a subject for a future article.

findbar - Archive of obsolete content
attributes browserid, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar" browserid="content"/> attributes browserid type: string the id of the browser element to which the findbar is attached.
... togglehighlight( highlight ) return type: no return value turns highlighting of text matching the search term on and off; specify false to disable highlighting or true to enable it.

Index - Archive of obsolete content
591 togglehighlight no summary!
... 592 toggleitemselection xul methods, xul reference no summary!

MenuItems - Archive of obsolete content
checkbox menu items sometimes, you will want to have an item on a menu that acts as a toggle.
... for instance, a menuitem that can be used to toggle a toolbar on and off.

Template and Tree Listeners - Archive of obsolete content
for instance, the observer may have an ontoggleopenstate method which will be called when the user opens or closes a row.
...for instance, the ontoggleopenstate method of any observers will be called before the tree item is opened.

listbox - Archive of obsolete content
ssonselect, tabindex, value methods additemtoselection, appenditem, clearselection, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> <listbox id="thelist" rows="10" width="400"> <listhead> <listheader label="1ct gem" width="240"/> <listheader label="price" width="150"/> </listhead> <listcols> <listcol/> <listc...
... toggleitemselection( item ) return type: no return value if the specified item is selected, it is deselected.

richlistbox - Archive of obsolete content
ssonselect, tabindex, value methods additemtoselection, appenditem, clearselection, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <richlistbox> <richlistitem> <description>a xul description!</description> </richlistitem> <richlistitem> <button label="a xul button"/> </richlistitem> </richlistbox> the richlistbox element contains multiple richlistitem elements, which can contain any content.
... toggleitemselection( item ) return type: no return value if the specified item is selected, it is deselected.

Mozilla XForms User Interface - Archive of obsolete content
switch this element is used in conjunction with case and toggle elements (see the spec).
...the toggle element is used (as an event handler) to make a case visible and thereby hiding all other case elements contained by the same switch.

Practical positioning examples - Learn web development
let's have a look at the html in the file: <label for="toggle">❔</label> <input type="checkbox" id="toggle"> <aside> ...
... styling the form elements first let's deal with the form elements — add the following css in between your <style> tags: label[for="toggle"] { font-size: 3rem; position: absolute; top: 4px; right: 5px; z-index: 1; cursor: pointer; } input[type="checkbox"] { position: absolute; top: -100px; } the first rule styles the <label>; here we've: set a large font-size to make the icon nice and big.

What are browser developer tools? - Learn web development
three ways: keyboard: ctrl + shift + i, except internet explorer and edge: f12 macos: ⌘ + ⌥ + i menu bar: firefox: menu ➤ web developer ➤ toggle tools, or tools ➤ web developer ➤ toggle tools chrome: more tools ➤ developer tools safari: develop ➤ show web inspector.
...forces element states to be toggled on, so you can see what their styling would look like.

Basic native form controls - Learn web development
clicking the checkbox or its associated label toggles the checkbox on and off.
... due to the on-off nature of checkboxes, the checkbox is considered a toggle button, with many developers and designers expanding on the default checkbox styling to create buttons that look like toggle switches you can see an example in action here (also see the source code).

Example 3 - Learn web development
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'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; // ------------- // // event binding // // -------------...
...load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }, 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
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'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget...
...load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist...

Example 5 - Learn web development
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'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget...
...tsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactiv...

How to build custom form controls - Learn web development
selectlist.foreach(deactivateselect); // and we turn on the active state for this specific control select.classlist.add('active'); } // this function will be used each time the user wants to open/closed the list of options // it takes one parameter: // select : the dom node with the list to toggle function toggleoptlist(select) { // the list is kept from the control var optlist = select.queryselector('.optlist'); // we change the class of the list to show/hide it optlist.classlist.toggle('hidden'); } // this function will be used each time we need to highlight an option // it takes two parameters: // select : the dom node with the `select` class containing the option to highligh...
... // we toggle the visibility of the list of options toggleoptlist(select); }); // in case the control gains focus // the control gains the focus each time the user clicks on it or each time // they use the tabulation key to access the control select.addeventlistener('focus', function (event) { // note: the `select` and `selectlist` variable are closures // available in th...

Index - Learn web development
our app can display, add, and delete todos, toggle their completed status, show how many of them are completed and apply filters.
...here we've given you the lowdown on how react deals with events and handles state, and implemented functionality to add tasks, delete tasks, and toggle tasks as completed.

Video and Audio APIs - Learn web development
you'll see a number of features; the html is dominated by the video player and its controls: <div class="player"> <video controls> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <!-- fallback content here --> </video> <div class="controls"> <button class="play" data-icon="p" aria-label="play pause toggle"></button> <button class="stop" data-icon="s" aria-label="stop"></button> <div class="timer"> <div></div> <span aria-label="timer">00:00</span> </div> <button class="rwd" data-icon="b" aria-label="rewind"></button> <button class="fwd" data-icon="f" aria-label="fast forward"></button> </div> </div> the whole player is wrapped in a <div> element, so it can all ...
... on the second click, the button will be toggled back again — the "play" icon will be shown again, and the video will be paused with htmlmediaelement.pause().

Basic math in JavaScript — numbers and operators - Learn web development
note: such a control that swaps between two states is generally referred to as a toggle.
... it toggles between one state and another — light on, light off, etc.

Ember resources and troubleshooting - Learn web development
more concretely, using mut allows for template-only settings functions to be declared: <checkbox @value={{this.somedata}} @ontoggle={{fn (mut this.somedata) (not this.somedata)}} /> whereas, without mut, a component class would be needed: import component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; export default class example extends component { @tracked somedata = false; @action setdata(newvalue) { this.somedata = newvalue; } } which would ...
... with ember-set-helper: <checkbox @value={{this.somedata}} @ontoggle={{set this "somedata" (not this.somedata)}} /> with ember-box: {{#let (box this.somedata) as |somedata|}} <checkbox @value={{unwrap somedata}} @ontoggle={{update somedata (not this.somedata)}} /> {{/let}} note that none of these solutions are particularly common among members of the community, and as a whole, people are still trying to figure out an ergonomic and simple api for set...

TypeScript support in Svelte - Learn web development
replace the content of the filterbutton.svelte file with the following: <!-- components/filterbutton.svelte --> <script lang='ts'> import { filter } from '../types/filter.enum' export let filter: filter = filter.all </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === filter.all} aria-pressed={filter === filter.all} on:click={()=> filter = 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 === filter.active} aria-pressed={filter === filter.active} on:click={()=> filter = 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 === filter.completed} aria-pressed={filter === filter.completed} on:click={()=> filter = filter.completed} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> here we are just importing the filter enum, and using it instead of the string values we used previously.

Getting started with Svelte - Learn web development
for example, we could include a togglename() function in our app component, and a button to run it.
... try updating your <script> and markup sections like so: <script> export let name; function togglename() { if (name === 'world') { name = 'svelte' } else { name = 'world' } } </script> <main> <h1>hello {name}!</h1> <button on:click={togglename}>toggle name</button> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> whenever the button is clicked, svelte executes the togglename() function, which in turn updates the value of the name variable.

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
'check' : 'uncheck'} all</button> <button type="button" class="btn btn__primary" on:click={removecompleted}>remove completed</button> </div> we've also included a completed variable to toggle between checking and unchecking all tasks.
... you'll notice that the array is successfully updated every time you press the button (the todo objects' completed properties are toggled between true and false), but svelte is not aware of that.

Focus management with Vue refs - Learn web development
update it like this: <button type="button" class="btn" ref="editbutton" @click="toggletoitemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> to access the value associated with our ref, we use the $refs property provided on our component instance.
... to see the value of the ref when we click our "edit" button, add a console.log() to our toggletoitemeditform() method, like so: toggletoitemeditform() { console.log(this.$refs.editbutton); this.isediting = true; } if you activate the "edit" button at this point, you should see an html <button> element referenced in your console.

Gecko info for Windows accessibility vendors
indicates that the absence of state_checked should be spoken as // "unchecked", and that event_state_change will be fired in the event that the // checkbox is toggled.
...pushbutton xul: <button> html: <input type= "button"> or<button> dhtml: role="wairole:button" sets state_haspopup for buttons containing menus role_checkbutton xul: <checkbox> html: <input type="checkbox"> dhtml: role="wairole:checkbox" fires event_state_change when checkbox is toggled role_radiobutton xul: <radio> html: <input type="radio"> dhtml: role="wairole:radio" fires event_state_change when radiobutton is set role_combobox xul: <menulist> html: <select size="1"> dhtml: role="wairole:combobox" fires event_valuechange when...

Displaying Places information using views
the action to take when a container is toggled can be set via the onopenflatcontainer property.
... onopenflatcontainer string the body of function that will be called when a container is toggled.

MathML In Action
<mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> </mrow> </msqrt> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mrow> </mstyle> </math> </p> javascript content function zoomtoggle() { if (this.hasattribute("mathsize")) { this.removeattribute("mathsize"); } else { this.setattribute("mathsize", "200%"); } } function load() { document.getelementbyid("zoomablemath").
... addeventlistener("click", zoomtoggle, false); } window.addeventlistener("load", load, false); consider an interesting markup like this { u t + f ( u ) x = 0 u ( 0 , x ) = { u - if x < 0 u + if x > 0 or other complex markups like these ell ^ y ( z ; z , τ ) := ∫ y ( ∏ l ( y l 2 π i ) θ ( y l 2 π i - z ) θ ′ ( 0 ) θ ( - z ) θ ( y l 2 π i ) ) × ( ∏ k θ ( e k 2 π i - ( α k + 1 ) z ) θ ( - z ) θ ( e k 2 π i - z ) θ ( - ( α k + 1 ) z ) ) π ( n ) = ∑ m = 2 n ⌊ ( ∑ k = 1 m - 1 ⌊ ( m / k ) / ⌈ m / k ⌉ ⌋ ) - 1 ⌋ ‖ ϕ ‖ w s k ( Ω g ) ≝ ( ∑ | α | ≦ k ∂ α ϕ...

Gecko Roles
role_toolbar represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.
... role_toggle_button a toggle button.

Building the WebLock UI
one of the most efficient ways to expose this is to use radio buttons, which allow the user to toggle a particulart state, as the figure above illustrates.
...="24"> <script src="chrome://weblock/content/weblock.js"/> <hbox> <separator orient="vertical" class="thin"/> <vbox flex="1"> <separator class="thin"/> <hbox align="center"> <textbox id="dialog.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> <hbox align="center"> <radiogroup onchange="togglelock();"> <radio label="lock"/> <radio label="unlock"/> </radiogroup> <spacer flex="1"/> </hbox> </vbox> </hbox> </dialog> overlaying new user interface into mozilla you've got a dialog that will interact with the weblock component, but how do you install the dialog you've created into the browser?

XPCShell Reference
-i this option turns on the "interactive" mode -s this option toggles the javascript strict option on and off.
... -x this option toggles the xml option on and off.

nsIAccessibleRole
role_toolbar 22 represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.
... role_toggle_button 93 a toggle button.

nsINavHistoryResultObserver
method overview void batching(in boolean atogglemode); void containerclosed(in nsinavhistorycontainerresultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containeropened(in nsinavhistorycontainerresultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containerstatechanged(in nsinavhistorycontainerresultnode acontainernode, in unsigned long aoldstate, in unsigned long anewstate...
...void batching( in boolean atogglemode ); parameters atogglemode specify true to start batch mode or false to finish the batch.

nsISelectionController
type, in short region, in short flags); void selectall(); void setcaretenabled(in boolean enabled); void setcaretreadonly(in boolean readonly); void setcaretvisibilityduringselection(in boolean visibility); void setcaretwidth(in short pixels); obsolete since gecko 1.8 void setdisplayselection(in short toggle); void wordextendfordelete(in boolean forward); native code only!
...void setdisplayselection( in short toggle ); parameters toggle off, on, disabled.

nsMsgNavigationType
togglethreadkilled 5 must match nsmsgviewcommandtype togglethreadkilled.
... nextunreadthread 10 nextunreadfolder 11 nextfolder 12 readmore 13 back 15 go back to the previous visited message forward 16 go forward to the previous visited message firstflagged 17 nextflagged 18 previousflagged 19 firstnew 20 editundo 21 editredo 22 togglesubthreadkilled 23 ...

nsMsgViewCommandType
markmessagesunread 1 mark the selected messages as unread togglemessageread 2 toggle the read flag of the selected messages flagmessages 3 flag the selected messages.
... togglethreadwatched 6 toggle the watched state of the selected thread.

Main Windows
the third is the attachment box which can be toggled into a slim or an expanded view basemenuoverlay.xul contains the contents of most of the menus (i.e.
...the third is the attachment box which can be toggled into a slim or an expanded view basemenuoverlay.xul contains the contents of most of the menus (i.e.

Finding the code for a feature
repeating this process, i see that the submenu items all call a function togglemessagetagmenu.
... looking that up in mxr, its underlying function uses a very strange call prevhdrfolder[toggler](messages, key) to change the key.

DevTools API - Firefox Developer Tools
togglesplitconsole() toggles the state of the split console.
... method description new toolsidebar(xul:tabbox, toolpanel, uid, showtabstripe=true) toolsidebar constructor void addtab(tabid, url, selected=false) add a tab in the sidebar void select(tabid) select a tab void hide() hide the sidebar void show() show the sidebar void toggle() toggle the sidebar void getwindowfortab(tabid) get the iframe containing the tab content tabid getcurrenttabid() return the id of tabid of the current tab tabbox gettab(tabid) return a tab given its id destroy() destroy the toolsidebar object events description new-tab-registered a new tab has been added {tabid}...

Network request details - Firefox Developer Tools
a raw toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text.
... a raw toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text.

Animation inspector example: CSS transitions - Firefox Developer Tools
50ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "selected"); } } } function clearselection() { var selected = document.getelementbyid("selected"); if (selected) { selected.removeattribute...
...("id"); } } document.addeventlistener("click", toggleselection); ...

Rulers - Firefox Developer Tools
to be able to toggle rulers for a page, you first need to enable the button by going to the settings page for the developer tools and checking "toggle rulers for the page" under available toolbox buttons.
... once enabled, the "toggle rulers for the page" button appears at the top right of the toolbox, in the same place as the settings/options button.

Settings - Firefox Developer Tools
to see the settings, open any of the developer tools, and then: click the "settings" command in the menu: or press f1 to toggle between the active tool and the settings pane the settings pane looks something like this: categories default firefox developer tools this group of checkboxes determines which tools are enabled in the toolbox.
... note that in firefox 52 we removed the checkbox to toggle the "select element" button.

View Source - Firefox Developer Tools
wrap long lines (toggle) wraps long lines to the width of the page.
... syntax highlighting (toggle) applies syntax highlighting to the code.when syntax highlighting is on, view source also highlights parsing errors in red.

Firefox Developer Tools
the core tools you can open the firefox developer tools from the menu by selecting tools > web developer > toggle tools or use the keyboard shortcut ctrl + shift + i or f12 on windows and linux, or cmd + opt + i on macos.
...(note: this feature is not turned on by default and must be enabled in settings before the icon will appear.) toggles responsive design mode.

AudioTrackList: change event - Web APIs
ubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audiotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.audiotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; // changi...
...ng the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); specifications specification status html living standardthe definition of 'change' in that specification.

Pixel manipulation with canvas - Web APIs
you can toggle the checkbox to see the effect of the imagesmoothingenabled property (which needs prefixes for different browsers).
...g.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var zoomctx = document.getelementbyid('zoom').getcontext('2d'); var smoothbtn = document.getelementbyid('smoothbtn'); var togglesmoothing = function(event) { zoomctx.imagesmoothingenabled = this.checked; zoomctx.mozimagesmoothingenabled = this.checked; zoomctx.webkitimagesmoothingenabled = this.checked; zoomctx.msimagesmoothingenabled = this.checked; }; smoothbtn.addeventlistener('change', togglesmoothing); var zoom = function(event) { var x = event.layerx; var y = event.layery; zoomctx.d...

Element: dblclick event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property ondblclick examples this example toggles the size of a card when you double click on it.
... javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification.

Element: overflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getel...
...ementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.

Element: underflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getel...
...ementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.

HTMLMediaElement: pause event - Web APIs
either the ' + 'pause() method was called or the autoplay attribute was toggled.'); }); using the onpause event handler property: const video = document.queryselector('video'); video.onpause = (event) => { console.log('the boolean paused property is now true.
... either the ' + 'pause() method was called or the autoplay attribute was toggled.'); }; specifications specification status html living standardthe definition of 'pause media event' in that specification.

HTMLMediaElement: play event - Web APIs
either the ' + 'play() method was called or the autoplay attribute was toggled.'); }); using the onplay event handler property: const video = document.queryselector('video'); video.onplay = (event) => { console.log('the boolean paused property is now false.
... either the ' + 'play() method was called or the autoplay attribute was toggled.'); }; specifications specification status html living standardthe definition of 'play media event' in that specification.

Keyboard API - Web APIs
interfaces keyboard provides functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.
... navigator.keyboard read only returns a keyboard object which provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.

VideoTrackList: change event - Web APIs
bbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.videotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; // chan...
...ging the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); specifications specification status html living standardthe definition of 'change' in that specification.

Movement, orientation, and motion: A WebXR example - Web APIs
lmatrixout = document.queryselector("#model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.queryselector("#mouse-matrix div"); if (!navigator.xr || enableforcepolyfill) { console.log("using the polyfill"); polyfill = new webxrpolyfill(); } setupxrbutton(); } the load event handler gets a reference to the button that toggles webxr on and off into xrbutton, then adds a handler for click events.
... the webxr session is toggled on and off by the handler for click events on the button, whose label is appropriately set to either "enter webxr" or "exit webxr".

Using IIR filters - Web APIs
demo our simple example for this guide provides a play/pause button that starts and pauses audio play, and a toggle that turns an iir filter on and off, altering the tone of the sound.
...}, false); the toggle that turns the iir filter on and off is set up in the similar way.

Window.personalbar - Web APIs
returns the personalbar object, whose visibility can be toggled in the window.
...tml> <head> <title>various dom tests</title> <script> // changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite"); window.personalbar.visible = !window.personalbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.

Window.statusbar - Web APIs
the window.statusbar property returns the statusbar object, whose visibility can be toggled in the window.
...harset="utf-8" /> <title>various dom tests</title> <script> // changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite"); window.statusbar.visible=!window.statusbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.

Window.toolbar - Web APIs
the window.toolbar property returns the toolbar object, whose visibility can be toggled in the window.
...e html> <html> <head> <title>various dom tests</title> <script> // changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universalbrowserwrite"); window.toolbar.visible=!window.toolbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.

Accessibility documentation index - Accessibility
this role can be used in combination with the aria-pressed attribute to create toggle buttons.
... 72 aria: switch role aria, aria role, accessibility, on/off, reference, switch, a11y, toggle the 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." 73 aria: tab role aria, aria role, aria tab, aria widget, reference the aria tab role indicates an interactive element inside a tablist that, ...

CSS values and units - CSS: Cascading Style Sheets
functional notation calc() min() max() clamp() toggle() attr() functional notation is a type of value that can represent more complex types or invoke special processing by css.
... adds the min(), max() and clamp() functional notation adds toggle() css values and units module level 3 candidate recommendation adds calc(), ch, rem, vw, vw, vmin, vmax, q css color module level 4 working draft adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions.

transition-timing-function - CSS: Cascading Style Sheets
all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransition, 10000); .ease { transition-timing-function: ease; } .easein { transition-timing-function: ease-in; } .easeout { transition-timing-function: ease-out; } .easeinout { transition-timing-function: ease-in-out; } .linear { transition-timing-function: linear; } .cb { transition-timing-function: cubic-bezier(0.2,-...
...y: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransition, 10000); .jump-start { transition-timing-function: steps(5, jump-start); } .jump-end { transition-timing-function: steps(5, jump-end); } .jump-none { transition-timing-function: steps(5, jump-none); } .jump-both { transition-timing-function: steps(5, jump-both); } .step-start { transition-timing-function: step-...

Adding captions and subtitles to HTML5 video - Developer guides
it also sets up the required event listeners on the button to toggle the relevant subtitle set on or off.
... initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it: subtitles.addeventlistener('click', function(e) { if (subtitlesmenu) { subtitlesmenu.style.display = (subtitlesmenu.style.display == 'block' ?

Creating a cross-browser video player - Developer guides
mute mute.addeventlistener('click', function(e) { video.muted = !video.muted; }); the mute button is a simple toggle button that uses the media api's muted attribute to mute the video: this is a boolean indicating whether the video is muted or not.
... to get it to toggle, we set it to the inverse of itself.

<p>: The Paragraph element - HTML: Hypertext Markup Language
see for yourself: <button data-toggle-text="oh no!
... switch back!">use pilcrow for paragraphs</button> </p> css p { margin: 0; text-indent: 3ch; } p.pilcrow { text-indent: 0; display: inline; } p.pilcrow + p.pilcrow::before { content: " ¶ "; } javascript document.queryselector('button').addeventlistener('click', function (event) { document.queryselectorall('p').foreach(function (paragraph) { paragraph.classlist.toggle('pilcrow'); }); var newbuttontext = event.target.dataset.toggletext; var oldtext = event.target.innertext; event.target.innertext = newbuttontext; event.target.dataset.toggletext = oldtext; }); result accessibility concerns breaking up content into paragraphs helps make a page more accessible.

<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
clicking the <summary> element toggles the state of the parent <details> element open and closed.
...when the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details> element, which can be used to let you know when this state change occurs.

CSS and JavaScript animation performance - Web Performance
the animation can be switched to requestanimationframe() by clicking the toggle button.
...toggle its value to true.

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
</p> <button onclick="toggleradius()">toggle radius</button> <svg height="0"> <clippath id="clipping-path-1" clippathunits="objectboundingbox"> <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> <rect x="0.5" y="0.2" width="0.5" height="0.8"/> </clippath> </svg> .target { clip-path: url(#clipping-path-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } this establishes a clipping ...
...for example, you can resize the circle in the clip path established above: function toggleradius() { var circle = document.getelementbyid("circle"); circle.r.baseval.value = 0.40 - circle.r.baseval.value; } example: filtering this demonstrates applying a filter to html content using svg.

visibility - SVG: Scalable Vector Graphics
example the following example toggles the css visibility of the svg image path.
... html <button id="nav-toggle-button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" class="button-icon"> <path d="m16.59 8.59l12 13.17 7.41 8.59 6 10l6 6 6-6z" /> <path d="m12 8l-6 6 1.41 1.41l12 10.83l4.59 4.58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </svg> <span> click me </span> </button> css svg { display: inline !important; } span { vertical-align: 50%; } button { line-height: 1em; } .invisible { visibility: hidden; } javascript document.queryselector("button").addeventlistener("click", function (evt) { this.queryselector("svg > path:nth-of-type(1)").classlist.toggle("invisible"); this.queryselector("svg > path:nth-of-type(2)").classlist.toggle("invisible"); }); specifications ...

widget - Archive of obsolete content
in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis.

ui/button/action - Archive of obsolete content
by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifyi...

Low-Level APIs - Archive of obsolete content
ui/button/toggle add a toggle button to the firefox user interface.

Release notes - Archive of obsolete content
firefox 29 highlights added new ui modules for australis: actionbutton, togglebutton, frame and toolbar.

Displaying annotations - Archive of obsolete content
in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis.

Overview - Archive of obsolete content
in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis.

Annotator - Archive of obsolete content
in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis.

Developing for Firefox Mobile - Archive of obsolete content
ystem/events supported system/runtime supported system/unload supported system/xul-app supported tabs/utils supported test/assert supported test/harness supported test/httpd supported test/runner supported test/utils supported ui/button/action not supported ui/button/toggle not supported ui/frame not supported ui/id supported ui/sidebar not supported ui/toolbar not supported util/array supported util/collection supported util/deprecate supported util/list supported util/match-pattern supported util/object supported util/uuid supporte...

Examples and demos from articles - Archive of obsolete content
in this demo there is also an example of a "toggle button" rendered through a <label> element.

Tree - Archive of obsolete content
expanding/collapsing all tree nodes to expand all tree nodes: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && !treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } to collapse all tree nodes just change the condition: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tree.v...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
this is used to allow the user to toggle the display of additional information.

Adding sidebars - Archive of obsolete content
<menupopup id="viewsidebarmenu"> <menuitem id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhello.sidebar.accesskey;" type="checkbox" autocheck="false" group="sidebar" sidebarurl="chrome://xulschoolhello/content/sidebar.xul" sidebartitle="&xulschoolhello.sidebar.title;" oncommand="togglesidebar('xulschoolhello-sidebar');" /> </menupopup> the example in the mdc page includes a shortcut key combination to toggle the new sidebar.

The Essentials of an Extension - Archive of obsolete content
check menu bar under the options menu of the menu button to toggle display of the classic menu on windows and some linux distributions.

Index of archived content - Archive of obsolete content
et/utils system/child_process system/environment system/events system/runtime system/unload system/xul-app tabs/utils test/assert test/harness test/httpd test/runner test/utils ui/button/action ui/button/toggle ui/frame ui/id ui/sidebar ui/toolbar util/array util/collection util/deprecate util/list util/match-pattern util/object util/uuid window/utils release notes tools ...

Autodial for Windows NT - Archive of obsolete content
some people expect an option to toggle online/offline should trigger dialup or disconnect.

New Skin Notes - Archive of obsolete content
--beltzner any chance we can mobe the "main page" scrollbar to the actual "content area" of the page, so that the sidebar `stays` when in-use, and on dynamic pages (such as the preferences page) if you toggle between something that needs a verticle scrollbar and something that doesnt, you get screen-jitter; if this is not-feasable, perhaps some method to have a viewport scrollbar always appear for the vert direction.

toolbarbutton.type - Archive of obsolete content
checkbox: use this type to create a toggle button which will switch the checked state each time the button is pressed.

treecol.type - Archive of obsolete content
you need to apply css to make the checkbox toggle.

Methods - Archive of obsolete content
removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent dom:element.getattribute dom:element.getattributenode dom:element.getattributenodens dom:element.getattributens dom:element.getelementsbytagname dom:element.getelementsbytagnamens dom:element.getfeature fixme: brokenlin...

More Tree Features - Archive of obsolete content
when the user expands and collapses the parent, the view's toggleopenstate function will be called to toggle the item between open and closed.

editor - Archive of obsolete content
he editor var editor = document.getelementbyid("myeditor"); editor.contentdocument.designmode = 'on'; } </script> <editor id="myeditor" editortype="html" src="about:blank" flex="1" type="content-primary"/> once editable, the document can have special formatting and other html pieces added to it using the document.execcommand method: var editor = document.getelementbyid("myeditor"); // toggle bold for the current selection editor.contentdocument.execcommand("bold", false, null); see the midas overview for more command strings.

toolbarbutton - Archive of obsolete content
checkbox: use this type to create a toggle button which will switch the checked state each time the button is pressed.

Application Update - Archive of obsolete content
we use a separate boolean toggle for this to make // the ui easier to construct.

XUL Explorer - Archive of obsolete content
roadmap features: the preview pane can be toggled with the editor.

Adobe Flash - Archive of obsolete content
the background color of the entire page is toggled by clicking on a color within the flash animation.

Common Firefox theme issues and solutions - Archive of obsolete content
{ height: 16px; width: 16px; -moz-margin-end: 4px; list-style-image: url("chrome://mozapps/skin/places/defaultfavicon.png"); } web developer tools web developer toolbar {to be added} web console web console buttons do not change appearance on the web console (tools > web developer > web console), the toolbar buttons on the left-hand side do not change their appearance between their toggled on and toggled off status as a result it is not possible to determine which buttons are enabled.

-ms-touch-select - Archive of obsolete content
the -ms-touch-select css property is a microsoft extension that toggles the gripper visual elements that enable touch text selection.

CSS - Archive of obsolete content
a scroll bar.-ms-scrollbar-track-colorthe -ms-scrollbar-track-color css property is a microsoft extension that specifies the color of the track element of a scrollbar.-ms-text-autospacethe -ms-text-autospace css property is a microsoft extension that specifies the autospacing and narrow space width adjustment of text.-ms-touch-selectthe -ms-touch-select css property is a microsoft extension that toggles the gripper visual elements that enable touch text selection.-ms-wrap-flowthe -ms-wrap-flow css property is a microsoft extension that specifies how exclusions impact inline content within block-level elements.-ms-wrap-marginthe -ms-wrap-margin css property is a microsoft extension that specifies a margin that offsets the inner wrap shape from other shapes.-ms-wrap-throughthe -ms-wrap-through cs...

Implementation Status - Archive of obsolete content
303198; 339217; 10.4 delete partial we need to better handle when @at evaluates to nan 303198; 10.5 setindex supported 10.6 toggle supported 10.7 setfocus supported 10.8 dispatch supported 10.9 rebuild partial is dispatching events instead of calling directly 332231; 10.10 recalculate partial is dispatching events instead of calling directly.

Index - Game development
to see the difference, toggle javascript.options.parallel_parsing in about:config.

Async scripts for asm.js - Game development
to see the difference, toggle javascript.options.parallel_parsing in about:config.

Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
you can also toggle voiceover on and off with fn+command + f5.

Mobile accessibility - Learn web development
to turn it off again, navigate back to settings > general > accessibility > voiceover using the above gestures, and toggle the voiceover slider back to off.

Accessible multimedia - Learn web development
we can get this to toggle between play and pause with a simple conditional function, like the following.

WAI-ARIA basics - Learn web development
when this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the aria-disabled state, and some visual indicators too: function togglemusician(bool) { let instruitem = formitems[formitems.length-1]; if(bool) { instruitem.input.disabled = false; instruitem.label.style.color = '#000'; instruitem.input.setattribute('aria-disabled', 'false'); hiddenalert.textcontent = 'instruments played field now enabled; use it to tell us what you play.'; } else { instruitem.input.disabled = true; instruitem.label.sty...

Debugging CSS - Learn web development
you can toggle values in the rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear.

The box model - Learn web development
in the example, you can change display: inline to display: block or display: inline-flex to display: flex to toggle between these display modes.

Advanced form styling - Learn web development
toggle switch example: a checkbox styled to look like a toggle switch.

How to structure a web form - Learn web development
for example, clicking on the "i like cherry" label text in the example below will toggle the selected state of the taste_cherry checkbox: <form> <p> <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"> <label for="taste_1">i like cherry</label> </p> <p> <input type="checkbox" id="taste_2" name="taste_banana" value="banana"> <label for="taste_2">i like banana</label> </p> </form> note: you can find this example in checkbox-label.html (see ...

Structuring the web with HTML - Learn web development
re advanced topics such as: css, and how to use it to style html (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.) javascript, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make ui elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.) modules this topic contains the following modules, in a suggested order for working through them.

Client-side storage - Learn web development
n web storage localstorage.setitem('name', nameinput.value); // run namedisplaycheck() to sort out displaying the // personalized greetings and updating the form display namedisplaycheck(); }); at this point we also need an event handler to run a function when the "forget" button is clicked — this is only displayed after the "say hello" button has been clicked (the two form states toggle back and forth).

Introduction to web APIs - Learn web development
diaelementaudiosourcenode representing the source of our audio — the <audio> element will be played from: const audioelement = document.queryselector('audio'); const playbtn = document.queryselector('button'); const volumeslider = document.queryselector('.volume'); const audiosource = audioctx.createmediaelementsource(audioelement); next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: // play/pause audio playbtn.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } // if track is stopped, play it if (this.getattribute('...

Third-party APIs - Learn web development
let's request a key for the article search api — create a new app, selecting this as the api you want to use (fill in a name and description, toggle the switch under the "article search api" to the on position, and then click "create").

Getting started with Ember - Learn web development
finally, find app.css, located at app/styles/app.css, and paste in the following: :focus, .view label:focus, .todo-list li .toggle:focus + label, .toggle-all:focus + label { /* !important needed because todomvc styles deliberately disable the outline */ outline: #d86f95 solid !important; } this css overrides some of the styles provided by the todomvc-app-css npm package, therefore allowing keyboard focus to be visible.

Componentizing our React app - Learn web development
the file should read like this: import react from "react"; function filterbutton(props) { return ( <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> ); } export default filterbutton; note: you might notice that we are making the same mistake here as we first made for the <todo /> component, in that each button will be the same.

Getting started with Vue - Learn web development
if they are not, use the arrow keys and the space bar to toggle them on.

Understanding client-side JavaScript frameworks - Learn web development
to do this, we will take advantage of vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels.

Strategies for carrying out testing - Learn web development
maybe we could use some javascript to implement a keyboard control for the toggle, or use some other method entirely?

Accessibility API cross-reference
e text text text textbox (if editable) the text nodes of html elements are uneditable by default, apart from <input type=text>, or those with a contenteditable attribute title or caption of window titlebar n/a n/a <title> a button that can be pushed in or out, but doesn't provide separate indicator of checked state n/a toggle_button toggle_button button with aria-pressed attribute a toolbar toolbar tool_bar tool_bar toolbar the little piece of help text that comes up when you put your mouse over something tooltip tool_tip tool_tip tooltip a grid whose rows can be expanded and collapsed in the same manner as for a t...

Accessibility Features in Firefox
the f7 key toggles this feature on/off.

CSUN Firefox Materials
the f7 key toggles this feature on/off.

Mozilla's Section 508 Compliance
stomized without a mouse, all sidebar functions that come with the browser are available through other means 2) java and in-page plugins cannot be used with the keyboard, so they must not be installed for keyboard-only users additional features for the keyboard: 1) find as you type allows for quick navigation to links and convenient text searching 2) browse with caret (f7 key toggles) allows users to select arbitrary content with the keyboard and move through content as if inside a readonly editor.

Eclipse CDT
organizing views use ctrl-m to toggle maximization of the current editor view (the editor must be focused first).

HTMLIFrameElement.clearMatch()
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; search...

Widget Wrappers
nb: this property is writable, and will toggle all the widgets' nodes' disabled states label for api-provided widgets, the label of the widget tooltiptext for api-provided widgets, the tooltip of the widget showinprivatebrowsing for api-provided widgets, whether the widget is visible in private browsing single wrapper properties all of a wrapper's properties are read-only unless otherwise indicated.

Various MathML Tests
testing mathml <merror>, <mtext>: this is a text in mtext this is a text in merror testing <maction>: click to toggle between expressions, and watch the status line onmouseover/onmouseout: statusline#first expression first expression statusline#second expression second expression statusline#and so on...

Index
490 js_toggleoptions jsapi reference, obsolete, spidermonkey js_toggleoptions toggles context-wide options.

JS_GetOptions
see also mxr id search for js_getoptions js_setoptions js_toggleoptions bug 880330 ...

JS_SetOptions
mxr id search for jsoption_unrooted_global see also mxr id search for js_setoptions js_getoptions js_toggleoptions bug 880330 ...

JSAPI reference
ationlimit obsolete since javascript 1.9.1 js_setoperationlimit obsolete since javascript 1.9.1 js_max_operation_limit obsolete since javascript 1.9.1 js_operation_weight_base obsolete since javascript 1.9.1 js_setthreadstacklimit obsolete since jsapi 13 js_setscriptstackquota obsolete since javascript 1.8.6 js_setoptions obsolete since jsapi 27 js_getoptions obsolete since jsapi 27 js_toggleoptions obsolete since jsapi 27 enum jsversion jsversion_ecma_3 jsversion_1_6 jsversion_1_7 jsversion_1_8 jsversion_ecma_5 jsversion_default jsversion_unknown jsversion_latest js_getimplementationversion js_getversion js_setversionforcompartment added in spidermonkey 31 js_stringtoversion js_versiontostring js_setversion obsolete since jsapi 25 js:...

Shell global objects
options([option ...]) get or toggle javascript options.

TPS Bookmark Lists
toggles the "load in sidebar" property.

nsIPrivateBrowsingService
lastchangedbycommandline boolean indicates whether or not the last private browsing mode transition was performed on the command line (using either the -private or -private-toggle switches) rather than the user interface.

Accessibility Inspector - Firefox Developer Tools
the menu items act as toggles.

Debugger keyboard shortcuts - Firefox Developer Tools
shift + f ctrl + shift + f find next in the current file ctrl + g cmd + g ctrl + g search for scripts by name ctrl + p cmd + p ctrl + p resume execution when at a breakpoint f8 f8 1 f8 step over f10 f10 1 f10 step into f11 f11 1 f11 step out shift + f11 shift + f11 1 shift + f11 toggle breakpoint on the currently selected line ctrl + b cmd + b ctrl + b toggle conditional breakpoint on the currently selected line ctrl + shift + b cmd + shift + b ctrl + shift + b 1.

Network monitor recording - Firefox Developer Tools
you can see it here in context: once pressed, the button changes to a play icon, and you can toggle network traffic recording back on by pressing it again.

Edit fonts - Firefox Developer Tools
this setting toggles between italic and normal values for the font-style css property.

Use the Inspector API - Firefox Developer Tools
pseudoclass called after toggle of a pseudoclass.

UI Tour - Firefox Developer Tools
you can toggle the 3-pane view of the inspector.

Style Editor - Firefox Developer Tools
you can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name.

Web Console UI Tour - Firefox Developer Tools
settings ("gear" menu): new in firefox 71, you can click the gear icon to access the new settings menu, where you can toggle the following features on and off: persist logs: when enabled, the console doesn't clear on page reload, or new page load.

AudioTrack - Web APIs
the most common use for accessing an audiotrack object is to toggle its enabled property in order to mute and unmute the track.

Basic animations - Web APIs
2, 400, 4, 4), anima() } function anima() { c.fillstyle = "rgba(0,0,0,0.11)", c.fillrect(0, 0, cc.width, cc.height), fa.foreach(t => t.put()), s.draw(), document.getelementbyid("time").innertext = tmz(), settimeout(() => { requestanimationframe(anima) }, fw) } function emit(t) { key.keydown(t) } function touch(t) { t.classlist.toggle("off"), document.getelementsbyclassname("keypress")[0].classlist.toggle("hide") } var t = new date + "", d = void 0, cc = document.getelementsbytagname("canvas")[0], c = cc.getcontext("2d"); key = {}, key.keydown = function (t) { var e = document.createevent("keyboardevent"); object.defineproperty(e, "keycode", { get: function () { ...

DOMTokenList - Web APIs
domtokenlist.toggle(token [, force]) removes token from the list if it exists, or adds token to the list if it doesn't.

Document.exitFullscreen() - Web APIs
example this example causes the current document to toggle in and out of a full-screen presentation whenever the mouse button is clicked within it.

DocumentOrShadowRoot.activeElement - Web APIs
typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate one (that is, to press a button or toggle a radio button).

Element.onfullscreenchange - Web APIs
function togglefullscreen() { let elem = document.queryselector("video"); elem.onfullscreenchange = handlefullscreenchange; if (!document.fullscreenelement) { elem.requestfullscreen().then({}).catch(err => { alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } function handlefullscreenchange(event) { let el...

Element - Web APIs
element.toggleattribute() toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.

EventTarget.addEventListener() - Web APIs
for example, an event handler callback that can be used to handle both fullscreenchange and fullscreenerror might look like this: function eventhandler(event) { if (event.type == 'fullscreenchange') { /* handle a full screen toggle */ } else /* fullscreenerror */ { /* handle a full screen toggle error */ } } safely detecting option support in older versions of the dom specification, the third parameter of addeventlistener() was a boolean value indicating whether or not to use capture.

EventTarget.removeEventListener() - Web APIs
const body = document.queryselector('body') const clicktarget = document.getelementbyid('click-target') const mouseovertarget = document.getelementbyid('mouse-over-target') let toggle = false; function makebackgroundyellow() { if (toggle) { body.style.backgroundcolor = 'white'; } else { body.style.backgroundcolor = 'yellow'; } toggle = !toggle; } clicktarget.addeventlistener('click', makebackgroundyellow, false ); mouseovertarget.addeventlistener('mouseover', function () { clicktarget.removeeventlistener('click', makebackg...

HTMLDetailsElement - Web APIs
toggle fired when the open/closed state of a <details> element is toggled.

HTMLElement: animationcancel event - Web APIs
mationeventlog.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.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial de...

HTMLElement: animationend event - Web APIs
mationeventlog.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.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial de...

HTMLElement: animationiteration event - Web APIs
mationeventlog.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.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial de...

HTMLElement: animationstart event - Web APIs
mationeventlog.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.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial de...

HTMLElement: input event - Web APIs
for <input> elements with type=checkbox or type=radio, the input event should fire whenever a user toggles the control, per the html5 specification.

HTMLImageElement.alt - Web APIs
view the css editors: if you change the css below, please be sure to close the details box using the toggle at the top of the css view before saving.

HTMLImageElement.sizes - Web APIs
max-width: 60em; min-width: 20em; height: 100vh; border: 4em solid #880e4f; border-radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the javascript string object method replace() to replace the relevant portion of the sizes string.

Keyboard - Web APIs
the keyboard interface of the the keyboard api provides functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.

KeyboardEvent - Web APIs
special cases some keys toggle the state of an indicator light; these include keys such as caps lock, num lock, and scroll lock.

MediaStreamTrack: mute event - Web APIs
note: the condition that most people think of as "muted" (that is, a user-toggled state of silencing a track) is actually managed using the mediastreamtrack.enabled property, for which there are no events.

Using the MediaStream Recording API - Web APIs
checkbox hack for showing/hiding this is fairly well documented already, but we thought we'd give a mention to the checkbox hack, which abuses the fact that you can click on the <label> of a checkbox to toggle it checked/unchecked.

Navigator.keyboard - Web APIs
the keyboard read-only property of the navigator interface returns a keyboard object which provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.

Navigator - Web APIs
navigator.keyboard read only returns a keyboard object which provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.

PaymentResponse.shippingOption - Web APIs
it calls updatedetails() to toggle the shipping method between "standard" and "express".

RTCOfferAnswerOptions - Web APIs
properties voiceactivitydetection optional for configurations of systems and codecs that are able to detect when the user is speaking and toggle muting on and off automatically, this option enables and disables that behavior.

RTCRtpSender - Web APIs
this method can be used, for example, to toggle between the front- and rear-facing cameras on a device.

Selection.containsNode() - Web APIs
an id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret = document.getelementbyid('secret'); const win = document.getelementbyid('win'); // listen for selection changes document.addeventlistener('selectionchange', () => { const selection = window.getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); }); result specifications specification status comment selection apithe definition of 'selection.containsnode()' in that specification.

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.

Simple color animation - Web APIs
<p>a simple webgl program that shows color animation.</p> <p>you can click the button below to toggle the color animation on or off.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color...

Using WebGL extensions - Web APIs
in that case, their name can be prefixed by the vendor prefix (moz_, webkit_, etc.) or the extension is only available once a browser preference has been toggled.

XRSystem: isSessionSupported() - Web APIs
onsessionstarted(xrsession); }); } else { // button is a toggle button.

XRSystem: requestSession() - Web APIs
onsessionstarted(xrsession); }); } else { // button is a toggle button.

XRSystem - Web APIs
if it's found, we know webxr is present, so we proceed by establishing a handler for the button which the user can click to toggle immersive vr mode on and off.

ARIA: gridcell role - Accessibility
if a gridcell is conditionally toggled into a state where editing is prohibited, toggle aria-readonly on the gridcell element.

ARIA: switch role - Accessibility
the developer is required to change the value of the aria-checked attribute dynamically when the switch is toggled.

WAI-ARIA Roles - Accessibility
this role can be used in combination with the aria-pressed attribute to create toggle buttons.aria: cell rolethe cell value of the aria role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information.

overview - Accessibility
general resources dhtml style guide provides keyboard interaction recommendations wai-aria authoring practices guide checkbox aria toggle button and tri-state checkbox examples (from "the paciello group blog") aria example checkbox widgets from the university of illinois menu using wai-aria roles and states with the yui menu control slider from the paciello group blog: aria slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and ari...

Accessibility: What users can do to browse more safely - Accessibility
grayscale is enabled when the color filters button is toggled "on" see also accessibilty accessibility learning path web accessibility for seizures and physical reactions color blindness discussion: "what is the “grayscale” setting for in accessibility options?" contributors many, many thanks to eric eggert from knowbility; for his discussions and huge help on this topic.

Cognitive accessibility - Accessibility
provide a toggle on content that allows users to enable a longer session time limit, or no session time limit at all.

::before (:before) - CSS: Cascading Style Sheets
:before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.target.tagname === 'li') { ev.target.classlist.toggle('done'); } }, false); here is the above code example running live.

:disabled - CSS: Cascading Style Sheets
type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } } result specifications specification status comment h...

CSS data types - CSS: Cascading Style Sheets
<color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment css values and units module level 4 editor's draft css values and units module level 3 candidate recommendation initial definition.

WebKit CSS extensions - CSS: Cascading Style Sheets
a-controls ::-webkit-media-controls-current-time-display ::-webkit-media-controls-enclosure ::-webkit-media-controls-fullscreen-button ::-webkit-media-controls-mute-button ::-webkit-media-controls-overlay-enclosure ::-webkit-media-controls-panel ::-webkit-media-controls-play-button ::-webkit-media-controls-timeline ::-webkit-media-controls-time-remaining-display ::-webkit-media-controls-toggle-closed-captions-button ::-webkit-media-controls-volume-control-container ::-webkit-media-controls-volume-control-hover-background ::-webkit-media-controls-volume-slider ::-webkit-meter-bar ::-webkit-meter-even-less-good-value ::-webkit-meter-inner-element ::-webkit-meter-optimum-value ::-webkit-meter-suboptimum-value -webkit-media-text-track-container ::-webkit-outer-spin-button ::-web...

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
div{ color: black; -moz-appearance: media-seek-back-button; -webkit-appearance: media-seek-back-button; } <div>lorem</div> safari edge media-seek-forward-button div{ color: black; -moz-appearance: media-seek-forward-button; -webkit-appearance: media-seek-forward-button; } <div>lorem</div> safari edge media-toggle-closed-captions-button div{ color: black; -webkit-appearance: media-toggle-closed-captions-button; } <div>lorem</div> chrome safari media-slider div{ color: black; -webkit-appearance: media-slider; } <div>lorem</div> chrome safari edge media-sliderthumb div{ color: black; -webkit-appearance: ...

flex - CSS: Cascading Style Sheets
| <'flex-basis'> ] examples setting flex: auto html <div id="flex-container"> <div class="flex-item" id="flex">flex box (click to toggle raw box)</div> <div class="raw-item" id="raw">raw box</div> </div> css #flex-container { display: flex; flex-direction: row; } #flex-container > .flex-item { flex: auto; } #flex-container > .raw-item { width: 5rem; } var flex = document.getelementbyid("flex"); var raw = document.getelementbyid("raw"); flex.addeventlistener("click", function() { raw.style.display = raw.style.di...

transform-style - CSS: Cascading Style Sheets
we also provide a checkbox allowing you to toggle between this, and transform-style: flat.

Media events - Developer guides
it will also be fired when playback is toggled between paused and playing.

Rich-Text Editing in Mozilla - Developer guides
the stylewithcss command can be used to toggle between css and html markup creation.

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
to find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "monochromatic").

HTML attribute: accept - HTML: Hypertext Markup Language
it is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

<input type="button"> - HTML: Hypertext Markup Language
a simple button we'll begin by creating a simple button with a click event handler that starts our machine (well, it toggles the value of the button and the text content of the following paragraph): <form> <input type="button" value="start machine"> </form> <p>the machine is stopped.</p> const button = document.queryselector('input'); const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value ...

<input type="file"> - HTML: Hypertext Markup Language
it is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

<input type="radio"> - HTML: Hypertext Markup Language
attributes in addition to the common attributes shared by all <input> elements, radio inputs support the following attributes: attribute description checked a boolean indicating whether or not this radio button is the currently-selected item in the group value the string to use as the value of the radio when submitting the form, if the radio is currently toggled on checked a boolean attribute which, if present, indicates that this radio button is the currently selected one in the group.

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input id="checkboxinput" type="checkbox"> <label for="checkboxinput">toggle the checkbox on and off</label> input:checked + label { color: red; font-weight: bold; } attribute selectors it is possible to target different types of form controls based on their type using attribute selectors.

<isindex> - HTML: Hypertext Markup Language
the question of forms for making queries is mentioned in reference to dynatext browser: "the browser displays toggle buttons, text fields etc.

<video>: The Video Embed element - HTML: Hypertext Markup Language
autopictureinpicture a boolean attribute which if true indicates that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application.

HTML elements reference - HTML: Hypertext Markup Language
element description <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.

title - HTML: Hypertext Markup Language
semantics, structure, and apis of html documents using the html title attribute – updated | the paciello group tooltips & toggletips - inclusive components the trials and tribulations of the title attribute - 24 accessibility specifications specification status comment html living standardthe definition of 'title' in that specification.

Global attributes - HTML: Hypertext Markup Language
or, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.

HTML documentation index - HTML: Hypertext Markup Language
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.

Using Feature Policy - HTTP
disabling a feature in a policy is a one-way toggle.

Proxy - JavaScript
rototype, 'constructor', descriptor); return proxy; } var person = function(name) { this.name = name; }; var boy = extend(person, function(name, age) { this.age = age; }); boy.prototype.gender = 'm'; var peter = new boy('peter', 13); console.log(peter.gender); // "m" console.log(peter.name); // "peter" console.log(peter.age); // 13 manipulating dom nodes sometimes you want to toggle the attribute or class name of two different elements.

MathML documentation index - MathML
10 <maction> mathml, mathml reference, mathml:element, mathml:enlivening expressions the following example uses the "toggle" actiontype: 11 <math> mathml, mathml reference, mathml:element the top-level element in mathml is <math>.

SVG Event Attributes - SVG: Scalable Vector Graphics
d, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...

SVG Attribute reference - SVG: Scalable Vector Graphics
d, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...