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 19 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.
...the buttons have been pushed over.
...for example, if a box is 200 pixels wide and contains two flexible buttons, the first 50 pixels and the other 90 pixels, there will be 60 pixels of space left over.
...And 14 more matches

Video player styling basics - Developer guides
this "data-state" idea is also used for setting the current state of buttons within the video control set, which allows specific state styling.
...ithin the video controls: .controls > * { float:left; width:3.90625%; height:100%; margin-left:0.1953125%; display:block; } .controls > *:first-child { margin-left:0; } all elements are floated left, as they are to be aligned next to one another, and each element is set to have a width of nearly 4% (again the actual value was calculated based on the required dimensions of the buttons), and a height of 100%.
... the <div> container for the <progress> element also requires some specific settings; it is set to be much wider than the other child elements and its cursor value is set to be pointer: .controls .progress { cursor:pointer; width:75.390625%; } buttons the first major styling task to tackle is to make the video control's buttons actually look like and act like real buttons.
...And 14 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.
...radio buttons are typically rendered as small circles, which are filled or highlighted when selected.
... they are called radio buttons because they look and operate in a similar manner to the push buttons on old-fashioned radios, such as the one shown below.
...And 13 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/gatekeeper/there.is.only.xul" buttons="accep...
...And 12 more matches

Element Positioning - Archive of obsolete content
a horizontal box with three buttons in it will be as wide as the three buttons, plus a small amount of padding.
... in the image, the first two buttons have been given a suitable size to hold their text.
...the width of the box containing the buttons is the total width of the buttons plus the padding between them.
...And 11 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, showpane examples <?xml version="1.0"?> <?xml-styleshee...
... buttonalign type: string the value of the align attribute for the box containing the buttons.
...And 11 more matches

Basic native form controls - Learn web development
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.
... checkable items: checkboxes and radio buttons checkable items are controls whose state you can change by clicking on them or their associated labels.
... the following screenshots show default, focused and disabled checkboxes in firefox 71 and safari 13 on macos and chrome 79 and edge 18 on windows 10: note: any checkboxes and radio buttons with the checked attribute on load match the :default pseudo class, even if they are no longer checked.
...And 11 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.
...button position flags on linux and mac, button 2 is on the left of the prompt, while buttons 1 and 0 are on the right.
... on windows and os/2, the buttons are centred in the order 0, 2, 1.
...And 11 more matches

ui/button/toggle - Archive of obsolete content
with this module you can create buttons that function like a check box, representing an on/off choice.
... toggle buttons have all the same features as action buttons: they can display icons and respond to click events.
... like action buttons, you can control their state on a per-window or per-tab basis as well as globally.
...And 10 more matches

Implementing controls using the Gamepad API - Game development
s 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 one), so you have to be careful an...
... gamepad object there's lots of useful information contained in the gamepad object, with the states of buttons and axes being the most important: id: a string containing information about the controller.
... mapping: the layout type of the buttons; standard is the only available option for now.
...And 10 more matches

ARIA: button role - Accessibility
this role can be used in combination with the aria-pressed attribute to create toggle buttons.
... <div id="savechanges" tabindex="0" role="button" aria-pressed="false">save</div> the above example creates a simple button which is first in the focus order, though <button> or <input> with type="button" should be used for buttons: <button id="savechanges">save</button> note: if using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and have to define event handlers for click and keydown events, including the enter and space keys, in order to process the user's input.
... basic buttons buttons should always have an accessible name.
...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 9 more matches

Using the Gamepad API - Web APIs
%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.
...%d buttons, %d axes.", gp.index, gp.id, gp.buttons.length, gp.axes.length); }); the gamepad object's properties are as follows: id: a string containing some information about the controller.
...And 9 more matches

Index - Web APIs
for mouse, it is fired when the device transitions from no buttons depressed to at least one button depressed.
...analog thumb sticks).- 1438 gamepad.buttons api, gamepad api, games, needsbetterspeclink, needsmarkupwork, property, reference, référence(2) the gamepad.buttons property of the gamepad interface returns an array of gamepadbutton objects representing the buttons present on the device.
...it contains three interfaces, two events and one specialist function, to respond to gamepads being connected and disconnected, and to access other information about the gamepads themselves, and what buttons and other controls are currently being pressed.
...And 9 more matches

Inputs and input sources - Web APIs
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.
...this object provides access to all of the buttons, axes, trackpads, and so forth that may be a part of the controller.
...And 9 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 8 more matches

HTML: A good basis for accessibility - Learn web development
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 navigate between buttons using the tab key and activate their selection using return or enter.
... ui controls by ui controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls.
... 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.
...And 8 more matches

HTML: A good basis for accessibility - Learn web development
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 navigate between buttons using the tab key and activate their selection using return or enter.
... ui controls by ui controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls.
... 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.
...And 8 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
if present on a radio type, it indicates that that radio button is the currently selected one in the group of same-named radio buttons.
...(only the htmlinputelement’s checked idl attribute is updated.) note: unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently checked.
...the default value for checkboxes and radio buttons is on.
...And 8 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 cs...
...the buttons maintain their size.
...And 7 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.
...the two buttons indicate a minimum width of 100 pixels.
... the buttons will never be smaller than this size but they may grow larger.
...And 7 more matches

confirm - Archive of obsolete content
abuttonflags a set of flags defining the buttons that should appear in the dialog.
... button_delay_enable: specifies that the buttons should only become clickable after a certain delay.
... note that this only applies to buttons 0 and 2, not button 1 (the "cancel" button).
...And 6 more matches

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
you can use the sample code provided here to make buttons that do various useful things.
...in particular, the articles creating toolbar buttons and building an extension explain the process in more detail.
...ml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="chrome://custombutton/content/button.css"?> <!doctype overlay > <overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- browser --> <toolbar id="nav-bar"> <hbox id="nav-bar-buttons"> <toolbarbutton id="custom-button-1"/> </hbox> </toolbar> <!-- address book --> <toolbar id="abtoolbar"> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="8"/> </hbox> </toolbar> <!-- message compose --> <toolbar id="composetoolbar"> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="8"/> </hbox> </toolbar> ...
...And 6 more matches

Creating a Skin - Archive of obsolete content
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.
... mozilla composer provides some icons for open and save buttons, which we'll just use here to save time.
...And 6 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 6 more matches

button - Archive of obsolete content
checkstate type: integer, values 0, 1, or 2 this attribute may be used to create three state buttons, numbered 0, 1 and 2.
...the type attribute must be set to checkbox for buttons with a check state.
... for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect.
...And 6 more matches

toolbarbutton - Archive of obsolete content
where not possible, make all toolbarbuttons focusable by -moz-user-focus: normal.
... checkstate type: integer, values 0, 1, or 2 this attribute may be used to create three state buttons, numbered 0, 1 and 2.
...the type attribute must be set to checkbox for buttons with a check state.
...And 6 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.
...if your firefox button relies on some button styling from toolbarbuttons.css you'll need to add comparable style rules for #appmenu-toolbar-button in browser.css.
...And 6 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.
... 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.
...for example, in our custom radio buttons example, we use generated content to handle the placement and animation of the inner circle when a radio button is selected: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input...
...And 6 more matches

What is JavaScript? - Learn web development
ome 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.
... replace your current <script> element with the following: <script src="script.js" defer></script> inside script.js, add the following script: 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 and refresh your browser, and you should see the same thing!
... using a pure javascript construct allows you to select all the buttons using one instruction.
...And 6 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
-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.
...when you click on an image in the gallery it brings up options to delete or cancel deletion of the card, and you don't want two buttons on top of one another.
...And 6 more matches

ui/button/action - Archive of obsolete content
with this module you can create buttons that display icons and can respond to click events.
... usage creating buttons to create a button you must give it an id, an icon, and a label: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: function(state) { console.log("button '" + state.label + "' was clicked"); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel using the toolbar customization feature: badged buttons new in firefox 36.
... disabling buttons you can disable a button by setting its disabled property to true.
...And 5 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 5 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 5 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 5 more matches

Componentizing our Svelte app - Learn web development
filterbutton.svelte: the all, active, and completed buttons that allow you to apply filters to the displayed todo items.
... 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.
...you'll notice that when you click on the filter buttons, they are selected and the style updates appropriately.
...And 5 more matches

Handling common accessibility problems - Learn web development
you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input (other form elements have different controls, for example the <select> element can have its options displayed and cycled between using the up and down arrow keys).
...it is possible to style any element to look like a link or button with css, and to behave like a link or button with javascript, but they won't actually be links or buttons, and you'll lose a lot of the accessibility these elements give you for free.
...you might have inherited a site where the semantics are not very good (perhaps you've ended up with a horrible cms that generates buttons made with <div>s), or you are using a complex control that does not have keyboard accessibility built in, like the html5 <video> element (amazingly, opera is the only browser that allows you to tab through the <video> element's default browser controls).
...And 5 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.
...the search bar also contains buttons, as well as a form to type search requests into.
... the javascript implementation to wire up the functionality required by our simple browser, we've written some basic javascript (see the full javascript listing.) wiring up the back and forward buttons early on in the code we implement two simple event listeners to move the browser back and forward in history when the relevant buttons are pressed: back.addeventlistener('touchend',function() { browser.goback(); }); fwd.addeventlistener('touchend',function() { browser.goforward(); }); the functions can be handled using the browser api htmliframeelement.goback() and htmliframeelement.goforward() methods.
...And 5 more matches

Pointer events - Web APIs
terminology active buttons state the condition when a pointer has a non-zero value for the buttons property.
... pointerdown onpointerdown fired when a pointer becomes active buttons state.
... pointerup onpointerup fired when a pointer is no longer active buttons state.
...And 5 more matches

<input type="button"> - HTML: Hypertext Markup Language
<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).
... note: while <input> elements of type button are still perfectly valid html, the newer <button> element is now the favored way to create buttons.
... <input type="button" value="click me"> if you don't specify a value, you get an empty button: <input type="button"> using buttons <input type="button"> elements have no default behavior (their cousins, <input type="submit"> and <input type="reset"> are used to submit and reset forms, respectively).
...And 5 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.
...buttons such as reset don't have a value otherwise.
...And 5 more matches

<input type="submit"> - HTML: Hypertext Markup Language
<input> elements of type submit are rendered as buttons.
...buttons do not have a true value otherwise.
... using submit buttons <input type="submit"> buttons are used to submit forms.
...And 5 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.
... content/overlay.xul xul file that will be overlaid on the firefox browser window, adding buttons, menu items, etc.
...in this case, we only want to display an ok button, so we set the buttons attribute to accept.
...And 4 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 4 more matches

Custom toolbar button - Archive of obsolete content
you can use the sample code provided here to make buttons that do various useful things.
...in particular, the articles creating toolbar buttons and building an extension explain the process in more detail.
...paste it into the new file: #custom-button-1, #wrapper-custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1.png");} /* common style for all custom buttons */ .custombutton {-moz-image-region: rect( 0px 24px 24px 0px);} .custombutton:hover {-moz-image-region: rect(24px 24px 48px 0px);} [iconsize="small"] .custombutton {-moz-image-region: rect( 0px 40px 16px 24px);} [iconsize="small"] .custombutton:hover {-moz-image-region: rect(24px 40px 40px 24px);} there is nothing to customize.
...And 4 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.
...this mechanism is necessary because different platforms have a specific order in which the buttons appear.
... example dialog source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" ondialogaccept="return dook();" ondialogcancel="return docancel();"> <script> function dook(){ alert("you pressed ok!"); return true; } function docancel(){ alert("you pressed cancel!"); return true; } </script> <description value="select a button"/> </dialog> you may place any elements that you wish in a dialog.
...And 4 more matches

Templates - Archive of obsolete content
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.
...this single button is used as a basis for all the buttons that need to be created.
...And 4 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 4 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.
...there are a few buttons in the main menu, including the one that will start the game.
...And 4 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 4 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.
...in a couple of cases — search and radio buttons/checkboxes, it becomes way more useful.
...And 4 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 4 more matches

Actions - Archive of obsolete content
there are three results, so three buttons will be created.
... label="?relateditem"/> </action> </template> <button id="http://www.xulplanet.com/rdf/b" label="http://www.xulplanet.com/rdf/b"/> <button id="http://www.xulplanet.com/rdf/c" label="http://www.xulplanet.com/rdf/c"/> <button id="http://www.xulplanet.com/rdf/d" label="http://www.xulplanet.com/rdf/d"/> </vbox> since the template tag is hidden, the effect will be like in the image, three buttons with the labels of the data in the datasource.
... additional content the previous example generated only a set of buttons, but the action body may contain additional content.
...And 3 more matches

Commands - Archive of obsolete content
the other advantage is that several buttons or other ui elements can be hooked up to the same command.
... any buttons and menu items hooked up to it will be disabled automatically.
... if you re-enable the command, the buttons will become enabled again.
...And 3 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.
...the label attributes on the two buttons inherit their values from the bound element.
...this makes it easy to change the labels on the buttons.
...And 3 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, placeho...
...lder, 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 3 more matches

WAI-ARIA basics - Learn web development
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.
...lert.textcontent = 'instruments played field now enabled; use it to tell us what you play.'; } else { instruitem.input.disabled = true; instruitem.label.style.color = '#999'; instruitem.input.setattribute('aria-disabled', 'true'); instruitem.input.removeattribute('aria-label'); hiddenalert.textcontent = 'instruments played field now disabled.'; } } describing non-semantic buttons as buttons a few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see ui controls in the html accessibility article, and enhancing keyboard accessibility, above).
...And 3 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 3 more matches

Video and Audio APIs - Learn web development
we lay out the buttons inside the control bar using flexbox (display: flex), to make things easier.
... we apply the custom web font to our buttons using font-family.
... implementing the javascript we've got a fairly complete html and css interface already; now we just need to wire up all the buttons to get the controls working.
...And 3 more matches

React interactivity: Editing, filtering, conditional rendering - Learn web development
update the "cancel" button in the edittemplate like so: <button type="button" classname="btn todo-cancel" onclick={() => setediting(false)} > cancel <span classname="visually-hidden">renaming {props.name}</span> </button> with this code in place, you should be able to press the "edit" and "cancel" buttons in your todo items to toggle between templates.
... back to the filter buttons now that our main features are complete, we can think about our filter buttons.
... interactive filters to make our filter buttons interactive, we should consider what props they need to utilize.
...And 3 more matches

