button.type - Archive of obsolete content
« xul reference home type type: one of the values below the type of button.
... if this attribute is not present, a normal button is created.
... leave the attribute out for a normal button.
...And 12 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.
... create a directory called "data", mkdir data and save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png then open the file called "index.js" in the root of your addon directory and add the following code to it: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } now run the add-on with jpm run.
... the button is added to the toolbar at the top of the browser window: you can't set the initial location for the button, but the user can move it using the browser's customization feature.
...And 11 more matches

toolbarbutton.type - Archive of obsolete content
« xul reference home type type: string the type of button.
... if this attribute is not present, a normal button is created.
... you can set this attribute to the value menu to create a button with a menu popup.
...And 10 more matches

buttons - Archive of obsolete content
« xul reference buttons type: comma-separated list of the values below a comma-separated list of buttons to appear on the dialog box.
... the buttons will be placed in suitable locations for the user's platform and basic event handling will be performed automatically.
... the following values can be used in the list: accept: the ok button, which will accept the changes when pressed.
...And 9 more matches

nsITaskbarPreviewButton
widget/public/nsitaskbarpreviewbutton.idlscriptable this interface is used on microsoft windows to get access to a window preview's toolbar button properties.
... these buttons are displayed below the window preview.
...instead, you use the nsitaskbarwindowpreview.getbutton() to get the objects representing the buttons.
...And 8 more matches

MouseEvent.button - Web APIs
the mouseevent.button read-only property indicates which button was pressed on the mouse to trigger the event.
... this property only guarantees to indicate which buttons are pressed during events caused by pressing or releasing one or multiple buttons.
... users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout.
...And 8 more matches

MouseEvent.buttons - Web APIs
the mouseevent.buttons read-only property indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered.
... each button that can be pressed is represented by a given number (see below).
... if more than one button is pressed, the button values are added together to produce a new number.
...And 8 more matches

Buttons - Game development
instead of starting the game right away we can leave that decision to the player by adding a start button they can press.
... new variables we will need a variable to store a boolean value representing whether the game is currently being played or not, and another one to represent our button.
... add these lines below your other variable definitions: var playing = false; var startbutton; loading the button spritesheet we can load the button spritesheet the same way we loaded the ball's wobble animation.
...And 7 more matches

Gamepad.buttons - Web APIs
the gamepad.buttons property of the gamepad interface returns an array of gamepadbutton objects representing the buttons present on the device.
... each entry in the array is 0 if the button is not pressed, and non-zero (typically 1.0) if the button is pressed.
... each gamepadbutton object has two properties: pressed and value: the pressed property is a boolean indicating whether the button is currently pressed (true) or unpressed (false).
...And 6 more matches

GamepadButton - Web APIs
the gamepadbutton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device.
... a gamepadbutton object is returned by querying any value of the array returned by the buttons property of the gamepad interface.
... properties gamepadbutton.value read only a double value used to represent the current state of analog buttons, such as the triggers on many modern gamepads.
...And 5 more matches

GamepadButton.value - Web APIs
the gamepadbutton.value property of the gamepadbutton interface returns a double value used to represent the current state of analog buttons on many modern gamepads, such as the triggers.
... the values are normalized to the range 0.0 — 1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.
... syntax readonly attribute double value; example var gp = navigator.getgamepads()[0]; if(gp.buttons[0].value > 0) { // respond to analog button being pressed in } value a double.
... specifications specification status comment gamepadthe definition of 'gamepadbutton.value' in that specification.

::-webkit-outer-spin-button - CSS: Cascading Style Sheets
the ::-webkit-outer-spin-button css pseudo-element is used to style the outer part of the spinner button of number picker <input> elements.
... syntax ::-webkit-outer-spin-button examples these examples only works on browsers based on webkit or blink.
... hiding the spinner this example uses input::-webkit-outer-spin-button to find <input> elements' spinner widgets and set their -webkit-appearance to none, thus hiding them.
... html <input type="number"> css input::-webkit-outer-spin-button { -webkit-appearance: none; } result specifications not part of any standard.

::-webkit-search-cancel-button - CSS: Cascading Style Sheets
the ::-webkit-search-cancel-button css pseudo-element represents a button (the "cancel button") at the edge of an <input> of type="search" which clears away the current value of the <input> element.
... this button and pseudo-element are non-standard, supported only in webkit and blink, hence the vendor prefix.
... the clear button is only shown on non-empty search <input> elements.
... syntax selector::-webkit-search-cancel-button specifications not part of any standard.

::-webkit-search-results-button - CSS: Cascading Style Sheets
the ::-webkit-search-results-button css pseudo-element represents a button (the "search results button") at the left edge of an <input> of type="search" which when clicked displays a menu which allows the user to choose from previous recent search queries.
... this button and pseudo-element are non-standard, supported only in webkit and blink, hence the vendor prefix.
... the search results button is only shown on search <input> elements that have a results attribute.
... syntax selector::-webkit-search-results-button specifications not part of any standard.

defaultButton - Archive of obsolete content
« xul reference home defaultbutton type: string normally this attribute should not be set, but if it is, it specifies the default button in the dialog.
... typically, this means that the button will be activated when the enter key is pressed.
... this should be set to one of the same values as those for the buttons attribute.

toolbarbutton.title - Archive of obsolete content
« xul reference home title type: string this functionality only applies when toolbarbutton is used in the customize toolbar dialog.
... the text that is displayed as a button's label when it's in the customize toolbar palette.
... this does not affect the button's label when it is in a toolbar, which remains determined by the label attribute.

defaultButton - Archive of obsolete content
« xul reference defaultbutton type: string normally this attribute should not be set, but if it is, it specifies the default button in the dialog.
... typically, this means that the button will be activated when the enter key is pressed.
... this should be set to one of the same values as those for the buttons attribute.

spinbuttons - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] spin buttons are two arrows, one to increase a value and one to decrease a value.
... spin buttons are not used as separate elements, but are used in combination with other elements to create a control that can be increased and decreased.
... for instance, spinbuttons are used for the number type textbox, and with the timepicker and datepicker.

Site Identity Button
the site identity button is a feature in firefox that gives users more information about the sites they visit.
... depending on the configuration of your website, this button may display a number of different icons.
... if the site identity button on your site shows something you do not expect (for example, an orange warning triangle when you expect a green padlock) you can find out the cause of the problem by looking in the web console in the firefox developer tools: ensure your web console is displaying messages in the 'security' category force-refresh the page on your site that is causing problems watch for any security messages that may appear a downgraded security ui will be due to one of these three problems: mixed content - while your page has been served over tls, but subresources loaded for your page have not.

GamepadButton.pressed - Web APIs
the gamepadbutton.pressed property of the gamepadbutton interface returns a boolean indicating whether the button is currently pressed (true) or unpressed (false).
... syntax var ispressed = navigator.getgamepads()[0].pressed; example var gp = navigator.getgamepads()[0]; // get the first gamepad object if(gp.buttons[0].pressed == true) { // respond to button being pressed } value a boolean.
... specifications specification status comment gamepadthe definition of 'gamepadbutton.pressed' in that specification.

HTMLButtonElement.labels - Web APIs
the htmlbuttonelement.labels read-only property returns a nodelist of the <label> elements associated with the <button> element.
... syntax var labelelements = button.labels; return value a nodelist containing the <label> elements associated with the <button> element.
... example html <label id="label1" for="test">label 1</label> <button id="test">button</button> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.

::-webkit-file-upload-button - CSS: Cascading Style Sheets
the ::-webkit-file-upload-button css pseudo-element represents the button of an <input> of type="file".
... syntax selector::-webkit-file-upload-button examples html <form> <label for="fileupload">upload file</label><br> <input type="file" id="fileupload"> </form> css input, label { display: block; } input[type=file]::-webkit-file-upload-button { border: 1px solid grey; background: #fffaaa; } below is the example for you to try.
... the screenshot to the left shows what the button will look like if you are without access to chrome, opera or safari.

::-webkit-inner-spin-button - CSS: Cascading Style Sheets
the ::-webkit-inner-spin-button css pseudo-element is used to style the inner part of the spinner button of number picker input elements.
... syntax ::-webkit-inner-spin-button examples these examples work only in browsers based on webkit and blink.
... html <input type="number"> css input[type=number]::-webkit-inner-spin-button { cursor: pointer; } result specifications not part of any standard.

closebutton - Archive of obsolete content
« xul reference home closebutton obsolete since gecko 1.9.2 type: boolean if this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends.
...you can set an image to the "new tab" and "close" buttons by applying them to the tabs-newbutton and tabs-closebutton classes respectively.

searchbutton - Archive of obsolete content
« xul reference home searchbutton type: boolean if true, the search field will only fire a command event when the user presses the search button or presses the enter key.

buttonaccesskeyaccept - Archive of obsolete content
« xul reference home buttonaccesskeyaccept type: string the access key to use for the "accept" button.

buttonaccesskeycancel - Archive of obsolete content
« xul reference home buttonaccesskeycancel type: string the access key to use for the "cancel" button.

buttonaccesskeydisclosure - Archive of obsolete content
« xul reference home buttonaccesskeydisclosure type: string the access key to use for the "disclosure" button.

buttonaccesskeyextra1 - Archive of obsolete content
« xul reference home buttonaccesskeyextra1 type: string the access key to use for the first extra button.

buttonaccesskeyextra2 - Archive of obsolete content
« xul reference home buttonaccesskeyextra2 type: string the access key to use for the second extra button.

buttonaccesskeyhelp - Archive of obsolete content
« xul reference home buttonaccesskeyhelp type: string the access key to use for the "help" button.

buttonalign - Archive of obsolete content
« xul reference home buttonalign type: string the value of the align attribute for the box containing the buttons.

buttondir - Archive of obsolete content
« xul reference home buttondir type: string the value of the dir attribute for the box containing the buttons.

buttondisabledaccept - Archive of obsolete content
« xul reference home buttondisabledaccept type: boolean if true, the accept button is disabled.

buttonlabelaccept - Archive of obsolete content
« xul reference home buttonlabelaccept type: string the label to appear on the "accept" button.

buttonlabelcancel - Archive of obsolete content
« xul reference home buttonlabelcancel type: string the label to appear on the "cancel" button.

buttonlabeldisclosure - Archive of obsolete content
« xul reference home buttonlabeldisclosure type: string the label to appear on the "disclosure" button.

buttonlabelextra1 - Archive of obsolete content
« xul reference home buttonlabelextra1 type: string the label to appear on the first extra button.

buttonlabelextra2 - Archive of obsolete content
« xul reference home buttonlabelextra2 type: string the label to appear on the second extra button.

buttonlabelhelp - Archive of obsolete content
« xul reference home buttonlabelhelp type: string the label to appear on the "help" button.

buttonorient - Archive of obsolete content
« xul reference home buttonorient type: string the value of the orient attribute for the box containing the buttons.

buttonpack - Archive of obsolete content
« xul reference home buttonpack type: string the value of the pack attribute for the box containing the buttons.

fullscreenbutton - Archive of obsolete content
« xul reference home fullscreenbutton type: boolean set this attribute to true to display a button in the window chrome to allow the user to switch the window into full screen mode.

hidespinbuttons - Archive of obsolete content
« xul reference home hidespinbuttons type: boolean if true, the number box does not have arrow buttons next to it to allow the user to adjust the value.

getButton - Archive of obsolete content
« xul reference home getbutton( type ) return type: button element returns the button element in the dialog corresponding to the given type.

searchButton - Archive of obsolete content
« xul reference searchbutton type: boolean gets and sets the value of the searchbutton attribute.

spinButtons - Archive of obsolete content
« xul reference spinbuttons type: element the read-only property returns a reference to the spinbuttons element used by the number box.

Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...

Index - Archive of obsolete content
63 ui add-on sdk, add-ons, extensions, reference provides access to button, toolbar, and sidebar ui objects.
... 118 ui/button/action add a button to the firefox user interface.
... 119 ui/button/toggle add a toggle button to the firefox user interface.
...And 104 more matches

Index - Archive of obsolete content
this is a special type of button which is drawn differently.
... unlike normal buttons, a statusbarpanel can only have a label or an image but not both.
... 32 button.type xul attributes, xul reference no summary!
...And 79 more matches

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
this page tells you step-by-step how to make a custom toolbar button in seamonkey 1.x.
... (for seamonkey 2, firefox, thunderbird and sunbird, see the page: custom toolbar button) you do not need any special technical skills or tools, and almost all the information you need is on this page.
...instead, you make your custom button as a self-contained extension.
...And 63 more matches

dialog - Archive of obsolete content
the buttons attribute may be used to set which buttons should appear in the dialog box.
... these buttons will be placed in the correct locations for the user's platform.
... attributes buttonaccesskeyaccept, buttonaccesskeycancel, buttonaccesskeydisclosure, buttonaccesskeyextra1, buttonaccesskeyextra2, buttonaccesskeyhelp, buttonalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeepe...
...And 55 more matches

Index - Web APIs
796 datatransfer.mozsourcenode api, non-standard, property, reference, drag and drop the datatransfer.mozsourcenode property is used to determine the node over which the mouse cursor was located when the the drag operation was initiated (for example, when a <button> was clicked).
... 983 document: dragend event api, dom, document, dragevent, event, reference, web, drag and drop, dragend the dragend event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).
...for mouse, it is fired when the device transitions from no buttons depressed to at least one button depressed.
...And 53 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
by referring to a special style sheet within chrome://global/skin/, we can make label and button sizes, window background color, etc, match the currently selected theme in firefox.
... <label value="horizontal layout"/> <hbox> <button label="horizontal1"/> <button label="horizontal2"/> </hbox> <label value="vertical layout"/> <vbox> <button label="vertical1"/> <button label="vertical2"/> </vbox> <label value="mixed"/> <hbox> <button label="mixed1"/> <vbox> <button label="mixed2"/> <button label="mixed3"/> </vbox> <button label="mixed4"/> </hbox> listing 3: horizontal and vertical boxes figure 1: outp...
... <box flex="1" align="end" pack="end"> <button label="happy"/> <button label="sad"/> </box> listing 2: how align and pack respond to orient figure 2: output from listing 2 flex elements ordinarily have fixed height and width.
...And 46 more matches

prefwindow - Archive of obsolete content
a row of buttons appears across the preference dialog, one for each prefpane.
... attributes buttonalign, buttondir, buttonorient, buttonpack, buttons, defaultbutton, lastselected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpan...
... buttonalign type: string the value of the align attribute for the box containing the buttons.
...And 45 more matches

Key Values - Web APIs
ui keys keyboardevent.key value description virtual keycode windows mac linux android "accept" the accept, commit, or ok key or button.
...typically used as an exit, cancel, or "escape this operation" button.
... vk_select (0x29) gdk_key_select (0xff60) keycode_button_select (109) "zoomin" [6] the zoomin key.
...And 43 more matches

Element Positioning - Archive of obsolete content
for example, the position of a button in a horizontal box is to the right of the previous button, if any.
...for example, a button's width is determined by the amount of text inside the button.
...a horizontal box with three buttons in it will be as wide as the three buttons, plus a small amount of padding.
...And 36 more matches