ARIA Test Cases - Accessibility
- fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoom (leopard) pass n/a pass pass zoomtext fail- announced as 'alert' pass - - orca - - - - button basic button button with description dojo nightly build -- lots of other types of buttons there as well.
... - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - toggle button buttons with icons and without text -- under construction.
... only the bold/italic buttons should be toggle buttons, and they aren't currently toggleable.
...And 3 more matches

Creating a cross-browser video player - Developer guides
setup before dealing with the individual buttons, a number of initialisation calls are required.
...lementbyid('video'); var videocontrols = document.getelementbyid('video-controls'); as mentioned earlier, the browser's default controls now need to be disabled, and the custom controls need to be displayed: // hide the default controls video.controls = false; // display the user defined video controls videocontrols.style.display = 'block'; with that done, a variable pointing to each of the buttons is now required: var playpause = document.getelementbyid('playpause'); var stop = document.getelementbyid('stop'); var mute = document.getelementbyid('mute'); var volinc = document.getelementbyid('volinc'); var voldec = document.getelementbyid('voldec'); var progress = document.getelementbyid('progress'); var progressbar = document.getelementbyid('progress-bar'); var fullscreen = document.getele...
...mentbyid('fs'); using these handles, events can now be attached to each of the custom control buttons making them interactive.
...And 3 more matches

<button>: The Button element - HTML: Hypertext Markup Language
by default, html buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with css.
...this is the default if the attribute is not specified for buttons associated with a <form>, or if the attribute is an empty or invalid value.
... if your buttons are not for submitting form data to a server, be sure to set their type attribute to button.
...And 3 more matches

HTML documentation index - HTML: Hypertext Markup Language
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.
... submit buttons that take the form of an image rather than text.
...And 3 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.
...the appendnotification method takes the message, id, image (32x32), level and buttons.
...the buttons are represented by simple js data objects.
...And 2 more matches

Menus - Archive of obsolete content
these tags can be used to create menus which sit on a menubar or are attached to buttons.
...see menu buttons for more information.
... toolbarbutton toolbar buttons can also support menus.
...And 2 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 2 more matches

Adding Style Sheets - Archive of obsolete content
.bigbuttons matches all elements with a class of bigbuttons.
... button.bigbuttons matches all button elements with a class of bigbuttons.
... toolbar > button matches all buttons that are directly inside toolbar elements.
...And 2 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.
...in the former case, menu items and toolbar buttons would need to be disabled when there was no page to go back to, or no text to cut or delete.
...And 2 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> <dialo...
...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).
...xul handles placing and styling the buttons on the dialog.
...And 2 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 2 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 2 more matches

HTML text fundamentals - Learn web development
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.getelementby...
... 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%">milk eggs bread hummus</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.getelementby...
...ditable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 200px; width: 95%">drive to the end of the road turn right go straight across the first two roundabouts turn left at the third roundabout the school is on your right, 300 meters up the road</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.getelementby...
...And 2 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 2 more matches

MouseEvent.button - Web APIs
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.
... note: do not confuse this property with the mouseevent.buttons property, which indicates which buttons are pressed for all mouse events types.
...And 2 more matches

ui - Archive of obsolete content
attaching panels to buttons is only supported from firefox 30 onwards.
... from firefox 30 onwards, you can attach panels to toggle buttons, by passing the button into the panel's constructor or its show() method: frame a frame enables you to create an html iframe, using bundled html, css and javascript.
... toolbar the ability to add buttons to toolbars is new in firefox 30.
...you initialize a toolbar with an array of buttons and frames: var ui = require("sdk/ui"); var { actionbutton } = require("sdk/ui/button/action"); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = ui.actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = ui.actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = ui.actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = ui.frame({ url: "./frame-player.html" }); var toolbar = ui.toolbar({ title: "player", items: [p...

widget - Archive of obsolete content
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.
...in the add-on's "main.js" file, we create the widget, assign it the html file and the content script, and listen for events from the content script: const widgets = require("sdk/widget"); const data = require("sdk/self").data; var player = widgets.widget({ id: "player", width: 72, label: "player", contenturl: data.url("buttons.html"), contentscriptfile: data.url("button-script.js") }); player.port.on("play", function() { console.log("playing"); }); player.port.on("pause", function() { console.log("pausing"); }); player.port.on("stop", function() { console.log("stopping"); }); to learn much more about content scripts, see the working with content scripts guide.
... <img src="play.png" id="play-button"> <img src="pause.png" id="pause-button"> <img src="stop.png" id="stop-button"> </body> </html> finally, remove the line attaching the content script from "main.js": const widgets = require("sdk/widget"); const data = require("sdk/self").data; var player = widgets.widget({ id: "player", width: 72, label: "player", contenturl: data.url("buttons.html") }); player.port.emit("init"); player.port.on("play", function() { console.log("playing"); }); player.port.on("pause", function() { console.log("pausing"); }); player.port.on("stop", function() { console.log("stopping"); }); attaching panels to widgets you can supply a panel to the widget's constructor: if you do this, the panel is automatically displayed when the user clicks th...

Adding windows and dialogs - Archive of obsolete content
different operating systems order and position their buttons differently in their dialogs.
...all you need to do is define which buttons you'll need and the actions associated with them.
... <dialog id="xulschoolhello-hello-dialog" title="&xulschoolhello.hellodialog.title;" buttons="accept,cancel" ondialogaccept="return xulschoolchrome.hellodialog.accept();" ondialogcancel="return xulschoolchrome.hellodialog.cancel();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> carefully read the specification of the dialog element.
... you'll see that you can choose from a wide variety of buttons, associate any action you need to them, override their labels, and even add completely customized extra buttons.

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.
...open the preferences dialog box and take a look at all of the buttons in there.
...changing images the images used on buttons in the interface are located in the same directories as the css files.

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.
... widgets widgets are generally objects like form controls: buttons, text boxes, tree controls and the like.

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.
...content> <implementation> <method name="showtitle"> <parameter name="state"/> <body> if (state) { document.getanonymousnodes(this)[0].setattribute("style", "visibility: visible"); } else { document.getanonymousnodes(this)[0].setattribute("style", "visibility: collapse"); } </body> </method> </implementation> </binding> two buttons added to the xul have oncommand handlers which are used to change the visibility of the label.
...for example, we could move the show and hide buttons into the xbl file and do the following: example 1: source <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> <xul:button label="show" oncommand="document.getbindingparent(this).showtitle(true);"/> <xul:button label="hide" oncommand="document.getbindingparent(this).showtitle(false);"/> </content> <implementation>...
...these correspond to its four buttons, even though those buttons are drawn inside the stack.

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.

Modifying a XUL Interface - Archive of obsolete content
the button with the label "add" can be pressed multiple times and it will continue to add new buttons, each of which will have the label "a new button", and will only be distinguishable by their place as children in the box element with the id "abox".
...manipulating basic elements the main xul elements such as buttons, checkboxes and radio buttons may be manipulated using a number of script properties.
... note: if you're creating the checkbox dynamically and it's not yet added to the dom, you must use setattribute("checked", "false") instead, because the xbl isn't initiated yet.) example 6 : source view <button label="change" oncommand="this.nextsibling.checked = !this.nextsibling.checked;"/> <checkbox label="check for messages"/> radio buttons may be selected as well using properties, however since only one in a group may be selected at a time, the others must all be unchecked when one is checked.
...note that even though one of the radio buttons is inside an hbox, it is still part of the radio group.

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.
...rather than create separate windows and add navigation buttons to each of them, you would create one window and use a deck where the content changes.

XUL Accesskey FAQ and Policies - Archive of obsolete content
common elements that don't get accesskeys ok buttons.
... cancel buttons.
... close buttons.
... toolbar buttons tree items list items column headers are there any crucial bugs i should know about?

radio - Archive of obsolete content
radio buttons are almost always listed together in groups.
...other radio buttons in the same group are turned off.
... group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group.
...if the user selects one the buttons, the others in the group are unchecked.

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.
... global/globalbindings.xml updated to support changes to the tab bar, including per-tab close buttons.
... mozapps/extensions/viewbuttons.png new file; contains icons for each of the views that may be available in the add-ons manager.

Paddle and keyboard controls - Game development
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.
... the ability to move the paddle left and right pressed buttons can be defined and initialized with boolean variables like in the example.
... add these lines somewhere near the rest of your variables: var rightpressed = false; var leftpressed = false; the default value for both is false because at the beginning the control buttons are not pressed.

Flexbox - Learn web development
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.
...this is why our current example's buttons are centered vertically.
...the buttons will take up as much space as they can and sit as many on the same line as they can, but when they can no longer fit comfortably on the same line, they'll drop down to create new lines.

Styling links - Learn web development
styling links as buttons the tools you've explored so far in this article can also be used in other ways.
... in addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site.
...we want to fill up the whole width of the <ul>, leave a little margin between each button (but not a gap at the right hand edge), and we have 5 buttons to accommodate that should all be the same size.
...we center the text inside each link, set the line-height to 3 to give the buttons some height (which also has the advantage of centering the text vertically), and set the text color to black.

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.

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.

Third-party APIs - Learn web development
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.
... wiring up the pagination buttons to make the pagination buttons work, we will increment (or decrement) the value of the pagenumber variable, and then re-rerun the fetch request with the new value included in the page url parameter.
... below the existing addeventlistener() call, add these two new ones, which cause the nextpage() and previouspage() functions to be invoked when the relevant buttons are clicked: nextbtn.addeventlistener('click', nextpage); previousbtn.addeventlistener('click', previouspage); below your previous addition, let's define the two functions — add this code now: function nextpage(e) { pagenumber++; fetchresults(e); }; function previouspage(e) { if(pagenumber > 0) { pagenumber--; } else { return; } fetchresults(e); }; the first ...

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.
... 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.
... let's create a component that will be in charge of displaying the buttons and emitting the corresponding events.
...we'll disable the buttons when there are no tasks to be processed.

Accessible Toolkit Checklist
this can be supported through spi_getkeyboardcues and spi_getmenuunderlines simple widgets buttons tab, arrow, unmodified letter mnemonics require and support text labels for buttons with images, can be same as tooltip space key activates button enter key activates focused button (thus current button, not default button shows dark border when a different button is focused) when button has a popup available by clicking on it, the enter key or space bar should ...
...also activate the popup toolbars and toolbar buttons are not focusable, but we should expose the tooltip.
... msaa support, including the haspopup state default buttons ability to define in xml enter key fires it, but not when another widget has focus that needs the enter key layout engine - drawing dark border dynamically when the currently focused widget does not need the enter key events - making keystrokes do the right thing msaa support (default state) links enter key activates link (thus default button no longer shows dark border when link is focused) msaa support, including linked and traversed states, and accessible value that holds destination url text fields - single and multiple line it's probab...
... alt alone enters main menu after leaving menus, focus is restored to where it was modified and unmodified mnemonics msaa support (including focus events, menu start and end events, radio and checkbox menu items) static text and group boxes msaa support radio groups only the selected radio button is in the tab order the other radio buttons can be selected and focused with up/down arrow.

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.
...otherwise, conflicting static xul overlay button and dynamic customizableui buttons might cause the created button to be unstable or create a double button.
...dgetlistener); } } customizableui.addlistener(mywidgetlistener); customizableui.createwidget({ id: 'noida', defaultarea: customizableui.area_navbar, label: 'my widget', tooltiptext: 'this is my widget created with cui.jsm' }); it is important we add the listener before creating the element, because otherwise, the icon will not be set as the buttons are added, then we register the listener.

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.
... 846 nsipromptservice interfaces, interfaces:scriptable, reference, référence(2), xpcom interface reference 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.
...instead, you use the nsitaskbarwindowpreview.getbutton() to get the objects representing the buttons.

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.

XUL Overlays
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.
...the mechanism is the same, however.) any dialog that wants to overlay these buttons just declares the overlay at the top: <?xul-overlay href="chrome://global/content/dialogoverlay.xul"?> and includes an empty box with an id of okcancelbuttons in the ui.
... the following snippet shows a dialog with custom ui elements at the top and a reference to the overlay's ok and cancel buttons at the bottom: <box align="horizontal" id="bx1" flex="100%" style="margin-bottom: 1em; width: 100%;"> <html:input type="checkbox" id="dialog.newwindow"/> <html:label for="dialog.newwindow">&openwin.label;</html:label> <spring flex="100%"/> </box> <box id="okcancelbuttons"/> for more detail, see the ok and cancel button definitions being referenced here in the global component file platformdialogoverlay.xul.

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.
... toolbox-hosted tools then there is an array of labeled buttons which enables you to switch between the different tools hosted by the toolbox.
... extra tools next there's an array of buttons that can be added or removed in the developer tool settings.
...nted area 3d view (note that this is not available in firefox 40) scratchpad grab a color from the page take a screenshot of the entire page: take a screenshot of the complete web page and saves it in your downloads directory toggle rulers for the page measure a portion of the page: measure a part of the website by selecting areas within the page toolbox controls finally there's a row of buttons to: close the window toggle the window between attached to the bottom of the browser window, and attached to the side of the browser window toggle the window between standalone and attached to the browser window access developer tool settings settings see the separate page on the developer tools settings.

Key Values - Web APIs
qt::key_context4 (0x01100003) phone keys these keys represent buttons which commonly exist on modern smartphones.
... multimedia keys the multimedia keys are extra buttons or keys for controlling media devices, found on some keyboards.
... tv control keys these key values represent buttons or keys present on television devices, or computers or phones which have tv support.
... media controller keys because modern remote controls for media devices often include buttons beyond the basic controls covered elsewhere in this document, key values are defined for a broad array of these additional buttons.

Adding captions and subtitles to HTML5 video - Developer guides
initial setup as with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button: var subtitles = document.getelementbyid('subtitles'); we also initially turn off all subtitles, in case the browser turns any of them on by default: for (var i = 0; i < video.texttracks.length; i++) { video.texttracks[i].mode = 'hidden'; } the video.texttracks property contains an array of all the text track...
...first of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one.
... the creation of each list item and button is done by the createmenuitem() function, which is defined as follows: var subtitlemenubuttons = []; var createmenuitem = function(id, lang, label) { var listitem = document.createelement('li'); var button = listitem.appendchild(document.createelement('button')); button.setattribute('id', id); button.classname = 'subtitles-button'; if (lang.length > 0) button.setattribute('lang', lang); button.value = label; button.setattribute('data-state', 'inactive'); button.appendchild(document.createtextnode(label)); button.addeventlistener('click', function(e) { // set all buttons to inactive subtitlemenubuttons.map(function(v, i, a) { subtitlemenubuttons[i].setattribute('data-state', 'inactive'); }); //...
...button, the first condition will never match so all will subtitles be turned off if (video.texttracks[i].language == lang) { video.texttracks[i].mode = 'showing'; this.setattribute('data-state', 'active'); } else { video.texttracks[i].mode = 'hidden'; } } subtitlesmenu.style.display = 'none'; }); subtitlemenubuttons.push(button); return listitem; } this function builds the required <li> and <button> elements, and returns them so they can be added to the subtitles menu list.

<menuitem> - HTML: Hypertext Markup Language
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.
... radiogroup this attribute specifies the name of a group of commands to be toggled as radio buttons when selected.
... radio: represent one selection from a group of commands that can be toggled as radio buttons.

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.

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"...
... optional options: name type items array adding buttons to toolbars is only supported from firefox 30 onwards.
...buttons each take up a fixed width.

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" in...
...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.
...for example, we could change the page that gets loaded: 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://developer.mozilla.org/"); } at the command prompt, execute jpm run again.

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.
...for example, we could change the page that gets loaded: 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://developer.mozilla.org/"); } at the command prompt, execute cfx run again.

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.
...you shouldn't normally use this event to trigger actions on input controls such as buttons.
...you can create an extension that adds toolbar buttons, statusbar buttons and menu items, all with equivalent behavior, and without having to repeat lots of xul code in the process.

Handling Preferences - Archive of obsolete content
preference windows don't have any buttons, or just an ok or close button.
...firefox will know if it needs to add ok and cancel buttons or not.
...the tabs at the top of the window will need icons, and just like with toolbar buttons there are subtle differences between operating systems.

New Skin Notes - Archive of obsolete content
--nickolay 04:43, 25 aug 2005 (pdt) the radio buttons on history page are jumping in a weird way because the selected row becomes bold.
...--dria the buttons in the upper-right of the horizontal nav-bar don't really feel like buttons; maybe add a pseudo-class for onhover that gives them an underline?
...--waldo 21:09, 25 aug 2005 (pdt) not going to change (yet or possibly ever) adding pipes between buttons in horizontal nav-bar (ie: my talk | preferences | my watchlist) (stricken part is done).

Proxy UI - Archive of obsolete content
for example, firefox 3: [ ] no proxy [ ] auto-detect proxy settings for this network [ ] manual proxy configuration: [ ] automatic proxy configuration url: behavior default value: "no proxy" is selected all other "type" radio buttons are enabled, but not selected.
... the radio buttons do not map to the proxy type in order (due the evolution of the ui): proxy mode "network.proxy.type" no proxy (direct) network.proxy.type=0 auto-detect proxy settings...
...the socks version is selected by radio buttons: ( ) socks v4 ( ) socks v5 "no proxy for:" discussed in detail elsewhere...

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.
...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.

Deprecated and defunct markup - Archive of obsolete content
--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...
...--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> (att...
...empt to combine text and 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 fo...

textbox (Toolkit autocomplete) - Archive of obsolete content
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.
... there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value.

Textbox (XPFE autocomplete) - Archive of obsolete content
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.
... there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value.

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.

Adding Event Handlers - Archive of obsolete content
the target is useful when using a bubbling event so that you could have a set of buttons which are all handled by a single script.
...one important difference is that while the 'click' event (or the onclick attribute) is used in html to respond to buttons, in xul the command event should be used instead.
... our find files example a command handler can be placed on the find and cancel buttons in the find files dialog.

Anonymous Content - Archive of obsolete content
<children includes="button"/> this line will add all buttons that are children of the bound element in place of the children tag.
...this would be created with a box to hold the image and two buttons.
...for example, the following xbl will cause text labels and buttons to appear in a different location than other elements: source <binding id="navbox"> <content> <xul:vbox> <xul:label value="labels and buttons"/> <children includes="label|button"/> </xul:vbox> <xul:vbox> <xul:label value="other elements"/> <children/> </xul:vbox> </content> </binding> the first children element only grabs the label and button elements,...

Grids - Archive of obsolete content
just like html tables, you put content such as labels and buttons inside the rows.
...each row contains two elements, both buttons.
...similarly, events such as mouse buttons and keypresses are sent only to the set on top.

More Button Features - Archive of obsolete content
« previousnext » in this section, we will look at some additional features of buttons.
...example 3 : source view <button label="left" image="happy.png"/> <button label="right" image="happy.png" dir="reverse"/> <button label="above" image="happy.png" orient="vertical"/> <button label="below" image="happy.png" orient="vertical" dir="reverse"/> the example here shows all four types of alignment of buttons.
...buttons with extra content buttons may have arbitrary markup contained inside them, and it will be rendered inside the button.

Popup Menus - Archive of obsolete content
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.
... example 2 : source view <button label="save" tooltiptext="click here to save your stuff"/> <popupset> <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <description value="click here to see more information"/> <description value="really!" style="color: red;"/> </tooltip> </popupset> <button label="more" tooltip="moretip"/> these two buttons each have a tooltip.
...this is the value used for the drop-down menus associated with the browser's back and forward buttons.

Skinning XUL Files by Hand - Archive of obsolete content
also, most of the behavior that buttons exhibit comes from styles and an event model based on javascript that dynamically switches between these styles.
...but you may also want to define new classes of buttons particular to your xul file, in which case the style information will be wholly defined within your custom css file.
...if you create a style in your custom stylesheet for a button with a particular id, for example, some of the more basic style information for buttons in the global skin may take precedence over your new style and cause it not to be applied.

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.
...here, all three children are buttons, but the elements do not have to be same type.
...that means that if two buttons overlap, the top button will capture a mouse click where it covers the other one.

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.

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.

toolbar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container which typically contains a row of buttons.
...this causes the set of buttons to be persisted across sessions.
... mode not in seamonkey 1.x type: one of the values below how the toolbarbuttons on the toolbar are displayed.

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.
... 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.
...thus, it includes this rule in browser.css: #nav-bar { counter-reset: smallicons; } to use large icons for add-on buttons in the bookmarks toolbar when the related user preference is set: #navigator-toolbox[iconsize="large"] > #personaltoolbar { counter-reset: largeicons; } to use large icons everywhere, including the menu bar, regardless of the user preference: #navigator-toolbox > toolbar, #addon-bar { counter-reset: largeicons; } creating a theme that works for firefox 4 on mac os x create a new direct...

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 t...
...he 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!

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.
... 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.

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.
...that sounds silly, but it's amazingly useful for building custom buttons — you can define their chosen functionality with javascript.
...rm text field size */ width: 300px; box-sizing: border-box; /* match form field borders */ border: 1px solid #999; } input:focus, textarea:focus { /* additional highlight for focused elements */ border-color: #000; } textarea { /* align multiline text fields with their labels */ vertical-align: top; /* provide space to type some text */ height: 5em; } .button { /* align buttons with the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra margin represent roughly the same space as the space between the labels and their text fields */ margin-left: .5em; } save and reload, and you'll see that your form should look much less ugly.

Advanced text formatting - Learn web development
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.geteleme...
...as confucius' quotes site says:</p> <p>it does not matter how slowly you go as long as you do not stop.</p> <p>i also love the concept of positive thinking, and the need to eliminate negative self talk (as mentioned in affirmations for positive thinking.)</p> </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.geteleme...
... 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: 50px; width: 95%"> <p>nasa sure does some exciting work.</p> </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.geteleme...

Useful string methods - Learn web development
'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.getelem...
... 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.getelem...
...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.getele...

Accessibility in React - Learn web development
press tab a few more times, and you will see this dashed focus indicator move between each of the filter buttons.
... again try using the "edit" and "cancel" buttons to toggle between the templates of your <todo /> component; you'll see the browser focus indicator move appropriately, without the problem we discussed at the start of this section.
...in most cases, you should be utilizing elements that can naturally take focus, such as buttons, anchors, and inputs.

Beginning our React todo list - Learn web development
we have an array of buttons that will be used to filter our tasks.
...each task is a list item (<li>), and has buttons to edit and delete it and a checkbox to check it off as done.
... the form will allow us to make tasks; the buttons will let us filter them; the heading and list are our way to read them.

Starting our Svelte Todo list app - Learn web development
three buttons to filter by task status.
... if the task is not being edited, there's a checkbox to set the completed status, and two buttons to edit or delete the task.
... finally there are two buttons to check/uncheck all task and to remove completed tasks.

Introduction to automated testing - Learn web development
in the next screen, type in the url of a page you want to test (use http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html, for example), then choose a browser/os combination you want to test by using the different buttons and lists.
... from here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc.
... from here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc.

Accessibility information for UI designers and developers
this includes form elements like inputs and select boxes, but also buttons.
... links vs buttons to keep your interface in line with user expectations, use links for interactions that go somewhere (on the current page or another page) and buttons for interactions that do something (like submit a form or open an overlay).
... links can be styled as buttons and vice versa, but designers are advised to avoid this where possible.

nsIHTMLEditor
erbird 5.0 / seamonkey 2.2) method overview void adddefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void addinsertionlistener(in nsicontentfilter infilter); void align(in astring aalign); boolean breakisvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring atagname); void decreasefontsize(); void dodrag(in nsidomevent aevent); void getalignment(out boolean amixed, out short aalign); as...
... boolean candrag( in nsidomevent aevent ); parameters aevent return value checkselectionstateforanonymousbuttons() checks if the anonymous nodes created by the html editor have to be refreshed or hidden depending on a possible new state of the selection.
... void checkselectionstateforanonymousbuttons( in nsiselection aselection ); parameters aselection a selection.

nsITaskbarPreviewButton
these buttons are displayed below the window preview.
...instead, you use the nsitaskbarwindowpreview.getbutton() to get the objects representing the buttons.
...if false, the button doesn't participate in the layout of buttons underneath the preview.

nsPIPromptService
enumberbuttons the value is 2.
... this is the number of the visible buttons on the dialog.
...if this is not 0, the all buttons are disabled when the dialog is shown.

AudioParam.setValueAtTime() - Web APIs
examples this simple example features a media element source with two control buttons (see our webaudio-examples repo for the source code, or view the example live).
... when the buttons are pressed, the currgain variable is incremented/decremented by 0.25, then the setvalueattime() method is used to set the gain value equal to currgain, one second from now (audioctx.currenttime + 1.) // create audio context var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var targetattimeplus = document.queryselector('.set-target-at-time-plus'); var targetattimeminus = document.queryselector('.set-target-at-time-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audio...
...ctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons to do something onclick targetattimeplus.onclick = function() { currgain += 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } targetattimeminus.onclick = function() { currgain -= 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } specifications specification status comment web audio apithe definition of 'setvalueattime' in that specification.

Introduction to the DOM - Web APIs
in some cases, the samples are complete html pages, with the dom access in a <script> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the html elements upon which the dom operates listed as well.
...you can update the contents of the test() function as needed, create more buttons, or add elements as necessary.
... <a href="http://some.website.tld/page.html" id="sample"> (sample link) </a> </small><br /> <input type="button" value="version" onclick="ver()" /> </form> </div> </body> </html> to test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other html elements.

ParentNode.replaceChildren() - Web APIs
/option> <option>ham sandwiches</option> <option>cheese sandwiches</option> <option>falafel sandwiches</option> <option>ice cream</option> <option>jelly</option> <option>carrot sticks and houmous</option> <option>margherita pizza</option> <option>pepperoni pizza</option> <option>vegan veggie pizza</option> </select> </div> <div class="buttons"> <button id="to-yes">transfer to "yes" --&gt;</button> <button id="to-no">&lt;-- transfer to "no"</button> </div> <div> <label for="yes">yes please!</label> <select id="yes" multiple size="10"> </select> </div> </main> it would make sense to use some simple css to lay out the two select lists in a line alongside one another, with the control buttons in between them:...
... main { display: flex; } div { margin-right: 20px; } label, button { display: block; } .buttons { display: flex; flex-flow: column; justify-content: center; } select { width: 200px; } what we want to do is transfer any selected options in the "no" list over to the "yes" list when the "yes" button is pressed, and transfer any selected options in the "yes" list over to the "no" list when the "no" button is pressed.
... to do this, we give each of the buttons a click event handler, which collects together the selected options you want to transfer in one constant, and the existing options in the list you are transferring to in another constant.

RadioNodeList.value - Web APIs
if the underlying element collection contains radio buttons, the radionodelist.value property represents the checked radio button.
...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.
... syntax value = radionodelist.value; radionodelist.value = string; example html <form> <label><input type="radio" name="color" value="blue">blue</label> <label><input type="radio" name="color" value="red">red</label> </form> javascript // get the form const form = document.forms[0]; // get the form's radio buttons const radios = form.elements['color']; // choose the "red" option radios.value = 'red'; result specifications specification status comments html living standardthe definition of 'radionodelist.value' in that specification.

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.

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.
...we grab references to all the page elements we'll need to access, then set event listeners on the three buttons.
...the user interface is updated correspondingly by enabling the text input box for the message to send, focusing the input box so that the user can immediately begin to type, enabling the "send" and "disconnect" buttons, now that they're usable, and disabling the "connect" button, since it is not needed when the conneciton is open.

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>).
...if there are multiple buttons, make sure they are all clearly labelled to distinguish their function.