nsIPromptService
inherits from: nsisupports last changed in gecko 1.7.5 you can define access keys (or keyboard shortcuts) for buttons by including an ampersand ("&") in front of the character that should be the access key for that button.
... if you need to include an ampersand in the button's text, use two of them, like this: "&&".
...wstring acheckmsg, inout boolean acheckstate); boolean confirm(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext); boolean confirmcheck(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in wstring acheckmsg, inout boolean acheckstate); print32 confirmex(in nsidomwindow aparent,in wstring adialogtitle,in wstring atext, in unsigned long abuttonflags,in wstring abutton0title, in wstring abutton1title,in wstring abutton2title,in wstring acheckmsg, inout boolean acheckstate); boolean prompt(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, inout wstring avalue, in wstring acheckmsg, inout boolean acheckstate); boolean promptusernameandpassword(in nsidomwindow aparent, in wstring adialogtitle, in wstring ...
...And 35 more matches

Using Spacers - Archive of obsolete content
this would be how one would place buttons on the right or bottom of a window and have them stick to the right or bottom edge no matter what size the window is.
...let's see what happens when a spacer is added between the text box and the find button.
...the buttons have been pushed over.
...And 34 more matches

Componentizing our Svelte app - Learn web development
newtodo.svelte: the text input and button that allow you to enter a new todo item.
... filterbutton.svelte: the all, active, and completed buttons that allow you to apply filters to the displayed todo items.
... moreactions.svelte: the check all and remove completed buttons at the bottom of the ui that allow you to perform mass actions on the todo items.
...And 33 more matches

<input type="radio"> - HTML: Hypertext Markup Language
<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.
... only one radio button in a given group can be selected at the same time.
... radio buttons are typically rendered as small circles, which are filled or highlighted when selected.
...And 32 more matches

Basic native form controls - Learn web development
you've already met some form elements, including <form>, <fieldset>, <legend>, <textarea>, <label>, <button>, and <input>.
... this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and text.
...it is used for creating most types of form widgets including single line text fields, time and date controls, controls without text input like checkboxes, radio buttons, and color pickers, and buttons.
...And 29 more matches

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
syntax /* css basic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available ...
...values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: caret; values standard keywords value demo browser description none div{ color: black; -moz-appearance:none; -webkit-appearance:none; appearance:none; } <div>lorem</div> firefox chrome safari edge no special styling is applied.
... menulist-button div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } <div>lorem</div> firefox chrome safari edge the element is styled as a button that would indicate a menulist can be opened.
...And 29 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
the following new components will be developed throughout the course of this article: moreactions: displays the check all and remove completed buttons, and emits the corresponding events required to handle their functionality.
... newtodo: displays the <input> field and add button for adding a new todo.
... repl to code along with us using the repl, start at https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons.
...And 28 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the available types are as follows: type description basic examples spec button a push button with no default behavior displaying the value of the value attribute, empty by default.
... <input type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected.
... image a graphical submit button.
...And 27 more matches

Desktop gamepad controls - Game development
the gamepad api gives you the ability to connect a gamepad to your computer and detect pressed buttons directly from the javascript code thanks to the browsers implementing such feature.
...first, we need an event listener to listen for the connection of the new device: window.addeventlistener("gamepadconnected", gamepadhandler); it's executed once, so we can create some variables we will need later on for storing the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; output.innerhtml = "gamepad: " + controller.id; } the second line in the gamepadhandler function shows up on the screen when the device is connected: we can also show the id of the device — in the case above we're using the xbox 360 wireless controller.
... to update the state of the gamepad's currently pressed buttons we will need a function that will do exactly that on every frame: function gamepadupdatehandler() { buttonspressed = []; if(controller.buttons) { for(var b=0; b<controller.buttons.length; b++) { if(controller.buttons[b].pressed) { buttonspressed.push(b); } } } } we first reset the buttonspressed array to get it ready to store the latest info we'll write to it from the current frame.
...And 26 more matches

Video player styling basics - Developer guides
the markup for the custom controls now looks as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state...
...="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> </div> related css alteration the previous article simply set the display property of the video controls to block in order to display them.
... this "data-state" idea is also used for setting the current state of buttons within the video control set, which allows specific state styling.
...And 26 more matches

ARIA Test Cases - Accessibility
for example, "options, button, alt+shift+t" should be spoken if there is an options button in the alert with alt+shift+t as an accesskey.
... alertdialog alert dialog yui alert dialog (3rd button in this page) expected at behavior: at should speak the fact that this is an alert, the title and contents of the dialog, then place virtual focus or the real focus on the desired control (like a button).
... screen magnifier should show the focused button or emulate any other standard behavior found in notification dialogs in windows or respective operating systems.
...And 25 more matches

Broadcasters and Observers - Archive of obsolete content
command attribute forwarding we've already seen that elements such as buttons can be hooked up to commands.
...for instance, if you place a label attribute on a command element, any buttons attached to the command will share the same label.
... example 1 : source view <command id="my_command" label="open"/> <button command="my_command"/> <checkbox label="open in a new window" command="my_command"/> in this example, the button does not have a label attribute, however it is attached to a command that does.
...And 24 more matches

Inputs and input sources - Web APIs
actions include both selection actions, such as clicking on a button, and squeeze actions, such as pulling a trigger or tightening your grip while wearing haptic gloves.
... motion-sensing controllers, which use accelerometers, magnetometers, and other sensors for motion tracking and targeting and may additionally include any number of buttons, joysticks, thumbpads, touchpads, force sensors, and so on to provide additional input sources for both targeting and selection.
... spatially-tracked articulated hands, such as haptic gloves can provide both targeting and squeeze actions, as well as selection if outfitted with buttons or other sources of selection actions.
...And 24 more matches

<input type="submit"> - HTML: Hypertext Markup Language
<input> elements of type submit are rendered as buttons.
... when the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.
... <input type="submit" value="send request"> value a domstring used as the button's label events click supported common attributes type and value idl attributes value methods none value an <input type="submit"> element's value attribute contains a domstring which is displayed as the button's label.
...And 23 more matches

Introduction to events - Learn web development
for example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box.
...in the following example, we have a single <button>, which when pressed, makes the background change to a random color: <button>change color</button> button { margin: 10px }; the javascript looks like so: const btn = document.queryselector('button'); function random(number) { return math.floor(math.random() * (number+1)); } btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; ...
...document.body.style.backgroundcolor = rndcol; } in this code, we store a reference to the button inside a constant called btn, using the document.queryselector() function.
...And 22 more matches

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 w...
... the controls html is probably the most interesting: we have four <button>s — play/pause, stop, rewind, and fast forward.
... each <button> has a class name, a data-icon attribute for defining what icon should be shown on each button (we'll show how this works in the below section), and an aria-label attribute to provide an understandable description of each button, since we're not providing a human-readable label inside the tags.
...And 22 more matches

Event reference
form events event name fired when reset the reset button is pressed submit the submit button is pressed printing events event name fired when beforeprint the print dialog is opened afterprint the print dialog is closed text composition events event name fired when compositionstart the composition of a passage of text is prepared (similar to keydown f...
... keyup any key is released mouse events event name fired when auxclick a pointing device button (any non-primary button) has been pressed and released on an element.
... click a pointing device button (any button; soon to be primary button only) has been pressed and released on an element.
...And 22 more matches

Box-shadow generator - CSS: Cascading Style Sheets
box-shadow generator html content <div id="container"> <div class="group section"> <div id="layer_manager"> <div class="group section"> <div class="button" data-type="add"> </div> <div class="button" data-type="move-up"> </div> <div class="button" data-type="move-down"> </div> </div> <div id="stack_container"></div> </div> <div id="preview_zone"> <div id="layer_menu" class="col span_12"> <div class="button" id="element" data-type="subject" data-title="element"> element </div> <div class="button" id="before" data-type="subject" data...
...-title=":before"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="ui-checkbox" data-topic='before' data-label=":before"></div> <div class="ui-checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> ...
...btn-set { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; text-align: center; } .ui-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } .ui-slider-input > input { margin: 0 10px; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* * ui button */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; ...
...And 21 more matches

Modifying a XUL Interface - Archive of obsolete content
for example, the following will add a button to a xul window: example 1 : source view <script> function addbutton(){ var abox = document.getelementbyid("abox"); var button = document.createelement("button"); button.setattribute("label","a new button"); abox.appendchild(button); } </script> <box id="abox" width="200"> <button label="add" oncommand="addbutton();"/> </box> this example has two parts a box container el...
... the box element contains a button element.
... the button element has two attributes "label" and "oncommand" a javascript function named "addbutton()" this script first gets a reference to the box with getelementbyid(), which is the container to add a new button to.
...And 20 more matches

XUL controls - Archive of obsolete content
<button> a button that can be pressed by the user.
... <button label="save" accesskey="s"/> more information about the button element.
... button reference <button type="menu"> a button that has a drop down menu attached to it.
...And 20 more matches

Focus management with Vue refs - Learn web development
specifically, when a user activates the "edit" button, we remove the "edit" button from the dom, but we don't move the user's focus anywhere, so in effect it just disappears.
...the focus should move to the "add" button.
...one more time, and focus should be on the first "edit" button.
...And 20 more matches

confirm - Archive of obsolete content
method of install object syntax int confirm( string atext ); int confirm( string atext, string adialogtitle, number abuttonflags, string abutton0title, string abutton1title, string abutton2title, string acheckmsg, object acheckstate ); parameters the second, extended confirm() method is supported starting with gecko 1.8.
... abuttonflags a set of flags defining the buttons that should appear in the dialog.
... the value is calculated by multiplying the corresponding button position constant with a button title constant for each button, then adding the results and any additional options (see other constants).
...And 19 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
operating system specific issues windows 7 windows 7 aero missing right-hand title bar buttons when tabs are on top and the menu bar is disabled, firefox is missing the min/max/restore/close button on the right side of the title bar.
... mac os x os x lion missing toolbar button icons due to firefox bug 679708 and bug 702558, some toolbar buttons icons may be missing on firefox 8 and later running on mac os x lion.
... in order to work around this issue, you need to either rename any of the following files that are in your chrome://browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://browser/skin/lion/: keyhole-circle.png toolbar.png toolbarbutton-dropmarker.png tabbrowser/alltabs-box-bkgnd-icon.png tabview/tabview.png places/toolbar.png linux linux select box fields are showing both drop arrow and spinner arrows on linux: the styling of drop down select box fields may show both a drop arrow and up/down spinner arrows.
...And 19 more matches

Theme changes in Firefox 2 - Archive of obsolete content
browser/dropmark-nav-small.png new file; used as the drop-down menu arrow on the navigation buttons, when using small icons.
... browser/dropmark-nav.png new file; used as the drop-down menu arrow on the navigation buttons.
... browser/search-go-rtl.png new file; the go button displayed when it's at the left end of the search bar.
...And 19 more matches

Implementing controls using the Gamepad API - Game development
the gamepad api achieves this by providing an interface exposing button presses and axis changes that can be used inside javascript code to handle the input.
... there's also a number of other devices with various different button layouts that more or less work across browser implementations.
...is fired when the browser detects the connection of a new gamepad while the second one is fired when a gamepad is disconnected (either physically by the user or due to inactivity.) in the demo, the gamepadapi object is used to store everything related to the api: var gamepadapi = { controller: {}, turbo: false, connect: function() {}, disconnect: function() {}, update: function() {}, buttonpressed: function() {}, buttons: [], buttonscache: [], buttonsstatus: [], axesstatus: [] }; the buttons array contains the xbox 360 button layout: buttons: [ 'dpad-up','dpad-down','dpad-left','dpad-right', 'start','back','axis-left','axis-right', 'lb','rb','power','a','b','x','y', ], this can be different for other types of gamepads like the ps3 controller (or a no-name, generic o...
...And 19 more matches

<input type="image"> - HTML: Hypertext Markup Language
<input> elements of type image are used to create graphical submit buttons, i.e.
... submit buttons that take the form of an image rather than text.
... additional attributes in addition to the attributes shared by all <input> elements, image button inputs support the following attributes: attribute description alt alternate string to display when the image can't be shown formaction the url to which to submit the data formenctype the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boole...
...And 19 more matches

Accessibility in React - Learn web development
press the tab key, and you will see the outline appear around the "add" button beneath the input.
... press tab a few more times, and you will see this dashed focus indicator move between each of the filter buttons.
... keep going until the focus indicator is around the first "edit" button.
...And 18 more matches

React interactivity: Editing, filtering, conditional rendering - Learn web development
into the todo() function, beneath your usestate() hook but above the return statement: const editingtemplate = ( <form classname="stack-small"> <div classname="form-group"> <label classname="todo-label" htmlfor={props.id}> new name for {props.name} </label> <input id={props.id} classname="todo-text" type="text" /> </div> <div classname="btn-group"> <button type="button" classname="btn todo-cancel"> cancel <span classname="visually-hidden">renaming {props.name}</span> </button> <button type="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" onclick={() => props.deletetask(props.id)} > delete <span classname="visually-hidden">{props.name}</span> </button> </div> </div> ); we've now got the two different template structures — "edit" an...
...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 17 more matches

Adding Event Handlers - Archive of obsolete content
we would want to add a script to handle the find button, the cancel button and to handle each menu command.
...a typical event is the user pressing a mouse button or pressing a key.
... for example, when the mouse is moved over a button that is inside a box, a 'mousemove' event is generated, and sent first to the window, followed by the document, and then the box.
...And 16 more matches

Using the Gamepad API - Web APIs
if a gamepad is already connected when the page loaded, the gamepadconnected event is dispatched to the focused page when the user presses a button or moves an axis.
...%d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); each gamepad has a unique id associated with it, which is available on the event's gamepad property.
...we can do much more with the gamepad object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time.
...And 16 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
iv id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> <div class="property"> <div class="name"> axis unit </div> <div class="ui-dropdown" data-topic="axis-unit" data-selec...
...ted="1"> <div data-value='px'> pixels (px) </div> <div data-value='%'> percentage (%) </div> </div> <div id="delete-axis" class="button"> delete line </div> </div> <div class="property"> <div class="ui-slider" data-topic="axis-rotation" data-info="rotation" data-min="-180" data-value="0" data-max="180"></div> </div> </div> <div id="tool-section" class="section"> <div class="title"> tool settings </div> <div class="property"> <div class="name"> alpha background </div> <div id="canvas-bg"></div> <div id="a...
...dd-axis" class="button"> add line </div> </div> <div id="order"> <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; ...
...And 16 more matches

appendNotification - Archive of obsolete content
« xul reference home appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it.
... buttons - array of button descriptions to appear on the notification.
... priority levels (defined as properties of notificationbox) : priority_info_low priority_info_medium priority_info_high priority_warning_low priority_warning_medium priority_warning_high priority_critical_low priority_critical_medium priority_critical_high priority_critical_block buttons : the buttons argument is an array of button descriptions.
...And 15 more matches

Actions - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <button uri="?relateditem" label="?relateditem"/> </action> </template> </vbox> in this example, we omit the <xul:rule> element around the <xul:action> as it is optional when we want to generate content unconditionally.
...in this case, a button will be created for each result.
... there are three results, so three buttons will be created.
...And 15 more matches

Templates - Archive of obsolete content
let's take a simple example where we want to create a button for each top-level bookmark.
...this example will only get the top-level bookmarks (or bookmark folders) as we're going to create buttons.
... example 1 : source <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <button uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </template> </vbox> here, a vertical box has been created that will contain a column of buttons, one for each top-level bookmark.
...And 15 more matches

HTML: A good basis for accessibility - Learn web development
for example, a control button to play a video on your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigat...
...e between buttons using the tab key and activate their selection using return or enter.
...</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> ...
...And 15 more matches

HTML: A good basis for accessibility - Learn web development
for example, a control button to play a video on your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigat...
...e between buttons using the tab key and activate their selection using return or enter.
...</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> ...
...And 15 more matches

Handling common accessibility problems - Learn web development
the elements that have this capability are the common ones that allow user to interact with web pages, namely links, <button>s, and form elements like <input>.
... you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input (other form elements have different controls, for example the <select> element can have its options displayed and cycled between using the up and down arrow keys).
...next, you have to open your mac's system preferences app, then go to keyboard > shortcuts, then select the all controls radio button.
...And 15 more matches

Using the Browser API
demo to demonstrate basic usage of this api, we have created a simple browser api demo that provides buttons allowing you to (re)load web pages, stop loading, move forward and back in history, and zoom in and out of the page.
... aside from the iframe, there are some basic controls: <button> elements, a simple <form> to implement the browser controls, and a search bar.
... the search bar also contains buttons, as well as a form to type search requests into.
...And 15 more matches

Dialogs and Prompts - Archive of obsolete content
add ok and cancel buttons in an order that is consistent with os default (but the button set and layout is highly customizable, see below).
... simple dialog code the following xul code defines a simple dialog with two buttons, ok and cancel (buttons="accept,cancel" attribute on dialog).
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." title="..." buttons="accept,cancel" ondialogaccept="return onaccept();" ondialogcancel="return oncancel();"> <script src="chrome://..."/> <!-- content --> </dialog> you need to implement onaccept and oncancel functions in your script.
...And 14 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
in fact, you need to use cross-package overlays to append buttons or menus to the firefox browser window.
... use a cross-package overlay on top of browser.xul to add a button or menu item to the firefox browser window.
... content/overlay.xul xul file that will be overlaid on the firefox browser window, adding buttons, menu items, etc.
...And 14 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
so to cancel our above timeout, you'd do this: cleartimeout(mygreeting); note: see greeter-app.html for a slightly more involved demo that allows you to set the name of the person to say hello to in a form, and cancel the greeting using a separate button (see the source code also).
... you need to display a time as before, but in this example, you need: a "start" button to start the stopwatch running.
... a "stop" button to pause/stop it.
...And 14 more matches

Build your own function - Learn web development
you'll see that the html is simple — the body contains just a single button.
... finally, add the following code inside the curly braces: const html = document.queryselector('html'); const panel = document.createelement('div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); closebtn.onclick = function() { panel.parentnode.removechild(panel); } this is quite a lot of code to go through, so we'll walk you through it bit by bit.
... const panel = document.createelement('div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); the next two sections make use of the same createelement() and appendchild() functions we've already seen to create two new elements — a <p> and a <button> — and insert them in the page as children of the panel <div>.
...And 14 more matches

Recording a media element - Web APIs
html content <p>click the "start" button to begin video recording for a few seconds.
... you can stop the video by clicking the creatively-named "stop" button.
... the "download" button will download the received data (although it's in a raw, unwrapped form that isn't very useful).
...And 14 more matches

Adding captions and subtitles to HTML5 video - Developer guides
in addition to adding the <track> elements, we have also added a new button to control the subtitles menu that we will build.
... as a consequence, the video controls now look as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> <button id="subtitles" type="button" data-state="subtitles">cc</button> </div> css changes th...
...e video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward.
...And 14 more matches

Panels - Archive of obsolete content
<?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example.
... when the button is pressed, the panel is opened.
...you can also place a close button in the panel which will close the panel with a script if desired.
...And 13 more matches

Box Model Details - Archive of obsolete content
we've added them to buttons and textboxes, but we can also add them to spacers or boxes.
...example 1 : source view <hbox flex="1"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> in the example above, all three elements will resize themselves as they are all flexible.
... the two buttons indicate a minimum width of 100 pixels.
...And 13 more matches

Advanced form styling - Learn web development
as we saw in the previous article, text fields and buttons are perfectly easy to style; now we will dig into styling the bits that are more problematic.
... to recap what we said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using css.
...ext"> </p> <p> <label for="date">date: </label> <input id="date" name="date" type="datetime-local"> </p> <p> <label for="radio">radio: </label> <input id="radio" name="radio" type="radio"> </p> <p> <label for="checkbox">checkbox: </label> <input id="checkbox" name="checkbox" type="checkbox"> </p> <p><input type="submit" value="submit"></p> <p><input type="button" value="button"></p> </form> applying the following css to them removes system-level styling.
...And 13 more matches

UI pseudo-classes - Learn web development
:checked, :indeterminate, and :default: respectively target checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g.
... <label for="fname">first name: </label> <input id="fname" name="fname" type="text" required> </div> <div> <label for="lname">last name: </label> <input id="lname" name="lname" type="text" required> </div> <div> <label for="email">email address (include if you want a response): </label> <input id="email" name="email" type="email"> </div> <div><button>submit</button></div> </fieldset> </form> here, the first name and last name are required, but the email address is optional.
... note: if one radio button in a same-named group of radio buttons has the required attribute, all the radio buttons will be invalid until one is selected, but only the one with the attribute assigned will actually match :required.
...And 13 more matches

What is JavaScript? - Learn web development
we used a click event in our example above to detect when the button is clicked and then run the code that updates the text label.
...you'll see that the html creates a simple web page containing a clickable button.
...pt> // javascript goes here </script> now we'll add some javascript inside our <script> element to make the page do something more interesting — add the following code just below the "// javascript goes here" line: document.addeventlistener("domcontentloaded", function() { function createparagraph() { let para = document.createelement('p'); para.textcontent = 'you clicked the button!'; document.body.appendchild(para); } const buttons = document.queryselectorall('button'); for(let i = 0; i < buttons.length ; i++) { buttons[i].addeventlistener('click', createparagraph); } }); save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.
...And 13 more matches

Vue conditional rendering: editing existing todos - Learn web development
copy the following code into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for &quot;{{label}}&quot;</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button type="submit" class="btn btn__primary"> save <span class="visually-hidden">edit for {{label}}</span> </button> </div> </form> </template> <script> export default { props: { label: { type: string, requ...
... there is a "save" button and a "cancel" button: when the "save" button is clicked, the component emits the new label via an item-edited event.
... when the "cancel" button is clicked, the component signals this by emitting an edit-cancelled event.
...And 13 more matches

Accessibility API cross-reference
all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc.
...all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc.
... banner a portion of quoted content which is 'too long' to appear 'inline' n/a blockquote <blockquote> entire window border as 1 object border n/a n/a n/a specific kind of button that drops down a list of items, msaa only buttondropdown n/a n/a expressed with aria-haspopup on an element with a button role specific kind of button that drops down a grid, msaa only buttondropdowngrid n/a n/a specific kind of button that drops down a menu, msaa only buttonmenu n/a n/a expressed with ari...
...And 13 more matches

nsPIPromptService
ebutton0text the value is 8.
... this is the label of the first button on the dialog.
... ebutton1text the value is 9.
...And 13 more matches

Intensive JavaScript - Firefox Developer Tools
there's also a video version of this walkthrough: the demo website looks like this: it has three controls: a radio button group to control how to run the javascript: as a single blocking operation in the main thread, as a series of smaller operations in the main thread using requestanimationframe(), or in another thread using a worker.
... a button to run the javascript, labeled "do pointless computations!".
... a button to start and stop some css animations.
...And 13 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
setup and utility functions next, we declare the variables and constants used throughout the application, starting with those used to store webgl and webxr specific information: let polyfill = null; let xrsession = null; let xrinputsources = null; let xrreferencespace = null; let xrbutton = null; let gl = null; let animationframerequestid = 0; let shaderprogram = null; let programinfo = null; let buffers = null; let texture = null; let mouseyaw = 0; let mousepitch = 0; this is followed by a set of constants, mostly to contain various vectors and matrices used while rendering the scene.
... window.addeventlistener("load", onload); function onload() { xrbutton = document.queryselector("#enter-xr"); xrbutton.addeventlistener("click", onxrbuttonclick); projectionmatrixout = document.queryselector("#projection-matrix div"); modelmatrixout = document.queryselector("#model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.queryselector("#mouse-matrix div"); if (!navigator.xr || enablef...
...orcepolyfill) { 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.
...And 13 more matches

Creating a Skin - Archive of obsolete content
we'll make some simple color changes, modify the button styles, and modify the spacing a bit.
... adding toolbar icons it is somewhat difficult to distinguish the buttons on the toolbar from the commands on the menu.
... we could add some icons to the buttons to make them clearer.
...And 12 more matches

More Event Handlers - Archive of obsolete content
in the example below, currenttarget is always the vbox, whereas target would be the specific element, either the button or checkbox, that was activated.
... example 1 : source view <vbox oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing.
...example 2 : source view <hbox id="outerbox"> <button id="okbutton" label="ok"/> </hbox> <script> function buttonpressed(event){ alert('button was pressed!'); } function boxpressed(event){ alert('box was pressed!'); event.stoppropagation(); } var button = document.getelementbyid("okbutton"); button.addeventlistener('command',buttonpressed,true); var outerbox = document.getelementbyid("outerbox"); outerbox.addeventlistener('command',boxpres...
...And 12 more matches

A first splash into JavaScript - Learn web development
re let randomnumber = math.floor(math.random() * 100) + 1; const guesses = document.queryselector('.guesses'); const lastresult = document.queryselector('.lastresult'); const loworhi = document.queryselector('.loworhi'); const guesssubmit = document.queryselector('.guesssubmit'); const guessfield = document.queryselector('.guessfield'); let guesscount = 1; let resetbutton; function checkguess() { let userguess = number(guessfield.value); if (guesscount === 1) { guesses.textcontent = 'previous guesses: '; } guesses.textcontent += userguess + ' '; if (userguess === randomnumber) { lastresult.textcontent = 'congratulations!
... loworhi.textcontent = 'last guess was too low!' ; } else if(userguess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; } guesssubmit.addeventlistener('click', checkguess); function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } function resetgame() { guesscount = 1; const resetparas = document.queryselectorall('.resultparas p'); for(let i = 0 ; i < resetparas.length ; i++) { resetparas[i].textcontent = '...
...'; } resetbutton.parentnode.removechild(resetbutton); guessfield.disabled = false; guesssubmit.disabled = false; guessfield.value = ''; guessfield.focus(); lastresult.style.backgroundcolor = 'white'; randomnumber = math.floor(math.random() * 100) + 1; } </script> </body> </html> have a go at playing it — familiarize yourself with the game before you move on.
...And 12 more matches

CustomizableUI.jsm
the customizableui.jsm javascript code module allows you to interact with customizable buttons and items in firefox's main window ui.
...these come in 3 types themselves: button which are simple toolbar buttons which do something when clicked view which are toolbar buttons with a 'view' of further options.
...before customizableui was introduced, then you have to make sure that in case of running on newer browsers, xul overlay does not contain description of the button that you are creating with createwidget() method.
...And 12 more matches

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.
...this object might look like text or a graphic, but it acts like a button.
... role_pushbutton 43 represents a push button control.
...And 12 more matches

Color picker tool - CSS: Cascading Style Sheets
angevalue.bind(this)); this.newinputcomponent('l', 'lightness', this.inputchangelightness.bind(this)); this.createalphaarea(); this.newinputcomponent('r', 'red', this.inputchangered.bind(this)); this.newinputcomponent('g', 'green', this.inputchangegreen.bind(this)); this.newinputcomponent('b', 'blue', this.inputchangeblue.bind(this)); this.createpreviewbox(); this.createchangemodebutton(); this.newinputcomponent('alpha', 'alpha', this.inputchangealpha.bind(this)); this.newinputcomponent('hexa', 'hexa', this.inputchangehexa.bind(this)); this.setcolor(this.color); pickers[topic] = this; } /*************************************************************************/ // function for generating the color-picker /********************************************************...
...; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('click', function() { if (this.picker_mode === 'hsv') this.setpickermode('hsl'); else this.setpickermode('hsv'); }.bind(this)); this.node.appendchild(button); }; /******************************************************************...
...entbyid(id); } function allowdropevent(e) { e.preventdefault(); } /*========== make an element resizable relative to it's parent ==========*/ var uicomponent = (function uicomponent() { function makeresizable(elem, axis) { var valuex = 0; var valuey = 0; var action = 0; var resizestart = function resizestart(e) { e.stoppropagation(); e.preventdefault(); if (e.button !== 0) return; valuex = e.clientx - elem.clientwidth; valuey = e.clienty - elem.clientheight; document.body.setattribute('data-resize', axis); document.addeventlistener('mousemove', mousemove); document.addeventlistener('mouseup', resizeend); }; var mousemove = function mousemove(e) { if (action >= 0) elem.style.width = e.clientx - valuex + 'px'; if ...
...And 12 more matches

HTML attribute reference - HTML: Hypertext Markup Language
autofocus <button>, <input>, <keygen>, <select>, <textarea> the element should be automatically focused after the page loaded.
...allowed values are ltr (left-to-right) or rtl (right-to-left) dirname <input>, <textarea> disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> indicates whether the user can interact with the element.
... form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> indicates the form that is the owner of the element.
...And 12 more matches

The Box Model - Archive of obsolete content
any xul interface can be broken down into the following basic components: boxes text images alignment and flexibility widths and heights margins and paddings menus, toolbar buttons, and even the most complex elements in xul are composed of these simple ingredients.
... here's a very simple example of an hbox with 3 child buttons: <hbox> <button label="cat" /> <button label="parrot" /> <button label="porcupine" /> </hbox> this is how it looks on mac os (the black border was added for illustrative purposes, boxes don't have borders by default): if you use a vbox instead, it looks like this: the orientation of boxes (and most xul elements) can be controlled using the orient attribute or the -moz-box-orient c...
...the buttons maintain their size.
...And 11 more matches

Complete - Archive of obsolete content
this page is for readers who have followed the custom toolbar button tutorial for firefox, thunderbird and sunbird, or the custom toolbar button:seamonkey tutorial for seamonkey, and who want to learn more about developing extensions.
... introduction you can use the custom toolbar button tutorial as a very simple introduction to extensions.
...features of this extension this extension is a more complex version of the original custom toolbar button extension.
...And 11 more matches

XUL accessibility guidelines - Archive of obsolete content
toolbarbuttons by default, toolbar buttons cannot receive focus with a keyboard.
...in cases where duplication of functionality is not possible (such as a window without a menu bar), toolbar buttons can be made focusable by adding the special css rule -moz-user-focus: normal.
... (firefox's "print preview" window uses this fallback technique.) this should only be used as a last resort, and it should be consistent throughout a window (that is either all toolbar buttons are tabbable or none of them are).
...And 11 more matches

Your first form - Learn web development
the controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too.
... our form will contain three text fields and one button.
...hitting the button will send their data to a web server.
...And 11 more matches

Beginning our React todo list - Learn web development
</label> </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"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>completed</span> <span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining </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" typ...
...e="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">eat</span> </button> </div> </li> <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-1" type="checkbox" /> <label classname="todo-label" htmlfor="todo-1"> sleep </label> </div> <div classname="btn-group"> <b...
...And 11 more matches

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-presse...
...d="false"> <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> <!-- todosstatus --> <h2 id="list-heading">2 out of 3 items completed</h2> <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> <!-- todo-1 (editing mode) --> <li class="todo"> <div class="stack-small"> <form class="stack-small"> <div class="form-group"> <label for="todo-1" class="todo-label"> new name for 'create a svelte starter app' ...
... </label> <input type="text" id="todo-1" autocomplete="off" class="todo-text" /> </div> <div class="btn-group"> <button class="btn todo-cancel" type="button"> cancel <span class="visually-hidden">renaming create a svelte starter app</span> </button> <button class="btn btn__primary todo-edit" type="submit"> save <span class="visually-hidden">new name for create a svelte starter app</span> </button> </div> </form> </div> </li> <!-- todo-2 --> <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-2" checked/> <label for="todo-2" class="todo-label"> ...
...And 11 more matches

<input type="reset"> - HTML: Hypertext Markup Language
<input> elements of type "reset" are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.
... you should usually avoid including reset buttons in your forms.
... they're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button).
...And 11 more matches

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" }, onchange: handlechange }); var mypanel = sdkpanels.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { mypanel.show({ position: button }); } } function handlehide() { button.state('window', {checked: false}); } updating panel content you can update the panel's content by: sending a message to a content script that updates the dom in the same document.
... getting user input note: this example uses the action button api, which is only available from firefox 29 onwards.
...And 10 more matches

Menus - Archive of obsolete content
it is normally attached to a menubar or to a button.
... when the menu or button is clicked the menu is opened, listing the commands that are available.
...these tags can be used to create menus which sit on a menubar or are attached to buttons.
...And 10 more matches

Anonymous Content - Archive of obsolete content
declaring scrollbar example the example below shows how a scrollbar might be declared (it has been simplified a bit from the real thing): <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="scrollbarbinding"> <content> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </content> </binding> </bindings> this file contains a single binding, declared with the binding element.
...the result of using the above binding is that the line of xul below will be expanded as follows, assuming that the scrollbar is bound to the xbl above: <scrollbar/> expands to: <scrollbar> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </scrollbar> the elements within the content tag are added to the scroll bar anonymously.
...if you look at a scroll bar in a mozilla window, you will see that it is made up of an arrow button, a slider, a thumb inside it and a second arrow button at the end, which are the elements that appear in the xbl above.
...And 10 more matches

Box Objects - Archive of obsolete content
some of these subtypes, such as the stack or listbox are needed for more complex layouts than the basic box, while others such as the button are used only to add extra mouse and key event handling.
...for example changing the display property of a button element to block will cause the button layout object to be deleted and a block object to be created instead.
...example 1 : source view <button label="click me" oncommand="alert('the width is ' + this.boxobject.width);"/> you can use the width and height attributes of the element to specify the element's width and height, respectively.
...And 10 more matches

Creating a Wizard - Archive of obsolete content
buttons appear at the bottom of the dialog to allow navigation between pages.
...a typical layout will include a title across the top, a set of navigation buttons across the bottom and the page contents in between.
...the navigation buttons are created automatically.
...And 10 more matches

Input Controls - Archive of obsolete content
<label value="search for:" control="find-text"/> <textbox id="find-text"/> <button id="find-button" label="find"/> add these lines before the buttons we created in the last section.
... checkboxes and radio buttons two additional elements are used for creating check boxes and radio buttons.
... they are variations of buttons.
...And 10 more matches

Skinning XUL Files by Hand - Archive of obsolete content
in the very near future, it will be possible to skin xul files dynamically and completely -- by pressing a button, selecting a skin from a menu, or by accepting a skin from over the web.
...also, most of the behavior that buttons exhibit comes from styles and an event model based on javascript that dynamically switches between these styles.
... mozilla's current global skin defines this basic behavior for several classes of button.
...And 10 more matches

notificationbox - Archive of obsolete content
space(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it.
... buttons - array of button descriptions to appear on the notification.
... priority levels (defined as properties of notificationbox) : priority_info_low priority_info_medium priority_info_high priority_warning_low priority_warning_medium priority_warning_high priority_critical_low priority_critical_medium priority_critical_high priority_critical_block buttons : the buttons argument is an array of button descriptions.
...And 10 more matches

2D maze game with device orientation - Game development
boot will take care of initializing a few settings, preloader will load all of the assets like graphics and audio, mainmenu is the menu with the start button, howto shows the "how to play" instructions and the game state lets you actually play the game.
... this.load.spritesheet('button-start', 'img/button-start.png', 146, 51); // ...
... mainmenu.js the mainmenu state shows the main menu of the game, where you can start playing by clicking the button.
...And 10 more matches

Flexbox - Learn web development
let's explore this by looking at a new example — flex-align0.html (see it live also) — which we are going to turn into a neat, flexible button/toolbar.
... at the moment you'll see a horizontal menu bar, with some buttons jammed into the top left hand corner.
... now, add the following to the bottom of the example's css: div { display: flex; align-items: center; justify-content: space-around; } refresh the page and you'll see that the buttons are now nicely centered, horizontally and vertically.
...And 10 more matches

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.
...this object might look like text or a graphic, but it acts like a button.
... role_pushbutton represents a push button control.
...And 10 more matches

nsITaskbarWindowPreview
window preview toolbars window previews may have a toolbar with up to seven buttons.
... the array of buttons may be accessed by calling getbutton(); each button is an nsitaskbarpreviewbutton object.
... you may customize these buttons using the attributes on that interface.
...And 10 more matches

about:debugging - Firefox Developer Tools
if your device doesn't appear in the lefthand side of the about:debugging page, try clicking the refresh devices button.
...your device should show a popup to authorize your computer to connect to it — accept this and then click the refresh devices button again.
...to debug the contents of one of these tabs, click the inspect button next to its title.
...And 10 more matches

Pointer events - Web APIs
additionally, a pointer event contains the usual properties present in mouse events (client coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc.
... terminology active buttons state the condition when a pointer has a non-zero value for the buttons property.
... for example, in the case of a pen, when the pen has physical contact with the digitizer, or at least one button is depressed while hovering.
...And 10 more matches

A simple RTCDataChannel sample - Web APIs
first, we have a couple of buttons for establishing and closing the connection: <button id="connectbutton" name="connectbutton" class="buttonleft"> connect </button> <button id="disconnectbutton" name="disconnectbutton" class="buttonright" disabled> disconnect </button> then there's a box which contains the text input box into which the user can type a message to transmit, with a button to send the entered text.
... <div class="messagebox"> <label for="message">enter a message: <input type="text" name="message" id="message" placeholder="message text" inputmode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the little box into which we'll insert the messages.
... function startup() { connectbutton = document.getelementbyid('connectbutton'); disconnectbutton = document.getelementbyid('disconnectbutton'); sendbutton = document.getelementbyid('sendbutton'); messageinputbox = document.getelementbyid('message'); receivebox = document.getelementbyid('receivebox'); // set event listeners for user interface widgets connectbutton.addeventlistener('click', connectpeers, false); disco...
...And 10 more matches

Creating a cross-browser video player - Developer guides
the control set most browser's default video controls have the following functionality: play/pause mute volume control progress bar skip ahead go fullscreen the custom control set will also support this functionality, with the addition of a stop button.
... <ul id="video-controls" class="controls"> <li><button id="playpause" type="button">play/pause</button></li> <li><button id="stop" type="button">stop</button></li> <li class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </li> <li><button id="mute" type="button">mute/unmute</button></li> <li><button id="volinc" type="button">vol+</button></li> <li><button id="v...
...oldec" type="button">vol-</button></li> <li><button id="fs" type="button">fullscreen</button></li> </ul> each button is given an id so it can be easily accessed with javascript.
...And 10 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
first of all, as expected, there is a media query in our main css, which is quite weighty, so we'll go through it in parts: @media all and (max-width: 480px) { x-card:nth-child(1), x-card:nth-child(2), x-card:nth-child(3) { width: 100%; float: none; padding: 0; } button { margin-top: 0; border-radius: 0; } x-card:nth-child(1) video, x-card:nth-child(2) img { border-radius: 0px; border: none; padding: 0; background-color: 0; } this first block resets a number of different things from the widescreen layouts that were't required for the mobile app.
... x-card:nth-child(1) video, x-card:nth-child(2) img, x-card:nth-child(3) { margin-top: 17.5vw; } x-card:nth-child(1) button, x-card:nth-child(2) button { position: absolute; bottom: 0; } x-card:nth-child(2) button:nth-of-type(2) { bottom: 5.9rem; } x-card:nth-child(1) button { font-size: 7vw; } x-card:nth-child(2) button { font-size: 7vw; } the next rules do some sizing on the buttons inside the first two cards, and give all card contents a top margin so that their content won't be lost under the navigation buttons (see below).
...last for this section, we absolutely positioned all buttons at the bottom of the cards they are in, so the layout looks ok at different viewport size variations.
...And 10 more matches

In-Depth - Archive of obsolete content
button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip,...
... textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal -moz-border-bottom-colors defines a series of colours.
...this is useful for, say, putting the navigation controls (back button) on the right hand side of the toolbar.
...And 9 more matches

Proxy UI - Archive of obsolete content
products firefox menu: preferences > advanced tab > networking tab > connection button.
... thunderbird menu: preferences > advanced tab > networking tab > connection button.
... seamonkey menu: preferences > advanced group > proxies panel menu: right-click on offline-online button (on browser windows).
...And 9 more matches

OpenClose - Archive of obsolete content
note that the open property applies to the menu or button, not to the menupopup.
... here is a complete example which uses a button to open a menu: <button label="open menu" oncommand="document.getelementbyid('editmenu').open = true;"/> <menu id="editmenu" label="edit"> <menupopup> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the toolbarbutton tag.
...the open property applies to the menu or button, not to the menupopup.
...And 9 more matches

Popup Menus - Archive of obsolete content
popup menus are typically displayed when the user presses the right mouse button.
... plain popups the plain popup is a popup window which appears when the user presses the left mouse button on an element.
...a good example is the drop down menu that appears when you click on the little down arrows next to the back and forward buttons in a browser window.
...And 9 more matches

XBL Attribute Inheritance - Archive of obsolete content
for example: xul: <searchbox/> xbl: <binding id="searchbinding"> <content> <xul:textbox/> <xul:button label="search"/> </content> </binding> in the example, the label attribute has been placed directly on the button element.
...it should be placed on the element that should inherit an attribute from the outer element, in this case the button.
...<xul:textbox xbl:inherits="flex"/> <xul:button xbl:inherits="label"/> when the content is generated, the textbox grabs the flex attribute from the searchbox and the button grabs the label attribute from the searchbox.
...And 9 more matches

XBL Example - Archive of obsolete content
navigation buttons along the bottom will allow the user to cycle through the objects while a text widget between the buttons will display the current page.
...along the bottom, we'll need a button to go the previous page, a label to display the current page number, and a button to go to the next page.
... example 1 : source <binding id="slideshow"> <content> <xul:vbox flex="1"> <xul:deck xbl:inherits="selectedindex" selectedindex="0" flex="1"> <children/> </xul:deck> <xul:hbox> <xul:button xbl:inherits="label=previoustext"/> <xul:label flex="1"/> <xul:button xbl:inherits="label=nexttext"/> </xul:hbox> </xul:vbox> </content> </binding> this binding creates the slideshow structure that we want.
...And 9 more matches

Using Remote XUL - Archive of obsolete content
it contains elements for all common ui widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers).
... source | rendered step 3: menus and buttons the mozilla.org web site uses an html navigation bar on the left-hand side of its pages to provide site navigation.
...the independent links, on the other hand, are similar to xul buttons, which perform a function when pressed, so we'll use the button element for those.
...And 9 more matches

Client-side form validation - Learn web development
this example involves a simple text <input> with an associated <label> and a submit <button>.
... <form> <label for="choose">would you prefer a banana or cherry?</label> <input id="choose" name="i_like"> <button>submit</button> </form> input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; } to begin, make a copy of fruit-start.html in a new directory on your hard drive.
...(required)</label> <input id="choose" name="i_like" required> <button>submit</button> </form> note the css that is included in the example file: input:invalid { border: 2px dashed red; } input:invalid:required { background-image: linear-gradient(to right, pink, lightgreen); } input:valid { border: 2px solid black; } this css causes the input to have a red dashed border when it is invalid and a more subtle solid black border when valid.
...And 9 more matches

Border-image generator - CSS: Cascading Style Sheets
c="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="separator"></div> <div class="property"> <div class="name"...
..."); background-position: right center; background-repeat: no-repeat; background-color: #359740; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { height: inherit; padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown list */ .ui-dropdown-list { width: 100%; height: 150px; max-height: 150px; margin: 0; padding: 0 0.3em; border: 3px solid #3490d2; border-color: #208b20; background: #666; background-color: #eef1f5; color: #000; position: absolute; top: 2em; left: 0; z-index: 100; ove...
...eight: 1em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui button */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; ...
...And 9 more matches

ui - Archive of obsolete content
experimental provides access to button, toolbar, and sidebar ui objects.
... 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.
... actionbutton an action button is a button in the main firefox toolbar.
...And 8 more matches

dlgtype - Archive of obsolete content
« xul reference home dlgtype type: one of the values below the dialog type of the button, used only when the button is in a dialog box.
... you can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog event methods will still function.
... for example, if the dlgtype is set to accept, the button will replace the dialog box's accept button, which is usually labeled ok.
...And 8 more matches

Commands - Archive of obsolete content
a simple way of using commands is as follows: example: simple command example 1 : source view <command id="cmd_openhelp" oncommand="alert('help!');"/> <button label="help" command="cmd_openhelp"/> in this example, instead of placing the oncommand attribute on the button, we instead place it on a command element.
...the result is that when the button is pressed, the command 'cmd_openhelp' is invoked.
... the other advantage is that several buttons or other ui elements can be hooked up to the same command.
...And 8 more matches

The Box Model - Archive of obsolete content
thus, the two lines below are equivalent: <vbox></vbox> <box orient="vertical"></box> the following example shows how to place three buttons vertically.
... example 1 : source view <vbox> <button id="yes" label="yes"/> <button id="no" label="no"/> <button id="maybe" label="maybe"/> </vbox> the three buttons here are oriented vertically as was indicated by the box.
... to change the buttons so that they are oriented horizontally, all you need to do is change the vbox element to a hbox element.
...And 8 more matches

wizard - Archive of obsolete content
this element provides the header and buttons along the bottom, and also handles navigation between the pages.
... attributes firstpage, lastpage, pagestep, title, windowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, pagecount, pageindex, pagestep, title, wizardpages methods advance, cancel, extra1, extra2, getbutton, getpagebyid, goto, rewind examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); ...
... use the cancancel property to indicate to the user (by disabling the cancel button) that they cannot can pagestep type: integer the index of the current page.
...And 8 more matches

Audio for Web games - Game development
for other more active sounds that are to be used during the game we could consider priming them as soon as something like a start button is pressed.
... here's an example of an audio sprite player — first let's set up the user interface in html: <audio id="myaudio" src="https://udn.realityripple.com/samples/f0/2909c16512.mp3"></audio> <button data-start="18" data-stop="19">0</button> <button data-start="16" data-stop="17">1</button> <button data-start="14" data-stop="15">2</button> <button data-start="12" data-stop="13">3</button> <button data-start="10" data-stop="11">4</button> <button data-start="8" data-stop="9">5</button> <button data-start="6" data-stop="7">6</button> <button data-start="4" data-stop="5">7</button> <button da...
...ta-start="2" data-stop="3">8</button> <button data-start="0" data-stop="1">9</button> now we have buttons with start and stop times in seconds.
...And 8 more matches

Accessible multimedia - Learn web development
multimedia and accessibility so far in this module we have looked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple text content to data tables, images, native controls such as form elements and buttons, and even more complex markup structures (with wai-aria attributes).
...here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> the controls attribute provides play/pause buttons, seek bar, etc.
... creating custom audio and video controls html5 video and audio share an api — html media element — which allows you to map custom functionality to buttons and other controls — both of which you define yourself.
...And 8 more matches

Looping code - Learn web development
let's say we wanted to draw 100 random circles on a <canvas> element (press the update button to run the example again and again to see different random sets): hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>random canvas circles</title> <style> html { width: 100%; height: inherit; background: #ddd; } canvas { display: block; } body { margin: 0; } button { ...
...position: absolute; top: 5px; left: 5px; } </style> </head> <body> <button>update</button> <canvas></canvas> <script> const btn = document.queryselector('button'); const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); let width = document.documentelement.clientwidth; let height = document.documentelement.clientheight; canvas.width = width; canvas.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ...
...first, some simple html — a text <input> allowing us to enter a name to search for, a <button> element to submit a search, and a <p> element to display the results in: <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselec...
...And 8 more matches

Client-side storage - Learn web development
nameinput = document.queryselector('#entername'); const submitbtn = document.queryselector('#submitname'); const forgetbtn = document.queryselector('#forgetname'); const h1 = document.queryselector('h1'); const personalgreeting = document.queryselector('.personal-greeting'); next up, we need to include a small event listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want.
... add this snippet below your previous code: // stop the form from submitting when a button is pressed form.addeventlistener('submit', function(e) { e.preventdefault(); }); now we need to add an event listener, the handler function of which will run when the "say hello" button is clicked.
...add this to the bottom of your code: // run function when the 'say hello' button is clicked submitbtn.addeventlistener('click', function() { // store the entered name in 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 "sa...
...And 8 more matches

Strategies for carrying out testing - Learn web development
choose the google analytics (web) option, and click the sign up button.
... once you've finished filling in everything, press the get tracking id button, then accept the terms of service that appear.
... consider the following example (see the source code, and also the example running live): test criteria for this feature could be written like so: a and b grade: button should be activatable by the user's primary control mechanism, whatever it is — this should include mouse, keyboard, and touch.
...And 8 more matches

about:debugging (before Firefox 68) - Firefox Developer Tools
next to each entry is a button labeled "debug".
... if the "debug" button is disabled, check the "enable add-on debugging" box.
... the "enable add-on debugging" button works by turning on the devtools.chrome.enabled and devtools.debugger.remote-enabled preferences.
...And 8 more matches

Using the Payment Request API - Web APIs
in the following snippet, a merchant page performs this check, and if it returns true updates the checkout button to use paymentrequest instead of legacy web forms.
... const checkoutbutton = document.getelementbyid('checkout-button'); if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
... for example, redirect to // the legacy web form checkout: window.location.href = '/legacy-web-form-checkout'; }); // every click on the checkout button should use a new instance of // paymentrequest object, because paymentrequest.show() can be // called only once per instance.
...And 8 more matches

WebGLRenderingContext.makeXRCompatible() - Web APIs
examples this example demonstrates code logic you might find in a game that starts up using webgl to display menus and other ui, and uses webgl to render gameplay, but has a button on its main menu that offers an option to start the game in webxr mode.
... html the html for the buttons looks lke this: <button class="green button" type="button">start game</button> <button class="blue button use-webxr" type="button">start game (vr mode)</button> the first button starts the game, continuing to present the game onscreen as usual.
... the second button will be used to start the game in immersive-vr mode.
...And 8 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.
... <div class="controls"> <div class="left"> <div id="playbutton" class="button"> ▶️ </div> </div> <div class="right"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position...
... let context = null; let playbutton = null; let volumecontrol = null; let oscnode1 = null; let oscnode2 = null; let oscnode3 = null; let constantnode = null; let gainnode1 = null; let gainnode2 = null; let gainnode3 = null; let playing = false; these variables are: context the audiocontext in which all the audio nodes live.
...And 8 more matches

HTML documentation index - HTML: Hypertext Markup Language
75 <button>: the button element element, forms, html, html forms, reference, web the html <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
... 119 <input type="button"> element, forms, html, html forms, input, input element, input type, reference, button <input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).
... 128 <input type="image"> element, form image, form image button, forms, html, html image button, html forms, image button, input, input type, number, reference <input> elements of type image are used to create graphical submit buttons, i.e.
...And 8 more matches

XUL Migration Guide - Archive of obsolete content
in this way an extension can integrate its user interface into the browser: for example, adding menu items, buttons, and toolbars.
...in order of complexity, the main options are: the sdk includes modules that implement some basic user interface components including buttons, dialogs, and context menu items.
...for example, action buttons appear by default in the main firefox toolbar (although users may relocate them by toolbar customization) because it makes for a better user experience for add-ons to expose their interfaces in a consistent way.
...And 7 more matches

Toolbar - Archive of obsolete content
adding a toolbar button there are two tutorials available: an elaborate step by step tutorial for beginners: custom toolbar button a tutorial describing the steps needed to add a toolbar button assuming you already have a working extension and know the basics of extension development: creating toolbar buttons adding button by default when you create and deploy your extension and include a toolbar button for it by overlaying the customize toolbarpalette, it is not available by default.
...the following code will place your button on the toolbar by default.
... this should only be done on the first run of your add-on after installation so that if the user decides to remove your button, it doesn't show up again every time they start the application.
...And 7 more matches

Venkman Introduction - Archive of obsolete content
each of the views has a label, a float button that lets you display the view in its own window, and a close button that puts the view away until you want to display it again, as seen in figure 2.
...these commands should be self explanatory, with the possible exception of stop, which causes the debugger to stop when the next line of javascript is executed, and the profile button, which can be used to measure execution times for your scripts.
... when you enable profiling by clicking this button, a green checkmark appears next to the button and profile data for every function is collected, and can be saved by choosing save profile data as...
...And 7 more matches

XUL Events - Archive of obsolete content
the event handler should be placed on an observer.checkboxstatechangethe checkboxstatechange event is executed when the state of a <checkbox> element has changed.closethe close event is executed when a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>.
... attribute: onchange click this event is sent when a mouse button is pressed and released.
... you can determine which mouse button was clicked by retrieving the button property of the event object.
...And 7 more matches

Creating Dialogs - Archive of obsolete content
it provides the useful ability to construct up to four buttons along the bottom of the dialog forok,cancel, and so on.
... you do not need to include the xul for each button; however, you do need to supply code to perform the appropriate tasks when the user presses each button.
... this mechanism is necessary because different platforms have a specific order in which the buttons appear.
...And 7 more matches

Document Object Model - Archive of obsolete content
let's take them out now and have them displayed when the find button is pressed.
... next, let's add a function that is called when the find button is pressed.
...an oncommand handler will also be added to the find button.
...And 7 more matches

Grids - Archive of obsolete content
just like html tables, you put content such as labels and buttons inside the rows.
... example 1 : source view <grid flex="1"> <columns> <column flex="2"/> <column flex="1"/> </columns> <rows> <row> <button label="rabbit"/> <button label="elephant"/> </row> <row> <button label="koala"/> <button label="gorilla"/> </row> </rows> </grid> two rows and two columns have been added to a grid.
...each row contains two elements, both buttons.
...And 7 more matches

Toolbars - Archive of obsolete content
« previousnext » a toolbar is usually placed along the top of a window and contains a number of buttons that perform common functions.
...usually, a row of buttons would appear in the toolbar, but any element can be placed in a toolbar.
...a simple toolbar inside a toolbox source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> </toolbar> </toolbox> this has created a toolbar containing two buttons, a back button and a forward button.
...And 7 more matches

XUL Accesskey FAQ and Policies - Archive of obsolete content
for example, an apply button may have the letter a underlined.
... on windows and unix, pressing alt+a is a convenient way to push that button.
...for example, here's how we add an accesskey to a xul button: <button label="apply instantly" accesskey="a" /> apply instantly - or - <button label="apply instantly" accesskey="a" /> apply instantly in mozilla, we use dtd's for one more layer of abstraction, for purposes of internationalization.
...And 7 more matches

Dialogs in XULRunner - Archive of obsolete content
here is an example xul dialog: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favorite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonaccesskeycancel="n" ondialogcancel="return docancel();"> <script> function dosave(){ //dosomething() return true; } function docancel(){ return true; } </script> <dial...
...here is the code needed to open a dialog: function opendialog() { window.opendialog("chrome://basicapp/content/dialog.xul", "newdlg", "modal"); } the resulting dialog looks like this on windows 2000, and will look similar on other operating systems: the first thing that caught my eye about dialog is the button-related attributes on the element.
... in an effort to make things easier for developers and more consistent for users, xul has a mechanism to automatically create and position the core dialog buttons ("ok," "cancel," and "help" for example).
...And 7 more matches

Building up a basic demo with PlayCanvas editor - Game development
creating a new project start a brand new project by clicking on the new button: the resulting dialog box will show a few different options.
...by clicking the editor button we'll launch the online playcanvas editor where we'll create our scene with the shapes.
...to add an entity to the scene you have to click on the big plus button located in the top left area of the editor, next to the hierarchy text.
...And 7 more matches

Manipulating documents - Learn web development
active learning: a dynamic shopping list to round off the article, we'd like to set you a little challenge — we want to make a simple shopping list example that allows you to dynamically add items to the list using a form input and button.
... when you add an item to the input and press the button: the item should appear in the list.
... each item should be given a button that can be pressed to delete that item off the list.
...And 7 more matches

Componentizing our React app - Learn web development
de the unordered list, and paste it into todo.js so that it reads like this: export default function todo() { return ( <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"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">eat</span> </button> </div> </li> ); } note: components must always return something.
...all that together, your todo() function should read like this: export default function todo(props) { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> {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"> delete <span classname="visually-hidden">{props.name}</span> </button> </div> </li> ); } now your browser should show three unique tasks.
...we’re missing our html structure — the <li> and its checkboxes and buttons!
...And 7 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
stack-large" aria-labelledby="list-heading"> {#each todos as todo (todo.id)} <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" checked={todo.completed}/> <label for="todo-{todo.id}" class="todo-label"> {todo.name} </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger"> delete <span class="visually-hidden">{todo.name}</span> </button> </div> </div> </li> {:else} <li>nothing to do here!</li> {/each} </ul> notice how we are using curly braces to e...
...at the bottom of the todos.svelte <script> section, add the removetodo() function like so: function removetodo(todo) { todos = todos.filter(t => t.id !== todo.id) } we'll call it via the delete button.
... update it with a click event, like so: <button type="button" class="btn btn__danger" on:click={() => removetodo(todo)} > delete <span class="visually-hidden">{todo.name}</span> </button> a very common mistake with handlers in svelte is to pass the result of executing a function as a handler, instead of passing the function.
...And 7 more matches

Add to Home screen - Progressive web apps (PWAs)
tapping this will show a confirmation banner — pressing the big + add to home screen button completes the action, adding the app to the home screen.
... adding an install button to make our pwa installable on desktop, we first added a button to our document to allow users to do the installation — this isn't made available automatically on desktop apps, and the installation needs to be triggered by a user gesture: <button class="add-button">add to home screen</button> we then gave it some simple styling: .add-button { position: absolute; top: 1px; left: 1px; }...
...first of all, we declare a deferredprompt variable (which we'll explain later on), get a reference to our install button, and set it to display: none initially: let deferredprompt; const addbtn = document.queryselector('.add-button'); addbtn.style.display = 'none'; we hide the button initially because the pwa will not be available for install until it follows the a2hs criteria.
...And 7 more matches

Tooltips - Archive of obsolete content
for instance, moving the mouse over top of a toolbar button and waiting for a second can display a small popup label containing text describing the button's function.
... <toolbarbutton label="back" tooltiptext="go back one page"/> in this example, a back button on a toolbar is given additional text to appear on a tooltip.
... <toolbar tooltiptext="file buttons"> <toolbarbutton label="open" tooltiptext="open a file"/> <toolbarbutton label="close"/> </toolbar> the 'open' button has a tooltiptext attribute so will have a tooltip of its own.
...And 6 more matches

Building Menus With Templates - Archive of obsolete content
this applies to menus on menubars, submenus, as well as menu-type buttons such as those with a type attribute set to menu.
...here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button.
...the second button in the example displays an alert with the number of children the template-driven button has.
...And 6 more matches

textbox - Archive of obsolete content
attributes cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onblur, onchange, onfocus, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeh...
...older, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange style classes plain examples <vbox> <label control="your-name" value="enter your name:"/> <textbox id="your-name" value="john"/> </vbox> attributes cols type: integer for multiline textboxes, the number of columns to display.
... hidespinbuttons type: boolean if true, the number box does not have arrow buttons next to it to allow the user to adjust the value.
...And 6 more matches

Desktop mouse and keyboard controls - Game development
mouse the mouse interactions in the game are focused on clicking the buttons.
... in phaser the buttons you create will take any type of input, whether it's a touch on mobile or a click on desktop.
... that way, if you already implemented the buttons as shown in the mobile touch controls article, it will work out of the box on the desktop too: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); the button will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and will execute the clickenclave() function when clicked.
...And 6 more matches

Mobile touch controls - Game development
this approach uses the generally available this.game.input object, but you can also detect the actions on any game objects like sprites or buttons by using oninputover, oninputout, oninputdown, oninputup, ondragstart, or ondragstop: this.button.events.oninputover.add(itemtouched, this); function itemtouched(button, pointer) { // do something } that way you'll be able to attach an event to any object in the game, like the player's ship, and react to the actions performed by the user.
... an additional advantage of using phaser is that the buttons you create will take any type of input, whether it's a touch on mobile or a click on desktop — the framework sorts this out in the background for you.
... implementation the easiest way to add an interactive object that will listen for user input is to create a button: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); this one is formed in the mainmenu state — it will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and execute the clickenclave() function when it is touched.
...And 6 more matches

Styling links - Learn web development
focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles are nearly the same as they were back in the early days of browsers in the mid-1990s.
... if you make a mistake, you can always reset it using the reset button.
... if you get really stuck, press the show solution button to insert the example we showed above.
...And 6 more matches

Styling web forms - Learn web development
multi-line <textarea>s buttons (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> we describe how to handle these more specific features in the article advanced form styling.
... the real problem with all these controls is that they have a very complex structure, and beyond some basic styling (such as changing the width or margin of the control) you generally don't have the ability to style the controls' internal components (such as the date picker calendar, or the button on the <select> that causes the options list to display) making up those widgets.
...to make your forms' appearance consistent with the rest of your content, you can add the following rules to your stylesheet: button, input, select, textarea { font-family: inherit; font-size: 100%; } the inherit property value causes the property value to match the computed value of the property of its parent element; inheriting the value of the parent.
...And 6 more matches

Getting started with HTML - Learn web development
if you make a mistake, you can clear your work using the reset button.
... if you get really stuck, press the show solution button to see the answer.
...</textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset')...
...And 6 more matches

Silly story generator - Learn web development
project brief you have been provided with some raw html/css and a few text strings and javascript functions; you need to write the necessary javascript to turn this into a working program, which does the following: generates a silly story when the "generate random story" button is pressed.
... replaces the default name "bob" in the story with a custom name, only if a custom name is entered into the "enter custom name" text field before the generate button is pressed.
... converts the default us weight and temperature quantities and units in the story into uk equivalents if the uk radio button is checked before the generate button is pressed.
...And 6 more matches

React interactivity: Events and state - Learn web development
for example: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like this: <button type="button" onclick={() => alert("hi!")} > say hi!
... </button> note: this may seem counter-intuitive regarding best-practice advice that tends to advise against use of inline event handlers on html, but remember that jsx is actually part of your javascript.
... in the above example, we're adding an onclick attribute to the <button> element.
...And 6 more matches

Web Replay
there are a few ways to start recording a tab: record current tab open the developer tools and click the button indicated below.
... the button will be colored blue when the tab is being recorded.
... an easy way to see this is to open the debugger developer tool, press the pause button and then the rewind button.
...And 6 more matches

Migrating from Firebug - Firefox Developer Tools
filter log messages firebug offers two ways to filter log messages, via the options menu and via the filter buttons within the toolbar.
... the developer tools console offers similar functionality via the filter buttons inside its toolbar — centralized at one place.
... persist logs in firebug you can click the persist button within the toolbar to keep the logged messages between page navigations and reloads.
...And 6 more matches

Using DTMF with WebRTC - Web APIs
simple example this simple example constructs two rtcpeerconnections, establishes a connection between them, then waits for the user to click a "dial" button.
... when the button is clicked, a dtmf string is sent over the connection using rtcdtmfsender.insertdtmf().
... html the html for this example is very basic; there are only three elements of importance: an <audio> element to play the audio received by the rtcpeerconnection being "called." a <button> element to trigger creating and connecting the two rtcpeerconnection objects, then sending the dtmf tones.
...And 6 more matches

<color> - CSS: Cascading Style Sheets
activetext text of active links buttonface background of push buttons buttontext text of push buttons canvas background of application content or documents canvastext text in application content or documents field background of input fields fieldtext text in input fields graytext text that is disabled highlight background of items that are selected in a control highlighttext text of i...
... buttonhighlight the color of the border facing the light source for 3-d elements that appear 3-d due to that layer of surrounding border.
... buttonshadow the color of the border away from the light source for 3-d elements that appear 3-d due to that layer of surrounding border.
...And 6 more matches

<input type="number"> - HTML: Hypertext Markup Language
when you create a number input with the proper type value, number, you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.
... <input type="number" placeholder="multiple of 10"> controlling step size by default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1.
...for example, let's give our example a minimum of 0, and a maximum of 100: <input type="number" placeholder="multiple of 10" step="10" min="0" max="100"> in this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100.
...And 6 more matches

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.
...we could implement the main user interface as a widget hosting an array of buttons to control play/pause/stop functions.
... we can then use a content script to listen for clicks on those buttons.
...And 5 more matches

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: "./icons/previous.png" }); var next = actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = new frame({ url: "./frame-player.html" }); var toolbar = toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appears just above the content window: to destroy a toolbar call its destroy() method.
...toolbars get a close button at the right-hand side, and users can show or hide the toolbar using the firefox "view/toolbars" menu, alongside built-in toolbars like the bookmarks toolbar.
...And 5 more matches

JavaScript Daemons Management - Archive of obsolete content
pose.owner); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>new daemon(<em>@thisobject</em>, <em>@callback</em>[, <em>@rate</em>, <em>@length</em>, <em>@init</em>, <em>@onstart</em>])</h1> <p><button onclick="orecompose.skipto(11);">skipto(11)</button> <button onclick="orecompose.makesteps(29);">makesteps(29)</button> <button onclick="orecompose.fixposition(-13);">fixposition(-13)</button> <button onclick="orecompose.play();">play</button> <button onclick="orecompose.turn();">turn</button> <button onclick="orecompose.pause();">pause</button> <button onclick="orecompose.reverseplay();">reverse...
...play</button> <button onclick="orecompose.reversals = 2;alert('changed');">two reversals</button> <button onclick="orecompose.makeloop();alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" onkeypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" onkeyup="if(isfinite(this.value)&&number(this.value)>0){orecompose.setrate(this.value);}" /></p> </body> </html> example #2: a practical instantiation – daemon.buildaround() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf...
...; onload = function () { ounhide.owner.target.id = "animate-me"; document.body.appendchild(ounhide.owner.target); ounhide.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>daemon.buildaround()</h1> <p><button onclick="ounhide.skipto(11);">skipto(11)</button> <button onclick="ounhide.makesteps(29);">makesteps(29)</button> <button onclick="ounhide.fixposition(-13);">fixposition(-13)</button> <button onclick="ounhide.play();">play</button> <button onclick="ounhide.turn();">turn</button> <button onclick="ounhide.pause();">pause</button> <button onclick="ounhide.reverseplay();">reverseplay</button> <button...
...And 5 more matches

Adding Events and Commands - Archive of obsolete content
it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes.
... for a button, it represents the action of the user clicking on it, or focusing it with the keyboard and then pressing the enter key.
...you shouldn't normally use this event to trigger actions on input controls such as buttons.
...And 5 more matches

User Notifications and Alerts - Archive of obsolete content
they are thin boxes that appear from beneath the tab list and above the page content, with some text and maybe a few buttons.
... notification boxes are very easy to create, and are very customizable: let nb = gbrowser.getnotificationbox(); let acceptbutton = new object(); let declinebutton = new object(); let message = this._bundle.getstring("xulschoolhello.friendmessage.label"); let that = this; acceptbutton.label = this._bundle.getstring("xulschoolhello.acceptbutton.label"); acceptbutton.accesskey = this._bundle.getstring("xulschoolhello.acceptbutton.accesskey"); acceptbutton.popup = null; acceptbutton.callback = function() { that.acceptre...
...quest(); }; // similarly for decline button.
...And 5 more matches

Creating reusable content with CSS and XBL - Archive of obsolete content
d paste the content from here: <?xml version="1.0"?> <!doctype bindings> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="square"> <resources> <stylesheet src="bind6.css"/> </resources> <content> <html:div anonid="square"/> <xul:button anonid="button" type="button"> <children/> </xul:button> </content> <implementation> <field name="square"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "square") ]]></field> <field name="button"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "button") ]]></field> <method name="dodemo"> <body><![...
...cdata[ this.square.style.backgroundcolor = "#cf4" this.square.style.marginleft = "20em" this.button.setattribute("disabled", "true") settimeout(this.cleardemo, 2000, this) ]]></body> </method> <method name="cleardemo"> <parameter name="me"/> <body><![cdata[ me.square.style.backgroundcolor = "transparent" me.square.style.marginleft = "0" me.button.removeattribute("disabled") ]]></body> </method> </implementation> <handlers> <handler event="click" button="0"><![cdata[ if (event.originaltarget == this.button) this.dodemo() ]]></handler> </handlers> </binding> </bindings> make a new css file, bind6.css.
...copy and paste the content from here: /*** xbl demonstration ***/ [anonid="square"] { width: 20em; height: 20em; border: 2px inset gray; } [anonid="button"] { margin-top: 1em; padding: .5em 2em; } open the document in your browser and press the button.
...And 5 more matches

Getting Started - Archive of obsolete content
if you want to modify how checkboxes, radio buttons, and scrollbars appear, this is the place.
...css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, etc.
... for this next part, let's modify the standard button.
...And 5 more matches

Drag and Drop Example - Archive of obsolete content
it will contain three buttons, one to create new buttons, one to create check boxes and the other to create textboxes.
... this buttons will respond to the draggesture event and start a drag.
... <vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="check box" elem="checkbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="text box" elem="textbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> </vbox> the nsdraganddrop object will be called to do most of the work.
...And 5 more matches

Anonymous Content - Archive of obsolete content
for example, the html file upload control appears in most browsers as a composite widget consisting of a text field and a button.
... a sample xbl binding for the file widget might look as follows: <binding id="fileupload"> <content> <html:input type="text"/> <html:input type="button"/> </content> </binding> because this content is not visible to its parent element, it is said to be anonymous content.
... <xbl:binding id="fileuploadcontrol"> <xbl:content> <html:input type="text" xbl:inherits="value"/> <html:input type="button" value="browse..."/> </xbl:content> </xbl:binding> each entry in the inherits list can either simply list an attribute (such as value in the example above), or it can specify an = separated pair consisting of the attribute on the anonymous content that should be tied to the attribute on the bound element.
...And 5 more matches

Recursive Generation - Archive of obsolete content
« previousnext » in the previous example, the template builder generated an extra set of two buttons for the second row.
... however, the labels on the second set of buttons are different than the first set.
...this extra arrow which neither b or d have causes an extra set of buttons to be created.
...And 5 more matches

Adding Methods to XBL-defined Elements - Archive of obsolete content
the following example creates a row of buttons: <binding id="buttonrow"> <content> <button label="yes"/> <button label="no"/> <button label="sort of"/> </content> </binding> to refer to each button, you can use the getanonymousnodes() function, passing it a reference to the element the binding is bound to as the parameter.
... in the returned array, the first button is stored in the first array element (getanonymousnodes(element)[0]), the second button is stored in the second array element and the third button is stored in the third array element.
... xul: <box id="num" class="labeledbutton" title="number of things:" value="52"/> <button label="show" oncommand="document.getelementbyid('num').showtitle(true)"/> <button label="hide" oncommand="document.getelementbyid('num').showtitle(false)"/> xbl: <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> </content> <implementation> <method name="showtitle"> <parameter name="state"/> ...
...And 5 more matches

Adding Style Sheets - Archive of obsolete content
the following list summarizes some of the selectors available: button matches all button tags.
... #special-button matches the element with an id of special-button.
... .bigbuttons matches all elements with a class of bigbuttons.
...And 5 more matches

Writing Skinnable XUL and CSS - Archive of obsolete content
example 1: the navigator package has a personal toolbar with popup menu buttons.
... the colors for the toolbar and buttons should be drawn from global by placingclass attributes on the appropriate elements in the xul.
...for either the personal toolbar headers or for the menu buttons' borders.
...And 5 more matches

radio - Archive of obsolete content
radio buttons are almost always listed together in groups.
... only one radio button within the same radiogroup may be selected at a time.
... the user can switch which radio button is turned on by selecting it with the mouse or keyboard.
...And 5 more matches

WAI-ARIA basics - Learn web development
in these situations, aria can help to provide what's missing with a combination of roles like button, listbox, or tabgroup, and properties like aria-required or aria-posinset to provide further clues as to functionality.
... enhancing keyboard accessibility as discussed in a few other places in the module, one of the key strengths of html with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links.
... however, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose.
...And 5 more matches

HTML forms in legacy browsers - Learn web development
<label for="mycolor"> pick a color <input type="color" id="mycolor" name="color"> </label> supported not supported form buttons there are two ways to define buttons within html forms: the <input> element with its attribute type set to the values button, submit, reset or image the <button> element <input> the <input> element can make things a little difficult if you want to apply some css by using the element selector: <input type="button" value="click me"> if we remove the border on all inputs, can we restore ...
...the default appearance on input buttons only?
... input { /* this rule turns off the default rendering for the input types that have a border, including buttons defined with an input element */ border: 1px solid #ccc; } input[type="button"] { /* this does not restore the default rendering */ border: none; } input[type="button"] { /* these don't either!
...And 5 more matches

How to build custom form controls - Learn web development
an alternative approach: using radio buttons in the above example, we reinvented a <select> element using non-semantic html, css, and javascript.
... this select was selecting one option from a limited number of options, which is the same functionality of a same-named group of radio buttons.
... we could therefore reinvent this using radio buttons instead; let's look at this option.
...And 5 more matches

HTML text fundamentals - Learn web development
if you make a mistake, you can always reset it using the reset button.
... if you get stuck, press the show solution button to see the answer.
... my legs are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementb...
...And 5 more matches

Adding a new todo form: Vue events, methods, and models - Learn web development
we need a <form> with a <label>, an <input>, and a <button>.
... </label> <input type="text" id="new-todo-input" name="new-todo" autocomplete="off" /> <button type="submit"> add </button> </form> </template> so we now have a form component into which we can enter the title of a new todo item (which will become a label for the corresponding todoitem when it is eventually rendered).
... if you fill it out and click the "add" button, the page will post the form back to the server, but this isn’t really what we want.
...And 5 more matches

Introduction to automated testing - Learn web development
as you click on the start button, a loading screen will appear, providing you with a vm (virtual machine) based on your configurations.
... if you notice an issue with the ui, then you can share it with your colleagues by capturing a screenshot of your vm with the screenshot button.
... you can also record a video of your test session by hitting the recorder button in your test session.
...And 5 more matches

Setting up your own test automation environment - Learn web development
google should automatically be loaded in a tab, "webdriver" should be entered in the search box, and the search button will be clicked.
... you can use any url to point to your resource, including a file:// url to test a local document: driver.get('file:///users/chrismills/git/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html'); or driver.get('http://localhost:8888/fake-div-buttons.html'); but it is better to use a remote server location so the code is more flexible — when you start using a remote server to run your tests (see later on), your code will break if you try to use local paths.
...for example, to select an element by id: const element = driver.findelement(by.id('myelementid')); one of the most useful ways to find an element by css — the by.css method allows you to select an element using a css selector enter the following at the bottom of your quick_test.js code now: const button = driver.findelement(by.css('button:nth-of-type(1)')); testing your element there are many ways to interact with your web documents and elements on them.
...And 5 more matches

Accessible Toolkit Checklist
alt+f4 closes windows, similar to escape but even works on dialogs without cancel button alt+space opens window menu with restore, move, size, minimize, maximize, close the move and size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a clickable tabbed property sheet label making tab order definable.
... get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu item.
...ag 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 for the correct width of the caret pay attention to 'route mouse pointer to default button' setting it's possible that the user wants mnemonics hidden except when the alt key is pressed.
...And 5 more matches

Building the WebLock UI
within a xul application file, elements like <button/>, <menu/>, and <checkbox/> can be hooked up to an event model, to scripts, and to the xpcom interfaces that carry out a lot of the browser functionality in mozilla.
...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.
... the xul that defines the radiogroup in the web lock manager dialog is this: <radiogroup> <radio label="lock"/> <radio label="unlock" selected="true"/> </radiogroup> since the weblock component always starts up in the unlocked position, you can add the selected="true" attribute and value on the unlock radio button and reset it dynamically as the user takes action.
...And 5 more matches

HTMLInputElement - Web APIs
it is false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a <datalist> ancestor; its disabled property is true.
... defaultchecked boolean: returns / sets the default state of a radio button or checkbox as originally specified in html that created this object.
... indeterminate boolean: returns whether the checkbox or radio button is in indeterminate state.
...And 5 more matches

HTMLMediaElement.play() - Web APIs
this may happen, for example, if the browser requires the user to explicitly start media playback by clicking a "play" button.
... example this example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback: let videoelem = document.getelementbyid("video"); let playbutton = document.getelementbyid("playbutton"); playbutton.addeventlistener("click", handleplaybutton, 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.
...And 5 more matches

The HTML DOM API - Web APIs
htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldirectoryelement htmldivelement htmlelement htmlembedelement htmlfieldsetelement htmlformelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmliframeelement htmlimageelement htmlinputelement htmllielement htmllabelelement htmllegendele...
... eventsource examples in this example, an <input> element's input event is monitored in order to update the state of a form's "submit" button based on whether or not a given field currently has a value.
... javascript const namefield = document.getelementbyid("username"); const sendbutton = document.getelementbyid("sendbutton") sendbutton.disabled = true; // [note: this is disabled since it causes this article to always load with this example focused and scrolled into view] //namefield.focus(); namefield.addeventlistener("input", event => { const elem = event.target; const valid = elem.value.length != 0; if (valid && sendbutton.disabled) { sendbutton.disabled = false; } else if (!valid && !sendbutton.disabled) { sendbutton.disabled = true; } }); this code uses the document interface's getelementbyid() method to get the dom object representing the <input> elements whose ids are username and sendbutton.
...And 5 more matches

Using the MediaStream Recording API - Web APIs
we'll declare some variables for the record and stop buttons, and the <article> that will contain the generated audio players: const record = document.queryselector('.record'); const stop = document.queryselector('.stop'); const soundclips = document.queryselector('.sound-clips'); finally for this section, we set up the basic getusermedia structure: if (navigator.mediadevices && navigator.mediadevices.getusermedia) { console.log('getusermedia suppor...
...first of all, mediarecorder.start() is used to start recording the stream once the record button is pressed: record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } when the mediarecorder is recording, the mediarecorder.state property will return a value of "recording".
... lastly, we use the mediarecorder.stop() method to stop the recording when the stop button is pressed, and finalize the blob ready for use somewhere else in our application.
...And 5 more matches

SubtleCrypto.exportKey() - Web APIs
*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button.
... */ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
...const exportedasstring = ab2str(exported); const exportedasbase64 = window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase64}\n-----end private key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = pemexported; } /* generate a sign/verify key pair, then set up an event listener on the "export" button.
...And 5 more matches

Window - Web APIs
globaleventhandlers.onclick called after the any mouse button is pressed & released globaleventhandlers.ondblclick called when a double click is made with any mouse button.
... globaleventhandlers.onclose called after the window is closed globaleventhandlers.oncontextmenu called when the right mouse button is pressed globaleventhandlers.onerror called when a resource fails to load or when an error occurs at runtime.
...will not get called when the page is loaded from cache, such as with back button.
...And 5 more matches

<menu> - HTML: Hypertext Markup Language
this includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked.
...this might be as a button menu referenced by a menu attribute of a <button> element, or as context menu for an element with a contextmenu attribute.
...context menus are then attached to the element they're activated from using either the associated element's contextmenu attribute or, for button-activated menus attached to <button> elements, the menu attribute.
...And 5 more matches

Interacting with page scripts - Archive of obsolete content
expose objects to page scripts until firefox 30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.getelementbyid("show-content-script-var"); button.addeventlistener("click", function() { // access object defined by content script console.log(window.contentscriptobject.greeting); // "hello from add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects.
... defines an object and assigns it to unsafewindow twice: the first time using cloneinto(), the second time using simple assignment: // content-script.js var contentscriptobject = {"greeting" : "hello from add-on"}; unsafewindow.clonedcontentscriptobject = cloneinto(contentscriptobject, unsafewindow); unsafewindow.assignedcontentscriptobject = contentscriptobject; the "page.html" file adds two buttons and assigns an event listener to each: one listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> </head> <body> <input id="works" type="button" value="i will work"/> <input id="fails" type="button" value="i will not work"/> <script> var works = document.getelementbyid("works"); works.add...
...note that the function's closure will be exported, too: // content-script.js var salutation = "hello, "; function greetme(user) { return salutation + user; } exportfunction(greetme, unsafewindow, {defineas: "greetme"}); finally, the "page.html" file adds a button and a page script that calls the exported function when the user pushes the button: <html> <head> </head> <body> <input id="test" type="button" value="click me"/> <script> var test = document.getelementbyid("test"); test.addeventlistener("click", function() { alert(window.greetme("page script")); }, false); </script> </body> </html> exportfunction()...
...And 4 more matches

Adding windows and dialogs - Archive of obsolete content
all it does is display a text message that the user can read and then click the ok button to dismiss it.
... you may be asking yourself what's the big deal about defining a simple xul window with an ok and maybe a cancel button.
...different operating systems order and position their buttons differently in their dialogs.
...And 4 more matches

Handling Preferences - Archive of obsolete content
the standard way of opening a preferences window is to open the add-ons manager, select the add-on, and then click on the preferences button.
... in order to have this button enabled in your extension you need to add the following line to install.rdf: <em:optionsurl>chrome://xulschoolhello/content/preferenceswindow.xul</em:optionsurl> if you want to open this window from a different place in the ui, such as a menu item or a button in a toolbar, you need to take into account that the opening behavior of a preferences window is different depending on the operating system.
...preference windows don't have any buttons, or just an ok or close button.
...And 4 more matches

Elements - Archive of obsolete content
for example, use the value 'xul:button' to create an element that is displayed like a button.
...the following xul display types may be used: browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren and treecol.
... handler <!entity % handler-content "pcdata"> <!element handler %handler-content;> <!attlist handler id id #implied event nmref #required action cdata #implied phase (capturing|bubbling|target) #implied button (1|2|3) #implied modifiers cdata #implied keycode cdata #implied key cdata #implied charcode cdata #implied clickcount (1|2|3) #implied command ...
...And 4 more matches

Positioning - Archive of obsolete content
default positioning of popups a top level menu popup is, by default, placed with the upper edge of the popup flush with the lower edge of the menu or button it is associated with.
... horizontally, the left edge of the menu popup is aligned with the left edge of the menu or button.
... for a menupopup placed inside a menu, button or toolbarbutton, the position attribute controls how the menupopup is anchored to the parent menu, button or toolbarbutton.
...And 4 more matches

Textbox (XPFE autocomplete) - Archive of obsolete content
disablehistory obsolete since gecko 2.0 type: boolean note: applies to: thunderbird and seamonkeyif false, an arrow button will appear on the end of the textbox which will open a dropdown menu of all available results.
... the default value is true, hiding the dropdown button.
... enablehistory new in thunderbird 1requires seamonkey 2.0 type: boolean if true, an arrow button will appear on the end of the textbox which, when pressed, will open a dropdown menu of all available results.
...And 4 more matches

More Wizards - Archive of obsolete content
wizard functions the wizard works much like a tabbed panel, except that the tabs are not displayed and the user navigates between pages by using the buttons along the bottom.
...in some cases, it would be more convenient to disable the next button until valid input has been entered.
... the wizard has a property canadvance, which can be set to true to indicate that the next button should be enabled.
...And 4 more matches

tabs - Archive of obsolete content
nb: you can add some other elements to tabs such as button, but they will receive an index.
... attributes closebutton, disableclose, disabled, onclosetab, onnewtab, onselect, setfocus, selectedindex, tabbox, tabindex, tooltiptextnew, value, properties accessibletype, disabled, itemcount, selectedindex, selecteditem, tabindex, value, methods advanceselectedtab, appenditem, getindexofitem, getitematindex, insertitemat, removeitemat examples (example needed) attributes closebutton obsolete since gecko 1.9.2 type: boolean if this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends.
...you can set an image to the "new tab" and "close" buttons by applying them to the tabs-newbutton and tabs-closebutton classes respectively.
...And 4 more matches

Extentsions FAQ - Archive of obsolete content
how to customizes toolbar button to coexist in a toolbar palette and status bar?
... option #3 install status buttons 1.0 <https://addons.mozilla.org/firefox/1272/> "lets you put toolbar buttons at either end of the status-bar.
... just drag them there from the toolbar customisation window, like you would when adding buttons to the toolbars." option #4 install toolbar control <http://webdesigns.ms11.net/chromeditp.html> asking for help with getting an extension to process windows messages.
...And 4 more matches

How to structure a web form - Learn web development
each time you have a set of radio buttons, you should nest them inside a <fieldset> element.
...this is useful for controls like text inputs, where you can click the label as well as the input to focus it, but it is especially useful for radio buttons and checkboxes — the hit area of such a control can be very small, so it is useful to make it as easy to activate as possible.
...lists are recommended for structuring multiple checkboxes or radio buttons.
...And 4 more matches

JavaScript basics - Learn web development
this happens in games, in the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with animation, etc.
... in index.html, add the following line just before the <script> element: <button>change user</button> in main.js, place the following code at the bottom of the file, exactly as it is written.
... this takes references to the new button and the heading, storing each inside variables: let mybutton = document.queryselector('button'); let myheading = document.queryselector('h1'); add the function below to set the personalized greeting.
...And 4 more matches

Advanced text formatting - Learn web development
if you make a mistake, you can always reset it using the reset button.
... if you get really stuck, press the show solution button to see the answer.
...a light brown color.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelem...
...And 4 more matches

Image gallery - Learn web development
the html body looks like this: <h1>image gallery example</h1> <div class="full-img"> <img class="displayed-img" src="images/pic1.jpg"> <div class="overlay"></div> <button class="dark">darken</button> </div> <div class="thumb-bar"> </div> the example looks like this: the most interesting parts of the example's css file: it absolutely positions the three elements inside the full-img <div> — the <img> in which the full-sized image is displayed, an empty <div> that is sized to be the same size as the <img> and put right over the top of it (this is used t...
...o apply a darkening effect to the image via a semi-transparent background color), and a <button> that is used to control the darkening effect.
... attach an onclick handler to the <button> so that when it is clicked, a darken effect is applied to the full-size image.
...And 4 more matches

Styling Vue components with CSS - Learn web development
add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; l...
...ine-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site.
... before: after: noticeable changes include the removal of the list bullets, background color changes, and changes to the base button and input styles.
...And 4 more matches

Gecko info for Windows accessibility vendors
event_focus is fired for focus changes on any kind of focusable object event_statechange is used in check boxes, radio buttons, text fields, combo boxes and list boxes.
... enum { navrelation_default_button = 0x100d }; when used within an html form or a xul dialog, the navrelation_default_button relation will return the iaccessible for the default button.
... positional descriptions are supported the accdescription field is overriden for the following roles: role_listitem, role_menuitem, role_radiobutton, role_pagetab and role_outlineitem for everything other than outline item, the positional description is in the form "n of m" where n is an integer indicating the position within other similar objects in a group, and m represents the number of objects in that group.
...And 4 more matches

Eclipse CDT
if you click the yellow, double arrow button at the top of the project explorer tab on the left, it will keep the selected file in the project explorer tab in sync with the file that you're currently editing.
... note that the search, call hierarchy, and other tabs have a "pin" button that allows you to open multiple tabs of these type.
...note that there are buttons to the right of the "open call hierarchy" tab that open to switch between "show callers" and "show callees".
...And 4 more matches

Index
168 iaccessibleimage interfaces, xpcom, xpcom interface reference this interface is used for a representation of images like icons on buttons.
...used for tree items, list items, tab panel labels, radio buttons, etc.
...this method will fail unless called while the left mouse button is held down, callers must check this.
...And 4 more matches

Accessibility Inspector - Firefox Developer Tools
here we are mainly talking about exposing information to people with visual disabilities — this is done via the accessibility apis available inside web browsers, which expose information on what roles the different elements on your page play (e.g., are they just text, or are they buttons, links, form elements, etc.?).
...each item has two properties listed: role — the role this item has on the page (e.g., pushbutton, or footer).
... actions — a list of actions that can be performed on the item, for example, a pushbutton would have "press" listed, while a link would have "jump" listed.
...And 4 more matches

Background Tasks API - Web APIs
</p> <div class="container"> <div class="label">decoding quantum filament tachyon emissions...</div> <progress id="progress" value="0"></progress> <div class="button" id="startbutton"> start </div> <div class="label counter"> task <span id="currenttasknumber">0</span> of <span id="totaltaskcount">0</span> </div> </div> <div class="logbox"> <div class="logheader"> log </div> <div id="log"> </div> </div> the progress box uses a <progress> element to show the progress, along with a label with sections that are changed to present numer...
...in addition, there's a "start" button (creatively given the id "startbutton"), which the user will use to start the data processing.
...font: 12px "courier", monospace; padding: 6px; overflow: auto; overflow-y: scroll; width: 388px; height: 460px; } .container { width: 400px; padding: 6px; border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; display: block; overflow: auto; } .label { display: inline-block; } .counter { text-align: right; padding-top: 4px; float: right; } .button { padding-top: 2px; padding-bottom: 4px; width: 100px; display: inline-block; float: left; border: 1px solid black; cursor: pointer; text-align: center; margin-top: 0; color: white; background-color: darkgreen; } #progress { width: 100%; padding-top: 6px; } javascript content now that the document structure is defined, construct the javascript code that will do the w...
...And 4 more matches

Using the CSS Typed Object Model - Web APIs
we'll take a look at that their types are by employing short javascript snippets outputting to console.log(): :root { --maincolor: hsl(198, 43%, 42%); --black: hsl(0, 0%, 16%); --white: hsl(0,0%,97%); --unit: 1.2rem; } button { --maincolor: hsl(198, 100%, 66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); width: calc(30% + 20px); background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-radius: 2px; font-size: calc(var(--unit)*2); color: var(--white); cursor: pointer; transform: scale(0.95); } ...
... let's add the class to a button (a button which does nothing).
... <button>styled button</button> // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // cssmathsum example let btnwidth = allcomputedstyles.get('width') console.log( btnwidth ); // cssmathsum console.log( btnwidth.values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( btnwidth.operator ); // 'sum' // csstransformvalue let transform = allcomputedstyles.get('transform'); console.log( transform ); // csstransformvalue {0: cssscale, 1: csstranslate, length: 2, is2d: true} console.log( transform.length ); // 1 console.log( transform[0] ); // cssscale {x: cssunitvalue, y: cssunitvalue, z: cssunitvalue, is2d: true} console.log(...
...And 4 more matches

Element - Web APIs
for example, the browser might fire this event when the user presses the esc key or clicks a "close dialog" button which is part of the browser's ui.
... wheel fired when the user rotates a wheel button on a pointing device (typically a mouse).
... mouse events auxclick fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
...And 4 more matches

GlobalEventHandlers.onauxclick - Web APIs
the auxclick event is raised when a non-primary button has been pressed on an input device (e.g., a middle mouse button).
... note: browser vendors are implementing this property as part of a plan to improve compatibility with regards to button behaviors.
... specifically, event behavior is being updated so that click only fires for primary button clicks (e.g., left mouse button), while auxclick fires for non-primary button clicks.
...And 4 more matches

HTMLFormElement.requestSubmit() - Web APIs
the htmlformelement method requestsubmit() requests that the form be submitted using a specific submit button.
... syntax htmlformelement.requestsubmit(submitter); parameters submitter optional the submit button whose attributes describe the method by which the form is to be submitted.
... this may be either an <input> or <button> element whose type attribute is submit.
...And 4 more matches

Capabilities, constraints, and settings - Web APIs
edit the constraint sets for the video and audio tracks in the edit boxes on the left, then click the "apply constraints" button to try them out.
... below all of that, you'll see the video itself.</p> <p>click the "start" button to begin.</p> <h3>constrainable properties available:</h3> <ul id="supportedconstraints"> </ul> <div id="startbutton" class="button"> start </div> <div class="wrapper"> <div class="trackrow"> <div class="leftside"> <h3>requested video constraints:</h3> <textarea id="videoconstrainteditor" cols=32 rows=8></textarea> </div> <div class="rightside"> <h3>actual video settings:</h3> <textarea id="videosettingstext" cols=32 rows=8 disabled></textarea> </div> </div> <div class="trackrow"> <div class="leftside"> <h3>requested audio constraints:</h3> <textarea id="au...
...dioconstrainteditor" cols=32 rows=8></textarea> </div> <div class="rightside"> <h3>actual audio settings:</h3> <textarea id="audiosettingstext" cols=32 rows=8 disabled></textarea> </div> </div> <div class="button" id="applybutton"> apply constraints </div> </div> <video id="video" autoplay></video> <div class="button" id="stopbutton"> stop video </div> <div id="log"> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 150px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } .wrapper { margin-bottom: 10px; width: 600px; } .t...
...And 4 more matches

Using the Screen Capture API - Web APIs
setup first, some constants are set up to reference the elements on the page to which we'll need access: the <video> into which the captured screen contents will be streamed, a box into which logged output will be drawn, and the start and stop buttons that will turn on and off capture of screen imagery.
... finally, event listeners are established to detect user clicks on the start and stop buttons.
... const videoelem = document.getelementbyid("video"); const logelem = document.getelementbyid("log"); const startelem = document.getelementbyid("start"); const stopelem = document.getelementbyid("stop"); // options for getdisplaymedia() var displaymediaoptions = { video: { cursor: "always" }, audio: false }; // set event listeners for the start and stop buttons startelem.addeventlistener("click", function(evt) { startcapture(); }, false); stopelem.addeventlistener("click", function(evt) { stopcapture(); }, false); logging content to make logging of errors and other issues easy, this example overrides certain console methods to output their messages to the <pre> block whose id is log.
...And 4 more matches

Signaling and video calling - Web APIs
this requires video elements, and a button to hang up the call: <div class="flexchild" id="camera-container"> <div class="camera-box"> <video id="received_video" autoplay></video> <video id="local_video" autoplay muted></video> <button id="hangup-button" onclick="hangupcall();" disabled> hang up </button> </div> </div> the page structure defined here is using <div> elements, giving us full control over the page...
...take note of the two <video> elements, one for your self-view, one for the connection, and the <button> element.
... finally, the "hangup-button" <button>, to disconnect from a call, is defined and configured to start disabled (setting this as our default for when no call is connected) and apply the function hangupcall() on click.
...And 4 more matches

Taking still photos with WebRTC - Web APIs
the first panel on the left contains two components: a <video> element, which will receive the stream from webrtc, and a <button> the user clicks to capture a video frame.
... <div class="camera"> <video id="video">video stream not available.</video> <button id="startbutton">take photo</button> </div> this is straightforward, and we'll see how it ties together when we get into the javascript code.
... (function() { var width = 320; // we will scale the photo width to this var height = 0; // this will be computed based on the input stream var streaming = false; var video = null; var canvas = null; var photo = null; var startbutton = null; those variables are: width whatever size the incoming video is, we're going to scale the resulting image to be 320 pixels wide.
...And 4 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
[important] get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu item.
...ect] event_object_reorder [important for mutating docs] event_object_focus [important] event_object_selection [important] event_object_selectionadd [important for multiple selection] event_object_selectionremove [important for multiple selection] event_object_selectionwithin [important for multiple selection] event_object_statechange [important for checkboxes and radio buttons] event_object_locationchange event_object_namechange event_object_descriptionchange event_object_valuechange [important for sliders and progress meters] event_object_parentchange event_object_helpchange event_object_defactionchange event_object_acceleratorchange msaa states cheat sheet for information on what each state does, see the msdn state constants ...
...role_row role_cell [important] role_link [important] role_helpballoon role_character role_list [important] role_listitem [important] role_outline [important] role_outlineitem [important] role_pagetab [important] role_propertypage [important] role_indicator role_graphic [important] role_statictext [important] role_text [important] role_pushbutton [important] role_checkbutton [important] role_radiobutton [important] role_combobox [important] role_droplist [important] role_progressbar [important] role_dial role_hotkeyfield role_slider role_spinbutton role_diagram role_animation role_equation role_buttondropdown role_buttonmenu role_buttondropdowngrid role_whitespace role_pa...
...And 4 more matches

Accessibility documentation index - Accessibility
26 using the aria-valuemax attribute aria, accessibility the aria-valuemax attribute is used to define the maximum value allowed for a range widget such as a slider, spinbutton or progressbar.
... 27 using the aria-valuemin attribute aria, accessibility, needscontent the aria-valuemin attribute is used to define the minimum value allowed for a range widget such as a slider, spinbutton or progressbar.
... 28 using the aria-valuenow attribute aria, accessibility, needscontent the aria-valuenow attribute is used to define the current value for a range widget such as a slider, spinbutton or progressbar.
...And 4 more matches

animation - CSS: Cascading Style Sheets
ation | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="ov...
...erlay">animation: 3s linear 1s slidein;</div> <div class="animation a2"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2...
...lay%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13...
...And 4 more matches

Overview of events and handlers - Developer guides
event triggers include the completion of the loading of a resource on the network e.g., downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser e.g., processes the html content of a page, the interaction of a user with the contents of the page e.g., clicks a button.
... button event handler demo for example, browser <button> elements are intended to emit events named 'click' in response to a mouse click or, when displayed in touch sensitive surfaces, to a finger tap.
... we could define in the html page a button as: <button id="buttonone">click here to emit a 'click' event</button> and, in our javascript code, we could first define a function to listen to that 'click' event: var example_click_handler = function (ev){ var objkind = (ev instanceof event) ?
...And 4 more matches

Content categories - Developer guides
they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <pr...
... elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spa...
...elements that belong to this category include: <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>.
...And 4 more matches

<input type="search"> - HTML: Hypertext Markup Language
basic example <form> <div> <input type="search" id="mysearch" name="q"> <button>search</button> </div> </form> this renders like so: q is the most common name given to search inputs, although it's not mandatory.
...look at the following example: <form> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..."> <button>search</button> </div> </form> you can see how the placeholder is rendered below: search form labels and accessibility one problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be a magnifying glass icon or similar), as the purpose of a search form is normally fairly obvious for sighted users due to p...
... let's have a look at an example: <form role="search"> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..." aria-label="search through site content"> <button>search</button> </div> </form> you can see how this is rendered below: there is no visual difference from the previous example, but screenreader users have way more information available to them.
...And 4 more matches

<menuitem> - HTML: Hypertext Markup Language
this includes context menus, as well as menus that might be attached to a menu button.
...commands can also optionally include a checkbox or be grouped to share radio buttons.
... (menu items for indirect commands gain checkboxes or radio buttons when defined against elements <input type="checkbox"> and <input type="radio">.) content categories none.
...And 4 more matches

simple-prefs - Archive of obsolete content
{ "type": "color", "name": "highlightcolor", "value": "#6a5acd", "title": "highlight color" } file displayed as a "browse" button that opens a file picker and stores the full path and name of the file selected.
... { "type": "file", "name": "myfile", "title": "select a file" } directory displayed as a "browse" button that opens a directory picker and stores the full path and name of the directory selected.
..."name": "typeofbreath", "type": "menulist", "title": "type of breath", "value": 0, "options": [ { "value": "0", "label": "fire" }, { "value": "1", "label": "cold" }, { "value": "2", "label": "disintegration" } ] } radio displayed as radio buttons.
...And 3 more matches

Display a Popup - Archive of obsolete content
in this tutorial we'll create an add-on that adds an action button to the toolbar that displays a panel when clicked.
... the add-on consists of seven files: package.json: created when you run jpm init index.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-16.png, icon-32.png, and icon-64.png: icons for the button in three different sizes the "index.js" looks like this: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it.
... var text_entry = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); // show the panel when the user clicks the button.
...And 3 more matches

Modifying the Page Hosted by a Tab - Archive of obsolete content
here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory.
... this add-on creates a button with mozilla favicon as an icon.
... then open any web page in the browser window, and click the button .
...And 3 more matches

checkState - Archive of obsolete content
« xul reference home checkstate type: integer, values 0, 1, or 2 this attribute may be used to create three state buttons, numbered 0, 1 and 2.
... when in state 0 or 1, pressing the button will switch to the opposite state.
... when in state 2, pressing the button will switch to state 0.
...And 3 more matches

Introduction to XUL - Archive of obsolete content
but proper ui descriptions which take into account various platforms' differing ideas about proper placement of such things as dialog buttons will require some platform-specific work.
... mozilla applications will be built of "small" components like dialog buttons and mail inbox folders, which we collectively term "widgets." within a widget, drawing and user interactions are completely under control of the individual widget, and set when the widget was built.
...buttons will respond to the mouse; toolbars will act as containers for buttons.
...And 3 more matches

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
in that example, oncommand handlers were added to some buttons.
...for example, a custom checkbox might have a checked property which needs to be changed when the user clicks the checkbox: <handlers> <handler event="mouseup" action="this.checked=!this.checked"/> </handlers> when the user clicks and releases the mouse button over the check box, the mouseup event is sent to it, and the handler defined here is called, causing the state of the checked property to be reversed.
...(see focus and selection) handling mouse events for mouse events, you can use the button attribute to have the handler only trap events that occur from a certain button.
...And 3 more matches

Localization - Archive of obsolete content
the example below demonstrates the use of an entity in a button.
... <button label="&findlabel;"/> the text that will appear on the label will be the value that the entity &findlabel; has.
...bel;" accesskey="&cutcmd.accesskey;" key="cut_cmd"/> <menuitem label="&copycmd.label;" accesskey="&copycmd.accesskey;" key="copy_cmd"/> <menuitem label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" key="paste_cmd" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="&opencmdtoolbar.label;"/> <toolbarbutton id="savesearch" label="&savecmdtoolbar.label;"/> </toolbar> </toolbox> <tabbox> <tabs> <tab label="&searchtab;" selected="true"/> <tab label="&optionstab;"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical" context="editpopup"> <description> &finddescription; </description> ...
...And 3 more matches

The Implementation of the Application Object Model - Archive of obsolete content
the downloaded file contains an aol instant messenger button, and the user really doesn't want that on the toolbar.
... now since the aol bookmark was specified by the remote file, the user has no way of going off to the site and changing that file just to get rid of the button (even though the user might wish that he or she could!).
... what the user needs to be able to do is make a local annotation to the remote file, e.g., to save somewhere on the local hard drive the fact that the aol instant messenger button shouldn't be on the toolbar.
...And 3 more matches

XUL Event Propagation - Archive of obsolete content
the user clicks a button in the interface.
... this button responds to the user action by raising an event, a message meant to travel from one element within the interface to another.
... in this case, the event raised was the "click" event, but a variety of events can be raised by the button element.
...And 3 more matches

radiogroup - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a group of radio buttons.
... only one radio button inside the group can be selected at a time.
... the radio buttons may either direct children of the radiogroup or descendants.
...And 3 more matches

toolbar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container which typically contains a row of buttons.
... attributes autohide, currentset, customindex, customizable, defaultset, grippyhidden, grippytooltiptext, height, iconsize, mode, toolbarname properties accessibletype, currentset, firstpermanentchild, lastpermanentchild, toolbarname, toolboxid methods insertitem style classes chromeclass-toolbar examples <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton id="nav-users" accesskey="u" label="users"/> <toolbarbutton id="nav-groups" accesskey="p" label="groups"/> <toolbarbutton id="nav-events" accesskey="e" label="events" disabled="true"/> </toolbar> </toolbox> attributes autohide type: boolean when set to true, the toolbar will be invisible unless the alt key is pressed by the user.
...this causes the set of buttons to be persisted across sessions.
...And 3 more matches

Theme changes in Firefox 4 - Archive of obsolete content
controlling the actual icon size used by add-on toolbar buttons the iconsize attribute of the browser's toolbar elements now has a different default value on each toolbar independently.
... use of the iconsize attribute on toolbar elements add-ons use the iconsize attribute to determine which icon they should display when a button is placed in a specific toolbar.
... iconsize value actual add-on toolbar button icon dimensions (assuming correct stylesheet and images) small 16x16 pixels large 24x24 pixels note: for stock buttons, the theme is free to use icons of any size.
...And 3 more matches

::-ms-check - Archive of obsolete content
the ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.
...-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-check example html <form> <label for="redbutton">red</label> <input type="radio" id="redbutton"><br> <label for="greencheckbox">green</label> <input type="checkbox" id="greencheckbox"> </form> css input, label { display: inline; } input[type=radio]::-ms-check { border-color: red; /* this will make the border red when the button is checked.
... */ color: red; /* this will make the circle red when the button is checked.
...And 3 more matches

General asynchronous programming concepts - Learn web development
in our simple-sync.html example (see it running live), we add a click event listener to a button so that when clicked, it runs a time-consuming operation (calculates 10 million dates then logs the final one to the console) and then adds a paragraph to the dom: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { let mydate; for(let i = 0; i < 10000000; i++) { let date = new date(); mydate = date } console.log(mydate); let pelem = document.c...
...reateelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); when running the example, open your javascript console then click the button — you'll notice that the paragraph does not appear until after the dates have finished being calculated and the console message has been logged.
...in this example, we have two buttons: a "fill canvas" button that when clicked fills the available <canvas> with 1 million blue circles.
...And 3 more matches

Basic math in JavaScript — numbers and operators - Learn web development
you can always press the reset button to get things working again.
...for example, booleans can be used to: display the correct text label on a button depending on whether a feature is turned on or off display a game over message if a game is over or a victory message if the game has been won display the correct seasonal greeting depending what holiday season it is zoom a map in or out depending on what zoom level is selected we'll look at how to code such logic when we look at conditional statements in a future article.
... for now, let's look at a quick example: <button>start machine</button> <p>the machine is stopped.</p> const btn = document.queryselector('button'); const txt = document.queryselector('p'); btn.addeventlistener('click', updatebtn); function updatebtn() { if (btn.textcontent === 'start machine') { btn.textcontent = 'stop machine'; txt.textcontent = 'the machine has started!'; } else { btn.textcontent = 'start machine'; txt.textcontent = 'the machine is stopped.'; } } open in new window you can see the equality operator being used just inside the updatebtn() function.
...And 3 more matches

Framework main features - Learn web development
as an example, consider a button that counts how many times it has been clicked.
... this component should be responsible for tracking its own count state, and could be written like this: function counterbutton() { const [count] = usestate(0); return ( <button>clicked {count} times</button> ); } usestate() is a react hook which, given an initial data value, will keep track of that value as it is updated.
... the code will be initially rendered like so in the browser: <button>clicked 0 times</button> the usestate() call keeps track of the count value in a robust way across the app, without you needing to write code to do that yourself.
...And 3 more matches

TypeScript support in Svelte - Learn web development
filterbutton.svelte now we'll take care of the filterbutton component.
... give it the following contents: export enum filter { all = 'all', active = 'active', completed = 'completed', } now we will use this from the filterbutton component.
... 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...
...And 3 more matches

Handling common HTML and CSS problems - Learn web development
dirty markup also allows you to make fixes to your markup using the clean button.
...install this first (using the install button), as other linters rely on it to work.
... let's look at an example — a simple box styled with css, which has some styling provided by various css3 features: note: you can also see this example running live on github as button-with-fallback.html (also see the source code).
...And 3 more matches

Eclipse CDT Manual Setup
download this first pass at an eclipse formatter configuration for mozilla c/c++ coding style, and install it by opening the workspace preferences, selecting "c/c++ > code style > formatter", and then using the "import" button to import that file.
...depending on the area of the code that you work on, you may need to tweak this configuration using the "edit" button.
...click on the little green button beside this message to open the "progress" tab, and keep an eye on the "refreshing workspace" item as you continue with the steps below.
...And 3 more matches

IME handling guide
notify_ime_of_mouse_button_event when a mousedown event or a mouseup event is fired on a character in a focused editor, this is sent to widget.
... but this is sent only when result of nsiwidget::getimeupdatepreference() includes notify_mouse_button_event_on_char.
...see imenotification::mmousebuttoneventdata in imedata.h for the detail.
...And 3 more matches

Interfacing with the Add-on Repository
this article provides some sample code that queries the recommended add-ons list on amo and lets the user click a button to install an add-on from the list.
... when the user clicks a toolbar button to initiate the query, the following code gets run to start the request: addonrepository.retrieverecommendedaddons(10, this); this asks the repository to fetch up to 10 add-ons, using the object this as the target for callbacks.
...var num = math.floor(math.random() * addoncount); this.shownotification("would you like to try the " + addons[num].name + " addon?", "install", addons[num].install); }, this routine randomly selects one of the returned add-ons, then calls the previously mentioned shownotification() routine, passing in as parameters a prompt including the name of the returned add-on, a label for the button to show in the notification ("install"), and the addoninstall object that can be used with the add-on manager api to install the add-on.
...And 3 more matches

Application Translation with Mercurial
by pressing the windows key and r on the keyboard or by calling the "run..." command from the windows "start" button, and then typing cmd and pressing the enter key.
... you installed scrapbook earlier, now open it in firefox either by calling it from the firefox menu bar (press the alt key to show it if necessary) using "view" > "sidebar" > "scrapbook" or by clicking its toolbar button which you likely have to add by toolbar customization if you didn't do this before.
... after scrapbook has saved the web page to your local disk, click with the right mouse button on the page in the sidebar and choose "properties" from the context menu which gets opened.
...And 3 more matches

nsIDOMChromeWindow
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void beginwindowmove(in nsidomevent mousedownevent); void getattention(); void getattentionwithcyclecount(in long acyclecount); void maximize(); void minimize(); void notifydefaultbuttonloaded(in nsidomelement defaultbutton); void restore(); void setcursor(in domstring cursor); attributes attribute type description browserdomwindow nsibrowserdomwindow the related nsibrowserdomwindow instance which provides access to yet another layer of utility functions by chrome script.
...this method will fail unless called while the left mouse button is held down, callers must check this.
...notifydefaultbuttonloaded() when a document has been loaded, the document can notify the default button of the document to the window by using this method.
...And 3 more matches

nsIDOMWindowUtils
tring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); obsolete since gecko 15.0 boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in unsigned long aadditionalflags); deprecated since gecko 38.0 void sendmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void sendmouseeventtowindow(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void sendmousescrollevent(in astring atype, in float ax, in float ay, in long abutton, in long ascrollflags, in l...
... void sendmouseevent( in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, in boolean aignorerootscrollframe optional ); parameters atype event type.
... abutton button to synthesize.
...And 3 more matches

nsITaskbarPreviewController
method overview boolean drawpreview(in nsidomcanvasrenderingcontext2d ctx); boolean drawthumbnail(in nsidomcanvasrenderingcontext2d ctx, in unsigned long width, in unsigned long height); boolean onactivate(); void onclick(in nsitaskbarpreviewbutton button); void onclose(); attributes attribute type description height unsigned long the height in pixels of the preview image.
... onclick() invoked when one of the buttons on the window preview's toolbar is clicked by the user.
... void onclick( in nsitaskbarpreviewbutton button ); parameters button an nsitaskbarpreviewbutton object representing the button that was pressed.
...And 3 more matches

Measure a portion of the page - Firefox Developer Tools
to enable its button: go to the devtools settings.
... from the available toolbox buttons check the measure a portion of the page checkbox.
... you will now see the measure a portion of the page button at the top right of the toolbox, in the same place as the settings/options button.
...And 3 more matches

Examine and edit CSS - Firefox Developer Tools
examine css rules the rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific: the four buttons on the right top of the rules view allow you to change the display of certain css and rules view features.
...number-spin-up :-moz-number-text :-moz-number-wrapper :-moz-placeholder :-moz-progress-bar :-moz-range-progress :-moz-range-thumb :-moz-range-track :-moz-selection if the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle: clicking the triangle displays them: viewing common pseudo-classes there's a button to the right of the filter box: click the button to see checkboxes that you can use to enable the :hover, :active and :focus, :focus-within and :visited pseudo-classes for the selected element: this feature can also be accessed from the popup menu in the html view.
...for example: viewing and changing classes on an element with an element selected in the html pane, you can click the .cls button in the rules pane toolbar, to display the classes defined on that element.
...And 3 more matches

EffectTiming.fill - Web APIs
below that, another <div> serves as a button that will trigger the animation to begin.
...a box!</div> </div> </div> <div class="button" id="animatebutton"> animate!
... </div> css content .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 160px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 2em "lucida grande", "open sans", sans-serif; } while there's other css involved in this example, the part that really matters for our purposes is the css that styles the "box" element that we'll be animating.
...And 3 more matches

Element: auxclick event - Web APIs
the auxclick event is fired at an element when a non-primary pointing device button (any mouse button other than the primary—usually leftmost—button) has been pressed and released both within the same element.
... when listening for auxclick events originating on elements that do not support input or navigation, you will often want to explicitly prevent other default actions mapped to the down action of the middle mouse button.
...the former changes the color of the button background, while the latter changes the button foreground (text) color.
...And 3 more matches

Using IndexedDB - Web APIs
</tr> <tr> <td> <label for="pub-file-url"> online-file image url:<br/> <span class="note">(same origin url)</span> </label> </td> <td> <input type="text" id="pub-file-url" name="pub-file-url"/> </td> </tr> </tbody> </table> <div class="button-pane"> <input type="button" id="add-button" value="add publication" /> <input type="reset" id="register-form-reset"/> </div> </form> <form id="delete-form"> <table> <tbody> <tr> <td> <label for="pub-biblioid-to-delete"> bibliographic id:<br/> <span class="note">(isbn, issn, etc.)</span...
... <tr> <td> <label for="key-to-delete"> key:<br/> <span class="note">(for example 1, 2, 3, etc.)</span> </label> </td> <td> <input type="text" id="key-to-delete" name="key-to-delete" /> </td> </tr> </tbody> </table> <div class="button-pane"> <input type="button" id="delete-button" value="delete publication" /> <input type="button" id="clear-store-button" value="clear the whole store" class="destructive" /> </div> </form> <form id="search-form"> <div class="button-pane"> <input type="button" id="search-list-button" value="list database content" /> ...
...list"> </ul> </div> css content body { font-size: 0.8em; font-family: sans-serif; } form { background-color: #cccccc; border-radius: 0.3em; display: inline-block; margin-bottom: 0.5em; padding: 1em; } table { border-collapse: collapse; } input { padding: 0.3em; border-color: #cccccc; border-radius: 0.3em; } .required:after { content: "*"; color: red; } .button-pane { margin-top: 1em; } #pub-viewer { float: right; width: 48%; height: 20em; border: solid #d092ff 0.1em; } #pub-viewer iframe { width: 100%; height: 100%; } #pub-list { width: 46%; background-color: #eeeeee; border-radius: 0.3em; } #pub-list li { padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 0.5em; } #msg { margin-bottom: 1em; } .action-success { ...
...And 3 more matches

MouseEvent - Web APIs
mouseevent.button read only the button number that was pressed (if applicable) when the mouse event was fired.
... mouseevent.buttons read only the buttons being depressed (if any) when the mouse event was fired.
... mouseevent.which read only the button being pressed when the mouse event was fired.
...And 3 more matches

Using the Notifications API - Web APIs
clicking a button).
... example in our todo list demo, we include an "enable notifications" button that, when pressed, requests notification permissions for the app.
... <button id="enable">enable notifications</button> clicking this calls the asknotificationpermission() function: function asknotificationpermission() { // function to actually ask the permissions function handlepermission(permission) { // whatever the user answers, we make sure chrome stores the information if(!('permission' in notification)) { notification.permission = permission; } // set the button to shown or hidden, depending on what the user answers if(notification.permission === 'denied' || notification.permission === 'default') { notificationbtn.style.display = 'block'; } else { notificationbtn.style.display = 'none'; } } // let's check if the browser supports notifications if (!('notification' in window)) { console.log("th...
...And 3 more matches

SubmitEvent.submitter - Web APIs
the read-only submitter property found on the submitevent interface specifies the submit button or other element that was invoked to cause the form to be submitted.
...while this is often an <input> element whose type or a <button> whose type is submit, it could be some other element which has initiated a submission process.
... if the submission was not triggered by a button of some kind, the value of submitter is null.
...And 3 more matches

Simple color animation - Web APIs
the user can start, stop and restart the animation by clicking the button.
... <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 : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation.
...And 3 more matches

XRSystem - Web APIs
if (navigator.xr) { immersivebutton.addeventlistener("click", onbuttonclicked); navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.disabled = false; } else { immersivebutton.disabled = true; }); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then(() => { // onsessionstarted() not shown f...
...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.
...to determine this, we call issessionsupported(), passing it the desired session option before enabling the button, immersivebutton, which the user can then use to switch to immersive mode only if immersive vr mode is available.
...And 3 more matches

Perceivable - Accessibility
ui controls such as form elements and buttons should have text labels that describe their purpose.
... buttons are simple—you should make sure the button text describes the function of the button (e.g., <button>upload image</button>).
...so, for example: "click the round button to continue" the button should be clearly labelled so that it is obvious that it is the button you need to press.
...And 3 more matches

CSS Animations tips and tricks - CSS: Cascading Style Sheets
html content first, let's define the html for a <div> we wish to animate and a button that will play (or replay) the animation.
... <div class="box"> </div> <div class="runbutton">click me to run the animation</div> css content now we'll define the animation itself using css.
... some css that's not important (the style of the "run" button itself) isn't shown here, for brevity.
...And 3 more matches

Cross-browser audio basics - Developer guides
preload the preload attribute allows you to specify a preference for how the browser preloads the audio, in other words, which part of the file it downloads when the <audio> element is initialized, and before the play button is pressed.
... preload can take 3 different values: none: don't download anything before the play button is pressed.
...we can combine html and javascript to create a very simple player with a play and a pause button.
...And 3 more matches

disabled - HTML: Hypertext Markup Language
the disabled attribute is supported by <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <input>.
... this boolean attribute prevents the user from interacting with the button.
... if this attribute isn't set, the button can still be disabled from a containing element, for example <fieldset>; if there is no containing element with the disabled attribute set, then the button is enabled.
...And 3 more matches

<form> - HTML: Hypertext Markup Language
this value can be overridden by a formaction attribute on a <button>, <input type="submit">, or <input type="image"> element.
... this value can be overridden by formenctype attributes on <button>, <input type="submit">, or <input type="image"> elements.
... this value is overridden by formmethod attributes on <button>, <input type="submit">, or <input type="image"> elements.
...And 3 more matches

<input type="file"> - HTML: Hypertext Markup Language
e picker that needs content that can be presented as an image, including both standard image formats and pdf files, might look like this: <input type="file" accept="image/*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live.
... regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.
... let's look at a more complete example: <form method="post" enctype="multipart/form-data"> <div> <label for="profile_pic">choose file to upload</label> <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png"> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } this produces a similar-looking output to the previous example: note: you can find this example on github too — see the source code, and also see it running live.
...And 3 more matches

<input type="text"> - HTML: Hypertext Markup Language
basic example <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name"> </div> <div> <button>submit</button> </div> </form> this renders like so: when submitted, the data name/value pair sent to the server will be uname=chris (if "chris" was entered as the input value before submission).
...look at the following example: <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" placeholder="lower case, all one word"> </div> <div> <button>submit</button> </div> </form> you can see how the placeholder is rendered below: the placeholder is typically rendered in a lighter color than the element's foreground color, and automatically vanishes when the user begins to enter text into the field (or whenever the field has a value set programmatically by setting its value attribute.
...in this example, for instance, the input is 30 characters wide: <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" placeholder="lower case, all one word" size="30"> </div> <div> <button>submit</button> </div> </form> validation <input> elements of type text have no automatic validation applied to them (since a basic text input needs to be capable of accepting any arbitrary string), but there are some client-side validation options available, which we'll discuss below.
...And 3 more matches

Getting Started (jpm) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("http://www.mozilla.org/"); } note that "entry point" defaults to "index.js" i...
...it uses two sdk modules: the action button module, which enables you to add buttons to the browser, and the tabs module, which enables you to perform basic operations with tabs.
... in this case, we've created a button whose icon is the firefox icon, and added a click handler that loads the mozilla home page in a new tab.
...And 2 more matches

Getting started (cfx) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } save the file.
...it uses two sdk modules: the action button module, which enables you to add buttons to the browser, and the tabs module, which enables you to perform basic operations with tabs.
... in this case, we've created a button whose icon is the firefox icon, and added a click handler that loads the mozilla home page in a new tab.
...And 2 more matches

Inline options - Archive of obsolete content
h a different type attribute: type attribute displayed as preference stored as bool checkbox boolean boolint checkbox integer (use the attributes on and off to specify what values to store) integer textbox integer string textbox string color colorpicker string (in the #123456 format) file browse button and label string directory browse button and label string menulist menulist dependent on the menu item values radio radio buttons dependent on the radio values control button no pref stored the pref attribute should have the full name of the preference to be stored.
... settings are tied to actual preferences, except the button setting, which is designed more for actions.
...ype="directory" title="directory"/> <!-- list example (this example would be stored as an integer) --> <setting pref="extensions.myaddon.options1" type="menulist" title="options 1"> <menulist> <menupopup> <menuitem value="500" label="small"/> <menuitem value="800" label="medium"/> <menuitem value="1200" label="large"/> </menupopup> </menulist> </setting> <!-- radio button example (this example would be stored as a boolean) --> <setting pref="extensions.myaddon.options2" type="radio" title="options 2"> <radiogroup> <radio value="false" label="disabled"/> <radio value="true" label="enabled"/> </radiogroup> </setting> <!-- button example - not tied to a preference, but attached to a command --> <setting title="do something" type="control"> <button id=...
...And 2 more matches

Getting Started - Archive of obsolete content
css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.
... as an example, let's change the standard button.
... go into the global directory and open button.css in your favorite text editor.
...And 2 more matches

Creating a Skin for Firefox/Getting Started - Archive of obsolete content
css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.
... as an example, let's change the standard button.
... go into the global global directory and open button.css in your favorite text editor.
...And 2 more matches

textbox (Toolkit autocomplete) - Archive of obsolete content
enablehistory new in thunderbird 1requires seamonkey 2.0 type: boolean if true, an arrow button will appear on the end of the textbox which, when pressed, will open a dropdown menu of all available results.
... open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.
...in addition, arrow buttons appear next to the textbox to let the user step through values.
...And 2 more matches

Content Panels - Archive of obsolete content
each time the user clicks the next button, the next screen of the wizard is displayed.
...second, the elements such the back and next buttons are the same throughout the interface.
... iframe example example 1 : source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back" /> <toolbarbutton label="forward" /> <textbox id="urlfield" /> </toolbar> </toolbox> <iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1" /> the example here has created a very simple interface for a web browser.
...And 2 more matches

List Controls - Archive of obsolete content
the user can see a single choice in a textbox and may click the arrow or some similar such button next to the textbox to make a different selection.
...it is made from a textbox with a button beside it.
...the first is the menulist element, which creates the textbox with the button beside it.
...And 2 more matches

Manipulating Lists - Archive of obsolete content
here is an example: example 1 : source view <script> function additem(){ document.getelementbyid('thelist').appenditem("thursday", "thu"); } </script> <listbox id="thelist"/> <button label="add" oncommand="additem();"/> the appenditem() takes two arguments, the label, in this case 'thursday', and a value 'thu'.
... the select event is also fired when a radio button in a radiogroup is selected and when a tab is selected in a tabs element.
... example 3 : source view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="center"> <label value="enter a number from 1 to 3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <radiogroup id="level"> <radio label="excellent"/> <radio label="good"/> <radio label="poor"/> </radiogroup> listboxes also support multiple selection and the functions of the nsidomxulmultiselectcontrolelement interface.
...And 2 more matches

Stack Positioning - Archive of obsolete content
for example, if a stack has two buttons as children, one may be placed 20 pixels from the left edge and 50 pixels from the top edge.
... the second button can be placed at 100 pixels from the left edge and 5 pixels from the top edge.
... example 1 : source view <stack> <button label="goblins" left="5" top="5"/> <button label="trolls" left="60" top="20"/> <button label="vampires" left="10" top="60"/> </stack> the stack here contains three elements, each positioned at the coordinates given by the left and top attributes.
...And 2 more matches

Stacks and Decks - Archive of obsolete content
we've already seen that buttons may contain other things besides the default.
...shadowing is very useful for creating the disabled appearance of buttons: example 2 : source view <stack style="background-color: #c0c0c0"> <description value="disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/> <description value="disabled" style="color: grey;"/> </stack> this arrangement of text and shadow colors creates the disabled look under some platforms.
...that means that buttons will only work properly as the last element of the stack.
...And 2 more matches

XUL Changes for Firefox 1.5 - Archive of obsolete content
dialog: defaultbutton property the <dialog> binding now supports the defaultbutton property.
... setting this property changes the default button of the dialog.
... it can be set either to one of the buttons of the <dialog> binding (using their names); or to none - in which case no button is set to be the default.
...And 2 more matches

XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script...
... scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple vbox where window wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- ...
... toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspr...
...And 2 more matches

Accessibility/XUL Accessibility Reference - Archive of obsolete content
button <button label="<!--button text-->" /> <button id="butwrap1"> <label control="butwrap1"> <!--wrapped label--> </label> </button> <button id='butwrap2'> <label control="butwrap2" value="<!--this-->" /> <label control="butwrap2" value="is" /> <label control="butwrap2" value="a" /> <label control="butwrap2" value="button" /> </button> <button image="images/i...
...mg.xbm" tooltiptext="<!--button text-->"/> note that in the third example, only the first label is read browser jaws 7.10 issues to use a browser element with html, the type="content" attribute should be specified.
... caption see groupbox checkbox <checkbox label='<!--label text-->' /> colorpicker <colorpicker type="button" palettename="standard" /> colorpicker appears to read color values out if the colorpicker can get focus in the first place.
...And 2 more matches

menuitem - Archive of obsolete content
it acts much like a button but it is rendered on a menu.
... autocheck type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed.
...when autocheck is true, the button type should be "checkbox" or "radio".
...And 2 more matches

panel - Archive of obsolete content
typically, it will be attached to a button using the button's type attribute so that when the button is pressed, the panel will be displayed.
... <panel id="thepanel"> <hbox align="start"> <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> <button label="read mail"/> <button label="new message"/> </hbox> </vbox> </hbox> </panel> <description value="6 new messages" popup="thepanel"/> attributes backdrag type: boolean setting the backdrag attribute on a xul panel lets the user move the panel by clicking and dragging anywhere on its background area.
... close type: boolean if the panel has a titlebar, set the panel's close attribute to true to have a close button appear on the titlebar.
...And 2 more matches

tabbrowser - Archive of obsolete content
onnewtab not in firefox type: script code this script will be called when the new tab button is clicked.
... cangoback type: boolean this read-only property is true if there is a page to go back to in the session history and the back button should be enabled.
... cangoforward type: boolean this read-only property is true if there is a page to go forward to in the session history and the forward button should be enabled.
...And 2 more matches

XULRunner tips - Archive of obsolete content
skin" line: skin communicator classic/1.0 skin/communicator/ add a skin folder named "communicator" and add a single css file named "communicator.css" with this content: @import url("chrome://global/skin"); dom inspector to add dom inspector 2.0.* to your xulrunner 1.9.0.* application follow these steps: download the dom inspector (instead of clicking the "add to..." button, right-click and select "save link as...").
...aces.nsiwindowdatasource); var tmpnamespace = {}; var sl = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .createinstance(components.interfaces.mozijssubscriptloader); sl.loadsubscript("chrome://inspector/content/hooks.js", tmpnamespace); tmpnamespace.inspectdomdocument(document); } now create a hook in your application window to start dom inspector, like this one: <button label="start inpector" oncommand="startdomi()"/> start your application and dom inspector will be installed.
... making windows display correct application name and icon when buttons are grouped by default, the task bar on windows might group windows belonging to the same process into one button to save space.
...And 2 more matches

Paddle and keyboard controls - Game development
we will need the following: two variables for storing information on whether the left or right control button is pressed.
...we want to run some code to handle the paddle movement when the buttons are pressed.
... two functions handling the keydown and keyup events the code that will be run when the buttons are pressed.
...And 2 more matches

Mobile accessibility - Learn web development
there are some exceptions that need special consideration for mobile; the main ones are: control mechanisms — make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard).
... swiping left and right will move between apps, or buttons/controls if you are in a control bar.
... you can also explore by touch to find the unlock button at the bottom middle of the screen, and then double-tap.
...And 2 more matches

Practical positioning examples - Learn web development
the <a> elements are set to display inline-block so they will sit in a line but still be stylable, and they are styled appropriately for tab buttons, using a variety of other properties.
... note: we've put a special question mark character into our html to act as our info icon — this represents the button that will be pressed to show/hide the panel.
...this has led to the well-known checkbox hack, which provides a javascript-free way of controlling an element by toggling a button.
...And 2 more matches

Test your skills: Basic controls - Learn web development
basic controls 1 this task starts you off nice and gently by asking you to create two <input> elements, for a user's id and password, along with a submit button.
... create a submit button inside the remaining list item, with button text of "log in".
... basic controls 2 the next task requires you to create working sets of checkboxes and radio buttons, from the provided text labels.
...And 2 more matches

From object to iframe — other embedding technologies - Learn web development
below the video, you'll find a share button — select this to display the sharing options.
... select the embed button and you'll be given some <iframe> code — copy this.
... if you make a mistake, you can always reset it using the reset button.
...And 2 more matches

Introducing asynchronous JavaScript - Learn web development
let's look at a simple example (see it live here, and see the source): const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); in this block, the lines are executed one after the other: we grab a reference to a <button> element that is already available in the dom.
... we add a click event listener to it so that when the button is clicked: an alert() message appears.
... so in the example above, after you've clicked the button the paragraph won't appear until after the ok button is pressed in the alert box.
...And 2 more matches

Introduction to web APIs - Learn web development
if you look at our simple web audio example (see it live also), you'll first see the following html: <audio src="outfoxing.mp3"></audio> <button class="paused">play</button> <br> <input type="range" min="0" max="1" step="0.01" value="1" class="volume"> we, first of all, include an <audio> element with which we embed an mp3 into the page.
...next, we include a <button> that we'll use to play and stop the music, and an <input> element of type range, which we'll use to adjust the volume of the track while it's playing.
... we start by creating an audiocontext instance inside which to manipulate our track: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); next, we create constants that store references to our <audio>, <button>, and <input> elements, and use the audiocontext.createmediaelementsource() method to create a mediaelementaudiosourcenode 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 t...
...And 2 more matches

Third-party APIs - Learn web development
this runs a function called submitsearch() when the form is submitted (the button is pressed).
... the first if() block checks to see if 10 articles are returned (the api returns up to 10 articles at a time.) if so, we display the <nav> that contains the previous 10/next 10 pagination buttons.
... if less than 10 articles are returned, they will all fit on one page, so we don't need to show the pagination buttons.
...And 2 more matches

Arrays - Learn web development
't-shirt:14.99' 'trousers:31.99' 'shoes:23.99'; for (let i = 0; i <= 0; i++) { // number 2 // number 3 // number 4 // number 5 let itemtext = 0; const listitem = document.createelement('li'); listitem.textcontent = itemtext; list.appendchild(listitem); } totalbox.textcontent = 'total: $' + total.tofixed(2); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventl...
... playable code 2 <h2>live output</h2> <div class="output" style="min-height: 150px;"> <input type="text"><button>search</button> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 370px; width: 95%"> const list = document.queryselector('.output ul'); const searchinput = document.queryselector('.output input'); const searchbtn = document.queryselector(...
...'.output button'); list.innerhtml = ''; let myhistory = []; searchbtn.onclick = function() { // we will only allow a term to be entered if the search input isn't empty if (searchinput.value !== '') { // number 1 // empty the list so that we don't display duplicate entries // the display is regenerated every time a search term is entered.
...And 2 more matches

Ember Interactivity: Footer functionality, conditional rendering - Learn web development
we'll also wire up our "clear completed" button.
... a button to clear the completed todos.
... first of all, replace this line: <strong>0</strong> todos left with this, which populates the incomplete number with the length of the incomplete array: <strong>{{this.todos.incomplete.length}}</strong> todos left next, replace this: <button type="button" class="clear-completed"> with this: <button type="button" class="clear-completed" {{on 'click' this.todos.clearcompleted}}> so now when the button is clicked, the clearcompleted() action we added earlier is run.
...And 2 more matches

Ember app structure and componentization - Learn web development
> <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" class="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="#">active</a> <a href="#">completed</a> </li> </ul> <button type="button" class="clear-completed"> clear completed </button> </footer> </section> the rendered output should now be as follows: this looks pretty complete, but remember that this is only a static prototype.
... looking at the code next to the rendered todo app, there are a number of ways we could decide how to break up the ui, but let's plan on splitting the html out into the following components: the component groupings are as follows: the main input / "new-todo" (red in the image) the containing body of the todo list + the mark-all-complete button (purple in the image) the mark-all-complete button, explicitly highlighted for reasons given below (yellow in the image) each todo is an individual component (green in the image) the footer (blue in the image) something odd to note is that the mark-all-complete checkbox (marked in yellow), while in the "main" section, is rendered next to the "new-todo" input.
...And 2 more matches

L10n testing with xcode
click the import button.
... press the run button in the upper left-hand corner (the button has a playback icon).
... navigate to the newly opened ios simulator window many strings are accessibility strings and are only revieled when a user hovers their finger over the button.
...And 2 more matches

Creating localizable web applications
for instance, "log in" as a button label might be translated by a localizer as the imperative, but for a dialog title, the localizer may choose to use a different form, like gerund (much like "logging in").
... <?php if($showwearthis) { ?> $(".try-button").personasbutton({ 'haspersonas':'<span><?= _("wear this");?></span><span>&nbsp;</span>', 'hasfirefox':'<span><?= _("get personas now!");?></span><span>&nbsp;</span>', 'nofirefox':'<span><?= _("get personas with firefox");?></span><span>&nbsp;</span>' }); <?php } ?> images don't put text or numbers in the images just don't do that.
... don't use images as buttons instead, use <button/> and style it with css.
...And 2 more matches

Profiling with the Firefox Profiler
it has instructions for enabling the profiler menu button, and getting going.
... tip: while zooming out to a previously-selected range deletes the narrower range, the browser back button can be used to restore the narrower range.
...if you're unfamiliar with gecko's internals, you can click the javascript only button to see where your javascript code is slow.
...And 2 more matches

Reporting a Performance Problem
enabling the profiler toolbar button these steps only work in firefox 75+.
... visit https://profiler.firefox.com/ click on "enable profiler menu button" the profiler toolbar button will show up in the top right of the url bar as a small stopwatch icon you can right-click on the button and remove it from the toolbar when you're done with it.
... using the profiler when enabled, the profiler toolbar button is not recording by default.
...And 2 more matches

about:memory
if you are using a communication channel where files can be sent, such as bugzilla or email, click on the "measure and save..." button.
... if you are using a communication channel where only text can be sent, such as a comment thread on a website, click on the "measure..." button.
... loading memory reports from file the easiest way to load memory reports from file is to use the "load..." button.
...And 2 more matches

Rhino Debugger
controlling execution the debugger provides the following facilities for you to control the execution of scripts you are debugging: step into to single step entering any function calls, you may do any of the following: select the debug->step into menu item on the menu bar press the step into button on the toolbar press the f11 key on the keyboard execution will resume.
... step over to single step to the next line in the current function, you may do any of the following: select the debug->step over menu item on the menu bar press the step over button on the toolbar press the f7 key on the keyboard execution will resume but control will return to the debugger at the next line in the current function or top-level script.
... step out to continue execution until the current function returns you may do any of the following: select the debug->step out menu item on the menu bar press the step out button on the toolbar press the f8 key on the keyboard execution will resume until the current function returns or a breakpoint is hit.
...And 2 more matches

XUL Overlays
.xul file or in a separate navigatorsspoverlay.xul file (where navigator.xul defines the basic ui for the navigator package), these new plug-in elements would be defined as a collection of elements or subtrees: <menuitem name="super stream player"/> <menupopup name="ss favorites"> <menuitem name="wave" src="mavericks.ssp"/> <menuitem name="soccer" src="brazil_soccer.ssp"/> </menupopup> <titledbutton id="ssp" crop="right" flex="1" value="&ssbutton.label;" onclick="firessp()"/> overlays and id attributes bases and overlays are merged when they share the same id attribute.
...for example, the buttons that appear at the bottom of common dialogs, the ok and cancel buttons, may be used in dozens of places in the ui.
... rather than redefining this set of buttons each time they are necessary in a particular dialog, base xul files can overlay the xul file in which these buttons are defined, dialogoverlay.xul.
...And 2 more matches

ctypes
examples example of structtype() on windows let's say we need tb_button, this type needs to be created.
... so we look up on msdn what the tb_button structures is (msdn :: tb_button structure) and it says it is: typedef struct { int ibitmap; int idcommand; byte fsstate; byte fsstyle; #ifdef _win64 byte breserved[6]; #else #if defined(_win32) byte breserved[2]; #endif #endif dword_ptr dwdata; int_ptr istring; } tbbutton, *ptbbutton, *lptbbutton; so now notice that if it's 64-bit process it's different than if it's 32-bit process.
...this is what the final looks like: var struct_tbbutton; if (ctypes.voidptr_t.size == 4 /* 32-bit */) { struct_tbbutton = ctypes.structtype('tbbutton', [ {'ibitmap': ctypes.int}, {'idcommand': ctypes.int}, {'fbstate': ctypes.unsigned_char}, {'fsstyle': ctypes.unsigned_char}, {'breserved': ctypes.unsigned_char}, {'breserved2': ctypes.unsigned_char}, {'dwdata': ctypes.uintptr_t}, {'istring': ctypes.intptr_t} ]); } else if (ctypes.voidptr_t.size == 8 /* 64-bit */) { struct_tbbutton = ctypes.structtype('tbbutton', [ {'ibitmap': ctypes.int}, {'idcommand': ctypes.int}, {'fbstate': ctypes.unsigned_char}, {'fsstyle': ctypes.unsigned_char}, {'breserved': ctypes.unsigned_char}, ...
...And 2 more matches

Network monitor recording - Firefox Developer Tools
you can pause and resume the monitoring of network traffic using the pause button.
... pausing and resume network traffic recording the network monitor has a button that pauses and resumes recording of the current page's network traffic.
...the pause button allows you to look at a certain snapshot.
...And 2 more matches

Style Editor - Firefox Developer Tools
you can save any changes you've made to the style sheet to your local computer by clicking the save button in the bottom-right corner of each sheet's entry in the list.
...once you're satisfied with your changes, you can save a copy locally by clicking the save button on the sheet's entry in the style sheet pane.
... media sidebar works especially well with responsive design view for creating and debugging responsive layouts: from firefox 46 onwards, if an @media rule contains a screen size in a condition, then it is made clickable: clicking it then resizes the screen to that size using the responsive design view: creating and importing style sheets you can create a new style sheet by clicking the new button in the toolbar.
...And 2 more matches

Tips - Firefox Developer Tools
general screenshots: entire page: click the screenshot button (; needs to be enabled first).
... viewport: click the screenshot button () in responsive design mode.
... click on the last breadcrumb button to scroll the selection into view in the inspector.
...And 2 more matches

Toolbox - Firefox Developer Tools
docking mode by default, the toolbox appears docked to the bottom of the browser window, but you can also dock it to the right-hand side of the window, or make it a standalone window, using buttons in the toolbar.
... node picker on the far left there's a button to activate the node picker.
... toolbox-hosted tools then there is an array of labeled buttons which enables you to switch between the different tools hosted by the toolbox.
...And 2 more matches

Element: click event - Web APIs
an element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
... bubbles yes cancelable yes interface mouseevent event handler property onclick if the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.
... safari mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug): <a> (but it must have an href) <area> (but it must have an href) <button> <img> <input> <label> (but it must be associated with a form control) <textarea> this list is incomplete; you can help mdn by doing further testing/research and expanding it.
...And 2 more matches

GlobalEventHandlers.onanimationiteration - Web APIs
html <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> begin demonstration </div> css :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "ari...
... @keyframes slidebox { from { left:0; top:0; } to { left:calc(100% - var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } javascript some javascript code will need to be written to handle the click on the button to start the next iteration.
...it simply sets the box's animation-play-state to "paused", then updates the text displayed in the button to indicate that clicking the button will start playing the next iteration of theanimation.
...And 2 more matches

HTMLDialogElement.returnValue - Web APIs
the returnvalue property of the htmldialogelement interface gets or sets the return value for the <dialog>, usually to indicate which button the user pressed to close it.
... examples the following example displays a button to open a <dialog> containing a form via the showmodal() method.
... from there, either button will close the dialog.
...And 2 more matches

Pointer Lock API - Web APIs
more than that, the api is useful for any applications that require significant mouse input to control movements, rotate objects, and change entries, for example allowing users to control the viewing angle simply by moving the mouse around without any button clicking.
... the buttons are then freed up for other actions.
...game players can now click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game.
...And 2 more matches

RadioNodeList.value - Web APIs
if the underlying element collection contains radio buttons, the radionodelist.value property represents the checked radio button.
... on retrieving the value property, the value of the currently checked radio button is returned as a string.
... if the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned.
...And 2 more matches

Using the Web Audio API - Web APIs
example code our boombox looks like this: note the retro cassette deck with a play button, and vol and pan sliders to allow you to alter the volume and stereo panning.
... since our scripts are playing audio in response to a user input event (a click on a play button, for instance), we're in good shape and should have no problems from autoplay blocking.
...we have a play button that changes to a pause button when the track is playing: <button data-playing="false" role="switch" aria-checked="false"> <span>play/pause</span> </button> before we can play our track we need to connect our audio graph from the audio source/input node to the destination.
...And 2 more matches

ARIA: switch role - Accessibility
<button type="button" role="switch" aria-checked="true" id="speakerpower" class="switch"> <span>off</span> <span>on</span> </button> <label for="speakerpower" class="switch">speaker power</label> description the aria switch role is identical to the checkbox role, except instead of being "checked" or "unchecked", it is either "on" and "off." like the checkbox role, the aria-checked attribute is required.
...the button is styled with an appearance reminiscent of an on/off power switch.
...the switch is implemented as a <button> element which is initially checked courtesy of its aria-checked attribute being set to "true".
...And 2 more matches

ARIA: tab role - Accessibility
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">tab label</button> description an element with the tab role controls the visibility of an associated element with the tabpanel role.
...each tab is a button with the attributes previously mentioned.
...there is some basic styling applied that restyles the buttons and changes the z-index to of tab elements to give the illusion of it connecting to the tabpanel for active elements, and the illusion that inactive elements are behind the active tabpanel.
...And 2 more matches

ARIA: dialog role - Accessibility
<div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </div> description marking up a dialog element with the dialog role helps assistive technology identify the dialog's content as being grouped and separated from the rest of the page content.
...this approach is shown in the code snippet below: <div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </div> keep in mind that a dialog's title and description text do not have to be focusable in order to be perceived by screen readers operating in a non-virtual mode.
...for many dialogs, there will be a button like "close", "ok" or "cancel".
...And 2 more matches

Text labels and names - Accessibility
<div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </div> if the dialog box doesn't have a heading, you can instead use aria-label to contain the label text: <div role="dialog" aria-label="personal details updated confirmation"> <p>your personal details were successfully updated.
... you can change your details at any time in the user account section.</p> <button>close</button> </div> see also role="dialog" role="alertdialog" aria-label aria-labelledby wai-aria: dialog role dialog authoring practices documents must have a title it is important on each html document to include a <title> that describes the page's purpose.
...this applies to all types of <input> items, as well as <button>, <output>, <select>, <textarea>, <progress> and <meter> elements, as well as any element with the switch aria role.
...And 2 more matches

:active - CSS: Cascading Style Sheets
the :active css pseudo-class represents an element (such as a button) that is being activated by the user.
... when using a mouse, "activation" typically starts when the user presses down the primary mouse button.
... /* selects any <a> that is being activated */ a:active { color: red; } the :active pseudo-class is commonly used on <a> and <button> elements.
...And 2 more matches

Border-radius generator - CSS: Cascading Style Sheets
value); } } var init = function init() { var elem = document.queryselectorall('.ui-input-slider'); var size = elem.length; for (var i = 0; i < size; i++) new inputslider(elem[i]); } return { init : init, setmax : setmax, setmin : setmin, setunit : setunit, getnode : getnode, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe } })(); /** * ui-buttonmanager */ var buttonmanager = (function checkboxmanager() { var subscribers = []; var buttons = []; var checkbox = function checkbox(node) { var topic = node.getattribute('data-topic'); var state = node.getattribute('data-state'); var name = node.getattribute('data-label'); var align = node.getattribute('data-text-on'); state = (state === "true"); var checkbox = document.crea...
...hecked = state; label.setattribute('for', id); if (name) { label.classname = 'text'; if (align) label.classname += ' ' + align; label.textcontent = name; } node.appendchild(checkbox); node.appendchild(label); this.node = node; this.topic = topic; this.checkbox = checkbox; checkbox.addeventlistener('change', function(e) { notify.call(this); }.bind(this)); buttons[topic] = this; } var getnode = function getnode(topic) { return buttons[topic].node; } var setvalue = function setvalue(topic, value) { try { buttons[topic].checkbox.checked = value; } catch(error) { console.log(error); } } var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push...
...d); } /** * shadow dragging */ var previewmousetracking = (function drag() { var active = false; var lastx = 0; var lasty = 0; var subscribers = []; var init = function init(id) { var elem = getelembyid(id); elem.addeventlistener('mousedown', dragstart, false); document.addeventlistener('mouseup', dragend, false); } var dragstart = function dragstart(e) { if (e.button !== 0) return; active = true; lastx = e.clientx; lasty = e.clienty; document.addeventlistener('mousemove', mousedrag, false); } var dragend = function dragend(e) { if (e.button !== 0) return; if (active === true) { active = false; document.removeeventlistener('mousemove', mousedrag, false); } } var mousedrag = function mousedrag(e) { notify(e.cl...
...And 2 more matches

Mozilla CSS extensions - CSS: Cascading Style Sheets
accepted] -moz-transition [prefixed version still accepted] -moz-transition-delay [prefixed version still accepted] -moz-transition-duration [prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-w...
...in-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar status...
...barpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306214); use currentcolor instead.
...And 2 more matches

<a>: The Anchor element - HTML: Hypertext Markup Language
implicit aria role link when href attribute is present, otherwise no corresponding role permitted aria roles when href attribute is present: button checkbox menuitem menuitemcheckbox menuitemradio option radio switch tab treeitem when href attribute is not present: any dom interface htmlanchorelement examples linking to an absolute url html <a href="https://www.mozilla.com"> mozilla </a> result linking to relative urls html <a href="//exa...
... using the download attribute to save a <canvas> as a png to save a <canvas> element’s contents as an image, you can create a link with a download attribute and the canvas data as a data: url: example painting app with save link html <p>paint by holding down the mouse button and moving it.
... onclick events anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .
...And 2 more matches

Mobile first - Progressive web apps (PWAs)
so, if you were planning to have a vertical navigation menu on desktop, you might replace this on mobile with a select menu containing the options, or even a single button that when pressed brings the navigation options up in an overlay.
... third, combining the two is also a good option — why not have a single button at the top of the page, which links to an anchor on the nav menu at bottom of the page?
...in this sample app, i have used a couple of the built-in features to: include an install button that works for firefox os, firefox aurora, chrome and ios app installs (as explained on the install github page).
...And 2 more matches

Responsive Navigation Patterns - Progressive web apps (PWAs)
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.
...hiding items that don't fit cons: one more step is needed to access the navigation items that are hidden navigation items might be less discoverable because some items are hidden less space for content in the smallest screen size pattern 3: left hidden menu the main navigation is always on the left except in the smallest screen size, where the navigation menu is hidden in a button by default.
...And 2 more matches

Communicating using "port" - Archive of obsolete content
this example uses the action button api, which is only available from firefox 29 onwards.
... for example, here's an add-on that creates a page-worker and a button.
...the button sends the content script a message called "get-first-para" when it is clicked: pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script "listener.js" listens for "get-first-para".
... function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); self.port.removelistener("get-first-para", getfirstparagraph); } self.port.on("get-first-para", getfirstparagraph); the result is that the paragraph is only logged the first time the button is clicked.

Working with Events - Archive of obsolete content
if you do this, the listener will be called for any event emitted by that object, and its argument will be the name of the event: var ui = require("sdk/ui"); var panels = require("sdk/panel"); var self = require("sdk/self"); var panel = panels.panel({ contenturl: self.data.url("panel.html") }); panel.on("*", function(e) { console.log("event " + e + " was emitted"); }); var button = ui.actionbutton({ id: "my-button", label: "my button", icon: "./icon-16.png", onclick: handleclick }); function handleclick(state) { panel.show({ position: button }); } this wildcard feature does not yet work for the tabs or windows modules.
... for example: the actionbutton object emits an event when the button is clicked.
... the following add-on creates a button and assigns a listener to the onclick property of the options object supplied to the button's constructor.
... the listener loads https://developer.mozilla.org/: require("sdk/ui/button/action").actionbutton({ id: "visit-mozilla", label: "visit mozilla", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").open("https://developer.mozilla.org/"); } }); this is exactly equivalent to constructing the button and then calling the button's on() method: var button = require("sdk/ui/button/action").actionbutton({ id: "visit-mozilla", label: "visit mozilla", icon: "./icon-16.png" }); button.on("click", function() { require("sdk/tabs").open("https://developer.mozilla.org/"); }); removing event listeners event listeners can be removed by calling removelistener(type, listener), supplying the type of event and the listener to remove.

Custom XUL Elements with XBL - Archive of obsolete content
many complex elements such as tabs, buttons and input controls are implemented using xbl and simpler xul elements.
... <content> <xul:hbox> <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> <xul:vbox flex="1"> <xul:label xbl:inherits="value=name" /> <xul:description xbl:inherits="value=greeting" /> </xul:vbox> <xul:vbox> <xul:button label="&xulshoolhello.remove.label;" accesskey="&xulshoolhello.remove.accesskey;" oncommand="document.getbindingparent(this).remove(event);" /> </xul:vbox> </xul:hbox> </content> our element is very simple, displaying an image, a couple of text lines and a button.
... the oncommand attribute of the button has some code you've probably never seen before: document.getbindingparent(this).
... with inheritance you could take the richlistbox element and modify it to make a rich item tree, or create a switch button that changes state everytime it's clicked.

The Essentials of an Extension - Archive of obsolete content
there are two similar code blocks, because in modern versions of firefox, particularly on windows, a single firefox menu button is presented, with simplified menu options, rather than an extensive menu bar.
... the second code block covers the common menu button case; the first code block covers all other cases.
... check menu bar under the options menu of the menu button to toggle display of the classic menu on windows and some linux distributions.
...check menu bar under the options menu of the firefox menu button to enable it.

A XUL Bestiary - Archive of obsolete content
menus, toolbars, buttons, and scrollbars are widgets, and so are such general purpose pieces as boxes and springs.
...the "click" event is fired by a button when it is clicked.
...documents will load, buttons will be clicked, and links will be hovered over, and events will be raised for all these actions behind closed doors.
...xul buttons have "oncommand" event listeners.

Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebarcolor afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed colo...
...r cols command commandupdater completedefaultindex container containment contentcontextmenu contenttooltip context contextmenu control crop curpos current currentset customindex customizable cycler datasources decimalplaces default defaultbutton defaultset description dir disableautocomplete disableautoselect disableclose disabled disablehistory disablekeynavigation disablesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespin...
...buttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialo...
... onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname ...

Deprecated and defunct markup - Archive of obsolete content
elements <actions> (listed here by mistake or was it a container tag?) typo for <action> --neil 03 march 2011 <autorepeatbutton> (action occurs repeatedly on mouse hover--used to construct other elements; used in <arrowscrollbox> and large drop-down menus) so, not deprecated?
... --neil 03 march 2011 <bulletinboard> (made to support left/top styles, but <stack> can now do as well) <gripper> (inside of <scrollbar><thumb>; not to be used by itself) <listboxbody> (internal use only; part of xbl for <listbox>) <menubutton> (experiment in combining buttons and menus; use <button type> instead) <nativescrollbar> (displayed a native scrollbar; had been for mac only with native themes on) <outliner> (former name for <tree>; <listbox> had been "<tree>") <popup> (use menupopup) <package> (no longer present but in older documentation) <scrollbarbutton> (button at end of scrollbar; had been only within larger <scrollbar>) so, not deprecated, but internal use only?
... --neil 03 march 2011 <sidebarheader> not true, still in use --neil 03 march 2011 <slider> (clickable tray in <scrollbar> which holds <thumb>; do not use alone) also used as part of <scale> --neil 03 march 2011 <spinner> (spinbox; <spinbuttons> with a textbox whereby spinning affects value in textbox; not usable) <spring> (use @flex instead) <strut> (replaced by @debug?) <tabcontrol> (contained tabbox and tabpanel) <text> (like <label> or <description> but does not wrap; like <label crop="end">; had been used in menus/toolbars) <textfield> (like <textbox>) <thumb> (<button> with deprecated <gripper>; implements sliding box in center of scrolbar) <title> (to add a caption on a <titledbox> <titledbox> (box with a frame) <titledbutton> (attempt to combine text an...
...d images before <button>) <toolbarpaletteitem> required to embed non-buttons in customisable toolbars --neil 03 march 2011 <treebody> (old/experimental and unsupported xul tags) lives on as the internal name for the ancestor <treechildren> element --neil 03 march 2011 <treecaption> (old/experimental and unsupported xul tags) <treecolgroup> (former name for <treecols> <treecolpicker> (internal use only; part of xbl for <tree>) <treefoot> (old/experimental and unsupported xul tags) <treeindentation> (old/experimental and unsupported xul tags) was a part of the old <tree> that predated <outliner> that was not converted to <listbox>--neil 03 march 2011 <treeicon> (old/experimental and unsupported xul tags) <treerows> (internal use only; part of xbl for <tree>) attributes...

PopupEvents - Archive of obsolete content
<panel id="time-panel" onpopupshowing="this.lastchild.value = (new date()).tolocaleformat('%t')"> <label value="time:"/> <label id="time"/> </panel> <toolbarbutton label="show time" popup="time-panel"/> you can prevent a menu or popup from appearing by calling the preventdefault method of the event from within a popupshowing listener.
...moveeventlistener("popupshown", filemenuopened, false); var openmenu = document.getelementbyid("open-menu"); openmenu.open = true; } </script> <menu id="file-menu" label="file"> <menupopup id="file-menupopup"> <menu id="open-menu" label="open"> <menupopup> <menuitem label="file..."/> <menuitem label="page"/> </menupopup> </menu> </menupopup> </menu> <button label="open" oncommand="openfilemenu();"/> when the button is pressed, the openfilemenu function is called.
...the result is a button that opens both the outer menu and the inner menu.
...<panel onpopuphiding="document.getelementbyid('search').value = '';"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> </panel> you can prevent a popup from hiding by calling the event's preventdefault method.

Multiple Queries - Archive of obsolete content
hotoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </queryset> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> </query> <action> <image uri="?photo" src="?photo"/> </action> </queryset> </template> </hbox> this template contains two queries, the first contains a <triple>...
...in fact, the content for this photo is that of the first query with the button, whereas the content for the other photos are that of the second query with the normal images.
...here is the previous example rewritten using the simple syntax: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template> <rule dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </rule> <rule> <image uri="rdf:*" src="rdf:*"/> </rule> </template> </hbox> the result to the user in this example is the same as the previous example.
... <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:dc="http://purl.org/dc/elements/1.1/"> <template dc:title="canal"> <button uri="rdf:*" image="rdf:*" label="view" orient="vertical"/> </template> </hbox> this example shows only a single photo since a condition is used to filter out the other two photos.

Multiple Rules - Archive of obsolete content
tos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title" rel="equals" value="canal"/> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </rule> <rule> <action> <image uri="?photo" src="?photo"/> </action> </rule> </template> </hbox> this template contains a query with two rules.
...in fact, the content for this photo is that of the first rule with the button, whereas the content for the other photos is that of the second rule with the normal images.
...pr="person"/> <rule> <where subject="?gender" rel="equals" value="male"/> <action> <radio uri="?" label="?name is male"/> </action> </rule> <rule> <action> <radio uri="?" label="?name is female" disabled="true"/> </action> </rule> </template> </radiogroup> in this example, all male people are matched with the first rule, and a radio button is generated for each one.
... we assume that anyone that isn't male is female and use the second rule to create a disabled radio button for females.

Special Condition Tests - Archive of obsolete content
for example, the bookmarks toolbar in a web browser might display buttons at the first level, but menus and submenus for content below that.
...<button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <rule iscontainer="true"> <menupopup> <menu uri="rdf:*" label="rdf:http://purl.org/dc/elements/1.1/title"/> </menupopup> </rule> <rule> <menupopup> <menuitem uri="rdf:*" label="rdf:htt...
...p://www.xulplanet.com/rdf/address"/> </menupopup> </rule> </template> </button> the only difference in the code in this example is that the order of the rules has been switched around, the condition check for house has been removed and the iscontainer attribute has been added.
...for instance, we might add the following to the previous example: <button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" containment="http://www.xulplanet.com/rdf/address" ref="http://www.xulplanet.com/rdf/myneighbourhood"> the houses do have a value for the 'http://www.xulplanet.com/rdf/address' predicate, so they will also be considered to be containers as well, resulting in another level of menus.

Code Samples - Archive of obsolete content
this page contains sample code that you can use with the custom toolbar button tutorial.
...const path = "c:\\windows\\charmap.exe" var file = components .classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile) file.initwithpath(path) file.launch() open a web page if your button is in firefox or seamonkey, use code like this to open a web page.
... change the first line to specify the page that you want to open: const url = "http://www.mozilla.org/" document .getelementbyid("content") .webnavigation .loaduri(url, 0, null, null, null) if your button is in thunderbird or sunbird, use code like this to open a web page.
...er/content/addressbo...ddressbook.xul" irc chat const name = "irc:chatzilla" const uri = "chrome://chatzilla/content/" calendar const name = "calendarmainwindow" const uri = "chrome://calendar/content/" * at the time of writing, sunbird's passwords window is broken close the current window to close the window containing the button, possibly leaving other windows open: close() exit the application to exit the application, first closing all its windows: components .classes['@mozilla.org/toolkit/app-startup;1'] .getservice(components.interfaces.nsiappstartup) .quit(components.interfaces.nsiappstartup.eattemptquit) ...

Toolbars - Archive of obsolete content
toolbars, implemented using the xul toolbar element, are containers for toolbar buttons and other user interface objects.
... documentation xul school: adding toolbars and toolbar buttons a helpful tutorial to creating toolbars and toolbar buttons.
... creating toolbar buttons how to use overlays to add toolbar buttons to mozilla applications.
... custom toolbar button another example of how to create a toolbar button, complete with a sample extension you can download and try.

Adding HTML Elements - Archive of obsolete content
« previousnext » now that we've added some buttons, let's add some other elements.
...example 1 : source view <html:p> search for: <html:input id="find-text"/> <button id="okbutton" label="ok"/> </html:p> this code will cause the text 'search for:' to be displayed, followed by an input element and an ok button.
... notice that the xul button can appear inside the html elements, as it does here.
... <html:hr/> </html:div> expense report 1 what i did last summer <button id="yes" label="yes"/> <button id="no" label="no"/> as can be seen in the image, the text inside the div tag was displayed but the other text (expense report 1 and what i did last summer) was not.

Adding Properties to XBL-defined Elements - Archive of obsolete content
the example below creates a button which generates and stores a random number.
... you can retrieve this same number multiple times by getting the number property from the button.
...xul: <box id="random-box" class="randomizer"/> <button label="generate" oncommand="document.getelementbyid('random-box').number=math.random();"/> <button label="show" oncommand="alert(document.getelementbyid('random-box').number)"/> xbl: <binding id="randomizer"> <implementation> <field name="number"/> </implementation> </binding> a number field has been defined in the binding, which stores the random number.
... the two extra buttons set and get the value of this field.

Introduction to XBL - Archive of obsolete content
xul (example.xul): <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box class="okcancelbuttons"/> </window> css (example.css): box.okcancelbuttons { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl (example.xml): <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="okcancel"> <content> <xul:button label="ok"/> <xul:button label="cancel"...
...the box has been declared to have a class of okcancelbuttons.
... the style sheet associated with the file says that boxes with the class okcancelbuttons have a specialized binding, defined in the xbl file.
...however, to summarize, it causes two buttons to be added automatically inside the box, one an ok button and the other a cancel button.

Keyboard Shortcuts - Archive of obsolete content
however, it would be tedious to do that for every button and menu item (though it could be necessary when one's key commands are only triggered when the user is focused on a particular element).
... example 1 : source view <menubar id="sample-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem id="close-command" label="close" accesskey="c"/> </menupopup> </menu> </menubar> you can also use the accesskey attribute on buttons.
... when the key is pressed in this case, the button is selected.
...typically, this will include textboxes, buttons, checkboxes and so forth.

Tabboxes - Archive of obsolete content
tabbox example example 1 : source view <tabbox> <tabs> <tab label="mail"/> <tab label="news"/> </tabs> <tabpanels> <tabpanel id="mailtab"> <checkbox label="automatically check for mail"/> </tabpanel> <tabpanel id="newstab"> <button label="clear news buffer"/> </tabpanel> </tabpanels> </tabbox> here, two tabs have been added, the first labeled 'mail' and the other 'news'.
...when the second tab is clicked, the page containing the button labeled 'clear news buffer' will appear instead.
...the progress bar and the buttons can stay on the main dialog, outside of the tabs.
... <vbox flex="1"> <tabbox selectedindex="1"> <tabs> <tab label="search"/> <tab label="options"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search.

Using multiple DTDs - Archive of obsolete content
assuming you have an entity called somebutton.label defined in mainwindow.dtd, you can access the entity like this: <button id="somebutton" label="&somebutton.label"> multiple dtds if you want to use multiple dtds with your xul file, you can simply list all of the dtds inside your dtd declaration: <!doctype window [ <!entity % commondtd system "chrome://myextensions/locale/common.dtd"> %commondtd; <!entity % mainwindowdtd system "...
...assume you have an entity okbutton.label defined in file common.dtd.
... then accessing entities from both dtds would look like this: <button id="somebutton" label="&somebutton.label"> ...
... <button id="okbutton" label="&okbutton.label"> note that there is no such thing as namespaces with multiple dtds.

browser - Archive of obsolete content
cangoback type: boolean this read-only property is true if there is a page to go back to in the session history and the back button should be enabled.
... cangoforward type: boolean this read-only property is true if there is a page to go forward to in the session history and the forward button should be enabled.
...this is the flag used when the reload button is pressed while the shift key is held down.
... stop() return type: no return value equivalent to pressing the stop button, this method stops the currently loading document.

colorpicker - Archive of obsolete content
if this is set to the text button, the colorpicker is displayed as a button.
... when the user clicks the button, a popup appears for the user to select a color.
... open type: boolean returns true if the popup for a button-type colorpicker is open.
...mespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrolelement bugs the onchange event only fires if attribute type is set to "button".

menu - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element, much like a button, that is placed on a menubar.
... open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.
... pref the preferred width of the menu label or button will be the size needed for the popup contents.
... always both the preferred and minimum width of the menu label or button will be the same as that necessary for the menupopup.

menupopup - Archive of obsolete content
there are several ways in which a menupopup may be used: it may be placed inside a menu, menulist, toolbarbutton, or a button with the type attribute set to "menu" to create a popup that will open when the menu or button is pressed.
...when the element is clicked with the left mouse button, the menupopup will be displayed.
...this allows you to place the popup on one side of a button.
...this is what you might do to show a popup below a button, for example.

toolbaritem - Archive of obsolete content
this element should wrap all customizable items (unless they're instances of toolbarbutton).
...it is also used to group buttons together so they can be added and removed all at once like firefox's unified-back-forward-button.
... examples <toolbaritem> <menulist label="bus"> <menupopup> <menuitem label="car"/> <menuitem label="taxi"/> <menuitem label="bus" selected="true"/> <menuitem label="train"/> </menupopup> </menulist> </toolbaritem> <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" class="toolbarbutton-1" label="labe2l" /> </toolbaritem> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwi...
...ore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...

toolbarpalette - Archive of obsolete content
the children of the toolbarpalette should be the complete list of toolbarbuttons and toolbaritems that can be added to the toolbar.
... you can add your own custom buttons to the firefox browser by using an overlay that overlays the toolbarpalette with the idbrowsertoolbarpalette.
... examples <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, temp...
...ore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...

Sunbird Theme Tutorial - Archive of obsolete content
for example, a theme can change the size and colour of the toolbar buttons, and provide different icons on the buttons.
... but a theme cannot provide an extra button.
...select it and press the use theme button.
...select the newly installed theme and press the use theme button.

Theme changes in Firefox 3.5 - Archive of obsolete content
affected files details scrollbar.xml, xulscrollbars.css the <gripper> element was removed from the scrollbar thumb button by bug 448704.
... third-party themes can still draw a gripper for the scrollbar thumb button by applying a centered background image to the scrollbar's thumb button.
... global/checkbox.css, global/radio.css since bug 394892, radio buttons and checkboxes no longer have a minimum size on mac os x.
... if your theme uses native checkboxes or radiobuttons (-moz-appearance: radio / checkbox), this can result in distorted controls.

CSS - Archive of obsolete content
however, those elements' ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value.
... this pseudo-element is non-standard, supported only in internet explorer 10, internet explorer 11, and microsoft edge.::-ms-expandthe ::-ms-expand css pseudo-element is a microsoft extension that represents the button of a <select> menu control that opens or closes the drop-down menu.
...a slider control is one possible representation of <input type="range">.::-ms-revealthe ::-ms-reveal css pseudo-element is a microsoft extension that is used to display a password reveal button for use with a password field created by <input type="password">.
... the user presses the button to reveal the actual field value rather than asterisks.::-ms-thumbthe ::-ms-thumb css pseudo-element is a microsoft extension that represents the thumb that the user moves within the track of a slider control to alter its numerical value.

Advanced styling effects - Learn web development
first, we'll go with some different html for this example: <button>press me!</button> button { width: 150px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none; background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-gradient(to ...
...bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } this gives us the following result: here we've set up some button styling along with focus/hover/active states.
... the button has a simple black box shadow set on it by default, plus a couple of inset shadows, one light and one dark, placed on opposite corners of the button to give it a nice shading effect.
... when the button is pressed in, the active state causes the first box shadow to be swapped for a very dark inset shadow, giving the appearance of the button being pressed in.

Test your skills: Images and Form elements - Learn web development
your task is to make the following changes to the way this form looks: use attribute selectors to target the search field and button inside .myform.
... make the form field and button use the same text size as the rest of the form.
... give the form field and button 10 px of padding.
... give the button a purple background (i used rebeccapurple), white foreground, no border and rounded corners of 5px.

The HTML5 input types - Learn web development
this control looks like a text field but allows only floating-point numbers, and usually provides buttons in the form of a spinner to increase and decrease the value of the control.
... you can also use the step attribute to set the increment increase and decrease caused by pressing the spinner buttons.
...the first one below creates a number control whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.
... <input type="number" name="age" id="age" min="1" max="10" step="2"> the second one creates a number control whose value is restricted to any value between 0 and 1 inclusive, and whose increase and decrease buttons change its value by 0.01.

CSS property compatibility table for form controls - Learn web development
buttons see the button, submit, and reset input types and the <button> element.
... border-radius no no box-shadow no no check boxes and radio buttons see the checkbox and radio input types.
... letter-spacing partial[1] partial[1] many browsers apply this property to the select button.
... border-radius no[1] no[1] box-shadow no[1] no[1] image buttons see the image input type: property n t note css box model width yes yes height yes yes border yes yes margin yes yes padding yes yes text and font color n.a.

Sending form data - Learn web development
all of its attributes are designed to let you configure the request to be sent when a user hits a submit button.
... consider the following form: <form action="http://www.foo.com" method="get"> <div> <label for="say">what greeting do you want to say?</label> <input name="say" id="say" value="hi"> </div> <div> <label for="to">who do you want to say it to?</label> <input name="to" id="to" value="mom"> </div> <div> <button>send my greetings</button> </div> </form> since the get method has been used, you'll see the url www.foo.com/?say=hi&to=mom appear in the browser address bar when you submit the form.
... <form action="https://www.foo.com" method="post"> <div> <label for="say">what greeting do you want to say?</label> <input name="say" id="say" value="hi"> </div> <div> <label for="to">who do you want to say it to?</label> <input name="to" id="to" value="mom"> </div> <div> <button>send my greetings</button> </div> </form> when the form is submitted using the post method, you get no data appended to the url, and the http request looks like so, with the data included in the request body instead: post / http/2.0 host: foo.com content-type: application/x-www-form-urlencoded content-length: 13 say=hi&to=mom the content-length header indicates the size of the body, and the...
... for example: <form method="post" action="https://www.foo.com" enctype="multipart/form-data"> <div> <label for="file">choose a file</label> <input type="file" id="file" name="myfile"> </div> <div> <button>send the file</button> </div> </form> note: servers can be configured with a size limit for files and http requests in order to prevent abuse.

Sending forms through JavaScript - Learn web development
let's look at an example: <button>click me!</button> and now the javascript: const btn = document.queryselector('button'); function senddata( data ) { console.log( 'sending data' ); const xhr = new xmlhttprequest(); let urlencodeddata = "", urlencodeddatapairs = [], name; // turn the data object into an array of url-encoded key/value pairs.
... using this object is detailed in using formdata objects, but here are two examples: using a standalone formdata object <button>click me!</button> you should be familiar with that html sample.
... now for the javascript: const btn = document.queryselector('button'); function senddata( data ) { const xhr = new xmlhttprequest(), fd = new formdata(); // push our data into our formdata object for( name in data ) { fd.append( name, data[ name ] ); } // define what happens on successful data submission xhr.addeventlistener( 'load', function( event ) { alert( 'yeah!
... in the following example, we use the filereader api to access binary data and then build the multi-part form data request by hand: <form id="theform"> <p> <label for="thetext">text data:</label> <input id="thetext" name="mytext" value="some text data" type="text"> </p> <p> <label for="thefile">file data:</label> <input id="thefile" name="myfile" type="file"> </p> <button>send me!</button> </form> as you see, the html is a standard <form>.

Test your skills: Advanced styling - Learn web development
advanced form styling 2 in our next task we provide you with a set of three radio buttons.
... next, give the radio buttons a reasonable base style — the style they have when the page first loads.
... now give the radio buttons a different style for when they are selected.
... align the radio buttons nicely with the labels.

Images in HTML - Learn web development
if you make a mistake, you can always reset it using the reset button.
... if you get really stuck, press the show solution button to see an answer: playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> <img> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.
... if you make a mistake, you can always reset it using the reset button.
... if you get really stuck, press the show solution button to see an answer: playable code 2 <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.gete...

Index - Learn web development
7 html: a good basis for accessibility at, accessibility, article, beginner, buttons, codingscripting, forms, html, learn, links, a11y, assistive technology, keyboard, screenreader, semantics you should now be well-versed in writing accessible html for most occasions.
...for example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box.
...we'll also wire up our "clear completed" button.
... 325 styling web forms beginner, css, example, forms, guide, html, learn, web as you can see, as long as we want to build forms with just text fields and buttons, it's easy to style them using css.

Graceful asynchronous programming with Promises - Learn web development
the application has a window with a list of the user's friends, and clicking on a button next to a user starts a video call to that user.
... that button's handler calls getusermedia() in order to get access to the user's camera and microphone.
... the code that the video chat application would use might look something like this: function handlecallbutton(evt) { setstatusmessage("calling..."); navigator.mediadevices.getusermedia({video: true, audio: true}) .then(chatstream => { selfviewelem.srcobject = chatstream; chatstream.gettracks().foreach(track => mypeerconnection.addtrack(track, chatstream)); setstatusmessage("connected"); }).catch(err => { setstatusmessage("failed to connect"); }); } this function ...
...even if the handlecallbutton() function has already returned to the code that called it, when getusermedia() has finished working, it calls the handler you provide.

Test your skills: Events - Learn web development
events 1 in our first events-related task, you need to create a simple event handler that causes the text inside the button (btn) to change when it is clicked on, and change back when it is clicked again.
... events 3 in our final events-related task, you need to set an event listener on the <button>s' parent element (<div class="button-bar"> ...
... </div>), which when invoked by clicking any of the buttons will set the background of the button-bar to the color contained in the button's data-color attribute.
... we want you to solve this without looping through all the buttons and giving each one their own event listener.

Making decisions in your code — conditionals - Learn web development
if you make a mistake, you can always reset the example with the "reset" button.
...nst choice = select.value; // add conditional here createcalendar(days, choice); } function createcalendar(days, choice) { list.innerhtml = ''; h1.textcontent = choice; for (let i = 1; i <= days; i++) { const listitem = document.createelement('li'); listitem.textcontent = i; list.appendchild(listitem); } } createcalendar(31,'january'); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> .output * { box-sizing: border-box; } .output ul { padding-left: 0; } .output li { display: block; float: left; width: 25%; border: 2px solid white; padding: 5px; height: 40px; background-color: #4a2db6; color: white; } html { font-family: sans-serif; }...
... if you make a mistake, you can always reset the example with the "reset" button.
...d="code" class="playable-code" style="height: 450px;width: 95%"> const select = document.queryselector('select'); const html = document.queryselector('.output'); select.onchange = function() { const choice = select.value; // add switch statement } function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; }</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getele...

Useful string methods - Learn web development
each example comes with a "reset" button, which you can use to reset the code if you make a mistake and can't get it working again, and a "show solution" button you can press to see a potential answer if you get really stuck.
... 'get well soon']; for (let i = 0; i < greetings.length; i++) { let input = greetings[i]; // your conditional test needs to go inside the parentheses // in the line below, replacing what's currently there if (greetings[i]) { let listitem = document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getele...
... document.queryselector('.output ul'); list.innerhtml = ''; let cities = ['london', 'manchester', 'birmingham', 'liverpool']; for (let i = 0; i < cities.length; i++) { let input = cities[i]; // write your code just below here let result = input; let listitem = document.createelement('li'); listitem.textcontent = result; list.appendchild(listitem); } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getele...
...street', 'syb4f65hf75f736463;stalybridge', 'hud5767ghtyfyr4536dh45dg45dg3;huddersfield']; for (let i = 0; i < stations.length; i++) { let input = stations[i]; // write your code just below here let result = input; let listitem = document.createelement('li'); listitem.textcontent = result; list.appendchild(listitem); } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getel...

Website security - Learn web development
john constructs a form that includes his bank details and an amount of money as hidden fields, and emails it to other site users (with the submit button disguised as a link to a "get rich quick" site).
... if a user clicks the submit button, an http post request will be sent to the server containing the transaction details and any client-side cookies that the browser associated with the site (adding associated site cookies to requests is normal browser behavior).
... the result is that any user who clicks the submit button while they are logged in to the trading site will make the transaction.
...clickjacking could also be used to get the user to click a button on a visible site, but in doing so actually unwittingly click a completely different button.

Introduction to client-side frameworks - Learn web development
that could look something like this: function buildtodoitemel(id, name) { const item = document.createelement('li'); const span = document.createelement('span'); const textcontent = document.createtextnode(name); span.appendchild(textcontent) item.id = id; item.appendchild(span); item.appendchild(builddeletebuttonel(id)); return item; } here, we use the document.createelement() method to make our <li>, and several more lines of code to create the properties and children it needs.
... the tenth line of this snippet references another build function: builddeletebuttonel().
... it follows a similar pattern to the one we used to build a list item element: function builddeletebuttonel(id) { const button = document.createelement('button'); const textcontent = document.createtextnode('delete'); button.setattribute('type', 'button'); button.appendchild(textcontent); return button; } this button doesn't do anything yet, but it will later once we decide to implement our delete feature.
... by contrast, the following block of code illustrates the way you might use vue to describe our list of tasks: <ul> <li v-for="task in tasks" v-bind:key="task.id"> <span>{{task.name}}</span> <button type="button">delete</button> </li> </ul> that's it.

Implementing feature detection - Learn web development
clicking the big pink build button on the page that comes up.
... when you are using modernizr in production, you can go to the download page you've already visited and click the plus buttons for only the features you need feature detects for.
... then when you click the build button, you'll download a custom build containing only those feature detects, making for a much smaller file size.
...to get a key, sign in to a google account, go to the get a key/authentication page, then click the blue get a key button and follow the instructions.

Debugging on Mac OS X
running a debug session make sure breakpoints are active (which implies running under the debugger) by opening the product menu and selecting "debug / activate breakpoints" (also shown by the "breakpoints" button in the top right section of the main window).
... then click the "run" button or select "run" from the product menu.
... now you're ready to start debugging: from the "product" menu, ensure the scheme you created above is selected under "scheme" click the "run" button.
... when you are done debugging, click the "stop" button and quit the instance of firefox that you were debugging in the normal way.

Multiple Firefox profiles
press the “launch profile in new browser” button next to it.
... windows windows xp click the start button.
... windows vista/7 click the start button.
... type about:profiles into the browser url search bar on the page, click create a new profile button read the introduction, and click next enter a profile name for your new profile.

Fonts for Mozilla's MathML engine
open the latinmodern-math font file and click the install button.
... open the stixmath-regular font file and click the install button.
... double-click the latinmodern-math font file click the "install the font" button from the window that opens.
... open the stixmath-regular font file and click the "install the font" button from the window that opens.

nsIAuthPrompt
methods prompt() this method puts up a text input dialog with ok and cancel buttons.
... result the result of the dialog box, ok or cancel buttons.
... promptpassword() this method puts up a password dialog with ok and cancel buttons.
... promptusernameandpassword() this method puts up a username/password dialog with ok and cancel buttons.

nsIFrameLoader
n boolean capture); void activateremoteframe(); void destroy(); void loadframe(); void loaduri(in nsiuri auri); void sendcrossprocesskeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); void sendcrossprocessmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void updatepositionandsize(in nsiframe aiframe); native code only!
... void sendcrossprocessmouseevent( in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe ); parameters atype the type of mouse event to send.
... abutton which button was clicked, if any.
... aclickcount the number of clicks comprising the mouse button event, if any.

Working with windows in chrome code
nts[0].maxprogress; setprogress(window.arguments[0].progress); setstatus(window.arguments[0].status); } } function setprogress(value) { gprogressmeter.value = 100 * value / maxprogress; } function setstatus(text) { gstatus.value = "status: " + text + "..."; } ]]></script> <label id="status" value="(no status)" /> <hbox> <progressmeter id="progressmeter" mode="determined" /> <button label="cancel" oncommand="close();" /> </hbox> </window> example 2: interacting with the opener sometimes an opened window needs to interact with its opener; for example, it might do so in order to give notice that the user has made changes in the window.
... if we're sure the window that opened the progress dialog declares the canceloperation function, we can use window.opener.canceloperation() to notify it, like this: <button label="cancel" oncommand="opener.canceloperation(); close();" /> using a callback function.
... window.opendialog( "chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10}, oncancel ); the progress dialog can then run the callback like this: <button label="cancel" oncommand="window.arguments[1](); close();" /> example 3: using nsiwindowmediator when opener is not enough the window.opener property is very easy to use, but it's only useful when you're sure that your window was opened from one of a few well-known places.
...suppose the overlay contains a button to open the extension's options window which needs to read some data from the browser window.

Zombie compartments
viewing live compartments if you want to see a list of live compartments, type "about:memory" into the address bar and click on the measure button.
... first, many sites utilize scripts from other sites to provide advertisements, "like" and "+1" buttons, twitter feeds, etc.
... compartment(http://techcrunch.com/) compartment(http://www.facebook.com/plugins/like.php?...) compartment(https://plusone.google.com/_/+1/fastbutton?...) compartment(http://platform.twitter.com/widgets/...utton.html?...) compartment(http://cdn.at.atwola.com/_media/uac/tcode3.html) compartment(https://s-static.ak.fbcdn.net/connec..._proxy.php?...) compartment(http://ads.tw.adsonar.com/adserving/getads.jsp?...) (some of those compartment urls are long and have been truncated.) another thing to beware is each compartment is created for an origin (e.g.
...running the garbage collector, with the corresponding about:memory button will help.

Debugging service workers - Firefox Developer Tools
when the service worker is stopped, a start button is provided to start it running, allowing you to trigger the service worker lifecycle.
... unregister on the right-hand side of the service workers view there is an unregister button, which when pressed unregisters the service worker.
... debug important: the debug button is currently enabled only in firefox nightly.
... when your service worker is running, a debug button is available next to the source information (it is disabled when the service worker is stopped).

Index - Firefox Developer Tools
2 3d view html, tools, web development, web development:tools when you click on the 3d view button, the page goes into 3d view mode; in this mode, you can see your page presented in a 3d view in which nested blocks of html are increasingly "tall," projecting outward from the bottom of the page.
... 48 network monitor recording 110n:priority, debugging, dev tools, firefox, guide, networking, tools you can pause and resume the monitoring of network traffic using the pause button.
... 64 examine and edit the box model guide, tools with the select element button pressed, if you hover over an element in the page, the box model for the element is shown overlaid on the page: 65 inspect and select colors guide, inspector, tools in the css pane's rules view, if a rule contains a color value, you'll see a sample of the color next to the value: 66 open the inspector guide, inspector, tools there are two main ways to ope...
... 131 step through code debugger, devtools, javascript, step through code when the debugger is stopped at a breakpoint, you can step through it using four buttons in the toolbar: 132 use a source map the javascript sources executed by the browser are often transformed in some way from the original sources created by a developer.

Console messages - Firefox Developer Tools
you can enable them by clicking the "css" button in the toolbar and selecting "reflows".
... to see only messages of particular categories, click the button labeled with that category (errors, css, and so on).
... for errors and warnings, when you turn off display of the category, a number appears next to the button text to indicate how many messages of that type are available.
...their display is controlled by the errors button, not the requests button.

CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
examples managing button focus this example draws two buttons on a canvas.
... html <canvas id="canvas"> <button id="button1">continue</button> <button id="button2">quit</button> </canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const button1 = document.getelementbyid('button1'); const button2 = document.getelementbyid('button2'); document.addeventlistener('focus', redraw, true); document.addeventlistener('blur', redraw, true); canvas.addeventlistener('click', handleclick, false); redraw(); function redraw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawbutton(button1, 20, 20); drawbutton(button2, 20, 80); } function handleclick(e) { // calculate click coordinates const x = e.clientx - canvas.offsetleft; ...
...const y = e.clienty - canvas.offsettop; // focus button1, if appropriate drawbutton(button1, 20, 20); if (ctx.ispointinpath(x, y)) { button1.focus(); } // focus button2, if appropriate drawbutton(button2, 20, 80); if (ctx.ispointinpath(x, y)) { button2.focus(); } } function drawbutton(el, x, y) { const active = document.activeelement === el; const width = 150; const height = 40; // button background ctx.fillstyle = active ?
... 'pink' : 'lightgray'; ctx.fillrect(x, y, width, height); // button text ctx.font = '15px sans-serif'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; ctx.fillstyle = active ?

Using channel messaging - Web APIs
var input = document.getelementbyid('message-input'); var output = document.getelementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click', onclick); // listen for messages on port1 port1.onmessage = onmessage; // transfer po...
...rt2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function onclick(e) { e.preventdefault(); port1.postmessage(input.value); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; input.value = ''; } we start off by creating a new message channel by using the messagechannel() constructor.
... when the iframe has loaded, we register an onclick handler for our button and an onmessage handler for messagechannel.port1.
... when our button is clicked, we prevent the form from submitting as normal and then send the value entered in our text input to the iframe via the messagechannel.

Document.createTextNode() - Web APIs
example <!doctype html> <html lang="en"> <head> <title>createtextnode example</title> <script> function addtextnode(text) { var newtext = document.createtextnode(text), p1 = document.getelementbyid("p1"); p1.appendchild(newtext); } </script> </head> <body> <button onclick="addtextnode('yes!
... ');">yes!</button> <button onclick="addtextnode('no!
... ');">no!</button> <button onclick="addtextnode('we can!
... ');">we can!</button> <hr /> <p id="p1">first line of paragraph.</p> </body> </html> specifications specification status comment domthe definition of 'document: createtextnode' in that specification.

Document - Web APIs
globaleventhandlers.onauxclick an eventhandler called when an auxclick event is sent, indicating that a non-primary button has been pressed on an input device (e.g.
... a middle mouse button).
... wheel fired when the user rotates a wheel button on a pointing device (typically a mouse).
... dragend fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).

GeolocationCoordinates.longitude - Web APIs
javascript the javascript code below creates an event listener so that when the user clicks on a button, the location information is retrieved and displayed.
... let button = document.getelementbyid("get-location"); let lattext = document.getelementbyid("latitude"); let longtext = document.getelementbyid("longitude"); button.addeventlistener("click", function() { navigator.geolocation.getcurrentposition(function(position) { let lat = position.coords.latitude; let long = position.coords.longitude; lattext.innertext = lat.tofixed(2); longtext.innertext = long.tofixed(2); }); }); after setting up variables to more conveniently reference the button element and the two elements into which the latitude and logitude will be drawn, the event listener is established by calling addeventlistener() on the <button> element.
... when the user clicks the button, we'll fetch and display the location information.
...</p> <button id="get-location"> get my location </button> result take this example for a test drive here: specifications specification status comment geolocation apithe definition of 'coordinates.longitude' in that specification.

HTMLDialogElement.close() - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the showmodal() method.
... from there you can click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the form via the submit button.
...ning a form --> <dialog id="favdialog"> <form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyi...
...d('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).

HTMLDialogElement.open - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the showmodal() method.
... from there you can click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the form via the submit button.
...ning a form --> <dialog id="favdialog"> <form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyi...
...d('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).

HTMLDialogElement.show() - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the show() method.
... from there you can click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the form via the submit button.
...ning a form --> <dialog id="favdialog"> <form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyi...
...d('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> specifications specification status comment html living standardthe definition of 'show()' in that specification.

HTMLDialogElement.showModal() - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the showmodal() method.
... from there you can click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the form via the submit button.
...ning a form --> <dialog id="favdialog"> <form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyi...
...d('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).

HTMLDialogElement - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a form via the htmldialogelement.showmodal() function.
... from there you can click the cancel button to close the dialog (via the htmldialogelement.close() function), or submit the form via the submit button.
...ning a form --> <dialog id="favdialog"> <form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyi...
...d('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).

HTMLElement.hidden - Web APIs
javascript document.getelementbyid("okbutton") .addeventlistener("click", function() { document.getelementbyid("welcome").hidden = true; document.getelementbyid("awesome").hidden = false; }, false); this code sets up a handler for the welcome panel's "ok" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.
... the welcome panel <div id="welcome" class="panel"> <h1>welcome to foobar.com!</h1> <p>by clicking "ok" you agree to be awesome every day!</p> <button class="button" id="okbutton">ok</button> </div> this html creates a panel (in a <div> block) that welcomes the user to a site and tells them what they're agreeing to by clicking the ok button.
... the follow-up panel once the user clicks the "ok" button in the welcome panel, the javascript code swaps the two panels by changing their respective values for hidden.
... .panel { font: 16px "open sans", helvetica, arial, sans-serif; border: 1px solid #22d; padding: 12px; width: 500px; text-align: center; } .button { font: 22px "open sans", helvetica, arial, sans-serif; padding: 5px 36px; } h1 { margin-top: 0; font-size: 175%; } result specifications specification status comment html living standardthe definition of 'htmlelement.hidden' in that specification.

HTMLFormElement: submit event - Web APIs
bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface submitevent event handler property globaleventhandlers.onsubmit note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it.
... however, the submitevent which is sent to indicate the form's submit action has been triggered includes a submitter property, which is the button that was invoked to trigger the submit request.
... the submit event fires when the user clicks a submit button (<button> or <input type="submit">) or presses enter while editing a field (e.g.
... html <form id="form"> <label>test field: <input type="text"></label> <br><br> <button type="submit">submit form</button> </form> <p id="log"></p> javascript function logsubmit(event) { log.textcontent = `form submitted!

HTMLFormElement - Web APIs
requestsubmit() requests that the form be submitted using the specified submit button and its corresponding configuration.
... elements that are considered form controls the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
...ument body f.action = "/cgi-bin/some.cgi"; // add action and method attributes f.method = "post"; f.submit(); // call the form's submit() method extract information from a <form> element and set some of its attributes: <form name="forma" action="/cgi-bin/test" method="post"> <p>press "info" for form details, or "set" to change those details.</p> <p> <button type="button" onclick="getforminfo();">info</button> <button type="button" onclick="setforminfo(this.form);">set</button> <button type="reset">reset</button> </p> <textarea id="form-info" rows="15" cols="20"></textarea> </form> <script> function getforminfo(){ // get a reference to the form via its name var f = document.forms["forma"]; // the form properties we're interested...
...<input type="radio" name="pet" value="cat"> cat</label></p> <p><label><input type="radio" name="pet" value="dog"> dog</label></p> </fieldset> <fieldset> <legend>owned vehicles</legend> <p><label><input type="checkbox" name="vehicle" value="bike">i have a bike</label></p> <p><label><input type="checkbox" name="vehicle" value="car">i have a car</label></p> </fieldset> <p><button>submit</button></p> </form> </body> </html> submitting forms and uploading files using xmlhttprequest if you want to know how to serialize and submit a form using the xmlhttprequest api, please read this paragraph.

HTMLSelectElement.selectedOptions - Web APIs
ments representing each of the food choices looks like this: <label for="foods">what do you want to eat?</label><br> <select id="foods" name="foods" size="7" multiple> <option value="1">burrito</option> <option value="2">cheeseburger</option> <option value="3">double bacon burger supreme</option> <option value="4">pepperoni pizza</option> <option value="5">taco</option> </select> <br> <button name="order" id="order"> order now </button> <p id="output"> </p> the <select> element is set to allow multiple items to be selected, and it is 7 rows tall.
... note also the <button>, whose role it is to trigger fetching the htmlcollection of selected elements using the selected property.
... javascript the javascript code that establishes the event handler for the button, as well as the event handler itself, looks like this: let orderbutton = document.getelementbyid("order"); let itemlist = document.getelementbyid("foods"); let outputbox = document.getelementbyid("output"); orderbutton.addeventlistener("click", function() { let collection = itemlist.selectedoptions; let output = ""; for (let i=0; i<collection.length; i++) { if (output === "") { output = "your order for the following items has been placed: "; } output += collection[i].label; if (i === (collection.length - 2) && (collection.length < 3)) { output += " and "; } else if (i < (collection.length - 2)) { output += ", "; } else if (i === (collection.length - 2)) { ...
... output += ", and "; } } if (output === "") { output = "you didn't order anything!"; } outputbox.innerhtml = output; }, false); this script sets up a click event listener on the "order now" button.

Working with the History API - Web APIs
suppose now that the user navigates to http://google.com, then clicks the back button.
... note: calling history.back() normally behaves the same way as clicking the back button.
...clicking the browser's back button (still) does.
... suppose now that the user navigates to http://www.microsoft.com, then clicks the back button.

MediaStreamConstraints.audio - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; ...
...text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain an audio-only stream with no specific constraints, then attaches the resulting stream to an <audio> element once the stream is returned.
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement ...
...= document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of audio constraints requesting that echo cancellation be enabled and that, if possible, the sample rate be 8 bits per sample instead of the more common 16 bits (possibly as a bandwidth saving measure).

MediaStreamConstraints.video - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; ...
...text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video> element once the stream is returned.
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement ...
...= document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of video constraints that indicate a preference for a video track whose dimensions are as close as possible to 160x120 pixels, and whose frame rate is as close to 15 frames per second as possible.

Using the Permissions API - Web APIs
depending on the value of the state property of the permissionstatus object returned when the promise resolves, it reacts differently: "granted" the "enable geolocation" button is hidden, as it isn't needed if geolocation is already active.
... "prompt" the "enable geolocation" button is hidden, as it isn't needed if the user will be prompted to grant permission for geolocation.
... the geolocation.getcurrentposition() function is then run, which prompts the user for permission; it runs the revealposition() function if permission is granted (which shows the map), or the positiondenied() function if permission is denied (which makes the "enable geolocation" button appear).
... "denied" the "enable geolocation" button is revealed (this code needs to be here too, in case the permission state is already set to denied for this origin when the page is first loaded).

RadioNodeList - Web APIs
radionodelist.value if the underlying element collection contains radio buttons, the value property represents the checked radio button.
... on retrieving the value property, the value of the currently checked radio button is returned as a string.
... if the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned.
... on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked.

Using readable streams - Web APIs
as an example, have a look at our simple random stream demo (see it live also), which creates a custom stream, enqueues some random strings into it, and then reads the data out of the stream again once the stop string generation button is pressed.
...when the button is pressed, the interval is cancelled, and a function called readstream() is invoked to read the data back out of the stream again.
... const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); in the readstream() function itself, we lock a reader ...
...this example works much the same way as our simple random stream, except that when the button is pressed to stop generating random strings, the custom stream is taken and teed, and both resulting streams are then read: function teestream() { const teedoff = stream.tee(); readstream(teedoff[0], list2); readstream(teedoff[1], list3); } pipe chains one very experimental feature of streams is the ability to pipe streams into one another (called a pipe chain).

SubmitEvent() - Web APIs
examples this code snippet locates a form in the current document, and then an html <button> within the form with the class submit on it.
... next, a new submitevent is created, configured with its submitter set to the identified button (or null if the button wasn't found).
... then the event is sent to the form, telling the form that it's been submitted by the button.
... const form = document.queryselector("form"); const formtrigger = form.queryselector("button.submit"); const submitevent = new submitevent("submit", { submitter: formtrigger }); form.dispatchevent(submitevent); this is a somewhat contrived example, as you can do nearly all of this much more easily, but this gives you deep control over the process that can be useful.

SubmitEvent - Web APIs
submitter read only an htmlelement object which identifies the button or other element which was invoked to trigger the form being submitted.
... examples in this example, a shopping cart may have an assortment of different submit buttons depending on factors such as the user's settings, the shop's settings, and any minimum or maximum shopping card totals established by the payment processors.
... each of the submit elements' id is used to identify which payment processor the button corresponds to.
...please try again.", "ok"); } }); the handler id is obtained by using the submit event's submitter property to get the submit button, from which we then get the id.

Boilerplate 1 - Web APIs
specifically, the html has a <p> element that contains some descriptive text about the page and may also hold error messages; a <canvas> element; and optionally a <button>.
... the css contains rules for body, canvas, and button.
...]</p> <button>[ optional button element.
... ]</button> <canvas>your browser does not seem to support html5 canvas.</canvas> css body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; ...

Clearing by clicking - Web APIs
every time the user clicks the canvas or the button, the canvas is cleared with a new randomly chosen color.
... <p>a very simple webgl program that still shows some color and user interaction.</p> <p>you can repeatedly click the empty canvas or the button below to change color.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
... window.removeeventlistener(evt.type, setupwebgl, false); // adding the same click event handler to both canvas and // button.
... var canvas = document.queryselector("#canvas-view"); var button = document.queryselector("#color-switcher"); canvas.addeventlistener("click", switchcolor, false); button.addeventlistener("click", switchcolor, false); // a variable to hold the webglrenderingcontext.

Advanced techniques: Creating and sequencing audio - Web APIs
each voice has four buttons, which represent four beats in one bar of music.
... notesinqueue.push({ note: beatnumber, time: time }); if (pads[0].queryselectorall('button')[currentnote].getattribute('aria-checked') === 'true') { playsweep() } if (pads[1].queryselectorall('button')[currentnote].getattribute('aria-checked') === 'true') { playpulse() } if (pads[2].queryselectorall('button')[currentnote].getattribute('aria-checked') === 'true') { playnoise() } if (pads[3].queryselectorall('button')[currentnote].getattrib...
...we'll add a loading screen that disappears when the file has been fetched and decoded, then we can allow the scheduler to start using the play button click event.
... // when the sample has loaded allow play let loadingel = document.queryselector('.loading'); const playbutton = document.queryselector('[data-playing]'); let isplaying = false; setupsample() .then((sample) => { loadingel.style.display = 'none'; // remove loading screen dtmf = sample; // to be used in our playsample function playbutton.addeventlistener('click', function() { isplaying = !isplaying; if (isplaying) { // start playing // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } currentnote = 0; nextnotetime = audioctx.currenttime; scheduler(); // kick off...

Example and tutorial: Simple synth keyboard - Web APIs
function notepressed(event) { if (event.buttons & 1) { let dataset = event.target.dataset; if (!dataset["pressed"]) { osclist[dataset["octave"][dataset["note"]]] = playtone(dataset["frequency"]); dataset["pressed"] = "yes"; } } } we start by checking whether the primary mouse button is pressed, for two reasons.
... first, we want to only allow the primary mouse button to trigger notes playing.
... if the mouse button is in fact down, we get the pressed key's dataset attribute; this makes it easy to access the custom data attributes on the element.
... stopping a tone the notereleased() function is the event handler called when the user releases the mouse button or moves the mouse out of the key that's currently playing.

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.
...uffer source from an existing audiobuffer, attaches it to the default destination, starts it playing, and returns it: function playsourcenode(audiocontext, audiobuffer) { const soundsource = audiocontext.createbuffersource(); soundsource.buffer = audiobuffer; soundsource.connect(audiocontext.destination); soundsource.start(); return soundsource; } this function is called when the play button is pressed.
... the play button html looks like this: <button class="button-play" role="switch" data-playing="false" aria-pressed="false">play</button> and the click event listener starts like so: playbutton.addeventlistener('click', function() { if (this.dataset.playing === 'false') { srcnode = playsourcenode(audioctx, sample); ...
...first, the html: <button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button> the filter button's click handler then connects the iirfilter up to the graph, between the source and the detination: filterbutton.addeventlistener('click', function() { if (this.dataset.filteron === 'false') { srcnode.disconnect(audioctx.destination); srcnode.connect(iirfilter).connect(audioctx.destination); ...

Window.open() - Web APIs
toolbar if this feature is on, then the new secondary window renders the toolbar buttons (back, forward, reload, stop buttons).
... in addition to the toolbar buttons, firefox (before 76) will render the tab bar if it is visible, present in the parent window.
... the purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (back toolbar button is disabled).
...so a user who tries to return to the origin will be confused by a grayed out back button." quote from the top ten new mistakes of web design: 2.

WindowOrWorkerGlobalScope.setTimeout() - Web APIs
example the following example sets up two simple buttons in a web page and hooks them to the settimeout() and cleartimeout() routines.
... pressing the first button will set a timeout which calls an alert dialog after two seconds and stores the timeout id for use by cleartimeout().
... you may optionally cancel this timeout by pressing on the second button.
... html <p>live example</p> <button onclick="delayedalert();">show an alert box after two seconds</button> <p></p> <button onclick="clearalert();">cancel alert before it happens</button> javascript var timeoutid; function delayedalert() { timeoutid = window.settimeout(window.alert, 2*1000, 'that was really slow!'); } function clearalert() { window.cleartimeout(timeoutid); } result see also cleartimeout() example.

XRInputSource - Web APIs
properties gamepad read only a gamepad object describing the state of the buttons and axes on the xr input source, if it is a gamepad or comparable device.
... if the device has a button or other pressable input control, it is a primary input source, and this button is a primary action.
... a primary action may occur when the user presses a button, clicks on a touchpad or the top button of a thumb stick, or uses a hand gesture or spoken command that invokes the button-like action.
...when the action has completed (such as when the user releases the button), a select event is sent.

XRSystem: isSessionSupported() - Web APIs
if it is, we set up a button to read "enter xr", to call a method onbuttonclicked(), and enable the button.
...if a session is already underway when the button is clicked, we call the xrsession object's end() method to shut down the webxr session.
... if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { userbutton.addeventlistener('click', onbuttonclicked); userbutton.innerhtml = 'enter xr'; userbutton.disabled = false; } }); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity.
... onsessionstarted(xrsession); }); } else { // button is a toggle button.