Box-shadow generator - CSS: Cascading Style Sheets
i < size; i++) setinputcomponent(elem[i]); elem = document.queryselectorall('.ui-slider'); size = elem.length; for (var i = 0; i < size; i++) new slider(elem[i]); } return { init : init, 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.createelement("input"); var label = document.createelement("label"); var id = 'checkbox-' + topic;...
...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; notify.call(buttons[topic]); } catch(error) { console.log(error, topic, value); } } var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscr...
...buttonmanager.subscribe("after", function(value) { if (value === false && active.stack === stacks['after']) setactivestack(stacks['element']) if (value === true && active.stack !== stacks['after']) setactivestack(stacks['after']) }); } return { init : init } })(); /* * outputmanager */ var outputmanager = (function outputmanager() { var classes = []; var buttons = []; var active = null; var menu = null; var button_offset = 0; var crateoutputnode = function(topic, property) { var prop = document.createelement('div'); var name = document.createelement('span'); var value = document.createelement('span'); var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i); name.textcontent = '\t' + pmatch[4]; if...

<color> - CSS: Cascading Style Sheets
activetext text of active links buttonface background of push buttons buttontext text of push buttons canvas background of application content or documents canvastext text in application content or documents field background of input fields fieldtext text in input fields graytext text that is disabled highlight background of items that are selected in a control highlighttext text of items that are selected in a contro...
... 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.
... mozilla system color extensions -moz-buttondefault the border color that goes around buttons that represent the default action for a dialog box.

<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.
... overriding default form behaviors <input type="image"> elements — like regular submit buttons — can accept a number of attributes that override the default form behavior: formaction html5 the uri of a program that processes the information submitted by the input element; overrides the action attribute of the element's form owner.

<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.

Closures - JavaScript
for instance, suppose we want to add buttons to a page to adjust the text size.
... one way of doing this is to specify the font-size of the body element (in pixels), and then set the size of the other elements on the page (such as headers) using the relative em unit: body { font-family: helvetica, arial, sans-serif; font-size: 12px; } h1 { font-size: 1.5em; } h2 { font-size: 1.2em; } such interactive text size buttons can change the font-size property of the body element, and the adjustments are picked up by other elements on the page thanks to the relative units.
...you can attach them to buttons (in this case hyperlinks) as demonstrated in the following code example.

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-...
...see the section on attaching panels to buttons.

Adding a Button to the Toolbar - Archive of obsolete content
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.
...you can add buttons to the toolbar and also frames, that can host html, css, and javascript.

Alerts and Notifications - Archive of obsolete content
however it is possible to use only buttons and a label there.
... var message = 'another pop-up blocked'; var box = gbrowser.getnotificationbox(); var notification = box.getnotificationwithvalue('popup-blocked'); if (notification) { notification.label = message; } else { var buttons = [{ label: 'button', accesskey: 'b', popup: 'blockedpopupoptions', callback: null }]; let priority = box.priority_warning_medium; box.appendnotification(message, 'popup-blocked', 'chrome://browser/skin/info.png', priority, buttons); } ...

Inline options - Archive of obsolete content
se 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.
... <setting pref="extensions.throbberrestored.showtxtontoolbar" title="show text on toolbar button" type="bool" oninputchanged="alert('new value is = ' + this.value); this.style.backgroundcolor='red';"> if labels on other toolbar buttons are visible (like by using add-on "classic theme restorer") then show label on throbber toolbar button </setting> note in order for the oninputchanged to execute, the setting must have a pref attribute, otherwise the oninputchanged will not trigger.

XUL user interfaces - Archive of obsolete content
<label class="day" value="tuesday" disabled="true"/> <label class="day" value="wednesday" disabled="true"/> <label class="day" value="thursday" disabled="true"/> <label class="day" value="friday" disabled="true"/> <label class="day" value="saturday" disabled="true"/> </hbox> </row> </rows> </grid> <hbox class="buttons"> <button id="clear" label="clear" accesskey="c" oncommand="cleardate();"/> <button id="today" label="today" accesskey="t" oncommand="settoday();"/> </hbox> </groupbox> <statusbar> <statusbarpanel id="status"/> </statusbar> </vbox> </window> make a new css file, style7.css.
... ***/ window { -moz-box-align: start; background-color: -moz-dialog; font: -moz-dialog; padding: 2em; } .head-1 { font-weight: bold; font-size: 200%; padding-left: 5px; } /* the group box */ .demo-group { padding: 1em; } .demo-group grid { margin-bottom: 1em; } .demo-group column { margin-right: .5em; } .demo-group row { margin-bottom: .5em; } .demo-group .buttons { -moz-box-pack: end; } /* the day-of-week labels */ .day { margin-left: 1em; } .day[disabled] { color: #777; } .day:first-child { margin-left: 4px; } /* the left column labels */ .text-prompt { padding-top: .25em; } /* the date input box */ #date-text { max-width: 8em; } /* the status bar */ statusbar { width: 100%; border: 1px inset -moz-dialog; margin: 4...

Images, Tables, and Mysterious Gaps - Archive of obsolete content
unfortunately, the buttons in the top cell are all now block-level and so end up stacked on top of one another instead of being shown side-by-side.
... of course, while we have a single-pixel spacer cell in figure 9, there is still unwanted space underneath the navigation buttons across the top.

Finding the file to modify - Archive of obsolete content
the structure layer identifies the widgets (menus, buttons, etc.) and their position in the ui relative to each other, the style layer defines how the widgets look (size, color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the widgets behave and how users can use them to accomplish their goals.
...it contains elements for all common ui widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers).

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.

Creating XPI Installer Modules - Archive of obsolete content
the barley package the barley package is a simple xul window with a couple of buttons and an image element.
... one of the buttons, labeled "show aphids", displays an alert dialog by calling a function defined in the javascript file barley.js.

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.
...the type attribute must be set to checkbox for buttons with a check state.

group - Archive of obsolete content
« xul reference home group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group.
...if the user selects one the buttons, the others in the group are unchecked.

icon - Archive of obsolete content
« xul reference home icon mozilla 1.8 type: string this attribute should be used to set the usage for common buttons.
... some platforms display these buttons with a small icon indicating their usage.

textbox.type - Archive of obsolete content
in addition, arrow buttons appear next to the textbox to let the user step through values.
... there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value.

Attribute (XUL) - Archive of obsolete content
esearchparam 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 color cols command commandupdater completedefaultindex container containment contentcontextmenu contenttooltip context contextmenu control crop curpos current currentset customindex customizable cycler datasources decimalplaces default defaultbutton defaultset de...
...lesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth m...

Tooltips - Archive of obsolete content
<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.
... note that the tooltip text 'file buttons' isn't a good tooltip to use either.

Property - Archive of obsolete content
« xul reference accessible accessibletype accesskey align allnotifications allowevents alwaysopenpopup amindicator applocale autocheck autofill autofillaftermatch boxobject browsers builder builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoo...
... scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view webbrowserefind webnavigation webprogress width wiz...

Complete - Archive of obsolete content
it provides all five custom toolbar buttons on all the toolbars, and it provides corresponding menu choices in seamonkey's chatzilla window.
...in this extension, the only things that depend on the theme are the icon images on the buttons and the css style rules.

Adding more elements - Archive of obsolete content
in might be more appropriate if the find and cancel buttons always stayed along the bottom of the window.
...ed"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> <spacer style="height: 10px" flex="1"/> <hbox> now when the dialog is resized, the two buttons will move so that they are always along the bottom of the dialog.

Box Objects - Archive of obsolete content
it will appear at the end of the row since the other buttons have an ordinal of 1.
...finally, pressing the button labeled three will increase its ordinal to 2 and it will appear in between the other two buttons.

Content Panels - Archive of obsolete content
second, the elements such the back and next buttons are the same throughout the interface.
...for example, the browser maintains a page history for use with back and forward buttons.

Creating a Window - Archive of obsolete content
<!-- other elements go here --> replace this comment block with other elements (the buttons, menus and other user interface components) to appear in the window.
...make sure that you have included the stylesheet correctly: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> in the next section, we will add some buttons to the window.

Groupboxes - Archive of obsolete content
you can put any element you want inside it, and apart from its special handling of radio buttons, it works like any other box.
... any radio buttons placed inside the radio group will be grouped together, even if they are inside nested boxes.

Keyboard Shortcuts - Archive of obsolete content
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.
...typically, this will include textboxes, buttons, checkboxes and so forth.

Numeric Controls - Archive of obsolete content
in addition, arrow buttons appear beside the textbox to allow the user to cycle through the values.
...the increment attribute only affects the arrow buttons.

Splitters - Archive of obsolete content
we'll add an area in-between the search criteria and the buttons along the bottom.
...as the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up.

XUL Questions and Answers - Archive of obsolete content
using the "icon" attribute on a button from xulplanet.com reference: this attribute should be used to set the usage for common buttons.
... some platforms display these buttons with a small icon indicating their usage.

XUL Reference - Archive of obsolete content
ad 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 toolbarsp...
...eeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where script commandset command broadcaster broadcasterset observes key keyset stringbundle stringbundleset arrowscrollbox dropmarker grippy scrollbar scrollcorner spinbuttons all attributes all properties all methods attributes defined for all xul elements style classes event handlers deprecated/defunct markup ...

The Implementation of the Application Object Model - Archive of obsolete content
the personal toolbar must show up in a tree widget (in which case it has to be faking a tree content model, complete with <tt><treeitem></tt> and <tt><treecell></tt> nodes), or it must be able to show up on a toolbar (complete with <tt><button></tt> nodes and popup trees attached to folder buttons).
...it's likely that this might be the desirable solution for buttons that observe preferences (like the home button) denoting persistence of local annotations to the aom: the persistent attribute a content tree in xul that wishes to allow persistent local annotations to be made to all the nodes in the subtree (including the node itself) must specify this capability using the persistent attribute.

radiogroup - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a group of radio buttons.
...the radio buttons may either direct children of the radiogroup or descendants.

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.

2006-11-10 - Archive of obsolete content
summary: mozilla.dev.builds - november 4th to november 10th 2006 browser buttons november 4th: mojr wants to know if firefox has a similar feature that the new ie 6 has built in.
... this feature consists of creating buttons using a small program, that allows you to create shortcuts to a particular address.

Extentsions FAQ - Archive of obsolete content
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.

Theme changes in Firefox 3.5 - Archive of obsolete content
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.

Audio for Web games - Game development
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 data-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.
... let's add some javascript to make this work: var myaudio = document.getelementbyid('myaudio'); var buttons = document.getelementsbytagname('button'); var stoptime = 0; for (var i = 0; i < buttons.length; i++) { buttons[i].addeventlistener('click', function() { myaudio.currenttime = this.getattribute("data-start"); stoptime = this.getattribute("data-stop"); myaudio.play(); }, false); } myaudio.addeventlistener('timeupdate', function() { if (this.currenttime > stoptime) { this.pause(); } }, false); note: you can try out our audio sprite player live on jsfiddle.

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.

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.
... summary 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.

Test your skills: Basic controls - Learn web development
basic controls 2 the next task requires you to create working sets of checkboxes and radio buttons, from the provided text labels.
... turn the first <fieldset>'s contents into a set of radio buttons — you should only be able to select one pony character at once.

Getting started with HTML - Learn web development
playable code2 <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%"> &lt;p&gt;a link to my favorite website.&lt;/p&gt; </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.getelementby...
... playable code3 <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%"> &lt;p&gt;this is my page&lt;/p&gt; </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; } h1 { color: blue; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } img { max-width: 100%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelem...

Images in HTML - Learn web development
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.getelementby...
... 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.getelementby...

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.
... 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.

Introduction to events - Learn web development
one button is ok, but what if you had 100 buttons?
...with javascript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this: const buttons = document.queryselectorall('button'); for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = bgchange; } note that another option here would be to use the foreach() built-in method available on nodelist objects: buttons.foreach(function(button) { button.onclick = bgchange; }); note: separating your programming logic from your content also makes your site more friendly to search engines.

Looping code - Learn web development
p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 300px;width: 95%"> let output = document.queryselector('.output'); output.innerhtml = ''; // let i = 10; // const para = document.createelement('p'); // para.textcontent = ; // output.appendchild(para); </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.get...
...height: 400px;width: 95%"> const people = ['chris', 'anne', 'colin', 'terri', 'phil', 'lola', 'sam', 'kay', 'bruce']; const admitted = document.queryselector('.admitted'); const refused = document.queryselector('.refused'); admitted.textcontent = 'admit: '; refused.textcontent = 'refuse: ' // let i = 0; // refused.textcontent += ; // admitted.textcontent += ; </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...

Test your skills: Events - Learn web development
</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
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; } ...
...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.getelem...

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.addeventli...
...element('li'); listitem.textcontent = itemtext; list.appendchild(listitem); } // if the array length is 5 or more, remove the oldest search term if (myhistory.length >= 5) { // number 2 } // empty the search input and focus it, ready for the next term to be entered searchinput.value = ''; searchinput.focus(); } } </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.geteleme...

Componentizing our React app - Learn web development
we’re missing our html structure — the <li> and its checkboxes and buttons!
...we’re going to fix up this component later on, in back to the filter buttons.

Accessibility API cross-reference
aria requires the parent to have role radiogroup radiobutton radio_button radio_button radio <input type=radio> a container for a a group of radio buttons radiogroup expressed by giving each radio button the same value name attribute represents the an row in a table row n/a n/a row <tr> a structure containing one or more row elements in a tabular container.
... busy busy busy aria-busy indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

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.
... sets state_haspopup for autocomplete textfields role_pushbutton xul: <button> html: <input type= "button"> or<button> dhtml: role="wairole:button" sets state_haspopup for buttons containing menus role_checkbutton xul: <checkbox> html: <input type="checkbox"> dhtml: role="wairole:checkbox" fires event_state_change when checkbox is toggled role_radiobutton xul: <radio> html: <input type="radio"> dhtml: role="wairole:radio" ...

Chrome registration
the providers work together to supply a complete set of chrome for a particular window, from the images on the toolbar buttons to the files that describe the text, content, and appearance of the window itself.
...for example, the order of the "ok" and "cancel" buttons in a dialog is different, as well as the names of some items.

Eclipse CDT
note that there are buttons to the right of the "open call hierarchy" tab that open to switch between "show callers" and "show callees".
...note that you can switch between "show the type hierarchy", "show the supertype hierarchy", and "show the subtype hierarchy" using the buttons to the right of the "type hierarchy" tab.

Midas editor module security preferences
this means that the corresponding buttons on the mozilla rich text editing demo page will not work.
...the clipboard buttons in the demo, or similar buttons on the sites you listed, should now function.

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.
...it is used for xul:spinbuttons.

nsITaskbarPreviewController
onclick() invoked when one of the buttons on the window preview's toolbar is clicked by the user.
...this can be compared to the buttons returned by the nsitaskbarwindowpreview.getbutton().

Main Windows
menus, toolbar buttons, and headers are all taken from exactly the same overlays listed above though.
...for instance, the “add new toolbar” buttons from toolkit aren’t in the thunderbird version.

Step through code - Firefox Developer Tools
when the debugger is stopped at a breakpoint, you can step through it using four buttons in the toolbar: in order, the buttons are: play: run to the next breakpoint step over: advance to the next line in the same function.
...the thinking here is that if you've got your devtools open in a separate window, as many people do, it can be easier to have the buttons available right there to move the code forward while you are looking at the result.

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.

UI Tour - Firefox Developer Tools
the performance tool's ui consists of 4 main pieces: toolbar recordings pane recording overview details pane, which may contain any one of: waterfall call tree flame chart toolbar the toolbar contains buttons to: start and stop a recording import a recording you previously saved clear the recordings pane.
...to switch to a different tool, use the buttons in the toolbar.

about:debugging - Firefox Developer Tools
you can also reload the page by clicking the reload button next to the url bar, and (starting 79), navigate backward or forward in the browsing history with the back and forward buttons.
... you can use the following buttons: inspect loads the extension in the debugger.

AudioBufferSourceNode.loop - Web APIs
buttons are provided to play and stop the audio playback, and a slider control is used to change the playbackrate property value on the fly.
... var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range slider control play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } specification specification status comment web audio apithe definition of 'loop' in that specification.

AudioBufferSourceNode.playbackRate - Web APIs
buttons are provided to play and stop the audio playback, and a slider control is used to change the playbackrate property value on the fly.
... var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range slider control play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); playbackcontrol.setattribute('disabled', 'disabled'); } playbackcontrol.oninput = function() { source.playb...

AudioParam.exponentialRampToValueAtTime() - Web APIs
examples in this example, we have a media source with two control buttons (see the audio-param repo for the source code, or view the example live.) when these buttons are pressed, exponentialramptovalueattime() is used to fade the gain value up to 1.0, and down to 0, respectively.
... the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set its gain value to 0.5 var gainnode = audioctx.creategain(); // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination gainnode.gain.setvalueattime(0, audioctx.currenttime); source.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons to do something onclick exprampplus.onclick = function() { gainnode.gain.exponentialramptovalueattime(1.0, audioctx.currenttime + 2); } exprampminus.onclick = function() { gainnode.gain.exponentialramptovalueattime(0.01, audioctx.currenttime + 2); } note: a value of 0.01 was used for the value to ramp down to in the last function rather than 0, as an invalid or illegal string error is thr...

AudioParam.linearRampToValueAtTime() - Web APIs
example in this example, we have a media source with two control buttons (see the audio-param repo for the source code, or view the example live.) when these buttons are pressed, linearramptovalueattime() is used to fade the gain value up to 1.0, and down to 0, respectively.
...the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination gainnode.gain.setvalueattime(0, audioctx.currenttime); source.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons to do something onclick linearrampplus.onclick = function() { gainnode.gain.linearramptovalueattime(1.0, audioctx.currenttime + 2); } linearrampminus.onclick = function() { gainnode.gain.linearramptovalueattime(0, audioctx.currenttime + 2); } specifications specification status comment web audio apithe definition of 'linearramptovalueattime' in that specificatio...

AudioParam.setTargetAtTime() - Web APIs
time since starttime value 0 * timeconstant 0% 0.5 * timeconstant 39.3% 1 * timeconstant 63.2% 2 * timeconstant 86.5% 3 * timeconstant 95.0% 4 * timeconstant 98.2% 5 * timeconstant 99.3% n * timeconstant 1-e-n1 - e^{-n} examples in this example, we have a media source with two control buttons (see the webaudio-examples repo for the source code, or view the example live.) when these buttons are pressed, settargetattime() is used to fade the gain value up to 1.0, and down to 0, respectively, with the effect starting after 1 second, and the length of time the effect lasts being controlled by the timeconstant.
...mediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons to do something onclick attimeplus.onclick = function() { currgain = 1.0; gainnode.gain.settargetattime(1.0, audioctx.currenttime + 1, 0.5); } attimeminus.onclick = function() { currgain = 0; gainnode.gain.settargetattime(0, audioctx.currenttime + 1, 0.5); } specifications specification status comment web audio apithe definition of 'settargetattime' in that s...

BaseAudioContext.decodeAudioData() - Web APIs
the buttons in the example simply run getdata() to load the track and start it playing, and stop it playing, respectively.
...uest.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { source.buffer = buffer; source.connect(audioctx.destination); source.loop = true; }, function(e){ console.log("error with decoding audio data" + e.err); }); } request.send(); } // wire up buttons to stop and play audio play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; new promise-based syntax ctx.decodeaudiodata(audiodata).then(function(decodeddata) { // use the decoded data he...

DocumentOrShadowRoot.elementFromPoint() - Web APIs
example this example creates two buttons which let you set the current color of the paragraph element located under the coordinates (2, 2).
... html <p id="para1">some text here</p> <button onclick="changecolor('blue');">blue</button> <button onclick="changecolor('red');">red</button> the html provides the paragraph whose color will be affected, as well as two buttons: one to change the color to blue, and another to change the color to red.

Gamepad - Web APIs
gamepad.buttons read only an array of gamepadbutton objects representing the buttons present on the device.
...%d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); specifications specification status comment gamepadthe definition of 'gamepad' in that specification.

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.
... 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.

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

MouseEvent - Web APIs
mouseevent.buttons read only the buttons being depressed (if any) when the mouse event was fired.
... obsolete from document object model (dom) level 2 events specification, added the mouseevent() constructor, the getmodifierstate() method and the buttons property.

NotificationAction - Web APIs
the notificationaction interface of the notifications api is used to represent action buttons the user can click to interact with notifications.
... these buttons' appearance and specific functionality vary across platforms but generally they provide a way to asynchronously show actions to the user in a notification.

Pointer Lock API - Web APIs
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.

RadioNodeList - Web APIs
radionodelist.value if the underlying element collection contains radio buttons, the value property represents the checked radio button.
...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.

Range.selectNodeContents() - Web APIs
example range = document.createrange(); referencenode = document.getelementsbytagname("div")[0]; range.selectnodecontents(referencenode); live sample this example lets the user select and deselect a paragraph with buttons.
... html <p id="p"><b>use the buttons below</b> to select or deselect the contents of this paragraph.</p> <button id="select-button">select paragraph</button> <button id="deselect-button">deselect paragraph</button> javascript const p = document.getelementbyid('p'); const selectbutton = document.getelementbyid('select-button'); const deselectbutton = document.getelementbyid('deselect-button'); selectbutton.addeventlistener('click', e => { // clear any current selection const selection = window.getselection(); selection.removeallranges(); // select paragraph const range = document.createrange(); r...

WebGLRenderingContext.makeXRCompatible() - Web APIs
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.
... if (event.target.classlist.contains("use-webxr") && navigator.xr) { try { xrsession = await navigator.xr.requestsession("immersive-vr"); usingxr = true; } catch(err) { xrsession = null; usingxr = false; } } startgame(); } function startgame() { currentscene = "scene1"; loadsceneresources(currentscene); /* and so on */ } this works by having two buttons, one which starts the game normally and the other which starts the game in vr mode.

WebXR Device API - Web APIs
this can happen, for example, when the position and/or orientation of the device changes, or when buttons are pressed or released.
... supporting advanced controllers and gamepads in webxr applications webxr uses the gamepad object to describe the controls available on complex input devices (such as hand controllers with multiple buttons and/or axes) and gamepad-like devices.

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.

XMLHttpRequest: abort event - Web APIs
pe="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstar...
...er('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications s...

XMLHttpRequest: error event - Web APIs
pe="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstar...
...er('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications s...

XMLHttpRequest: load event - Web APIs
pe="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstar...
...er('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications s...

XMLHttpRequest: loadend event - Web APIs
pe="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstar...
...er('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications s...

XMLHttpRequest: loadstart event - Web APIs
pe="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstar...
...er('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications s...

XMLHttpRequest: progress event - Web APIs
pe="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstar...
...er('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications s...

Mobile accessibility checklist - Accessibility
focus all activatable elements must be focusable: standard controls such as links, buttons, and form fields are focusable by default.
... handling state standard controls such as radio buttons and checkboxes are handled by the operating system.

Operable - Accessibility
links, buttons, form inputs) makes logical sense, meaning that the page is still usable by non-sighted/keyboard users.
... most of these mechanisms can be created using simple html features, for example see search field, creating a navigation menu, styling links as buttons.

Text labels and names - Accessibility
interactive elements include links (<a>), form elements, buttons, and any element that has a handler for mouse or keyboard events.
... the way to label an element depends on its type: for form elements, use a <label>; for links, buttons and clickable elements, the text content of the element typically provides the label.

:empty - CSS: Cascading Style Sheets
all interactive content must have an accessible name, which is created by providing a text value for the interactive control's parent element (anchors, buttons, etc.).
...this is commonly used for buttons that rely solely on an icon to convey purpose.

:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.
... /* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements targeted by this selector are: <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields.

:invalid - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.1 | w3c understanding wcag 2.0 notes radio buttons if any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected.
... (grouped radio buttons share the same value for their name attribute.) gecko defaults by default, gecko does not apply a style to the :invalid pseudo-class.

Border-image generator - CSS: Cascading Style Sheets
e; elem = document.queryselectorall('.ui-dropdown'); size = elem.length; for (var i = 0; i < size; i++) new dropdown(elem[i]); }; return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe, createdropdown : createdropdown }; })(); /** * 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.createelement("input"); var label = document.createelement("label"); var id = 'checkbox-' + topic;...
...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) { var obj = buttons[topic]; if (obj === undefined) return; obj.checkbox.checked = value; notify.call(obj); }; var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subs...

Border-radius generator - CSS: Cascading Style Sheets
ider'); 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.createelement("input"); var label = document.createelement("label"); var id = 'checkbox-' + topic;...
...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(...

Linear-gradient Generator - CSS: Cascading Style Sheets
his.axis.line.removechild(this.node); }; gradientpoint.prototype.activate = function activate() { if (this.axis.state === false) return; this.axis.setactivepoint(this); this.node.setattribute('data-active', 'true'); uicolorpicker.setcolor('picker', this.color); inputslidermanager.setvalue('point-position', this.cssposition); if (this.axis.num_points > 2) axesmanager.setdeletebuttonstate('active'); }; gradientpoint.prototype.deactivate = function deactivate() { this.node.removeattribute('data-active'); }; gradientpoint.prototype.startmove = function startmove(e) { this.axis.updatecenterpointpos(); this.node.setattribute('data-active', 'true'); document.body.setattribute('data-dragging', 'true'); }; gradientpoint.prototype.endmove = function endmove(e) { thi...
...[index].children[1].textcontent="code;" output.children[index].style.height="output.children[index].children[1].scrollheight" output;="" point="" pre="" prefix)="" resizecontainer="function" resizecontainer()="" resizecontainer);="" resizecontainer,="" resizeend="function" resizeend()="" resizeend);="" return="" return;="" setaddaxisbutton();="" setaxisunit);="" setdeleteaxisbutton();="" setdeletebuttonstate="function" setdeletebuttonstate('disabled');="" setdeletebuttonstate(state)="" setdeletepointbutton="function" setdeletepointbutton()="" setdeletepointbutton();="" settogglealphabackground="function" settogglealphabackground()="" settogglealphabackground();="" slidermanager.init();="" slidermanager.subscribe('axis-rotation',="" state="true;" state);="" this.setattribute('data-alpha',="" this.

font - CSS: Cascading Style Sheets
system font values caption the system font used for captioned controls (e.g., buttons, drop-downs, etc.).
...*/ p { font: bold italic large serif } /* use the same font as the status bar of the window */ p { font: status-bar } live sample html <p> change the radio buttons below to see the generated shorthand and it's effect.

Cross-browser audio basics - Developer guides
e'll set up the audio in the html, without the controls attribute, since we are creating our own controls: <audio id="my-audio"> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- place fallback here as <audio> supporting browsers will ignore it --> <p>download<a href="audiofile.mp3">audiofile.mp3</a></p> </audio> <!-- custom play and pause buttons --> <button id="play">play</button> <button id="pause">pause</button> next, we attach some functionality to the player using javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); // associate functions with the 'onclick' events play.onclick = playaudio; pa...
...use.onclick = pauseaudio; function playaudio() { myaudio.play(); } function pauseaudio() { myaudio.pause(); } } media loading events above we have shown how you can create a very simple audio player, but what if we want to show progress, buffering and only activate the buttons when the media is ready to play?

Audio and video manipulation - Developer guides
4a.m4v"> </video> javascript var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="480" height="270"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2;</textarea> var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea...
...er filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25; playable code <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</textarea> var context = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), filter = context.c...

Constraint validation - Developer guides
<input> <output> <select> submit buttons (created with either a <button> element with the submit type, or an input element with the submit type.
... other types of buttons do not participate in constraint validation.

HTML attribute: readonly - HTML: Hypertext Markup Language
note: only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.
.../div> <div class="group"> <input type="email" value="some value" readonly="readonly"/> <label>email</label> </div> <div class="group"> <input type="password" value="some value" readonly="readonly"/> <label>password</label> </div> <div class="group"> <textarea readonly="readonly">some value</textarea> <label>message</label> </div> result examples <fieldset> <legend>checkboxes buttons</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="readonly" readonly> readonly </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>radio buttons</legend> <p><label> <input type="rad...

<input type="checkbox"> - HTML: Hypertext Markup Language
note: radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off.
... where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.

<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
nesting a <samp> element inside a <kbd> element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.
... <p>if a syntax error occurs, the tool will output the initial command you typed for your review:</p> <blockquote> <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp> </blockquote> representing onscreen input options nesting a <samp> element inside a <kbd> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.

<label> - HTML: Hypertext Markup Language
examples simple label example <label>click me <input type="text"></label> using the "for" attribute <label for="username">click me</label> <input type="text" id="username"> accessibility concerns interactive content don't place interactive elements such as anchors or buttons inside a label.
... don't <label for="your-name"> <h3>your name</h3> <input id="your-name" name="your-name" type="text"> </label> do <label class="large-label" for="your-name"> your name <input id="your-name" name="your-name" type="text"> </label> buttons an <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it.

<menu> - HTML: Hypertext Markup Language
- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> css div { width: 300px; height: 80px; background-color: lightgreen; } result menu button menu buttons haven't been implemented in any known browsers yet.
... html <!-- a context menu for a simple editor, - containing two menu buttons.

Interacting with page scripts - Archive of obsolete content
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.adde...

Content Scripts - Archive of obsolete content
this add-on adds a button to firefox: when the user clicks the button, the add-on attaches a content script to the active tab, sends the content script a message called "my-addon-message", and listens for a response called "my-script-response": //main.js var tabs = require("sdk/tabs"); var buttons = require("sdk/ui/button/action"); var self = require("sdk/self"); buttons.actionbutton({ id: "attach-script", label: "attach the script", icon: "./icon-16.png", onclick: attachscript }); function attachscript() { var worker = tabs.activetab.attach({ contentscriptfile: self.data.url("content-script.js") }); worker.port.on("my-script-response", function(response) { console.

indexed-db - Archive of obsolete content
here's a complete add-on that adds two buttons to the browser: the button labeled "add" adds the title of the current tab to a database, while the button labeled "list" lists all the titles in the database.

simple-prefs - Archive of obsolete content
"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.

simple-storage - Archive of obsolete content
here's an add-on that adds three buttons to write, read, and delete a value: var ss = require("sdk/simple-storage"); require("sdk/ui/button/action").actionbutton({ id: "write", label: "write", icon: "./write.png", onclick: function() { ss.storage.value = 1; console.log("setting value"); } }); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { ...

Release notes - Archive of obsolete content
firefox 30 highlights added the ability to anchor panels to buttons.

Display a Popup - Archive of obsolete content
to learn more about buttons, see the action button and toggle button api reference.

Add-on SDK - Archive of obsolete content
create user interface components create user interface components such as toolbar buttons, context menus, menu items, and dialogs.

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.

Extension Etiquette - Archive of obsolete content
theming if you have xul buttons in your extension that do functions similar to ones that already exist in a browser — for example, a feed reader that reloads and stops — use icons from the browser's theme.

Chapter 1: Introduction to Extensions - Archive of obsolete content
perhaps things like fine-grained tab controls, mouse gestures, extensive toolbars and buttons, a feed reader, integration with a variety of web applications, or sophisticated tools to assist with web design.

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.

XUL School Tutorial - Archive of obsolete content
introduction introduction getting started with firefox extensions the essentials of an extension setting up a development environment javascript object management basic functionality adding menus and submenus adding toolbars and toolbar buttons adding events and commands adding windows and dialogs adding sidebars user notifications and alerts intermediate functionality intercepting page loads connecting to remote content handling preferences local storage advanced topics the box model xpcom objects observer notifications custom xul elements with xbl mozilla documentation roadmap useful mozil...

Firefox addons developer guide - Archive of obsolete content
an alternative idea: writing a "next step" guide for interested people such as adding statusbar buttons, sidebar panels, and so on.

Creating reusable content with CSS and XBL - Archive of obsolete content
the document does not contain any buttons.

Index of archived content - Archive of obsolete content
ui chapter 4: using xpcom—implementing advanced processes chapter 5: let's build a firefox extension chapter 6: firefox extensions and xul applications license and authors xul school tutorial adding events and commands adding toolbars and toolbar buttons adding menus and submenus adding sidebars adding windows and dialogs appendix a: add-on performance appendix b: install and uninstall scripts appendix c: avoiding using eval in add-ons appendix d: loading scripts appendix e: dom building and insertion (html & xul) appendix...

Source code directories overview - Archive of obsolete content
widget contains c interfaces and code for platform independent controls (widgets), such as scroll bars, radio buttons and list boxes.

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.

toolbarBindings.xml - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "toolbarbindings.xml": <bindings id="toolbarbindings"> <binding id="toolbar-primary" extends="chrome://global/content/bindings/toolbar.xml#toolbar-primary"> <content> <xul:hbox class="toolbar-holder toolbar-primary-holder" flex="1" xbl:inherits="orient=tborient,buttonstyle"> <xul:hbox class="toolbar-button-box" flex="1"> <children/> </xul:hbox> <xul:image class="toolbar-primary-icon" xbl:inherits="buttonstyle"/> </xul:hbox> </content> </binding> </bindings> ...

Creating a Skin for Mozilla - Archive of obsolete content
mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.

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.

Menu - Archive of obsolete content
icon: "http://www.google.com/favicon.ico", data: "http://www.google.com/search?q=" }, { label: "wikipedia", icon: "http://en.wikipedia.org/favicon.ico", data: "http://en.wikipedia.org/wiki/" } ]), command: function (menuitem) { context.window.location.href = menuitem.data + jetpack.selection.text; } }; }); create some div buttons (e.g., in a slidebar or status bar item) and specify their context menu: for (let i = 0; i < 10; i++) { var button = $('<div class="button" />', document); buttoncontainer.append(button); } jetpack.menu.context.on(".button").add(["do this", "do that"]); create a div button (e.g., in a slidebar or status bar item) and attach menus directly to it.

Monitoring downloads - Archive of obsolete content
add buttons to delete items from the log, or to delete all items that have finished downloading.

Extensions - Archive of obsolete content
extensions typically overlay the host application's ui to add toolbar buttons, menus and other features.

FAQ - Archive of obsolete content
it lets users start web applications from their desktop, start menu, and dock, and it opens those applications in their own window separate from a web browser and without the browser interface (back and forward buttons, location bar, etc.).

Methods - Archive of obsolete content
confirm displays a confirm dialog box with the specified message and ok and cancel buttons.

allowevents - Archive of obsolete content
for menu, menuseparator, menuitem and treecol elements, as well as menu buttons, and the popup datepicker, mouse events are also retargeted to the element itself.

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.

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.

checked - Archive of obsolete content
for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect.

closebutton - Archive of obsolete content
you can set an image to the "new tab" and "close" buttons by applying them to the tabs-newbutton and tabs-closebutton classes respectively.

customizable - Archive of obsolete content
this causes the set of buttons to be persisted across sessions.

defaultButton - Archive of obsolete content
this should be set to one of the same values as those for the buttons attribute.

dlgtype - Archive of obsolete content
you can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog event methods will still function.

open - Archive of obsolete content
« xul reference home open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.

popupalign - Archive of obsolete content
the example below shows how to create the traditional buttons with attached left mouse menus that exist in the 4.x communicator product.

statustext - Archive of obsolete content
example <!-- sets the status message when mouse is over buttons --> <button label="connect" statustext="connect to remote server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <button label="ping" statustext="ping the server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <statusbar> <statusbarpanel id="mystatuspanel" label="" flex="1"/> <spacer flex="1"/> </statusbar> <script> function se...

toolbar.mode - Archive of obsolete content
« xul reference home mode not in seamonkey 1.x type: one of the values below how the toolbarbuttons on the toolbar are displayed.

toolbarbutton.type - Archive of obsolete content
you can also create a group of toolbarbuttons using this type and the attribute group.

MenuItems - Archive of obsolete content
this is an advantage when attaching several menuitems or buttons to the same command, as the disabled state can be adjusted once for the command, and this will propagate to all elements attached to it.

Panels - Archive of obsolete content
only buttons (and toolbarbuttons) have this automatic behaviour which opens the popup when pressed.

Positioning - Archive of obsolete content
this value is commonly used for menu buttons.

Popup Guide - Archive of obsolete content
attaching menus to a button to learn about how to open a menu when a button is pressed, see menu buttons.

defaultButton - Archive of obsolete content
this should be set to one of the same values as those for the buttons attribute.

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.

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.

Static Content - Archive of obsolete content
static content example let's look at another example, involving radio buttons.

The Joy of XUL - Archive of obsolete content
for this reason, xul is oriented toward application artifacts such as windows, labels, and buttons instead of pages, heading levels, and hypertext links.

Accesskey display rules - Archive of obsolete content
therefore, xul toolkit removes accesskey text before setting the label to the buttons.

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
in that example, oncommand handlers were added to some buttons.

Adding HTML Elements - Archive of obsolete content
« previousnext » now that we've added some buttons, let's add some other elements.

Adding Properties to XBL-defined Elements - Archive of obsolete content
the two extra buttons set and get the value of this field.

Introduction - Archive of obsolete content
some elements that can be created are: input controls such as textboxes and checkboxes toolbars with buttons or other content menus on a menu bar or pop up menus tabbed dialogs trees for hierarchical or tabular information keyboard shortcuts the displayed content can be created from the contents of a xul file or with data from a datasource.

More Event Handlers - Archive of obsolete content
mouse button event properties when a mouse button event occurs, a number of additional properties are available to determine which mouse buttons were pressed and the location of the mouse pointer.

More Menu Features - Archive of obsolete content
you may also want to create radio buttons on menu items.

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.

RDF Datasources - Archive of obsolete content
to use them, just put the url values above in the label attributes of the buttons or treecells.

Scroll Bars - Archive of obsolete content
a scroll bar is made up of several parts: the slider, which is the main part of the scroll bar with the adjustable box, and the two arrow buttons on the end.

Scrolling Menus - Archive of obsolete content
example - scrolling list of buttons the following example shows how to create a scrolling list of buttons (you will need to resize the window to see the arrow buttons): example 1 : source view <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button lab...

Tabboxes - Archive of obsolete content
the progress bar and the buttons can stay on the main dialog, outside of the tabs.

Updating Commands - Archive of obsolete content
it will update the command and enable or disable necessary buttons and menu items.

XBL Attribute Inheritance - Archive of obsolete content
changing the attributes on the box with the okcancel class will automatically change the values on the buttons.

XBL Inheritance - Archive of obsolete content
one way to create this is to duplicate the existing xbl code for buttons.

XUL Structure - Archive of obsolete content
it also defines the default appearance and functionality of the various common xul widgets such as textboxes and buttons.

XUL Tutorial - Archive of obsolete content
introduction introduction xul structure the chrome url manifest files simple elements creating a window adding buttons adding labels and images input controls numeric controls list controls progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handl...

Urlbar-icons - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the location of ui elements like the bookmarks, feed and go buttons.

XUL Changes for Firefox 1.5 - Archive of obsolete content
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.

XUL accessibility tool - Archive of obsolete content
ror: duplicate accesskey in a dialog (already have this for menus) (aaronlev) error: form control without accesskey (aaronlev) warning: accesskey as lowercase letter with descender (underlined g,j,y,q,p are hard to read, not recommended) (aaronandy) list of things to check manually, such as a list oftrees in the document (make sure they have accessible column picker equivs) or a list of toolbarbuttons (make sure they have accessible alternatives).

XUL controls - Archive of obsolete content
two arrow buttons are displayed for cycling through values.

broadcaster - Archive of obsolete content
for menuitems or buttons that just want to have their disabled status set when the feature should be disabled, you should use a command element instead.

checkbox - Archive of obsolete content
for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect.

command - Archive of obsolete content
see also: command attribute, commandset element attributes disabled, label, oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently focused element: // first include chrome://global/content/globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command id="cmd_openhelp" oncommand="alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not.

label - Archive of obsolete content
the caption is in the "value" attribute remember that the label element has a "value" attribute, unlike value in html whereas buttons, checkboxes use label="foo" as the attribute <label label="a caption"/> <!-- wrong --> <label value="a caption"/> <label value="click the button"/> <button label="a button"/> <checkbox label="a decision" value="1"/> wrapping by default, label text does not wrap.

listitem - Archive of obsolete content
for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect.

menu - Archive of obsolete content
open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.

menuitem - Archive of obsolete content
for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect.

menulist - Archive of obsolete content
open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.

<statusbarpanel> - Archive of obsolete content
unlike normal buttons, a statusbarpanel can only have a label or an image but not both.

tabs - Archive of obsolete content
you can set an image to the "new tab" and "close" buttons by applying them to the tabs-newbutton and tabs-closebutton classes respectively.

timepicker - Archive of obsolete content
arrow buttons next to the fields allow the values to be adjusted with the mouse.

titlebar - Archive of obsolete content
buttons inside it can't be clicked and textboxes can't be focused with the mouse.

toolbaritem - Archive of obsolete content
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.

treeitem - Archive of obsolete content
open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open.

wizard - Archive of obsolete content
this element provides the header and buttons along the bottom, and also handles navigation between the pages.

XULRunner tips - Archive of obsolete content
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.

Windows and menus in XULRunner - Archive of obsolete content
we can add images to the toolbar buttons through the css file.

Archived Mozilla and build documentation - Archive of obsolete content
mozilla uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.

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.

Building a Theme - Archive of obsolete content
xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc.

Creating a Skin for Firefox - Archive of obsolete content
firefox uses standard gif, png, and jpeg images for the buttons and css to style everything else in the interface.

Theme changes in Firefox 3 - Archive of obsolete content
mac os x mac os x themes for firefox 3 should add these two rules to the end of chrome://global/skin/wizard.css: .wizard-buttons-btm { padding:xpx; } .wizard-label-box { display: none; } the numeric value ofx, the number of pixels of padding in .wizard-buttons-btm, should be the same as the value of the margin for .wizard-buttons-box-2.

Scratchpad - Archive of obsolete content
then choose the way you want the code to run using the buttons along the top, using the execute menu, or using the context menu.

::-ms-check - Archive of obsolete content
the screenshot to the left shows what will happen when you check the buttons if you don't have access to internet explorer or edge.

-moz-touch-enabled - Archive of obsolete content
media: media/visual accepts min/max prefixes: no example you might use this feature to render your buttons slightly larger if the user is on a touch-screen device, to make them more finger-friendly.

XForms Styling - Archive of obsolete content
triggers use appearance="minimal" to be able to style buttons portability the mozilla xforms extension is one of the few xforms processors which allow for styling of the xforms elements directly, using mostly standard css.

XForms Input Element - Archive of obsolete content
einteger xsd:negativeinteger xsd:long xsd:int xsd:short xsd:byte xsd:nonnegativeinteger xsd:unsignedlong xsd:unsignedint xsd:unsignedshort xsd:unsignedbyte xsd:positiveinteger analogous widget is <xul:textbox type="number"/> (will be available in fx 3.0) specific handling of attributes incremental - if "true", the bound instance node will be updated when the user clicks on the up or down spin buttons or directly edits the field and then sets focus elsewhere.

Windows Media in Netscape - Archive of obsolete content
the min-object-usage.html sample shows a minimalist control manipulated by scripting and html buttons.

Index - Game development
46 buttons 2d, beginner, buttons, canvas, games, javascript, phaser, tutorial instead of starting the game right away we can leave that decision to the player by adding a start button they can press.

2D breakout game using Phaser - Game development
ils all the lessons — and the different versions of the mdn breakout game we are building together — are available on github: initialize the framework scaling load the assets and print them on screen move the ball physics bounce off the walls player paddle and controls game over build the brickfield collision detection the score win the game extra lives animations and tweens buttons randomizing gameplay as a note on learning paths — starting with pure javascript is the best way to get a solid knowledge of web game development.

DTMF (Dual-Tone Multi-Frequency signaling) - MDN Web Docs Glossary: Definitions of Web-related terms
dual-tone multi-frequency (dtmf) signaling is a system by which audible tones are used to represent buttons being pressed on a keypad.

Index - MDN Web Docs Glossary: Definitions of Web-related terms
104 dtmf (dual-tone multi-frequency signaling) dtmf, glossary, webrtc dual-tone multi-frequency (dtmf) signaling is a system by which audible tones are used to represent buttons being pressed on a keypad.

MVC - MDN Web Docs Glossary: Definitions of Web-related terms
so for example, our shopping list could have input forms and buttons that allow us to add or delete items.

Smoke Test - MDN Web Docs Glossary: Definitions of Web-related terms
smoke testing answers questions like "does the program start up correctly?" "do the main control buttons function?" "can you save a simple blank new test user account?" if this basic functionality fails, there is no point investing time in more detailed qa work at this stage.

Test your skills: HTML accessibility - Learn web development
the given text is a simple information panel with action buttons, but the html is really bad.

What is accessibility? - Learn web development
are my ui buttons accessible using the keyboard and on touch interfaces?

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.

Typesetting a community school homepage - Learn web development
you don't necessarily have to make the nav menu look like buttons, but it needs to be a bit taller so that it doesn't look silly on the side of the page; also remember that you need to make this one a vertical nav menu.

Client-side form validation - Learn web development
div { margin-bottom: 10px; } here is the example running live: note: you can find this example live on github as fruit-length.html (see also the source code.) note: <input type="number"> (and other types, such as range and date) can also take a step attribute, which specifies what increment the value will go up or down by when the input controls are used (such as the up and down number buttons).

Example - Learn web development
/* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height: 5em; /* to allow users to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra magin represent the same space as the space between the labels and their text fields */ margin-left: .5em; } result ...

Dealing with files - Learn web development
buttons that load data when clicked).

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.

Getting started with the Web - Learn web development
some examples could be games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more.

Creating hyperlinks - Learn web development
e-mail links it's possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page.

Document and website structure - Learn web development
navigation bar: links to the site's main sections; usually represented by menu buttons, links, or tabs.

Adding vector graphics to the Web - Learn web development
</text> </svg> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution" disabled> </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...

From object to iframe — other embedding technologies - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 250px;"> </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="width: 95%;min-height: 100px;"> </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.geteleme...

General asynchronous programming concepts - Learn web development
in this example, we have two buttons: a "fill canvas" button that when clicked fills the available <canvas> with 1 million blue circles.

What is web performance? - Learn web development
are buttons clickable?

React interactivity: Events and state - Learn web development
deletetask() needs to know the id of the task that called it, so it can delete the correct task from the state update the "delete" button inside todo.js, like so: <button type="button" classname="btn btn__danger" onclick={() => props.deletetask(props.id)} > delete <span classname="visually-hidden">{props.name}</span> </button> now when you click on any of the "delete" buttons in the app, your browser console should log the id of the related task.

Dynamic behavior in Svelte: working with variables and props - Learn web development
let's update the filter button markup to make it dynamic and update the current filter when the user presses one of the filter buttons.

Vue conditional rendering: editing existing todos - Learn web development
we've also added "edit" and "delete" buttons: the "edit" button, when clicked, will toggle displaying the todoitemeditform component so we can use it to edit our todo item, via an event handler function called toggletoitemeditform().

Styling Vue components with CSS - Learn web development
these styles do a few things — adding some styling to buttons and inputs, and customizing the #app element and its children.

Implementing feature detection - Learn web development
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.

Setting up your own test automation environment - Learn web development
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.

Introducing a complete toolchain - Learn web development
you can interact with git in a number of different ways, from using the command line to issue commands, to using a git gui app to issue the same commands by pushing buttons, or even from directly inside your code editor, as seen in the visual studio code example below: anyway, installing git is all we need to do for now.

Accessibility Features in Firefox
you can furthermore control javascript capabilities to remove scrollbars, toolbars or system buttons like minimize, close and maximize by editing the about:config related properties or by editing accordingly the user.js file as explained in this "disable other javascript window features" document.

A bird's-eye view of the Mozilla framework
the various x toolkit implementations provide a set of widgets for ui controls such as menus, command buttons, dialog boxes and scroll bars.

Debugging on Windows
for each dll, click the "new" button which creates a new entry and then hit the "..." buttons which lets you browse to the dll.

The Firefox codebase: CSS Guidelines
colors for common areas of the firefox interface (panels, toolbar buttons, etc.), mozilla-central often comes with some useful css variables that are adjusted with the correct values for different platform configurations, so using those css variables can definitively save some testing time, as you can assume they already work correctly.

Experimental features in Firefox
nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.webrender.all pseudo-class: :focus-visible allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g.

Storage access policy: Block cookies from trackers
for social like or share buttons, the user will have to first interact with the button in a logged-out state.

Browser API
they are necessary to be able to implement back, forward, stop, and reload buttons.

Embedding the editor
the inline style buttons).

API-provided widgets
possible types are button for simple button widgets (the default) view for buttons that open a panel or subview, depending on where they are placed.

JavaScript code modules
customizableui.jsm allows you to interact with customizable buttons and items in firefox's main window ui.

Mozilla Content Localized in Your Language
buttons capitalize the first letter of each word.

Localizing with Koala
the buttons on the right become active.

Localization sign-off reviews
sign-offs are approved using the buttons in the farthest column to the right.

Localization technical reviews
revisions are approved using the buttons in the furthest column to the right.

Creating localizable web applications
don't use images as buttons instead, use <button/> and style it with css.

Basics
le="increase input">+</a> <a class="control" href="javascript:incrementinput('input21',-1);" title="decrease input">-</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right size: <a class="control" href="javascript:incrementinput('input12', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input12',-1);" title="decrease input">-</a> <br/> (click these control buttons to see their effects.) </div> <p> each entry of the following matrix represents <math> <msup><mrow><mo>(</mo><mi>x</mi><mo>+</mo><mi>y</mi><mo>)</mo></mrow><mi>n</mi></msup> </math> for some <i>n</i>.

MathML Demo: <mspace> - space
interactive sizing html content <p> use the control buttons below to adjust the parameters of the <code>mspace</code> element and see the effects.

BloatView
the show objects and show references buttons show the same statistics but counting objects or addref'd references rather than bytes.

GC and CC logs
generating logs from within firefox to manually generate gc and cc logs, navigate to about:memory and use the buttons under "save gc & cc logs." "save concise" will generate a smaller cc log, "save verbose" will provide a more detailed cc log.

Memory Profiler
to take a profile you can use the buttons in the profiler panel.

Profiling with the Firefox Profiler
sharing, saving and loading profiles after capturing and viewing a profile you will see "share..." and "save as file..." buttons in the top-right of the window.

Shumway
several buttons are available at the bottom of the screen to enable or disable various shumway options.

How to embed the JavaScript engine
to get a copy of the code sample without line numbers, hover over the sample near the top until buttons appear.

Web Replay
the user's interface to the devtools for a child process is the same as for a normal content process, except that new ui buttons are added for rewinding (find the last time a breakpoint was hit), and for reverse step/step-in/step-out.

WebReplayRoadmap
points on the path could be clicked to seek there, which should offer faster and less clunky navigation than stepping buttons.

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.

Building the WebLock UI
one of the most efficient ways to expose this is to use radio buttons, which allow the user to toggle a particulart state, as the figure above illustrates.

IAccessible2
used for tree items, list items, tab panel labels, radio buttons, and so on.

IAccessibleImage
1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this interface is used for a representation of images like icons on buttons.

GroupPosition
used for tree items, list items, tab panel labels, radio buttons, etc.

nsIAccessible
used for tree items, list items, tab panel labels, radio buttons, etc.

nsITaskbarPreview
the controller provides the behavior and appearance for the taskbar preview, and is responsible for determining the size and contents of the preview, which buttons are displayed, and how the application responds to user actions on the preview.

Index
xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees etc.

Building a Thunderbird extension 5: XUL
xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees etc.

Zombie compartments
first, many sites utilize scripts from other sites to provide advertisements, "like" and "+1" buttons, twitter feeds, etc.

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.?).

DOM Inspector internals - Firefox Developer Tools
(the browser pane is not a viewer panel in the sense that document and object panels are, i.e., the sorts of panels as defined above in relation to the panelset; "pane" is used here with regard to the browser pane in a loose sense to describe the generic ui fixture.) toolboxoverlay.xul this overlay fills in the inspector toolbox, including toolbar buttons and the location bar and its "inspect" button.

Set event listener breakpoints - Firefox Developer Tools
in addition, you get a box overlaid on the viewport saying "paused on event breakpoint", with buttons to step over that line of code or resume execution.

UI Tour - Firefox Developer Tools
toolbar at the top of the right-hand pane, there's a toolbar: the toolbar consists of: four buttons to control the debugger's movement through the script: play/pause (f8): pauses or resumes execution of the script you're debugging.

Index - Firefox Developer Tools
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.

Measure a portion of the page - Firefox Developer Tools
from the available toolbox buttons check the measure a portion of the page checkbox.

Network monitor toolbar - Firefox Developer Tools
a set of tool icons: pause (or resume) recording network log search the log request blocking an array of buttons to filter the network request list by type: by the content type of the response xhr requests websocket upgrades and messages (labeled ws) other requests a checkbox that allows you to disable caching.

Network request list - Firefox Developer Tools
filter type how to apply content type use the buttons in the toolbar (html, css, js).

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.

Work with animations - Firefox Developer Tools
animation playback at the top of the animation inspector: there are buttons to play/pause and restart the animation there's a dropdown to change the animation playback rate the current time in the animation is displayed.

How to - Firefox Developer Tools
select a tool to switch between the waterfall, call tree, and flame chart tools, use the buttons in the toolbar: configure markers displayed to control which markers are shown in the waterfall, use the button in the toolbar: zoom in to zoom into a slice of the recording, select that slice in the recording overview: ...

Responsive Design Mode - Firefox Developer Tools
on the right end of the screen, three buttons allow you to: camera button - take a screenshot settings button - opens the rdm settings menu close button - closes rdm mode and returns to regular browsing the settings menu includes the following commands: left-align viewport - when checked moves the rdm viewport to the left side of the browser window show user agent - when checked displays the user agent string the final two opti...

Rulers - Firefox Developer Tools
to be able to toggle rulers for a page, you first need to enable the button by going to the settings page for the developer tools and checking "toggle rulers for the page" under available toolbox buttons.

Settings - Firefox Developer Tools
available toolbox buttons this group of checkboxes determines which tools get an icon in the toolbox's toolbar.

Storage Inspector - Firefox Developer Tools
add and refresh storage you'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to indexeddb or cache): sidebar when you select any row in the storage table widget, the sidebar is shown with details about that row.

Taking screenshots - Firefox Developer Tools
to enable it: visit the settings page find the section labeled "available toolbox buttons" check the box labeled "take a screenshot of the entire page".

about:debugging (before Firefox 68) - Firefox Developer Tools
debugging workers for a service worker, if it is already running, you'll see two buttons next to it, labeled "debug" and "push".

AudioBufferSourceNode.loopEnd - Web APIs
buttons are provided to play and stop the audio playback, and slider controls are used to change the playbackrate, loopstart and loopend properties on the fly.

AudioBufferSourceNode.loopStart - Web APIs
buttons are provided to play and stop the audio playback, and slider controls are used to change the playbackrate, loopstart, and loopend properties on the fly.

BaseAudioContext.createDelay() - Web APIs
if you just press the play buttons, the loops will start immediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time.

Body.arrayBuffer() - Web APIs
an error.) function getdata() { source = audioctx.createbuffersource(); var myrequest = new request('viper.ogg'); fetch(myrequest).then(function(response) { return response.arraybuffer(); }).then(function(buffer) { audioctx.decodeaudiodata(buffer, function(decodeddata) { source.buffer = decodeddata; source.connect(audioctx.destination); }); }); }; // wire up buttons to stop and play audio play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); } reading files the response() constructor accepts files and blobs, so it may be used to read a file into other formats.

CSS.registerProperty() - Web APIs
tion: --my-color 1s ease-in-out; } .registered:hover, .registered:focus { --my-color: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { font-size: 3vw; } we can add these styles to some buttons: <button class="registered">background registered</button> <button class="unregistered">background not registered</button> specifications specification status comment css properties and values api level 1the definition of 'the registerproperty() function' in that specification.

CSSStyleDeclaration.setProperty() - Web APIs
if priority can be omitted, javascript has a special simpler syntax for setting a css property on a style declaration object: style.csspropertyname = 'value'; examples in this example we have three buttons, which can be pressed to dynamically alter our box paragraph's border, background color, and text color to random values (see the live example at the end of this section).

CanvasPattern.setTransform() - Web APIs
s an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.

CanvasRenderingContext2D.addHitRegion() - Web APIs
(if you don't see the full smiley, check the browser compatibility table to see if your current browser supports hit regions already; you might need to activate a preference.) playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:250px"> ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.arc(130, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx...

CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
examples managing button focus this example draws two buttons on a canvas.

CanvasRenderingContext2D.miterLimit - Web APIs
playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.moveto(0,0); ctx.linewidth = 15; ctx.lineto(100, 100); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = d...

CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyi...

Drawing text - Web APIs
a textbaseline example edit the code below and see your changes update live in the canvas: ctx.font = '48px serif'; ctx.textbaseline = 'hanging'; ctx.stroketext('hello world', 0, 100); playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textbaseline = "hanging"; ctx.stroketext("hello world", 0, 100);</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset...

DelayNode.delayTime - Web APIs
if you just press the play buttons, the loops will start immediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time.

DelayNode - Web APIs
if you just press the play buttons, the loops will start immediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time.

Document.getElementsByTagName() - Web APIs
clicking the buttons uses getelementsbytagname() to count the descendant paragraph elements of a particular parent (either the document itself or one of two nested <div> elements).

Document: pointerdown event - Web APIs
for mouse, it is fired when the device transitions from no buttons depressed to at least one button depressed.

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
eople-list { list-style-type: none; margin: 0; padding: 0; } .people-list li { display: inline-block; width: 2em; height: 2em; background: #f06; border: 1px solid; } <ul class="people-list"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> you probably don't want the gaps in between the blocks — depending on the use case (is this a list of avatars, or horizontal nav buttons?), you probably want the element sides flush with each other, and to be able to control any spacing yourself.

Element: auxclick event - Web APIs
body { height: inherit; display: flex; justify-content: center; align-items: center; margin: 0; } button { border: 0; background-color: white; font-size: 8vw; display: block; width: 100%; height: 100%; } h1 { letter-spacing: 0.5rem; } result note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when any of the non-left mouse buttons are clicked (usually including any "special" buttons on gaming mice).

Element.insertAdjacentElement() - Web APIs
when one is clicked, it becomes selected and you can then press the insert before and insert after buttons to insert new divs before or after the selected element using insertadjacentelement().

Element.insertAdjacentText() - Web APIs
you can enter some text into the form element, then press the insert before and insert after buttons to insert it before or after the existing paragraph text using insertadjacenttext().

FormData() - Web APIs
those with a name, not disabled and checked (radio buttons and checkboxes) or selected (one or more options within a select).

GamepadButton.pressed - Web APIs
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.

GamepadEvent.gamepad - Web APIs
%d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); value a gamepad object.

GamepadEvent - Web APIs
%d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); and on a window.gamepaddisconnected event.

Gamepad API - Web APIs
it contains three interfaces, two events and one specialist function, to respond to gamepads being connected and disconnected, and to access other information about the gamepads themselves, and what buttons and other controls are currently being pressed.

GlobalEventHandlers.onauxclick - Web APIs
ndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; button.style.backgroundcolor = rndcol; }; button.onauxclick = function() { var rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; button.style.color = rndcol; } note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when either of the non-left mouse buttons are clicked.

HTMLButtonElement - Web APIs
with gecko-based browser, use the :-moz-submit-invalid pseudo-class to style submit buttons based on the validation of a form.

HTMLElement: pointerdown event - Web APIs
for mouse, it is fired when the device transitions from no buttons depressed to at least one button depressed.

HTMLImageElement.alt - Web APIs
241, 240, 237, 255); width: 9em; height: 100%; float: left; margin-right: 5px; padding-right: 1em; display: flex; align-items: center; justify-content: center; } .left-margin img { width: 6em; } .contents { background-color: rgb(241, 240, 235, 255); height: 100%; margin-left: 2em; padding-top: 1em; padding-left: 2em; padding-right: 1em; } result images used as buttons when using an image as a button (by using it as the only visible child of an <a> element representing a hyperlink), the alt attribute must be used to convey the purpose of the button.

MediaError.message - Web APIs
example this example creates a <audio> element, establishes an error handler for it, then lets the user click buttons to choose whether to assign a valid audio file or a missing file to the element's src attribute.

MediaSession.setActionHandler() - Web APIs
these actions let a web app receive notifications when the user engages a device's built-in physical or onscreen media controls, such as play, stop, or seek buttons.

Media Session action types - Web APIs
description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds.

MediaSessionActionDetails - Web APIs
description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds.

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 support...

MouseEvent() - Web APIs
ich button is pressed during events related to the press or release of a button: value meaning 0 main button pressed (usually the left button) or un-initialized 1 auxiliary button pressed (usually the middle button) 2 secondary button pressed (usually the right button) "buttons", optional and defaulting to 0, of type unsigned short, that describes which buttons are pressed when the event is launched: bit-field value meaning 0 no button pressed 1 main button pressed (usually the left button) 2 secondary button pressed (usually the right button) 4...

MouseEvent.which - Web APIs
the standard alternatives to this property are mouseevent.button and mouseevent.buttons.

Navigator.getGamepads() - Web APIs
%d buttons, %d axes.", gp.index, gp.id, gp.buttons.length, gp.axes.length ); }); specifications specification status comment gamepadthe definition of 'the gamepad api specification' in that specification.

PointerEvent.pressure - Web APIs
for hardware that does not support pressure, such as a mouse, the value is 0.5 when the pointer is active buttons state and 0 otherwise.

PointerEvent - Web APIs
for mouse, it is fired when the device transitions from no buttons depressed to at least one button depressed.

Multi-touch interaction - Web APIs
function pointerup_handler(ev) { if (logevents) log(ev.type, ev); // remove this touch point from the cache and reset the target's // background and border remove_event(ev); update_background(ev); ev.target.style.border = "1px solid black"; } application ui the application uses <div> elements for the touch areas and provides buttons to enable logging and to clear the log.

Pinch zoom gestures - Web APIs
his pointer from the cache and reset the target's // background and border remove_event(ev); ev.target.style.background = "white"; ev.target.style.border = "1px solid black"; // if the number of pointers down is less than two then reset diff tracker if (evcache.length < 2) { prevdiff = -1; } } application ui the application uses a <div> element for the touch area and provides buttons to enable logging and to clear the log.

RTCRtpSender - Web APIs
you can also obtain access to an rtcdtmfsender which can be used to send dtmf codes (to simulate the user pressing buttons on a telephone's dial pad) to the remote peer.

SubmitEvent.submitter - Web APIs
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.

SubmitEvent - Web APIs
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.

Multi-touch interaction - Web APIs
function end_handler(ev) { ev.preventdefault(); if (logevents) log(ev.type, ev, false); if (ev.targettouches.length == 0) { // restore background and border to original values ev.target.style.background = "white"; ev.target.style.border = "1px solid black"; } } application ui the application uses <div> elements for the touch areas and provides buttons to enable logging and clear the log.

Color masking - Web APIs
note that the calls to colormask() only occur when the user clicks on one of the toggle buttons.

Movement, orientation, and motion: A WebXR example - Web APIs
function handlepointermove(event) { if (event.buttons & 2) { rotateviewby(event.movementx, event.movementy); } } calculating the new pitch and yaw values is handled by the function rotateviewby(): function rotateviewby(dx, dy) { mouseyaw -= dx * mouse_speed; mousepitch -= dy * mouse_speed; if (mousepitch < -math.pi * 0.5) { mousepitch = -math.pi * 0.5; } else if (mousepitch > math.pi * 0.5) { mousepitch = math.pi * 0.5; } ...

Advanced techniques: Creating and sequencing audio - Web APIs
each voice has four buttons, which represent four beats in one bar of music.

Web Audio API best practices - Web APIs
if you have buttons that switch audio on and off, using the aria role="switch" attribute on them is a good option for signalling to assistive technology what the button's exact purpose is, and therefore making the app more accessible.

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.

Web audio spatialization basics - Web APIs
lue = z; break; } boombox.style.transform = 'translatex('+transform.xaxis+'px) translatey('+transform.yaxis+'px) scale('+transform.zaxis+') rotatey('+transform.rotatey+'deg) rotatex('+transform.rotatex+'deg)'; const move = prevmove || {}; move.frameid = requestanimationframe(() => moveboombox(direction, move)); return move; } wiring up our controls wiring up out control buttons is comparatively simple — now we can listen for a mouse event on our controls and run this function, as well as stop it when the mouse is released: // for each of our controls, move the boombox and change the position values movecontrols.foreach(function(el) { let moving; el.addeventlistener('mousedown', function() { let direction = this.dataset.control; if (moving &&...

Window.captureEvents() - Web APIs
--> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised in the dom by user activity (such as clicking buttons or shifting focus away from the current document) generally pass through the high-level window and document objects first before arriving at the object that initiated the event.

Window.confirm() - Web APIs
the window.confirm() method displays a modal dialog with an optional message and two buttons: ok and cancel.

Window: gamepadconnected event - Web APIs
bubbles no cancelable no interface gamepadevent event handler property ongamepadconnected examples window.addeventlistener('gamepadconnected', event => { // all buttons and axes values can be accessed through event.gamepad; }); specifications specification status gamepad working draft ...

Window.history - Web APIs
example history.back(); // equivalent to clicking back button history.go(-1); // equivalent to history.back(); notes for top-level pages you can see the list of pages in the session history, accessible via the history object, in the browser's dropdowns next to the back and forward buttons.

Window.ongamepadconnected - Web APIs
}; examples window.ongamepadconnected = function(event) { // all buttons and axes values can be accessed through event.gamepad; }; specifications specification status comment gamepadthe definition of 'gamepadconnected event' in that specification.

Window: pageshow event - Web APIs
this includes: initially loading the page navigating to the page from another page in the same window or tab restoring a frozen page on mobile oses returning to the page using the browser's forward or back buttons during the initial page load, the pageshow event fires after the load event.

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.

Using XMLHttpRequest - Web APIs
*/ for (nfile = 0; nfile < ofield.files.length; this.segments.push(ffilter(ofield.name) + "=" + ffilter(ofield.files[nfile++].name))); } } else if ((sfieldtype !== "radio" && sfieldtype !== "checkbox") || ofield.checked) { /* note: this will submit _all_ submit buttons.

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.

XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
canvas.oncontextmenu = (event) => { event.preventdefault(); }; canvas.addeventlistener("mousemove", (event) => { if (event.buttons & 2) { rotateviewby(event.movementx, event.movementy); } }); next, the rotateviewby() function, which updates the mouse look direction's yaw and pitch based on the mouse delta values from the mousemove event.

XRSession: select event - Web APIs
examples of comon kinds of primary action are users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.

XRSession: selectend event - Web APIs
primary actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.

XRSession: selectstart event - Web APIs
primary actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.

XRSession: squeeze event - Web APIs
examples of comon kinds of primary action are users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.

XRSession: squeezeend event - Web APIs
primary squeeze actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.

msthumbnailclick - Web APIs
s an overlay icon on your app pinned to the taskbar window.external.mssitemodeseticonoverlay(iconuri, tooltip); // removes an overlay icon window.external.mssitemodecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar // add an event handlerdocument.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var btnplay = window.external.mssitemodeaddthumbbarbutton(iconuri, tooltip); // refresh the taskbar window.external.mssitemodeshowthumbbar(); // call a javascript function when the button is pressed function onbuttonclicked(e) { switch (e.buttonid) { case btnplay: play(); break;} } see also microsoft api extensions ...

ARIA: tab role - Accessibility
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.

ARIA: listbox role - Accessibility
it is highly recommended to use the html select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free.

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

Alerts - Accessibility
the alert we just created does not have any buttons to press, it just tells us what’s wrong.

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
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 p...

Accessibility documentation index - Accessibility
this role can be used in combination with the aria-pressed attribute to create toggle buttons.

Robust - Accessibility
form inputs, buttons, links, etc.) should be programmatically determinable.

Understandable - Accessibility
see also styling links as buttons for a useful accessible navigation menu example.

Understanding the Web Content Accessibility Guidelines - Accessibility
buttons must be clickable in some way — mouse, keyboard, voice command, etc.).

::-moz-focus-inner - CSS: Cascading Style Sheets
note: using ::-moz-focus-inner with anything than the buttons that support it doesn't match anything and has no effect.

::-webkit-scrollbar - CSS: Cascading Style Sheets
::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards).

Media queries - CSS: Cascading Style Sheets
for example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens.

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
o>where <compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar examples the following would make an element look like a menulist button: .exampleone { appearance: menulist-button; } see also this jsfiddle for an example showing how you might use appearance: none to apply custom styling to radio buttons and checkboxes.

Event reference
pointerdown pointerevent pointer events the pointer enters the active buttons state.

DOM onevent handlers - Developer guides
elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <body> element).

Mobile Web Development - Developer guides
you won't be able to use the css :hover pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers.

disabled - HTML: Hypertext Markup Language
<fieldset> <legend>checkboxes</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>radio buttons</legend> <p><label> <input type="radio" name="radio" value="regular"> regular </label></p> <p><label> <input type="radio" name="radio" value="disabled" disabled> disabled </label></p> </fieldset> <p> <label>select an option: <select> <optgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgroup label="group 2"> <option>option 2.1</option>...

HTML attribute: required - HTML: Hypertext Markup Language
in the case of a same named group of radio buttons, if a single radio button in the group has the required attribute, a radio button in that group must be check, though it doesn't have to be the one with the attribute is applied.

HTML attribute: step - HTML: Hypertext Markup Language
the step sets the stepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types.

<a>: The Anchor element - HTML: Hypertext Markup Language
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 .

<input type="date"> - HTML: Hypertext Markup Language
additional attributes along with the attributes common to all <input> elements, date inputs have the following attributes: attribute description max the latest acceptable date min the earliest acceptable date step the stepping interval, when clicking up and down spinner buttons and validating the date max the latest date to accept.

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

<keygen> - HTML: Hypertext Markup Language
the ui for the selection may be a menu, radio buttons, or possibly something else.

Browser detection using the user agent - HTTP
rather, add in touch conveniences such as bigger, more easily clickable buttons (you can do this using css by simply increasing the font size).

Accept-Ranges - HTTP
none no range unit is supported, this makes the header equivalent of its own absence and is therefore rarely used, though some browsers, like ie9, it is used to disable or remove the pause buttons in the download manager.

HTTP range requests - HTTP
in some apps, download managers disable their pause buttons in that case.

Introduction - JavaScript
javascript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.).

JavaScript modules - JavaScript
instead, we include three buttons — "circle", "square", and "triangle" — that, when pressed, dynamically load the required module and then use it to draw the associated shape.

Authoring MathML - MathML
use the text field for token elements and buttons to build advanced constructions.

Populating the page: how browsers work - Web Performance
painting involves drawing every visual part of an element to the screen, including text, colors, borders, shadows, and replaced elements like buttons and images.

Web Performance
are buttons clickable?

Using shadow DOM - Web Components
all you see in the dom is the <video> element, but it contains a series of buttons and other controls inside its shadow dom.