Search completed in 0.93 seconds.
Element: click event - Web APIs
an element receives a
click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
... bubbles yes cancelable yes interface mouseevent event handler property on
click if the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.
...
click fires after both the mousedown and mouseup events have fired, in that order.
...And 15 more matches
Element: auxclick event - Web APIs
the aux
click event is fired at an element when a non-primary pointing device button (any mouse button other than the primary—usually leftmost—button) has been pressed and released both within the same element.
... aux
click is fired after the mousedown and mouseup events have been fired, in that order.
... bubbles yes cancelable yes interface mouseevent event handler property onaux
click preventing default actions for the vast majority of browsers that map middle
click to opening a link in a new tab, including firefox, it is possible to cancel this behavior by calling preventdefault() from within an aux
click event handler.
...And 7 more matches
GlobalEventHandlers.onauxclick - Web APIs
the onaux
click property of the globaleventhandlers mixin is an eventhandler for processing aux
click events.
... the aux
click event is raised when a non-primary button has been pressed on an input device (e.g., a middle mouse button).
...specifically, event behavior is being updated so that
click only fires for primary button
clicks (e.g., left mouse button), while aux
click fires for non-primary button
clicks.
...And 7 more matches
GlobalEventHandlers.onclick - Web APIs
the on
click property of the globaleventhandlers mixin is the eventhandler for processing
click events on a given element.
... the
click event is raised when the user
clicks on an element.
... note: when using the
click event to trigger an action, also consider adding this same action to the keydown event, to allow the use of that same action by people who don't use a mouse or a touch screen.
...And 5 more matches
GlobalEventHandlers.ondblclick - Web APIs
the ondbl
click property of the globaleventhandlers mixin is an eventhandler that processes dbl
click events on the given element.
... the dbl
click event is raised when the user double
clicks an element.
... it fires after two
click events.
...And 4 more matches
Clearing by clicking - Web APIs
« previousnext » this example demonstrates how to combine user interaction with webgl graphics operations by clearing the rendering context with a random color when the user
clicks.
...every time the user
clicks the canvas or the button, the canvas is cleared with a new randomly chosen color.
... <p>a very simple webgl program that still shows some color and user interaction.</p> <p>you can repeatedly
click the empty canvas or the button below to change color.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
...And 3 more matches
Element: dblclick event - Web APIs
the dbl
click event fires when a pointing device button (such as a mouse's primary button) is double-
clicked; that is, when it's rapidly
clicked twice on a single element within a very short span of time.
... dbl
click fires after two
click events (and by extension, after two pairs of mousedown and mouseup events).
... bubbles yes cancelable yes interface mouseevent event handler property ondbl
click examples this example toggles the size of a card when you double
click on it.
...And 2 more matches
HTMLElement.click() - Web APIs
the htmlelement.
click() method simulates a mouse
click on an element.
... when
click() is used with supported elements (such as an <input>), it fires the element's
click event.
... this event then bubbles up to elements higher in the document tree (or event chain) and fires their
click events.
... syntax element.
click() example simulate a mouse-
click when moving the mouse pointer over a checkbox: html <form> <input type="checkbox" id="mycheck" onmouseover="myfunction()" on
click="alert('
click event occured')"> </form> javascript // on mouse-over, execute myfunction function myfunction() { document.getelementbyid("mycheck").
click(); } specification specification status comment html living standard living standard document object model (dom) level 2 html specification obsolete initial definition.
Notification.onclick - Web APIs
the on
click property of the notification interface specifies an event listener to receive
click events.
... these events occur when the user
clicks on a displayed notification.
... syntax notification.on
click = function(event) { ...
... examples in the following example, we use an on
click handler to open a webpage in a new tab (specified by the inclusion of the '_blank' parameter) once a notification is
clicked: notification.on
click = function(event) { event.preventdefault(); // prevent the browser from focusing the notification's tab window.open('http://www.mozilla.org', '_blank'); } specifications specification status comment notifications apithe definition of 'on
click' in that specification.
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
the serviceworkerglobalscope.onnotification
click property is an event handler called whenever the notification
click event is dispatched on the serviceworkerglobalscope object, that is when a user
clicks on a displayed notification spawned by serviceworkerregistration.shownotification().
... notifications created on the main thread or in workers which aren't service workers using the notification() constructor will instead receive a
click event on the notification object itself.
... syntax serviceworkerglobalscope.onnotification
click = function(notificationevent) { ...
... }; example self.onnotification
click = function(event) { console.log('on notification
click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status comment notifications apithe definition of 'onnotification
click' in that specification.
msthumbnailclick - Web APIs
the msthumbnail
click event occurs when a user
clicks a button or thumbnail icon in the taskbar.
... syntax event property object.onmsthumbnail
click = handler; addeventlistener method object.addeventlistener("msthumbnail
click", handler, usecapture) general info synchronous no bubbles no cancelable no note the onmsthumbnail
click event is available only to documents that are launched from a pinned site shortcut.
... example function thumbnail
clickhandler(evt) { alert ("
clicked button: " + evt.buttonid); } document.addeventlistener('msthumbnail
click', thumbnail
clickhandler); example 2 // adds 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('msthumbnail
click', onbutton
clicked, 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 onbutton
clicked(e) { switch (e.buttonid) { case btnplay: play(); break;} } see also microsoft api extensions ...
ServiceWorkerGlobalScope: notificationclick event - Web APIs
the notification
click event is fired to indicate that a system notification spawned by serviceworkerregistration.shownotification() has been
clicked.
... bubbles no cancelable no interface notificationevent event handler onnotification
click examples you can use the notification
click event in an addeventlistener method: self.addeventlistener('notification
click', function(event) { console.log('on notification
click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); or...
... use the onnotification
click event handler property: self.onnotification
click = function(event) { console.log('on notification
click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status notifications apithe definition of 'onnotification
click' in that specification.
onclick - SVG: Scalable Vector Graphics
the on
click attribute specifies some script to run when the element is
clicked.
...>, <lineargradient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <script>, <set>, <stop>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" on
click="alert('you have
clicked the circle.')" /> </svg> usage notes value <anything> default value none animatable no specifications specification status comment scalable vector graphics (svg) 2the definition of 'on
click' in that specification.
... candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'on
click' in that specification.
movetoclick - Archive of obsolete content
« xul reference home moveto
click type: boolean if true,
clicking the slide area of the scale moves the thumb directly to that position.
... if false,
clicking the slide area moves the thumb only one increment in that direction.
onclick - Archive of obsolete content
« xul reference home on
click type: script code this event handler is called when the object is
clicked.
... example <image src="hello.png" on
click="alert('hi')"/> see also
click dom element ...
Localizing with Koala
if you
click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines...
...
click add to komodo edit...
...
click "open" to create the project.
...And 19 more matches
Index - Archive of obsolete content
56
clicktoscroll
clicktoscroll, if true, the arrows must be
clicked to scroll the scrollbox content.
... 201 moveto
click no summary!
...a change event is fired in different ways for different xul input elements as listed below: 219 on
click xul attributes, xul reference no summary!
...And 18 more matches
Examine and edit HTML - Firefox Developer Tools
to start searching the markup,
click in the search box to expand it or press ctrl + f , or cmd + f on a mac.
...just to the left of each node is an arrow:
click the arrow to expand the node.
... if you hold the alt key while
clicking the arrow, it expands the node and all the nodes underneath it.
...And 18 more matches
What are browser developer tools? - Learn web development
opera: developer ➤ developer tools context menu: press-and-hold/right-
click an item on a webpage (ctrl-
click on the mac), and choose inspect element from the context menu that appears.
... (an added bonus: this method straight-away highlights the code of the element you right-
clicked.) the inspector: dom explorer and css editor the developer tools usually open by default to the inspector, which looks something like the following screenshot.
... if you don't see the inspector, tap/
click the inspector tab.
...And 17 more matches
Eclipse CDT
if you
click the yellow, double arrow button at the top of the project explorer tab on the left, it will keep the selected file in the project explorer tab in sync with the file that you're currently editing.
...;-) to jump to the definition of a symbol (or the declaration of a symbol if already at the definition), hover over the symbol, hold down the ctrl/cmd key, move the mouse slightly to linkify the symbol, then
click on it.
...if you select one of these classes, then in the method pane to the right the method you searched for will be highlighted (you may need to scroll to it) - double
click to see its definition.
...And 17 more matches
Multiple Firefox profiles
windows windows xp
click the start button.
...
click "run".
... windows vista/7
click the start button.
...And 16 more matches
Debugging on Mac OS X
the
click next.
... name the project and
click next.
... create/select a temporary directory to contain the project and then
click create.
...And 15 more matches
widget - Archive of obsolete content
you can attach panels to them that open when they're
clicked, or you can define a custom
click handler to perform some other action, like opening a web page in a tab.
... we can then use a content script to listen for
clicks on those buttons.
... next, we write a content script that listens for
click events on each icon and sends the corresponding message to the main add-on code: var play_button = document.getelementbyid("play-button"); play_button.on
click = function() { self.port.emit("play"); } var pause_button = document.getelementbyid("pause-button"); pause_button.on
click = function() { self.port.emit("pause"); } var stop_button = document.getelementbyid("stop-button"); stop_button...
...And 14 more matches
Componentizing our Svelte app - Learn web development
add the following content into the file: <script> export let filter = 'all' </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:
click={()=> filter = 'all'} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:
click={()=> filter = 'active'} > <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">...
...tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:
click={()=> filter = 'completed'} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> back in our todos.svelte component, we want to make use of our filterbutton component.
...you'll notice that when you
click on the filter buttons, they are selected and the style updates appropriately.
...And 14 more matches
Migrating from Firebug - Firefox Developer Tools
persist logs in firebug you can
click the persist button within the toolbar to keep the logged messages between page navigations and reloads.
... inspect object properties by
clicking on an object logged within the console you can inspect the object's properties and methods within the dom panel.
...it is currently missing the preview for html, xml and svg, though, which is tracked in bug 1247392 and bug 1262796, but when you
click on the url of the request you switch to the network monitor, which has a preview tab.
...And 14 more matches
Examine and edit CSS - Firefox Developer Tools
highlight matched elements: next to the selector is a target icon:
click this to highlight all nodes in the page that match this selector.
... inactive rules (not shown): if a rule is inactive (e.g., padding on a :visited pseudo-element), it is colored gray, with an info icon that gives more information when
clicked.
... filter rules containing this property: next to overridden declarations is an icon you can
click to filter the rules list to show only those rules that include that property.
...And 14 more matches
Menu - Archive of obsolete content
the menu will be shown when the node is left-
clicked.
...properties property type description command function a function that will be called when the menuitem is
clicked.
... if the menu property is present, command will instead be called when any of the item's descendants is
clicked.
...And 12 more matches
JavaScript basics - Learn web development
the most obvious example is handling the
click event, which is fired by the browser when you
click on something with your mouse.
... to demonstrate this, enter the following into your console, then
click on the current webpage: document.queryselector('html').on
click = function() { alert('ouch!
...here we select the <html> element, setting its on
click handler property equal to an anonymous (i.e.
...And 12 more matches
Network request list - Firefox Developer Tools
network request columns you can toggle columns on and off by right-
clicking on the table header and choosing the specific column from the context menu.
...starting in firefox 76 you can double-
click a column divider to resize the column to the left of it to fit its contents.
...
clicking the column header label sorts the request list by that column.
...And 12 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
ent('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('
click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('
click', function() { if (this.picker_mode === 'hsv') this.setpickermode('hsl'); ...
...ui-dropdown-list'; select.classname = 'ui-dropdown-select'; while (node.firstelementchild !== null) { option = node.firstelementchild; option_value = option.getattribute('data-value'); if (option_value === null) option.setattribute('data-value', uval); list.appendchild(node.firstelementchild); uval++; } node.appendchild(select); node.appendchild(list); select.on
click = this.toggle.bind(this); list.on
click = this.updatevalue.bind(this); document.addeventlistener('
click',
clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; ...
....toggle(false); } this.time = date.now(); }; dropdown.prototype.setnodevalue = function setnodevalue(node, send_notify) { this.value['name'] = node.textcontent; this.value['value'] = node.getattribute('data-value'); this.select.textcontent = node.textcontent; this.select.setattribute('data-value', this.value['value']); if (send_notify !== false) notify.call(this); }; var
clickout = function
clickout(e) { if (active.state === 0 || e.target === active.dropmenu || e.target === active.select) return; active.toggle(false); }; var createdropdown = function createdropdown(topic, options) { var dropdown = document.createelement('div'); dropdown.setattribute('data-topic', topic); dropdown.classname = 'ui-dropdown'; for (var i in options) { var x = ...
...And 12 more matches
Build your own function - Learn web development
urly braces: const html = document.queryselector('html'); const panel = document.createelement('div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); closebtn.on
click = function() { panel.parentnode.removechild(panel); } this is quite a lot of code to go through, so we'll walk you through it bit by bit.
...this button will be what needs to be
clicked/activated when the user wants to close the message box.
... const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); finally, we use an globaleventhandlers.on
click event handler to make it so that when the button is
clicked, some code is run to delete the whole panel from the page — to close the message box.
...And 11 more matches
What is JavaScript? - Learn web development
text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('
click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } try
clicking on this last version of the text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)!
...we used a
click event in our example above to detect when the button is
clicked and then run the code that updates the text label.
...for example, let's return to the block of javascript we saw in our first example: const para = document.queryselector('p'); para.addeventlistener('
click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is
clicked, the updatename() code block (lines 5–8) is run.
...And 11 more matches
Color picker tool - CSS: Cascading Style Sheets
background-repeat: no-repeat; background-position: left 35px top 60%; text-align: right; border: 3px dashed rgb(221, 221, 221); border-radius: 15px; position: absolute; top: 50px; left: 20%; } #canvas[data-tutorial='drop']:after { content: "adjust, change or modify"; width: 40%; font-size: 24px; position: absolute; top: 130px; left: 32%; z-index: 2; } #canvas [data-tutorial='dbl
click'] { background-color: #999 !important; } #canvas [data-tutorial='dbl
click']:before { content: "double
click to activate"; width: 80px; color: #fff; position: absolute; top: 10%; left: 20%; z-index: 2; } #canvas .sample { width: 100px; height: 100px; min-width: 20px; min-height: 20px; position: absolute; border: 1px solid rgba(255, 255, 255, 0.3); } #canvas .sample:hover { cursor...
...ent('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('
click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('
click', function() { if (this.picker_mode === 'hsv') this.setpickermode('hsl'); ...
...e, setpickermode : setpickermode }; })(); /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('
click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; v...
...And 11 more matches
Venkman Introduction - Archive of obsolete content
fortunately, the xpinstall technology makes it possible to install new application modules in firefox by just
clicking a hyperlink.
...first, from within the browser you want to host the debugger application, visit the firefox add-ons page and
click on the "install" link for the most recent version.
...when you enable profiling by
clicking this button, a green checkmark appears next to the button and profile data for every function is collected, and can be saved by choosing save profile data as...
...And 10 more matches
XUL Events - Archive of obsolete content
attribute: onchange
click this event is sent when a mouse button is pressed and released.
... you can determine which mouse button was
clicked by retrieving the button property of the event object.
... this event is also sent when the user double-
clicks with the mouse.
...And 10 more matches
Vue conditional rendering: editing existing todos - Learn web development
copy the following code into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for "{{label}}"</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @
click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button type="submit" class="btn btn__primary"> save <span class="visually-hidden">edit for {{label}}</span> </button> </div> </form> </template> <script> export default { props: { label: { type: string, required: true }, id: { ...
... there is a "save" button and a "cancel" button: when the "save" button is
clicked, the component emits the new label via an item-edited event.
... when the "cancel" button is
clicked, the component signals this by emitting an edit-cancelled event.
...And 10 more matches
Introduction to automated testing - Learn web development
as you
click on the real time testing you will be directed to a screen where you can choose the browser configuration, browser version, os, and screen resolution with which you want to test your website.
... as you
click on the start button, a loading screen will appear, providing you with a vm (virtual machine) based on your configurations.
...
click start a new manual session.
...And 10 more matches
about:debugging - Firefox Developer Tools
in the tools > web developer menu,
click remote debugging.
... if your device doesn't appear in the lefthand side of the about:debugging page, try
clicking the refresh devices button.
...your device should show a popup to authorize your computer to connect to it — accept this and then
click the refresh devices button again.
...And 10 more matches
Event reference
keyup any key is released mouse events event name fired when aux
click a pointing device button (any non-primary button) has been pressed and released on an element.
...
click a pointing device button (any button; soon to be primary button only) has been pressed and released on an element.
... contextmenu the right button of the mouse is
clicked (before the context menu is displayed).
...And 10 more matches
ContextMenus - Archive of obsolete content
a typical usage is for the user to right-
click on an element to display a menu of commands pertaining to what was
clicked on.
...the most common is by
clicking on an element with the right mouse button.
... on macintosh systems with only one mouse button, a context menu may be opened by either holding down the mouse button or by pressing the control key and
clicking the mouse button.
...And 9 more matches
Practical positioning examples - Learn web development
you might be thinking "why not just create the separate tabs as separate webpages, and just have the tabs
clicking through to the separate pages to create the effect?" this code would be simpler, yes, but then each separate "page" view would actually be a newly-loaded webpage, which would make it harder to save information across views, and integrate this feature into a larger ui design.
...the unordered list contains three list items with links inside, which will become the actual tabs to
click on for displaying our content panels.
... styling our tabs now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are
clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page.
...And 9 more matches
How to build custom form controls - Learn web development
the control was active and the user
clicks anywhere outside it.
... the control is in its active state when: the user
clicks on it or touches it on a touch screen.
... the control was in its open state and the user
clicks on it.
...And 9 more matches
Eclipse CDT Manual Setup
after selecting an appropriate directory,
click ok, then close the "welcome" tab when the main eclipse window opens.
... select "general > content types", expand "text > c source file > c++ source file",
click "add" and add "*.mm".
...in the "import existing code" window that opens, enter a meaningful project name that identifies your mozilla source tree, set the code location to the root of your source tree, select an appropriate toolchain (e.g., "macosx gcc"), and
click finish.
...And 9 more matches
Storage access policy: Block cookies from trackers
alternatively you can report broken sites directly in firefox by
clicking "report a problem" in the content blocking section of the control center (this shortcut may not be available in all versions of firefox).
...if you are presented with a page that warns you "this may void your warranty!",
click "i accept the risk!" search for the preference name "urlclassifier.trackingannotationtable.testentries".
... if the preference does not exist,
click "string" and then "+" to create a new preference.
...And 9 more matches
Rich-Text Editing in Mozilla - Developer guides
the function executed the requested command using execcommand() and then sets focus back to the editable document, as
clicking on a button will set focus on the button itself, which breaks the editing flow.
... figure 4 : executing rich editing commands html: <button on
click="doricheditcommand('bold')" style="font-weight:bold;">b</button> javascript: function doricheditcommand(aname, aarg){ getiframedocument('editorwindow').execcommand(aname,false, aarg); document.getelementbyid('editorwindow').contentwindow.focus() } example: a simple but complete rich text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!d...
...en">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" on
click="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqka...
...And 9 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
to respond to mouse and keyboard inputs in html, the on
click event handler is typically used to respond to mouse
clicks, and the onkeypress event handler for keyboard input.
... xul can also use these event handlers, but xul also offers the oncommand special event handler to deal with actions that often have specific meanings, such as selection by a left-
click (or right-
click on systems set up as left-handed) on the mouse or selection by the enter key.
... contextual menus the context attribute is used to display a contextual menu or shortcut menu, that is, a custom menu that will appear when right-
clicking on an element.
...And 8 more matches
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.
...on the macintosh for example, the user can either press the control key and
click the mouse button, or hold the mouse button down for a moment.
...we do this because we only want the popup to appear when the user
clicks in a certain area of a window.
...And 8 more matches
XUL Event Propagation - Archive of obsolete content
the user
clicks a button in the interface.
...in this case, the event raised was the "
click" event, but a variety of events can be raised by the button element.
...and sometimes elements raise different events for the pressing down of the
click and the release.
...And 8 more matches
React interactivity: Events and state - Learn web development
for example: const btn = document.queryselector('button'); btn.addeventlistener('
click', () => { alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like this: <button type="button" on
click={() => alert("hi!")} > say hi!
... in the above example, we're adding an on
click attribute to the <button> element.
... the on
click attribute has special meaning here: it tells react to run a given function when the user
clicks on the button.
...And 8 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
when the first button is
clicked, we'll emit a checkall event to signal that all the todos should be checked/unchecked.
... when the second button is
clicked, we'll emit a removecompleted event to signal that all of the completed todos should be removed.
...ur moreactions.svelte file: <script> import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() let completed = true const checkall = () => { dispatch('checkall', completed) completed = !completed } const removecompleted = () => dispatch('removecompleted') </script> <div class="btn-group"> <button type="button" class="btn btn__primary" on:
click={checkall}>{completed ?
...And 8 more matches
Profiling with the Firefox Profiler
ranges ranges of time can be zoomed in on by
clicking and dragging anywhere in the tracing marker or thread areas.
...
clicking on a tracing marker will create a selection corresponding with its duration allowing for easy zooming in on interesting time ranges.
...also note that you can
click on timeline elements (the selected element gets darker when selected) and the tree view (see below) reflects the selected element.
...And 8 more matches
Work with animations - Firefox Developer Tools
if you
click the icon, it enlarges and changes to color, and the name of the browser appears.
...
click the icon again to reverse the effect.
... right-
click in the box and select "inspect element" make sure the selected element is the <div class="channel"> switch over to the "animations" tab play the animation let's take a closer look at the contents of the animation inspector here: it shows a synchronized timeline for every animation applied to the selected element or its children.
...And 8 more matches
Window.open() - Web APIs
*/ }; } </script> (...) <p><a href="http://www.spreadfirefox.com/" target="promotefirefoxwindowname" on
click="openffpromotionpopup(); return false;" title="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> the above code solves a few usability problems related to links opening secondary window.
... the purpose of the return false in the code is to cancel default action of the link: if the on
click event handler is executed, then there is no need to execute the default action of the link.
... but if javascript support is disabled or non-existent on the user's browser, then the on
click event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "promotefirefoxwindowname".
...And 8 more matches
ARIA: button role - Accessibility
the button role should be used for
clickable elements that trigger a response when activated by the user.
...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.
...for example, if
clicking the button opens a dialog, the focus should move to the dialog.
...And 8 more matches
Handling common accessibility problems - Learn web development
click the gear icon that will appear, then select css > disable all styles.
...to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.on
click(e); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard.
... we check what button was pressed via the event object's keycode property; if it is the keycode that matches return/enter, we run the function stored in the button's on
click handler using document.activeelement.on
click().
...And 7 more matches
Edit Shape Paths in CSS - Firefox Developer Tools
clicking the icon will cause the editor to highlight the shape.
... to deactivate the shape path editor
click on the icon again, or select another element or a different editor.
...options can be accessed by activating the shape path editor with a regular
click on the icon, and you can use the context menu (ctrl/cmd +
click) to access additional functionality.
...And 7 more matches
about:debugging (before Firefox 68) - Firefox Developer Tools
in the tools > web developer menu,
click "service workers".
... if you
click "debug", you'll see a dialog asking you to accept an incoming connection.
...
click "ok", and the add-on debugger will start in a separate window.
...And 7 more matches
Element - Web APIs
for example, the browser might fire this event when the user presses the esc key or
clicks a "close dialog" button which is part of the browser's ui.
... mouse events aux
click fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
... also available via the onaux
click property.
...And 7 more matches
Signaling and video calling - Web APIs
this requires video elements, and a button to hang up the call: <div class="flexchild" id="camera-container"> <div class="camera-box"> <video id="received_video" autoplay></video> <video id="local_video" autoplay muted></video> <button id="hangup-button" on
click="hangupcall();" disabled> hang up </button> </div> </div> the page structure defined here is using <div> elements, giving us full control over the page layout by enabling the use of css.
... finally, the "hangup-button" <button>, to disconnect from a call, is defined and configured to start disabled (setting this as our default for when no call is connected) and apply the function hangupcall() on
click.
... function handleuserlistmsg(msg) { var i; var listelem = document.queryselector(".userlistbox"); while (listelem.firstchild) { listelem.removechild(listelem.firstchild); } msg.users.foreach(function(username) { var item = document.createelement("li"); item.appendchild(document.createtextnode(username)); item.addeventlistener("
click", invite, false); listelem.appendchild(item); }); } after getting a reference to the <ul> which contains the list of user names into the variable listelem, we empty the list by removing each of its child elements.
...And 7 more matches
Making content editable - Developer guides
en">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" on
click="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqka...
...iskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print" on
click="printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptrxzqtni3mrwupc+6cktlxz/sddp2uu9uxlmyxz6qm8v4tz8lhf1h+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmtpx80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0...
...7dtgdegxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" on
click="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/dzmice3/c4nbqbads=" /> <img class="intlink" title="redo" on
click="formatdoc('redo');" src="data:image/gif;base64,r0lgodlhfgawamihab1chdljwl9vj1ie34kl...
...And 7 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).
... value a domstring used as the button's label events
click supported common attributes type, and value idl attributes value methods none value an <input type="button"> elements' value attribute contains a domstring that is used as the button's label.
... <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 7 more matches
Interacting with page scripts - Archive of obsolete content
expose objects to page scripts until firefox 30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.getelementbyid("show-content-script-var"); button.addeventlistener("
click", function() { // access object defined by content script console.log(window.contentscriptobject.greeting); // "hello from add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects.
...n 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.addeventlistener("
click", function() { alert(clonedcontentscriptobject.greeting); }, false); var fails = document.getelementbyid("fails"); fails.addeventlistener("
click", function() { alert(assignedcontentscriptobject.greeting); }, false); </script> </body> </html> if you run the example,
clicking "i will work" displays the value of "greeting" in an alert.
...
clicking "i will not work" fails, and the following message is logged: permission denied to access property 'greeting' expose functions to page scripts the structured clone algorithm is a bit more powerful than simple json serialization, but not much: in particular, functions aren't cloned.
...And 6 more matches
Reddit Example - Archive of obsolete content
when the user
clicks on the title of a story in the panel, the add-on opens the linked story in a new tab in the main browser window.
... to accomplish this the add-on needs to run a content script in the context of the reddit page which intercepts mouse
clicks on each title link and fetches the link's target url.
... this is the complete add-on script: var data = require("sdk/self").data; var button = require("sdk/ui/button/action").actionbutton({ id: "reddit-panel", label: "reddit panel", icon: "./icon-16.png", on
click: function() { reddit_panel.show(); } }); var reddit_panel = require("sdk/panel").panel({ width: 240, height: 320, contenturl: "http://www.reddit.com/.mobile?keep_extension=true", contentscriptfile: [data.url("jquery-2.1.0.min.js"), data.url("panel.js")] }); reddit_panel.port.on("
click", function(url) { require("sdk/tabs").open(url); }); this code supplies two content scripts to the panel's constructor in the contentscriptfile option: the jquery library and the script that...
...And 6 more matches
Content Scripts - Archive of obsolete content
for example, this content script will fail with the error "themessage is not defined": var themessage = "hello from content script!"; anelement.setattribute("on
click", "alert(themessage);"); second, if you define an event listener by direct assignment to a global event handler like on
click, then the assignment might be overridden by the page.
... for example, here's an add-on that tries to add a
click handler by assignment to window.on
click: var myscript = "window.on
click = function() {" + " console.log('unsafewindow.on
click: ' + window.document.title);" + "}"; require("sdk/page-mod").pagemod({ include: "*", contentscript: myscript, contentscriptwhen: "start" }); this will work fine on most pages, but will fail on pages which also assign to on
click: <html> <head> </head> <body> <script> window.on
click = function() { window.alert("it's my
click now!"); } </script> </body> </html> for these reasons, it's better to add event listeners using addeventlistener(), defining the listener as a function: var themessage = "hello from content script!"; anelement.on
click = fun...
...ction() { alert(themessage); }; anotherelement.addeventlistener("
click", function() { alert(themessage); }); communicating with the add-on to enable add-on scripts and content scripts to communicate with each other, each end of the conversation has access to a port object.
...And 6 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
true javascript.options.strict (present in firefox 3.5+) enforces strict error output from javascript true table 1: preferences to set for developing extensions to make these changes, start your development profile, type about:config into firefox’s location bar and open the preferences window; find the preferences listed in table 1 and double-
click on them to set them accordingly.
... some of these preferences do not exist—to create them, right-
click, select “new>boolean”, and type in the name and set the value accordingly.
... type chrome://browser/content/browser.xul into the url input field at the top, then
click the inspect button.
...And 6 more matches
HTML: A good basis for accessibility - Learn web development
<h1>links</h1> <p>this is a link to <a href="https://www.mozilla.org">mozilla</a>.</p> <p>another link, to the <a href="https://developer.mozilla.org">mozilla developer network</a>.</p> <h2>buttons</h2> <p> <button data-message="this is from the first button">
click me!</button> <button data-message="this is from the second button">
click me too!</button> <button data-message="this is from the third button">and me!</button> </p> <h2>form</h2> <form> <div> <label for="name">fill in your name:</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">enter your age:</label> <input type="text" id="age" name="age"...
...for example, you sometimes see buttons marked up using <div>s, for example: <div data-message="this is from the first button">
click me!</div> <div data-message="this is from the second button">
click me too!</div> <div data-message="this is from the third button">and me!</div> but using such code is not advised — you immediately lose the native keyboard accessibility you would have had if you'd just used <button> elements, plus you don't get any of the default css styling that buttons get.
...here we've given our fake <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0": <div data-message="this is from the first button" tabindex="0">
click me!</div> <div data-message="this is from the second button" tabindex="0">
click me too!</div> <div data-message="this is from the third button" tabindex="0">and me!</div> basically, the tabindex attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order.
...And 6 more matches
HTML: A good basis for accessibility - Learn web development
<h1>links</h1> <p>this is a link to <a href="https://www.mozilla.org">mozilla</a>.</p> <p>another link, to the <a href="https://developer.mozilla.org">mozilla developer network</a>.</p> <h2>buttons</h2> <p> <button data-message="this is from the first button">
click me!</button> <button data-message="this is from the second button">
click me too!</button> <button data-message="this is from the third button">and me!</button> </p> <h2>form</h2> <form> <div> <label for="name">fill in your name:</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">enter your age:</label> <input type="text" id="age" name="age"...
...for example, you sometimes see buttons marked up using <div>s, for example: <div data-message="this is from the first button">
click me!</div> <div data-message="this is from the second button">
click me too!</div> <div data-message="this is from the third button">and me!</div> but using such code is not advised — you immediately lose the native keyboard accessibility you would have had if you'd just used <button> elements, plus you don't get any of the default css styling that buttons get.
...here we've given our fake <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0": <div data-message="this is from the first button" tabindex="0">
click me!</div> <div data-message="this is from the second button" tabindex="0">
click me too!</div> <div data-message="this is from the third button" tabindex="0">and me!</div> basically, the tabindex attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order.
...And 6 more matches
Creating hyperlinks - Learn web development
almost any web content can be converted to a link so that when
clicked or otherwise activated the web browser goes to another web address (url).
... of course, the location of the project-brief.pdf file and pdfs folder won't suddenly change because you moved the index.html file — this would make your link point to the wrong place, so it wouldn't work if
clicked on.
... let's look at a specific example: good link text: download firefox <p><a href="https://firefox.com/"> download firefox </a></p> bad link text:
click here to download firefox <p><a href="https://firefox.com/">
click here </a> to download firefox</p> other tips: don't repeat the url as part of the link text — urls look ugly, and sound even uglier when a screen reader reads them out letter by letter.
...And 6 more matches
Setting up your own test automation environment - Learn web development
there are other ways, but the best way to use selenium is via webdriver, a powerful api that builds on top of selenium and makes calls to a browser to automate it, carrying out actions such as "open this web page", "move over this element on the page", "
click this link", "see whether the link opens this url", etc.
...quire('selenium-webdriver'), by = webdriver.by, until = webdriver.until; const driver = new webdriver.builder() .forbrowser('firefox') .build(); driver.get('http://www.google.com'); driver.findelement(by.name('q')).sendkeys('webdriver'); driver.sleep(1000).then(function() { driver.findelement(by.name('q')).sendkeys(webdriver.key.tab); }); driver.findelement(by.name('btnk')).
click(); driver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { console.log('test passed'); } else { console.log('test failed'); } driver.quit(); }); }); in terminal, make sure you are inside your project folder, then enter the following command: node google_test you should see an instance of ...
...google should automatically be loaded in a tab, "webdriver" should be entered in the search box, and the search button will be
clicked.
...And 6 more matches
Application Translation with Mercurial
check what is available for translation find out on which branch localization is done for your locale: read your localization team's page by
clicking on the team with your language code (e.g.
... next check what is still untranslated by going to localization status page and
click on the page for your language.
... the following resources can help figuring out the translation style and translate according to them: check your localization team's page by
clicking on the team with your language code (e.g.
...And 6 more matches
Tutorial: Set a breakpoint - Firefox Developer Tools
to do this, open the firefox developer tools,
click on the options gear at the upper right of the toolbox, and make sure that both “enable browser chrome and add-on debugging toolboxes” and “enable remote debugging” are checked.
... save the following text to an html file: <div on
click="report('the best div');">
click me!</div> <div on
click="report('another great div');">or me!</div> <script> function report(what) { console.log('
clicked: ' + what); } </script> visit the html file in your browser, and open the browser content toolbox by opening the firefox menu, choosing “web developer”, and then “browser content toolbox”.
...to enable it,
click on the options gear at the upper right of the browser content toolbox, and make sure the “scratchpad” box in the “default developer tools” section the left is checked.
...And 6 more matches
Border-image generator - CSS: Cascading Style Sheets
t: left; } javascript content 'use strict'; /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('
click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; v...
...ar start_value = 0; slider.addeventlistener("
click", function(e) { document.removeeventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mouseup", slideend); document.addeventlistener("mousemove", slidermotion); }); var slideend = function slideend(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.
...ui-dropdown-list'; select.classname = 'ui-dropdown-select'; while (node.firstelementchild !== null) { option = node.firstelementchild; option_value = option.getattribute('data-value'); if (option_value === null) option.setattribute('data-value', uval); list.appendchild(node.firstelementchild); uval++; } node.appendchild(select); node.appendchild(list); select.on
click = this.toggle.bind(this); list.on
click = this.updatevalue.bind(this); document.addeventlistener('
click',
clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; ...
...And 6 more matches
Creating a cross-browser video player - Developer guides
most of these buttons require a simple
click event listener to be added, and a media api defined method and/or attributes to be called/checked on the video.
... play/pause playpause.addeventlistener('
click', function(e) { if (video.paused || video.ended) video.play(); else video.pause(); }); when a
click event is detected on the play/pause button, the handler first of all checks if the video is currently paused or has ended (via the media api's paused and ended attributes); if so, it uses the play() method to playback the video.
... stop stop.addeventlistener('
click', function(e) { video.pause(); video.currenttime = 0; progress.value = 0; }); the media api doesn't have a stop method, so to mimic this the video is paused, and its currenttime (i.e.
...And 6 more matches
panel - Archive of obsolete content
for example, here's an add-on whose content script intercepts mouse
clicks on links inside the panel, and sends the target url to the main add-on code.
... var myscript = "window.addeventlistener('
click', function(event) {" + " var t = event.target;" + " if (t.nodename == 'a')" + " self.port.emit('
click-link', t.tostring());" + "}, false);" var mypanel = require("sdk/panel").panel({ contenturl: "http://www.bbc.co.uk/mobile/index.html", contentscript: myscript }); mypanel.port.on("
click-link", function(url) { console.log(url); }); mypanel.show(); this example uses contentscript to supply the script as a string.
... the following add-on adds a button which displays a panel when
clicked.
...And 5 more matches
Creating annotations - Archive of obsolete content
the matched element is highlighted and has a
click handler bound to it which sends a message to the main add-on code.
...it is initially off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor); (matchedelement).unbind('
click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter event.
... if the page element is eligible for annotation, then the selector highlights that element and binds a
click handler to it.
...And 5 more matches
Implementing the widget - Archive of obsolete content
we want the widget to do two things: on a left-
click, the widget should activate or deactivate the annotator.
... on a right-
click, the widget should display a list of all the annotations the user has created.
... because the widget's
click event does not distinguish left and right mouse
clicks, we'll use a content script to capture the
click events and send the corresponding message back to our add-on.
...And 5 more matches
Storing annotations - Archive of obsolete content
this is implemented as a panel that's shown in response to the widget's right-
click message.
...ge(storedannotations) { var annotationlist = $('#annotation-list'); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.url').text(storedannotation.url) .attr('href', storedannotation.url); annotationhtml.find('.url').bind('
click', function(event) { event.stoppropagation(); event.preventdefault(); self.postmessage(storedannotation.url); }); annotationhtml.find('.selection-text') .text(storedannotation.anchortext); annotationhtml.find('.annotation-text') .text(storedannotation.annotationtext); annotationlist.append(annotationhtml); ...
... the user will be able to
click links in the panel, but we want to open them in the main browser window rather than the panel.
...And 5 more matches
JavaScript Daemons Management - Archive of obsolete content
r); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>new daemon(<em>@thisobject</em>, <em>@callback</em>[, <em>@rate</em>, <em>@length</em>, <em>@init</em>, <em>@onstart</em>])</h1> <p><button on
click="orecompose.skipto(11);">skipto(11)</button> <button on
click="orecompose.makesteps(29);">makesteps(29)</button> <button on
click="orecompose.fixposition(-13);">fixposition(-13)</button> <button on
click="orecompose.play();">play</button> <button on
click="orecompose.turn();">turn</button> <button on
click="orecompose.pause();">pause</button> <button on
click="orecompose.reverseplay();">reverseplay</bu...
...tton> <button on
click="orecompose.reversals = 2;alert('changed');">two reversals</button> <button on
click="orecompose.makeloop();alert('changed');">makeloop</button> <button on
click="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button on
click="orecompose.close();">close</button> <button on
click="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" onkeypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" onkeyup="if(isfinite(this.value)&&number(this.value)>0){orecompose.setrate(this.value);}" /></p> </body> </html> example #2: a practical instantiation – daemon.buildaround() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> ...
... = function () { ounhide.owner.target.id = "animate-me"; document.body.appendchild(ounhide.owner.target); ounhide.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>daemon.buildaround()</h1> <p><button on
click="ounhide.skipto(11);">skipto(11)</button> <button on
click="ounhide.makesteps(29);">makesteps(29)</button> <button on
click="ounhide.fixposition(-13);">fixposition(-13)</button> <button on
click="ounhide.play();">play</button> <button on
click="ounhide.turn();">turn</button> <button on
click="ounhide.pause();">pause</button> <button on
click="ounhide.reverseplay();">reverseplay</button> <button on
click...
...And 5 more matches
OpenClose - Archive of obsolete content
for instance, a menu's popup will open when the menu label is
clicked, and a submenu will open when the mouse is hovered over the parent menu element.
...a user may also cancel selecting from a menu by
clicking outside the menu.
... popups attached using the popup attribute will be opened when the user
clicks the mouse with the left mouse button.
...And 5 more matches
Panels - Archive of obsolete content
clicking outside the panel or pressing escape will close the panel.
... <label value="search" popup="search-panel"/> <panel id="search-panel"> <label control="search" value="terms:"/> <textbox id="search"/> </panel> to attach a panel to an non-button element, for instance to have a panel open when a label is
clicked, use the popup attribute.
...this causes the panel to be displayed not where the mouse was
clicked but aligned along the bottom edge of the label.
...And 5 more matches
panel - Archive of obsolete content
the panel is closed when the user
clicks outside the panel, presses escape or when the panel's hidepopup method is called.
... attributes backdrag, close, consumeoutside
clicks, fade, flip, ignorekeys, label, left, level, noautofocus, noautohide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may be attached to a label.
... <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> <button label="read mail"/> <button label="new message"/> </hbox> </vbox> </hbox> </panel> <description value="6 new messages" popup="thepanel"/> attributes backdrag type: boolean setting the backdrag attribute on a xul panel lets the user move the panel by
clicking and dragging anywhere on its background area.
...And 5 more matches
Working with Svelte stores - Learn web development
give it the following content: <script> import { alert } from '../stores.js' import { ondestroy } from 'svelte' let alertcontent = '' const unsubscribe = alert.subscribe(value => alertcontent = value) ondestroy(unsubscribe) </script> {#if alertcontent} <div on:
click={() => alertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.5rem; margin-left: 1.5rem; margin-top: 1rem; right: 0; display: flex; align-items: center; border-radius: 0.2rem; background-color: #565656; color: #fff; font-size: 0.875rem; font-weight: 700; padding: 0.5rem 1.4rem; font-size: 1.5rem; ...
... finally we use the alertcontent variable in our markup, and if the user
clicks on the alert we clean it.
...you may
click on it to dismiss it.
...And 5 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
let's add a handler to the on:
click event of the checkbox input to toggle the completed value.
... update the <input type="checkbox"> element inside src/components/todos.svelte as follows: <input type="checkbox" id="todo-{todo.id}" on:
click={() => todo.completed = !todo.completed} checked={todo.completed} /> next we'll add a function to remove a todo from our todos array.
...update it with a
click event, like so: <button type="button" class="btn btn__danger" on:
click={() => removetodo(todo)} > delete <span class="visually-hidden">{todo.name}</span> </button> a very common mistake with handlers in svelte is to pass the result of executing a function as a handler, instead of passing the function.
...And 5 more matches
Web Replay
there are a few ways to start recording a tab: record current tab open the developer tools and
click the button indicated below.
... it can be
clicked again to stop recording.
... open a new tab in recording mode
click the 'tools -> web developer -> web replay -> reload and record tab' menu item.
...And 5 more matches
Thunderbird Configuration Files
if you are on mac os x, and on linux do edit > preferences on, select the advanced options panel,
click on the general tab, and
click on config editor.
... double-
click on a preference to change its value.
... to do add a new preference, open the context menu (right-
click) on any existing preference, go to the new menu, and select the type of preference.
...And 5 more matches
Using the MediaStream Recording API - Web APIs
checkbox hack for showing/hiding this is fairly well documented already, but we thought we'd give a mention to the checkbox hack, which abuses the fact that you can
click on the <label> of a checkbox to toggle it checked/unchecked.
... in web dictaphone this powers the information screen, which is shown/hidden by
clicking the question mark icon in the top right hand corner.
... first of all, we style the <label> how we want it, making sure that it has enough z-index to always sit above the other elements and therefore be focusable/
clickable: label { font-family: 'notocoloremoji'; font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[type=checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0;...
...And 5 more matches
Simple color animation - Web APIs
the user can start, stop and restart the animation by
clicking the button.
...a
click event handler additionally enables the basic user interaction of starting and stopping the animation.
... <p>a simple webgl program that shows color animation.</p> <p>you can
click the button below to toggle the color animation on or off.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } ...
...And 5 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
window.addeventlistener("load", onload); function onload() { xrbutton = document.queryselector("#enter-xr"); xrbutton.addeventlistener("
click", onxrbutton
click); projectionmatrixout = document.queryselector("#projection-matrix div"); modelmatrixout = document.queryselector("#model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.queryselector("#mouse-matrix div"); if (!navigator.xr || enableforcepolyfill) { console.log("using the polyfill"); polyfill = new ...
...webxrpolyfill(); } setupxrbutton(); } the load event handler gets a reference to the button that toggles webxr on and off into xrbutton, then adds a handler for
click events.
... the webxr session is toggled on and off by the handler for
click events on the button, whose label is appropriately set to either "enter webxr" or "exit webxr".
...And 5 more matches
DOM onevent handlers - Developer guides
events are actions like: being
clicked detecting pressed keys getting focus the onevent handler is usually named with the event it reacts to, like on
click, onkeypress, onfocus, etc.
... you can specify an on<…> event handler for a particular event (such as
click) for a given object in different ways: adding an html attribute named on<eventtype>: <button on
click="handle
click()">, or by setting the corresponding property from javascript: document.queryselector("button").on
click = function(event) { … }.
...for example, given a button object mybutton, you can do mybutton.on
click(myeventobject) to call the event handler directly.
...And 5 more matches
Add a Context Menu Item - Archive of obsolete content
when it's
clicked, the selection is sent to the main add-on code, which just logs it: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("
click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', onmessage: function (selectiontext) { console.log(selectiontext); } }); try it: run the a...
...dd-on, load a web page, select some text and right-
click.
... you should see the new item appear:
click it, and the selection is logged to the console (or the shell, if you're running an instance of firefox from the command line): info: elephantine lizard details all this add-on does is to construct a context menu item.
...And 4 more matches
Forms related code snippets - Archive of obsolete content
ncrmonth.innerhtml = "\u003e"; /* > */ oincryear.innerhtml = "\u00bb"; /* » */ odecryear.id = sprefs + "-decr-year-" + nid; odecrmonth.id = sprefs + "-decr-month-" + nid; oincrmonth.id = sprefs + "-incr-month-" + nid; oincryear.id = sprefs + "-incr-year-" + nid; odecryear.onmousedown = oincryear.onmousedown = odecrmonth.onmousedown = oincrmonth.onmousedown = onhead
click; for (var nthid = 0; nthid < 7; nthid++) { oth = document.createelement("th"); oth.innerhtml = sdays[nthid]; ohrow.appendchild(oth); } othead.appendchild(ohrow); ocapt.appendchild(odecryear); ocapt.appendchild(odecrmonth); ocapt.appendchild(oincryear); ocapt.appendchild(oincrmonth); ocapt.appendchild(this.display); this.container.appendchild(ocapt); this.co...
...ntainer.appendchild(othead); this.current.setdate(1); this.writedays(); otarget.on
click = function () { if (otable.parentnode) { otable.parentnode.removechild(otable); return; } otable.style.zindex = nzindex++; otable.style.position = "absolute"; otable.style.left = otarget.offsetleft + "px"; otable.style.top = (otarget.offsettop + otarget.offsetheight) + "px"; otarget.parentnode.insertbefore(otable, otarget); }; ainstances.push(this); } datepicker.prototype.writedays = function () { const nendblanks = (this.current.getday() + bzeroismonday * 6) % 7, nend = amonthlengths[this.current.getmonth()] + nendblanks, ntotal = nend + ((7 - nend % 7) % 7); var otd, otr; if (this...
...; niter < ntotal; niter++) { if (niter % 7 === 0) { otr = document.createelement("tr"); this.otbody.appendchild(otr); } nday = niter - nendblanks + 1; otd = document.createelement("td"); if (niter + 1 > nendblanks && niter < nend) { otd.classname = sprefs + "-active-cell"; otd.id = sprefs + "-day-" + this.id + "-" + nday; otd.on
click = onday
click; otd.appendchild(document.createtextnode(nday)); } else { otd.classname = sprefs + "-empty-cell"; } otr.appendchild(otd); } this.display.innerhtml = smonthsnames[this.current.getmonth()] + " " + this.current.getfullyear(); this.container.appendchild(this.otbody); }; function ondoc
click (opssevt) { const oevt = opssevt || /* ie ...
...And 4 more matches
Building accessible custom components in XUL - Archive of obsolete content
the individual cells, row headers, and column headers are not in the tab order, but we can still set focus to them programmatically using javascript whenever the user
clicks a specific cell.
... but since the individual cells are not in the tab order,
clicking on a spreadsheet cell and tabbing off will move to the spreadsheet's next sibling control, which is what we want.
...<code> var gfocuscell = null; function install_handlers() { var spreadsheet = window.document.getelementbyid('accjaxspreadsheet'); spreadsheet.addeventlistener('focus', spreadsheet_focus, true); spreadsheet.addeventlistener('
click', spreadsheet_
click, true); } function spreadsheet_focus(e) { if (e.target.tagname == 'grid') { if (!gfocuscell) { gfocuscell = e.target.getelementsbytagname('label')[0]; } gfocuscell.focus(); } else { gfocuscell = e.target; } } function spreadsheet_
click(e) { e.target.focus(); } </code> finally, we'll add two lines to our .xul file to...
...And 4 more matches
Extensions - Archive of obsolete content
normally, this menu displays menu items specific to what was context
clicked or focused.
...for instance, if an image was context
clicked, you may wish to hide the menu item you have added if the operation it performed wouldn't apply to images.
... determining what element was context
clicked for general information about how to determine which element was the target of the context menu, that is, the element that was context
clicked, see determining what was context
clicked firefox uses its own popupshowing event listener to adjust the items on the context menu.
...And 4 more matches
menupopup - Archive of obsolete content
when the element is
clicked with the left mouse button, the menupopup will be displayed.
...a context menu may be opened by right-
clicking the element, or by pressing the menu key on the keyboard.
...when the label is right-
clicked, the menu will be displayed.
...And 4 more matches
Introducing asynchronous JavaScript - Learn web development
let's look at a simple example (see it live here, and see the source): const btn = document.queryselector('button'); btn.addeventlistener('
click', () => { alert('you
clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); in this block, the lines are executed one after the other: we grab a reference to a <button> element that is already available in the dom.
... we add a
click event listener to it so that when the button is
clicked: an alert() message appears.
... so in the example above, after you've
clicked the button the paragraph won't appear until after the ok button is pressed in the alert box.
...And 4 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
a more accurate way would be to run starttime = date.now() to get a timestamp of exactly when the user
clicked the start button, and then do date.now() - starttime to get the number of milliseconds after the start button was
clicked.
... for instance, the code below (see it live) outputs an alert containing "hello", then an alert containing "world" as soon as you
click ok on the first alert.
... just pass it the value returned by the requestanimationframe() call to cancel, which you stored in the variable raf: cancelanimationframe(raf); active learning: starting and stopping our spinner in this exercise, we'd like you to test out the cancelanimationframe() method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is
clicked anywhere on the page.
...And 4 more matches
Video and Audio APIs - Learn web development
first of all, add the following to the bottom of your code, so that the playpausemedia() function is invoked when the play button is
clicked: play.addeventlistener('
click', playpausemedia); now to define playpausemedia() — add the following, again at the bottom of your code: function playpausemedia() { if(media.paused) { play.setattribute('data-icon','u'); media.play(); } else { play.setattribute('data-icon','p'); media.pause(); } } here we use an if statement to check whether the video is pau...
... on the second
click, the button will be toggled back again — the "play" icon will be shown again, and the video will be paused with htmlmediaelement.pause().
...add the following addeventlistener() lines below the previous one you added: stop.addeventlistener('
click', stopmedia); media.addeventlistener('ended', stopmedia); the
click event is obvious — we want to stop the video by running our stopmedia() function when the stop button is
clicked.
...And 4 more matches
A first splash into JavaScript - Learn web development
lastresult.textcontent = 'wrong!'; lastresult.style.backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcontent = 'last guess was too low!' ; } else if(userguess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; } guesssubmit.addeventlistener('
click', checkguess); function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.addeventlistener('
click', resetgame); } function resetgame() { guesscount = 1; const resetparas = doc...
...events are things that happen in the browser — a button being
clicked, a page loading, a video playing, etc.
... add the following line below your checkguess() function: guesssubmit.addeventlistener('
click', checkguess); here we are adding an event listener to the guesssubmit button.
...And 4 more matches
Framework main features - Learn web development
as an example, consider a button that counts how many times it has been
clicked.
... this component should be responsible for tracking its own count state, and could be written like this: function counterbutton() { const [count] = usestate(0); return ( <button>
clicked {count} times</button> ); } usestate() is a react hook which, given an initial data value, will keep track of that value as it is updated.
... the code will be initially rendered like so in the browser: <button>
clicked 0 times</button> the usestate() call keeps track of the count value in a robust way across the app, without you needing to write code to do that yourself.
...And 4 more matches
mozbrowsercontextmenu
details the details property returns an anonymous javascript object with the following properties: clientx the x value of the coordinate that was
clicked inside the browser <iframe>'s viewport.
... clienty the y value of the coordinate that was
clicked inside the browser <iframe>'s viewport.
...for example, if the user
clicked on an image nested in an <a> tag, two menus are available — one with information related to the image, and one for the link.
...And 4 more matches
Localizing with Pontoon
to begin localizing the project,
click on the persona icon and sign in.
...
click on it to enable the translate mode.
...
click the save button to save your translation.
...And 4 more matches
nsIAlertsService
implemented by: @mozilla.org/alerts-service;1 as a service: var alertsservice = components.classes["@mozilla.org/alerts-service;1"] .getservice(components.interfaces.nsialertsservice); method overview void showalertnotification(in astring imageurl, in astring title, in astring text, [optional] in boolean text
clickable, [optional] in astring cookie, [optional] in nsiobserver alertlistener, [optional] in astring name, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprincipal principal,[optional] in boolean inprivatebrowsing); void closealert([optional] in astring name, [optional] in nsiprincipal principal); methods showalertnotification() ...
... void showalertnotification( in astring imageurl, in astring title, in astring text, in boolean text
clickable, optional in astring cookie, optional in nsiobserver alertlistener, optional in astring name, optional in astring dir, optional in astring lang, optional in astring data, optional in nsiprincipal principal, optional in boolean inprivatebrowsing, optional ); parameters imageurl a url identifying the image to display in the notification alert.
... text
clickable optional if true, if the user
clicks on it, the listener is notified; when hovered the notification background becomes lighter and the cursor turns to a pointer.
...And 4 more matches
nsIDOMWindowUtils
ong akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); obsolete since gecko 15.0 boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in unsigned long aadditionalflags); deprecated since gecko 38.0 void sendmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long a
clickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void sendmouseeventtowindow(in astring atype, in float ax, in float ay, in long abutton, in long a
clickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void sendmousescrollevent(in astring atype, in float ax, in float ay, in long abutton, in long ascrollflags, in long adelta, in l...
...for instance, typically a
click event will be fired as a result of a mousedown and mouseup in sequence.
... void sendmouseevent( in astring atype, in float ax, in float ay, in long abutton, in long a
clickcount, in long amodifiers, in boolean aignorerootscrollframe optional ); parameters atype event type.
...And 4 more matches
Accessibility Inspector - Firefox Developer Tools
right-
click in the main browser window, and choose inspect accessibility properties in the context menu.
... right-
click an item in the html pane of the page inspector, and choose show accessibility properties in the context menu.
...items with nested children have arrows that can be
clicked to reveal the children, so you can move deeper into the hierarchy.
...And 4 more matches
Style Editor - Firefox Developer Tools
you can quickly toggle the use of a given sheet on and off by
clicking the eyeball icon to the left of the sheet's name.
... you can save any changes you've made to the style sheet to your local computer by
clicking the save button in the bottom-right corner of each sheet's entry in the list.
...once you're satisfied with your changes, you can save a copy locally by
clicking the save button on the sheet's entry in the style sheet pane.
...And 4 more matches
Console messages - Firefox Developer Tools
the following icons may be used: informational message warning error blocked; for network messages in addition, a disclosure triangle indicates that further information is available;
clicking it displays or collapses that information.
...
clicking the response code takes you to the reference page for that code.
...
click it to view more information about the error, as well as which dom nodes are affected by the error.
...And 4 more matches
Using files from web applications - Web APIs
= napprox.tofixed(3) + " " + amultiples[nmultiple] + " (" + nbytes + " bytes)"; } // end of optional code document.getelementbyid("filenum").innerhtml = nfiles; document.getelementbyid("filesize").innerhtml = soutput; } document.getelementbyid("uploadinput").addeventlistener("change", updatesize, false); </script> </body> </html> using hidden file input elements using the
click() method you can hide the admittedly ugly file <input> element and present your own interface for opening the file picker and displaying which file or files the user has selected.
... you can do this by styling the input element with display:none and calling the
click() method on the <input> element.
... consider this html: <input type="file" id="fileelem" multiple accept="image/*" style="display:none"> <button id="fileselect">select some files</button> the code that handles the
click event can look like this: const fileselect = document.getelementbyid("fileselect"), fileelem = document.getelementbyid("fileelem"); fileselect.addeventlistener("
click", function (e) { if (fileelem) { fileelem.
click(); } }, false); you can style the new button for opening the file picker as you wish.
...And 4 more matches
Capabilities, constraints, and settings - Web APIs
you can look at the complete example by
clicking here.
...edit the constraint sets for the video and audio tracks in the edit boxes on the left, then
click the "apply constraints" button to try them out.
... below all of that, you'll see the video itself.</p> <p>
click the "start" button to begin.</p> <h3>constrainable properties available:</h3> <ul id="supportedconstraints"> </ul> <div id="startbutton" class="button"> start </div> <div class="wrapper"> <div class="trackrow"> <div class="leftside"> <h3>requested video constraints:</h3> <textarea id="videoconstrainteditor" cols=32 rows=8></textarea> </div> <div class="rightside"> <h3>actual video settings:</h3> <textarea id="videosettingstext" cols=32 rows=8 disabled></textarea> </div> </div> <div class="trackrow"> <div class="leftside"> <h3>requested audio constraints:</h3> <textarea id="a...
...And 4 more matches
Using the Screen Capture API - Web APIs
finally, event listeners are established to detect user
clicks on the start and stop buttons.
...st 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.
...startcapture() is called when the "start capture" button is
clicked.
...And 4 more matches
Using DTMF with WebRTC - Web APIs
simple example this simple example constructs two rtcpeerconnections, establishes a connection between them, then waits for the user to
click a "dial" button.
... when the button is
clicked, a dtmf string is sent over the connection using rtcdtmfsender.insertdtmf().
...tring = "12024561111"; let callerpc = null; let receiverpc = null; let dtmfsender = null; let hasaddtrack = false; let mediaconstraints = { audio: true, video: false }; let offeroptions = { offertoreceiveaudio: 1, offertoreceivevideo: 0 }; let dialbutton = null; let logelement = null; these are, in order: dialstring the dtmf string the caller will send when the "dial" button is
clicked.
...And 4 more matches
Inputs and input sources - Web APIs
actions include both selection actions, such as
clicking on a button, and squeeze actions, such as pulling a trigger or tightening your grip while wearing haptic gloves.
... single-button
click devices.
...not only would this controller then take the responsibility of
clicking through the user interface of your app, but it would also be considered the "main hand," while other controllers would then be off-hand or additional controllers.
...And 4 more matches
Overview of events and handlers - Developer guides
event triggers include the completion of the loading of a resource on the network e.g., downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser e.g., processes the html content of a page, the interaction of a user with the contents of the page e.g.,
clicks a button.
... button event handler demo for example, browser <button> elements are intended to emit events named '
click' in response to a mouse
click or, when displayed in touch sensitive surfaces, to a finger tap.
... we could define in the html page a button as: <button id="buttonone">
click here to emit a '
click' event</button> and, in our javascript code, we could first define a function to listen to that '
click' event: var example_
click_handler = function (ev){ var objkind = (ev instanceof event) ?
...And 4 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
specifically, disabled inputs do not receive the
click event, and disabled inputs are not submitted with the form.
... ui pseudo-classes captions super relevant to the <input> element: pseudo-class description :enabled any currently enabled element that can be activated (selected,
clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus.
... :disabled any currently disabled element that has an enabled state, meaing it otherwise could be activated (selected,
clicked on, typed into, etc.) or accept focus were it not disabled.
...And 4 more matches
Working with Events - Archive of obsolete content
objects emit events on state changes that might be of interest to add-on code, such as browser windows opening, pages loading, network requests completing, and mouse
clicks.
... so there are two main ways you will interact with the eventemitter framework: listening to built-in events emitted by objects in the sdk, such as tabs opening, pages loading, mouse
clicks sending and receiving user-defined events between content scripts and add-on code this guide only covers the first of these; the second is explained in the working with content scripts guide.
... and its argument will be the name of the event: var ui = require("sdk/ui"); var panels = require("sdk/panel"); var self = require("sdk/self"); var panel = panels.panel({ contenturl: self.data.url("panel.html") }); panel.on("*", function(e) { console.log("event " + e + " was emitted"); }); var button = ui.actionbutton({ id: "my-button", label: "my button", icon: "./icon-16.png", on
click: handle
click }); function handle
click(state) { panel.show({ position: button }); } this wildcard feature does not yet work for the tabs or windows modules.
...And 3 more matches
Modifying the Page Hosted by a Tab - Archive of obsolete content
here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", on
click: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory.
...it has a
click handler which fetches the active tab and loads a script into the page hosted by the active tab.
... then open any web page in the browser window, and
click the button .
...And 3 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
on
click) for (var key in elemattr) { var val = elemattr[key]; if (nodes && key == "key") { nodes[val] = elem; continue; } var attrns = namespace(key); if (typeof val == "function") { // special case for function attributes; don't just add them as 'on...' attributes, but as events, using ad...
...event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes: var href = "http://www.google.com/"; var text = "google"; var nodes = {}; document.documentelement.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", on
click: function (event) { alert(event.target.href); } }, text], ["span", { class: "stuff" }, "stuff"]]], document, nodes)); alert(nodes.link); function addentrytopopup(menupopup, doc, chromewindow) { var newitem = doc.createelement("menuitem"); newitem.setattribute("value", "testvalue"); newitem.setattribute("label", "another popup menu...
... ], ['html:form', {id:'mysecondform'}, ['html:input', {type:'text', value:'my field for second form'}], ['html:div', {}, 'sub div with textcontent and siblings', ['html:br', {}], ['html:input', {type:'checkbox', id:'mycheck'}], ['html:label', {for:'mycheck'}, 'here is text of label,
click this text will check the box' ] ] ] ]; document.body.appendchild(jsontodom(json, document, {})); jquery templating for extensions which already use jquery, it is possible to use its builtin dom building functions for templating, though care must be taken when passing non-static strings to methods such as .append() and .html().
...And 3 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
introduction when you
click a link on a web page, your web browser makes a request to a web server which usually results in a new web page as a response.
...today, this publishing system allows your users to modify content for the portal, but in order to have their text spell checked they must
click somewhere and wait for the response page.
...in general, when a webmail account has more than a few messages,
clicking 'next page' sends a request to the server.
...And 3 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
clicking on the link will open mozilla's internal view source window with the offending line highlighted.
... a cross-browser event handling example follows (note that it means you can't define a global variable named event in your code): <div on
click="handleevent(event);">
click me!</div> <script> function handleevent(aevent) { var myevent = window.event ?
...to set a
click event handler, a function reference is passed to the object's on
click property: <div id="mydiv">
click me!</div> <script> function handleevent(aevent) { // if aevent is null, means the internet explorer event model, // so get window.event.
...And 3 more matches
Menus - Archive of obsolete content
when the menu or button is
clicked the menu is opened, listing the commands that are available.
... the user may select a command to invoke it, or may cancel the operation by pressing escape or
clicking outside the menu.
...
clicking the button will display the menu, allowing a command to be selected.
...And 3 more matches
Adding Event Handlers - Archive of obsolete content
for example, the command event will occur regardless of whether the user uses the mouse to
click a button, or presses the enter key.
...one important difference is that while the '
click' event (or the on
click attribute) is used in html to respond to buttons, in xul the command event should be used instead.
... xul does have a
click event, but it only responds to mouse
clicks, not to keyboard usage.
...And 3 more matches
More Event Handlers - Archive of obsolete content
mouse events there are several events which can be used to handle mouse specific actions, which are described briefly below:
click called when the mouse is pressed and released on an element.
... dbl
click called when the a mouse button is double
clicked.
...the detail property holds the number of times the button has been
clicked quickly in sequence.
...And 3 more matches
Scroll Bars - Archive of obsolete content
increment the value here specifies how much the value of curpos changes by when the user
clicks on one of the scroll bar arrows.
... pageincrement the value here specifies how much the value of curpos changes by when the user
clicks pages through the scroll bar, which can be done by
clicking on the tray between the box and the arrows.
...when
clicking on one of the scroll bar arrows, the value would change by 1 either up or down.
...And 3 more matches
label - Archive of obsolete content
if the user
clicks the label, it will move the focus to the associated control, specified with the control attribute.
...when the user
clicks on the label, the associated element is given focus.
... href type: string defines a url to open when this element is
clicked.
...And 3 more matches
scale - Archive of obsolete content
attributes dir, disabled, increment, max, min, moveto
click, pageincrement, tabindex, value properties disabled, max, min, increment, pageincrement, tabindex, value, methods decrease, decreasepage, increase, increasepage, examples horizontal scale: <scale min="1" max="10"/> vertical scale: <scale min="1" max="10" orient="vertical"/> attributes dir type: one of the values below the direction in which the child elements of the ...
... increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are
clicked(or scales are dragged).
... moveto
click type: boolean if true,
clicking the slide area of the scale moves the thumb directly to that position.
...And 3 more matches
Adobe Flash - Archive of obsolete content
enter some text in the html form field below and then
click outside the field, or hit the enter key, to send the text to the flash movie below: the example is missing.
... in example 3,
clicking the html button causes a ball to move in the flash animation.
...by
clicking the html button, you trigger a javascript event that further triggers actions within the flash animation.
...And 3 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 3 more matches
CSS and JavaScript accessibility best practices - Learn web development
for example, in our tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be
clicked to show each one (it is also keyboard accessible — you can alternatively use tab and enter/return to select them).
... function createlink(testitem) { const listitem = document.createelement('li'); const anchor = document.createelement('a'); anchor.textcontent = testitem.input.name + ' field is empty: fill in your ' + testitem.input.name + '.'; anchor.href = '#' + testitem.input.name; anchor.on
click = function() { testitem.input.focus(); }; listitem.appendchild(anchor); errorlist.appendchild(listitem); } each link serves a dual purpose — it tells you what the error is, plus you can
click on it/activate it to jump straight to the input element in question and correct your entry.
...chrome and edge (and newer versions of ie) will focus the element when the link is
clicked, without needing the on
click/focus() block.
...And 3 more matches
What will your website look like? - Learn web development
when you
click on a color, you'll see a strange six-character code like #660066.
... when you find the image you want,
click on the image to get an enlarged view of it.
... right-
click the image (ctrl +
click on a mac), choose save image as..., and choose a safe place to save your image.
...And 3 more matches
General asynchronous programming concepts - Learn web development
in our simple-sync.html example (see it running live), we add a
click event listener to a button so that when
clicked, it runs a time-consuming operation (calculates 10 million dates then logs the final one to the console) and then adds a paragraph to the dom: const btn = document.queryselector('button'); btn.addeventlistener('
click', () => { let mydate; for(let i = 0; i < 10000000; i++) { let date = new date(); mydate = date } console.log(mydate)...
...; let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); when running the example, open your javascript console then
click the button — you'll notice that the paragraph does not appear until after the dates have finished being calculated and the console message has been logged.
...in this example, we have two buttons: a "fill canvas" button that when
clicked fills the available <canvas> with 1 million blue circles.
...And 3 more matches
Looping code - Learn web development
height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } } btn.addeventlistener('
click',draw); </script> </body> </html> you don't have to understand all the code for now, but let's look at the part of the code that actually draws the 100 circles: for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } random(x), defined earlier in the code, return...
...for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('
click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else { para.textcontent = 'contact not fou...
...search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> <script> const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('
click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else if (i =...
...And 3 more matches
Client-side storage - Learn web development
add this snippet below your previous code: // stop the form from submitting when a button is pressed form.addeventlistener('submit', function(e) { e.preventdefault(); }); now we need to add an event listener, the handler function of which will run when the "say hello" button is
clicked.
...add this to the bottom of your code: // run function when the 'say hello' button is
clicked submitbtn.addeventlistener('
click', function() { // store the entered name in web storage localstorage.setitem('name', nameinput.value); // run namedisplaycheck() to sort out displaying the // personalized greetings and updating the form display namedisplaycheck(); }); at this point we also need an event handler to run a function when the "forget" button is
clicked — this is only displayed after the "s...
...ay hello" button has been
clicked (the two form states toggle back and forth).
...And 3 more matches
Website security - Learn web development
if the target user
clicks this "interesting link", the script will be executed when the search results are displayed.
... if a user
clicks the submit button, an http post request will be sent to the server containing the transaction details and any client-side cookies that the browser associated with the site (adding associated site cookies to requests is normal browser behavior).
... the result is that any user who
clicks the submit button while they are logged in to the trading site will make the transaction.
...And 3 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
ompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger" on
click={() => props.deletetask(props.id)} > delete <span classname="visually-hidden">{props.name}</span> </button> </div> </div> ); we've now got the two different template structures — "edit" and "view" — defined inside two separate constants.
... update the "edit" button in the viewtemplate like so: <button type="button" classname="btn" on
click={() => setediting(true)}> edit <span classname="visually-hidden">{props.name}</span> </button> now we'll add the same on
click handler to the "cancel" button in the editingtemplate, but this time we'll set isediting to false so that it switches us back to the view template.
... update the "cancel" button in the edittemplate like so: <button type="button" classname="btn todo-cancel" on
click={() => 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.
...And 3 more matches
Focus management with Vue refs - Learn web development
update it like this: <button type="button" class="btn" ref="editbutton" @
click="toggletoitemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> to access the value associated with our ref, we use the $refs property provided on our component instance.
... to see the value of the ref when we
click our "edit" button, add a console.log() to our toggletoitemeditform() method, like so: toggletoitemeditform() { console.log(this.$refs.editbutton); this.isediting = true; } if you activate the "edit" button at this point, you should see an html <button> element referenced in your console.
... vue lifecycle methods next, we need to move focus to the edit form’s <input> element when the "edit" button is
clicked.
...And 3 more matches
Implementing feature detection - Learn web development
download this now by:
clicking on the development build link.
...
clicking the big pink build button on the page that comes up.
...
clicking the top download link in the dialog box that appears.
...And 3 more matches
Accessible Toolkit Checklist
alt+f4 closes windows, similar to escape but even works on dialogs without cancel button alt+space opens window menu with restore, move, size, minimize, maximize, close the move and size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a
clickable tabbed property sheet label making tab order definable.
...wrap, not have invisible items in tab order dynamically added items must not corrupt the tab cycle or make it disorderly tab cycle must be identical backwards and forwards the f6 and shift+f6 key combinations should cycle through panes in a window making focus visible on any widget, and focus must always be visible shift+f10 or context menu key should work like right
click on focused item, and context menu should show just under and to the right of the current focus.
... most widgets (like checkboxes) can have a label outside of themselves, which should focus the widget when
clicked on, or when its mnemonic is pressed.
...And 3 more matches
Frequently Asked Questions for Lightweight themes
preview any theme by
clicking "tap to preview"; the design appears in your browser header so you can "try it on." when you're ready, just
click the blue install theme button.
...simply go to the tools > add-ons menu and
click on the appearance tab.
...you can either: visit the gallery, choose your favorite theme, and
click on your choice to instantly change the look of your browser.
...And 3 more matches
Basics
you can right-
click on any math fragment of interest throughout this document.
...rather, the math fragment will zoom, and if you right-
click a second time, you will see the mathml wysiwyg markup of the fragment, and if you right-
click again a third time, the fragment will revert to its initial state.
...with mathml, one can build sets such as (go on, right-
click any of these equations to experiment the zoom) { 0 , 1 , 2 , 3 , 4 } or { ⌊ a b ⌋ | a 2 + b 2 ≤ 3 } , write calculus d y d x = 1 y 2 , form rather complicated expressions lim n → n ( 1 + 1 n ) n − e n , k = ∂ 2 z ∂ x 2 ∂ 2 z ∂ y 2 - ( ∂ 2 z ∂ x ∂ y ) 2 ( 1 + ( ∂ z ∂ x ) 2 + ( ∂ z ∂ y ) 2 ) 2 , write vector equations y = a x + b , etc.
...And 3 more matches
A guide to searching crash reports
searching the search form you can get to the search page by
clicking on the "super search" link near the toolbar at the top right of any page in crash-stats.
... the default search: signature facet if you
click on the "search" button, you will get results like the ones in the following screenshot.
... you can reorder the groups in various ways by
clicking on the column headers.
...And 3 more matches
Examples of web and XML development using the DOM - Web APIs
<title>modifying an image border</title> <script> function setborderwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" on
click="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" on
click="setborderwidth(5);" /> </form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties of an html paragraph element are accessed using the style object on the element and that object's css style properties, which can be retrieved and set from the dom.
... <!doctype html> <html lang="en"> <head> <title>changing color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" on
click="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" on
click="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document.
...note that the table itself has an on
click event handler that ought to display a message when the table is
clicked.
...And 3 more matches
Working with the History API - Web APIs
suppose now that the user navigates to http://google.com, then
clicks the back button.
... if the user
clicks back once again, the url will change to http://mozilla.org/foo.html, and the document will get a popstate event, this time with a null state object.
... note: calling history.back() normally behaves the same way as
clicking the back button.
...And 3 more matches
Recording a media element - Web APIs
html content <p>
click the "start" button to begin video recording for a few seconds.
... you can stop the video by
clicking the creatively-named "stop" button.
... getting an input stream and setting up the recorder now let's look at the most intricate piece of code in this example: our event handler for
clicks on the start button: startbutton.addeventlistener("
click", function() { navigator.mediadevices.getusermedia({ video: true, audio: true }).then(stream => { preview.srcobject = stream; downloadbutton.href = stream; preview.capturestream = preview.capturestream || preview.mozcapturestream; return new promise(resolve => preview.onplaying = resolve); }).then(() => start...
...And 3 more matches
WebGLRenderingContext.makeXRCompatible() - Web APIs
p graphics, switching to vr mode, and so forth looks like this: const outputcanvas = document.queryselector(".output-canvas"); const gl = outputcanvas.getcontext("webgl"); let xrsession = null; let usingxr = false; let currentscene = "scene1"; let glstartbutton; let xrstartbutton; window.addeventlistener("load", (event) => { loadsceneresources(currentscene); glstartbutton.addeventlistener("
click", handlestartbutton
click); xrstartbutton.addeventlistener("
click", handlestartbutton
click); }); outputcanvas.addeventlistener("webglcontextlost", (event) => { /* the context has been lost but can be restored */ event.canceled = true; }); /* when the gl context is reconnected, reload the resources for the current scene.
... case aborterror: showsimplemessagebox("unable to transfer the game to your xr headset.", "cancel"); break; case invalidstateerror: showsimplemessagebox("you don't appear to have a compatible xr headset available.", "cancel"); break; default: handlefatalerror(err); break; } xrsession.end(); } } async function handlestartbutton
click(event) { 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 ha...
...these both use the handlestartbutton
click() function as their event handler.
...And 3 more matches
Video player styling basics - Developer guides
'unmute' : 'mute'); } } this function is then called by the relevant event handlers: video.addeventlistener('play', function() { changebuttonstate('playpause'); }, false); video.addeventlistener('pause', function() { changebuttonstate('playpause'); }, false); stop.addeventlistener('
click', function(e) { video.pause(); video.currenttime = 0; progress.value = 0; // update the play/pause button's 'data-state' which allows the correct button image to be set via css changebuttonstate('playpause'); }); mute.addeventlistener('
click', function(e) { video.muted = !video.muted; changebuttonstate('mute'); }); you might have noticed that there are new handlers where the...
...even though the browser's default video control set has been turned off, many browsers make them accessible by right
clicking on the html5 video.
...to ensure this, a new
click handler needs to be defined for the play/pause button so that it too raises the play and pause events: playpause.addeventlistener('
click', function(e) { if (video.paused || video.ended) video.play(); else video.pause(); }); volume the altervolume() function, called when the player's volume buttons are
clicked, also changes — it now calls a new function called checkvolume(): var checkvolume = function(dir) { if (dir)...
...And 3 more matches
<input type="radio"> - HTML: Hypertext Markup Language
for example, if the user
clicks on the "phone" radio button then submits the form, the form's data will include the line contact=phone.
...in this scenario, if the user
clicked on the "phone" option and submitted the form, the resulting form data would be contact=on, which isn't helpful.
...act" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> <pre id="log"> </pre> then we add some javascript to set up an event listener on the submit event, which is sent when the user
clicks the "submit" button: var form = document.queryselector("form"); var log = document.queryselector("#log"); form.addeventlistener("submit", function(event) { var data = new formdata(form); var output = ""; for (const entry of data) { output = output + entry[0] + "=" + entry[1] + "\r"; }; log.innertext = output; event.preventdefault(); }, false); try this example out and see how ...
...And 3 more matches
HTML documentation index - HTML: Hypertext Markup Language
75 <button>: the button element element, forms, html, html forms, reference, web the html <button> element represents a
clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
... 119 <input type="button"> element, forms, html, html forms, input, input element, input type, reference, button <input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the
click event).
... 134 <input type="reset"> element, form button, form input, forms, html, html forms, input, input types, reference, reset button, reset <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.
...And 3 more matches
Add to Home screen - Progressive web apps (PWAs)
deferredprompt = e; // update ui to notify the user they can add to home screen addbtn.style.display = 'block'; addbtn.addeventlistener('
click', (e) => { // hide our user interface that shows our a2hs button addbtn.style.display = 'none'; // show the prompt deferredprompt.prompt(); // wait for the user to respond to the prompt deferredprompt.userchoice.then((choiceresult) => { if (choiceresult.outcome === 'accepted') { console.log('user accepted the a2hs prompt'); } else { cons...
... set the button to display: block so it appears in the ui for the user to
click.
... set a
click handler for the button.
...And 3 more matches
Getting Started (jpm) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, on
click: handle
click }); function handle
click(state) { tabs.open("http://www.mozilla.org/"); } note that "entry point" defaults to "index.js" in jpm, meaning that your main file is "index.js", and it is found directly in your add-on's root.
...
click the icon, and a new tab will open with http://www.mozilla.org/ loaded into it.
...in this case, we've created a button whose icon is the firefox icon, and added a
click handler that loads the mozilla home page in a new tab.
...And 2 more matches
Getting started (cfx) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, on
click: handle
click }); function handle
click(state) { tabs.open("https://www.mozilla.org/"); } save the file.
...
click the icon, and a new tab will open with https://www.mozilla.org/ loaded into it.
...in this case, we've created a button whose icon is the firefox icon, and added a
click handler that loads the mozilla home page in a new tab.
...And 2 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
tooltips are very important for users that want to know what a button does before
clicking it.
...it points to the id of a popup element that holds the customization options that are displayed when the user right-
clicks on the toolbar.
...the other types, checkbox and radio are useful when you have buttons that change state when the user
clicks on them.
...And 2 more matches
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
<menuitem id="mymenu" oncommand="executesomething(); executesomethingelse();"/> <label id="mylabel" on
click="executesomething(); executesomethingelse();"/> add-on authors commonly use eval to trigger the handlers.
... // do not use eval(document.getelementbyid("mymenu").getattribute("oncommand")); eval(document.getelementbyid("mylabel").getattribute("on
click")); alternative: dispatch real events dispatching real events has the added bonus that all other event listeners for that element (and the corresponding bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event.
... // fake a command event var event = document.createevent("events"); event.initevent("command", true, true); document.getelementbyid("mymenu").dispatchevent(event); // fake a mouse
click var mouseevent = document.createevent("mouseevents"); event.initmouseevent("
click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); document.getelementbyid("mylabel").dispatchevent(mouseevent); please see the corresponding documentation on how to use and initialize particular event types.
...And 2 more matches
Tabbed browser - Archive of obsolete content
xul: <menuitem oncommand="myextension.foo(event)" on
click="checkformiddle
click(this, event)" label="
click me"/> js: var myextension = { foo: function(event) { openuilink("http://www.example.com", event, false, true); } } opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", "@mozilla.org/browser/sessionstore;1", ...
... reusing by url/uri a common feature found in many extensions is to point the user to chrome:// uris in a browser window (for example, help or about information) or external (on-line http(s)://) html documents when the user
clicks an extension's button or link.
...if your code is executed from a firefox browser.xul overlay (for example, it is a toolbar button or menu
click handler), you can access the current window with the window pre-defined variable.
...And 2 more matches
Using Breakpoints in Venkman - Archive of obsolete content
setting breakpoints
clicking on one of these dots in the source code view will set a breapoint at that line.
...clearing breakpoints to clear the breakpoint,
click on the margin twice.
... the first
click will clear the hard breakpoint and leave you with only a future breakpoint, which is represented by a yellow letter "f".
...And 2 more matches
Positioning - Archive of obsolete content
for popups attached using the popup or context attributes, the default position to appear is with the upper left corner (or upper right corner in right to left locales) at the position where the mouse was
clicked.
... context menus will appear offset down and to the right a couple of pixels so that the menu can be dismissed again just by
clicking in the same place.
... for a context menu, that is, a menu that is attached to an an element using the context attribute and opened via context-
clicking the mouse, the position attribute is ignored.
...And 2 more matches
Splitters - Archive of obsolete content
you can also hide the sidebar by
clicking the notch.
... collapse this indicates which side of the panel should collapse when the splitter notch (or grippy) is
clicked or set into a collapsed state.
...if you set this to none, which is also the default, the splitter grippy does not collapse when
clicked.
...And 2 more matches
Tabboxes - Archive of obsolete content
the user can
click each tab to see a different set of options.
...
clicking on the tab brings the tab page to the front.
...when the user
clicks on the mail tab, the contents of the first tab page will be displayed below the tabs.
...And 2 more matches
XUL element attributes - Archive of obsolete content
context type: id should be set to the value of the id of the popup element that should appear when the user context-
clicks on the element.
... a context-
click varies on each platform.
... usually it will be a right
click.
...And 2 more matches
XUL accessibility guidelines - Archive of obsolete content
context menus the context menu is the small menu activated with a right mouse
click on a content area or element (or with shift + f10 or vk_apps on windows and ctrl +
click or ctrl + space on a mac).
...do not specifically code them to open on a
click of the right mouse button.
... the oncontextmenu event and context attribute work with the correct platform-specific context menu triggers, including the keyboard button and appropriate mouse
clicks.
...And 2 more matches
splitter - Archive of obsolete content
if a grippy is placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is
clicked.
...the vbox is used to hold the .png image that a user
clicks on to resize the search bar.--> <splitter tooltiptext="resize the search box" oncommand="alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is
clicked.
... before when the grippy is
clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0.
...And 2 more matches
Debugging CSS - Learn web development
inspecting the applied css select an element on your page, either by right/ctrl-
clicking on it and selecting inspect, or selecting it from the html tree on the left of the devtools display.
...
click on the little arrow to expand the view, showing the different longhand properties and their values.
... with box1 selected,
click on the swatch (the small colored circle) that shows the color applied to the border.
...And 2 more matches
Basic native form controls - Learn web development
checkable items: checkboxes and radio buttons checkable items are controls whose state you can change by
clicking on them or their associated labels.
...
clicking the checkbox or its associated label toggles the checkbox on and off.
... image button the image button control is rendered exactly like an <img> element, except that when the user
clicks on it, it behaves like a submit button.
...And 2 more matches
HTML text fundamentals - Learn web development
98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
... 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
... 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...And 2 more matches
From object to iframe — other embedding technologies - Learn web development
click on the "hamburger menu" (three horizontal lines) in the top left of the ui.
... body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...
clickjacking is one kind of common iframe attack where hackers embed an invisible iframe into your document (or embed your document into their own malicious website) and use it to capture users' interactions.
...And 2 more matches
Image gallery - Learn web development
attach an on
click handler to each <img> inside the thumb-bar <div> so that when they are
clicked, the corresponding image is displayed in the displayed-img <img> element.
... attach an on
click handler to the <button> so that when it is
clicked, a darken effect is applied to the full-size image.
... when it is
clicked again, the darken effect is removed again.
...And 2 more matches
Arrays - Learn web development
put 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.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solutio...
... note: in a real search app, you'd probably be able to
click the previous search terms to return to previous searches, and it would display actual search results!
...1y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 370px; width: 95%"> const list = document.queryselector('.output ul'); const searchinput = document.queryselector('.output input'); const searchbtn = document.queryselector('.output button'); list.innerhtml = ''; let myhistory = []; searchbtn.on
click = function() { // we will only allow a term to be entered if the search input isn't empty if (searchinput.value !== '') { // number 1 // empty the list so that we don't display duplicate entries // the display is regenerated every time a search term is entered.
...And 2 more matches
Getting started with Svelte - Learn web development
you can see this in action by opening localhost:5000 in a new browser tab, right/ctrl-
clicking on the hello world!
... try updating your <script> and markup sections like so: <script> export let name; function togglename() { if (name === 'world') { name = 'svelte' } else { name = 'world' } } </script> <main> <h1>hello {name}!</h1> <button on:
click={togglename}>toggle name</button> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> whenever the button is
clicked, svelte executes the togglename() function, which in turn updates the value of the name variable.
... note the use of : in on:
click.
...And 2 more matches
Debugging on Windows
you can
click "start" button to run firefox then, already attached in the debugger.
...making it the startup project, by right
clicking on it (it appears bold when it's the case) can be useful.
...for each dll,
click the "new" button which creates a new entry and then hit the "..." buttons which lets you browse to the dll.
...And 2 more matches
Cross Process Object Wrappers
for example, this frame script sends a dom node to chrome when the user
clicks it, as the
clicked property of the third argument: // frame script addeventlistener("
click", function (event) { sendasyncmessage("my-e10s-extension-message", {}, {
clicked : event.target }); }, false); in the chrome script, the dom node is now accessible through a cross process object wrapper, as a property of the objects property of the message.
... the chrome script can get and set the wrapped object's properties and call its functions: // chrome script windowmm.addmessagelistener("my-e10s-extension-message", handlemessage); function handlemessage(message) { let wrapper = message.objects.
clicked; console.log(wrapper.innerhtml); wrapper.innerhtml = "<h2>modified by chrome!</h2>" wrapper.setattribute("align", "center"); } auto-generated cpows add-ons that have not declared themselves multiprocess compatible are set up with a number of compatibility shims.
...*/ var button = content.document.getelementbyid("
click-me"); button.addeventlistener("mouseover", function (event) { sendasyncmessage("my-addon-message", {}, { element : event.target }); }, false); // chrome script /* load the frame script, then listen for the message.
...And 2 more matches
Reporting a Performance Problem
visit https://profiler.firefox.com/
click on "enable profiler menu button" the profiler toolbar button will show up in the top right of the url bar as a small stopwatch icon you can right-
click on the button and remove it from the toolbar when you're done with it.
...recording can be done by
clicking on the toolbar icon to open its panel.
...if you choose custom settings (and then
clicking edit settings) for the profiler, you can adjust the size of the buffer (presently defaults to 90 mb) and the time interval between data collection (presently defaults to 1 ms).
...And 2 more matches
about:memory
if you are using a communication channel where files can be sent, such as bugzilla or email,
click on the "measure and save..." button.
... if you are using a communication channel where only text can be sent, such as a comment thread on a website,
click on the "measure..." button.
...don't
click "measure..." repeatedly, because that will cause the memory usage of about:memory itself to rise, due to it discarding and regenerating large numbers of dom nodes.
...And 2 more matches
nsINavHistoryResultViewObserver
oncycleheader() called when a header is
clicked.
... void oncycleheader( in nsitreecolumn column ); parameters column the column whose header was
clicked.
... oncyclecell() called when a cell in a non-selectable cycling column (such as unread or flagged in thunderbird) is
clicked.
...And 2 more matches
Add to iPhoto
once installed, when you right-
click on an image, you'll see among the options in the contextual menu an option to "add image to iphoto".
...we'll use our handler for this event to add the "add image to iphoto" option if the user has right-
clicked on an image.
... if (document.getelementbyid("contentareacontextmenu")) { document.getelementbyid("contentareacontextmenu").addeventlistener("popupshowing", iphoto.onpopup, false); } responding when the context menu is
clicked when the user right-
clicks an image, our handler gets called: onpopup: function() { var node = iphoto.getcurrentnode(); var item = document.getelementbyid("add-to-iphoto_menuitem"); if (item) { item.hidden = (node == null); // hide it if we're not on an image } } this code finds the image node the user right-
clicked in by calling our getcurrentnode() method, then sets the hidden state of the "add image to iphoto" menu item based on whether or not an image node was found.
...And 2 more matches
UI Tour - Firefox Developer Tools
there are several context menu options available for individual files and folders or groups; typically viewed by right-
clicking on the item.
...the name of the selected directory is shown at the top of the source list pane;
clicking this name reverts the pane to showing all source items.
...
clicking a line selects the corresponding line in the source pane.
...And 2 more matches
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
<div on
click="dodivsandspans()">
click here to make the page do some allocations.
... in the browser tab,
click on the text that says "
click here…".
...(we will probably revise the allocation log to present such allocations in a way that is more informative, and that exposes less of firefox's internal structure.) as expected, the on
click handler is responsible for all allocation done by the page's own code.
...And 2 more matches
Eyedropper - Firefox Developer Tools
> inspector > default color unit: you can use it in one of two ways: to select a color from the page and copy it to the clipboard to change a color value in the inspector's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web developer" menu open the page inspector tab and
click the eyedropper button in its toolbar as you move the mouse around the page you'll see the current color value in the eyedropper change.
...
clicking copies the current color value to the clipboard.
... changing a color value in the rules view color values appearing in the inspector's rules view have color samples next to them:
clicking the sample shows a color picker popup.
...And 2 more matches
Basic operations - Firefox Developer Tools
taking a heap snapshot to take a snapshot of the heap,
click the "take snapshot" button, or the camera icon on the left: the snapshot will occupy the large pane on the right-hand side.
... on the left, you'll see an entry for the new snapshot, including its timestamp, size, and controls to save or clear this snapshot: clearing a snapshot to remove a snapshot,
click the "x" icon: saving and loading snapshots if you close the memory tool, all unsaved snapshots will be discarded.
... to save a snapshot
click "save": you'll be prompted for a name and location, and the file will be saved with an .fxsnapshot extension.
...And 2 more matches
Network request details - Firefox Developer Tools
the request details pane appears when you
click on a network request in the request list.
... network request details
clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request.
...
clicking the icon at the right-hand end of the toolbar closes the details pane and returns you to the list view.
...And 2 more matches
Edit CSS filters - Firefox Developer Tools
css filter properties in the rules view have a circular gray and white swatch next to them:
clicking the swatch opens a filter editor: the filter editor lists each of the effects performed by that filter on a separate line.
...once you have selected the effect you want to add,
click the plus sign (+) to the right of the dropdown list.
...you can save the current filter to the preset list:
click to edit the filter, display the preset list by
clicking the icon as shown below.
...And 2 more matches
Web Audio Editor - Firefox Developer Tools
click the tab and load a page that constructs an audio context.
...if, instead, you've connected a node to an audioparam in another node, then the connection is shown as a dashed line between the nodes, and is labeled with the name of the audioparam: inspecting and modifying audionodes if you
click on a node, it's highlighted and you get a node inspector on the right hand side.
...however, the value isn't updated in real time: you have to
click the node again to see the updated value.
...And 2 more matches
The JavaScript input interpreter - Firefox Developer Tools
multi-line mode for multi-line entry,
click the "split pane" icon at the right hand side of the single-line entry field, or press ctrl+b (windows/linux) or cmd+b (macos).
...to execute the snippet that is currently in the editing pane,
click the run button or press ctrl+enter (or cmd+return on macos).
...
click anywhere in the area containing the echoed code to show the whole snippet;
click again in that area to collapse it.
...And 2 more matches
Web Console UI Tour - Firefox Developer Tools
toolbar the toolbar across the top contains a number of features: garbage can:
click this icon to clear the contents of the console.
... funnel:
click this icon to filter the messages that are displayed in the console.
... filter categories: you can
click a filter category (such as errors, warnings, css, or xhr) to display just those types of messages.
...And 2 more matches
MouseEvent - Web APIs
common events using this interface include
click, dbl
click, mouseup, mousedown.
... mouseevent.webkitforce read only the amount of pressure applied when
clicking mouseevent.x read only alias for mouseevent.clientx.
... mouseevent.y read only alias for mouseevent.clienty constants mouseevent.webkit_force_at_mouse_down read only minimum force necessary for a normal
click mouseevent.webkit_force_at_force_mouse_down read only minimum force necessary for a force
click methods this interface also inherits methods of its parents, uievent and event.
...And 2 more matches
Notification - Web APIs
notification.requireinteraction read only a boolean indicating that a notification should remain active until the user
clicks or dismisses it, rather than closing automatically.
... event handlers notification.on
click a handler for the
click event.
... it is triggered each time the user
clicks on the notification.
...And 2 more matches
NotificationAction - Web APIs
the notificationaction interface of the notifications api is used to represent action buttons the user can
click to interact with notifications.
... notificationaction.action read only the name of the action, which can be used to identify the
clicked action similar to input names.
... example notifications can fire notification
click events on the serviceworkerglobalscope.
...And 2 more matches
NotificationEvent - Web APIs
the parameter passed into the onnotification
click handler, the notificationevent interface represents a notification
click event that is dispatched on the serviceworkerglobalscope of a serviceworker.
... notificationevent.notification read only returns a notification object representing the notification that was
clicked to fire the event.
... notificationevent.action read only returns the string id of the notification button the user
clicked.
...And 2 more matches
Using the Notifications API - Web APIs
clicking a button).
... <button id="enable">enable notifications</button>
clicking this calls the asknotificationpermission() function: function asknotificationpermission() { // function to actually ask the permissions function handlepermission(permission) { // whatever the user answers, we make sure chrome stores the information if(!('permission' in notification)) { notification.permission = permission; } // set the button to shown or hidden, dep...
...this is in line with the specification, which states: "when a notification is closed, either by the underlying notifications platform or by the user, the close steps for it must be run." notification events there are four events that are triggered on the notification instance:
click triggered when the user
clicks on the notification.
...And 2 more matches
PaymentRequest.show() - Web APIs
it may only be called while handling events that represent user interactions, such as
click, keyup, or the like.
...the promise is resolved when the user accepts the payment request (such as by
clicking a "pay" button in the browser's payment sheet).
... securityerror the promise rejects with a securityerror if the call to show() was not in response to a user action, such as a
click or keyup event.
...And 2 more matches
Using the Payment Request API - Web APIs
const checkoutbutton = document.getelementbyid('checkout-button'); if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addeventlistener('
click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
... for example, redirect to // the legacy web form checkout: window.location.href = '/legacy-web-form-checkout'; }); // every
click on the checkout button should use a new instance of // paymentrequest object, because paymentrequest.show() can be // called only once per instance.
... shouldcallpaymentrequest = true; fallbacktolegacyonpaymentrequestfailure = true; }); // user has
clicked on the checkout button.
...And 2 more matches
Pointer Lock API - Web APIs
more than that, the api is useful for any applications that require significant mouse input to control movements, rotate objects, and change entries, for example allowing users to control the viewing angle simply by moving the mouse around without any button
clicking.
...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.
...when you
click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse.
...And 2 more matches
Web Audio API best practices - Web APIs
a user gesture has been interpreted to mean a user-initiated event, normally a
click event.
... when working with an audiocontext, if you create the audio context from inside a
click event the state should automatically be set to running.
... here is a simple example of creating the context from inside a
click event: const button = document.queryselector('button'); button.addeventlistener('
click', function() { const audioctx = new audiocontext(); }, false); if however, you create the context outside of a user gesture, its state will be set to suspended and it will need to be started after user interaction.
...And 2 more matches
Using the Web Speech API - Web APIs
when the screen is tapped/
clicked, you can say an html color keyword, and the app's background color will change to that color.
... <h1>speech color changer</h1> <p>tap/
click then say a color to change the background color of the app.</p> <div> <p class="output"><em>...diagnostic messages</em></p> </div> the css provides a very simple responsive styling so that it looks ok across devices.
...e default anyway.) recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; starting the speech recognition after grabbing references to the output <div> and the html element (so we can output diagnostic messages and update the app background color later on), we implement an on
click handler so that when the screen is tapped/
clicked, the speech recognition service will start.
...And 2 more matches
-moz-image-rect - CSS: Cascading Style Sheets
clicking on their container causes the four segments to rotate around by swapping the background-image property values among the four <div> blocks.
...round-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); width:133px; height:136px; position:absolute; } #box4 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); width:133px; height:136px; position:absolute; } html the html is quite simple: <div id="container" on
click="rotate()"> <div id="box1" style="left:0px;top:0px;">top left</div> <div id="box2" style="left:133px;top:0px;">top right</div> <div id="box3" style="left:0px;top:136px;">bottom left</div> <div id="box4" style="left:133px;top:136px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box grid.
... these four segments are all contained within a larger <div> block whose primary purpose is to receive
click events and dispatch them to our javascript code.
...And 2 more matches
Box-shadow generator - CSS: Cascading Style Sheets
node.appendchild(pointer); this.pointer = pointer; setmousetracking(node, updateslider.bind(this)); sliders[topic] = this; setvalue(topic, this.value); } var setbuttoncomponent = function setbuttoncomponent(node) { var type = node.getattribute('data-type'); var topic = node.getattribute('data-topic'); if (type === "sub") { node.textcontent = '-'; node.addeventlistener("
click", function() { decrement(topic); }); } if (type === "add") { node.textcontent = '+'; node.addeventlistener("
click", function() { increment(topic); }); } } var setinputcomponent = function setinputcomponent(node) { var topic = node.getattribute('data-topic'); var unit_type = node.getattribute('data-unit'); var input = document.createelement('input'); var unit...
... = document.createelement('span'); unit.textcontent = unit_type; input.setattribute('type', 'text'); node.appendchild(input); node.appendchild(unit); input.addeventlistener('
click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { setvalue(topic, e.target.value | 0); }); subscribe(topic, function(value) { node.children[0].value = value; }); } var increment = function increment(topic) { var slider = sliders[topic]; if (slider === null || slider === undefined) return; if (slider.value + slider.step <= slider.max) { slider.value += slider.step; setvalue(slider.topic, slider.value) notify.call(slider); } }; var decrement = function decrement(topic) { var slider = sliders[topic]; if (slider === null || sli...
...'' : title; var input = document.createelement('input'); var info = document.createelement('span'); info.textcontent = title; input.setattribute('type', 'text'); input.setattribute('data-action', 'set-' + action + '-' + topic); node.appendchild(info); node.appendchild(input); input.addeventlistener('
click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { if (action === 'hsv') inputchangehsv(topic); if (action === 'rgb') inputchangergb(topic); if (action === 'alpha') inputchangealpha(topic); if (action === 'hexa') inputchangehexa(topic); }); subscribe(topic, function(value) { node.children[1].value = value; ...
...And 2 more matches
<input type="image"> - HTML: Hypertext Markup Language
when you
click on the image to submit the form, you'll see the data appended to the url as parameters, for example ?x=52&y=55.
... these are the x and y coordinates of the image that the mouse
clicked on to submit the form, where (0,0) is the top-left of the image.
... these can be used when the position the image was
clicked on is significant, for example you might have a map that when
clicked, sends the coordinates that were
clicked to the server.
...And 2 more matches
<menu> - HTML: Hypertext Markup Language
this includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been
clicked.
... an html menu can be used to create context menus (typically activated by right-
clicking another element) or toolbars.
... examples context menu html <!-- 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.
...And 2 more matches
Communicating With Other Scripts - Archive of obsolete content
here "main.js" creates a page-mod that attaches "listen.js" to the web page: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" embeds a script that uses window.postmessage() to send the content script a message when the user
clicks a button: <!doctype html> <html> <head></head> <body> <script> function sendmessage() { window.postmessage("message from page script", "http://my-domain.org/"); } </script> <button on
click="sendmessage()">send message</button> </body> </html> finally, the content script "listen.js" uses window.addeventlistener() to listen for messages from the page script...
... <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("
click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, greeting); document.documentelement.dispatchevent(event); } finally, the page script "page-script.js" listens for the message and logs the greeting to the web console: window.addeventlist...
...from firefox 30 this sharing requires an extra step: the content script needs to explicitly clone the message payload into the page script's scope using the global cloneinto() function: var messenger = document.getelementbyid("message"); messenger.addeventlistener("
click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var cloned = cloneinto(greeting, document.defaultview); var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, cloned); document.documentelement.dispatchevent(event); } messaging from page script to content script sending messages using cus...
...m dom event, using initcustomevent()'s detail parameter to supply the payload: <!doctype html> <html> <head></head> <body> <script> function sendmessage() { var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, { hello: 'world' }); document.documentelement.dispatchevent(event); } </script> <button on
click="sendmessage()">send message</button> </body> </html> finally, the content script "listen.js" listens for the new event and retrieves the payload from its detail attribute: window.addeventlistener("addon-message", function(event) { console.log(json.stringify(event.detail)); }, false); ...
Communicating using "port" - Archive of obsolete content
var pagemodscript = "window.addeventlistener('
click', function(event) {" + " self.port.emit('
click', event.target.tostring());" + " event.stoppropagation();" + " event.preventdefault();" + "}, false);" + "self.port.on('warning', function(message) {" + "window.alert(message);" + "});" var pagemod = require(...
...'sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('
click', function(html) { worker.port.emit('warning', 'do not
click this again'); }); } }); in the add-on above there are two user-defined messages:
click is sent from the page-mod to the add-on, when the user
clicks an element in the page warning sends a silly string back to the page-mod port.emit() the port.emit() function sends a message from the "main.js", or another add-on module, to a content script, or vice versa.
...the button sends the content script a message called "get-first-para" when it is
clicked: pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", on
click: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-firs...
... function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); self.port.removelistener("get-first-para", getfirstparagraph); } self.port.on("get-first-para", getfirstparagraph); the result is that the paragraph is only logged the first time the button is
clicked.
XUL Migration Guide - Archive of obsolete content
eforwardbutton() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var forward = window.document.getelementbyid('forward-button'); var parent = window.document.getelementbyid('urlbar-container'); parent.removechild(forward); } require("sdk/ui/button/action").actionbutton({ id: "remove-forward-button", label: "remove forward button", icon: "./icon-16.png", on
click: removeforwardbutton }); there are more useful examples of this technique in the jetpack wiki's collection of third party modules.
...uire("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('background-color')) { tab.style.setproperty('background-color','','important'); } else { tab.style.setproperty('background-color','rgb(255,255,100)','important'); } } require("sdk/ui/button/action").actionbutton({ id: "highlight-active-tab", label: "highlight active tab", icon: "./icon-16.png", on
click: highlightactivetab }); security implications the sdk implements a security model in which an add-on only gets to access the apis it explicitly imports via require().
... getservice(ci.nsipromptservice); require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-16.png", on
click: function() { promptsvc.alert(null, "my add-on", "hello from xpcom"); } }); it's good practice to encapsulate code which uses xpcom by packaging it in its own module.
... getservice(ci.nsipromptservice); exports.alert = function(title, text) { promptsvc.alert(null, title, text); }; if we save this as "alert.js" in our add-on's lib directory, we can rewrite main.js to use it as follows: require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-16.png", on
click: function() { require("./alert").alert("my add-on", "hello from xpcom"); } }); one of the benefits of this is that we can control which parts of the add-on are granted chrome privileges, making it easier to review and secure the code.
notifications - Archive of obsolete content
when the message is
clicked, a string is logged to the console.
... var notifications = require("sdk/notifications"); notifications.notify({ title: "jabberwocky", text: "'twas brillig, and the slithy toves", data: "did gyre and gimble in the wabe", on
click: function (data) { console.log(data); // console.log(this.data) would produce the same result.
... on
click function a function to be called when the user
clicks the message.
... data string a string that will be passed to on
click.
Display a Popup - Archive of obsolete content
in this tutorial we'll create an add-on that adds an action button to the toolbar that displays a panel when
clicked.
...var text_entry = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, on
click: handle
click }); // show the panel when the user
clicks the button.
... function handle
click(state) { text_entry.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event to the panel's script, so the // script can prepare the panel for display.
...e these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png try it out: "index.js" is saved in the top level, and the other five files go in your add-on's data directory: my-addon/ data/ get-text.js icon-16.png icon-32.png icon-64.png text-entry.html index.js run the add-on,
click the button, and you should see the panel.
Using third-party modules (jpm) - Archive of obsolete content
open "index.js" and replace it with this: var menuitems = require("menuitem"); var menuitem = menuitems.menuitem({ id: "
clickme", menuid: "menu_toolspopup", label: "
click me!", oncommand: function() { console.log("
clicked"); }, insertbefore: "menu_pageinfo" }); now run the add-on: jpm run -b nightly you should see a new menu item in the tools menu labeled "
click me!".
...
click the button, and the message "
clicked" is logged.
...to show the menu bar,
click on the open menu icon and select "customize".
...finally,
click the green bar "exit customize" ...
Dialogs and Prompts - Archive of obsolete content
the code to open a dialog named mydialog.xul and pass it arguments: var params = {inn:{name:"foo", description:"bar", enabled:true}, out:null}; window.opendialog("chrome://myext/content/mydialog.xul", "", "chrome, dialog, modal, resizable=yes", params).focus(); if (params.out) { // user
clicked ok.
...write them to disk or whatever } else { // user
clicked cancel.
...alog.js: // called once when the dialog displays function onload() { // use the arguments passed to us by the caller document.getelementbyid("name").value = window.arguments[0].inn.name; document.getelementbyid("description").value = window.arguments[0].inn.description; document.getelementbyid("enabled").checked = window.arguments[0].inn.enabled; } // called once if and only if the user
clicks ok function onok() { // return the changed arguments.
... // notice if user
clicks cancel, window.arguments[0].out remains null // because this function is never called window.arguments[0].out = {name:document.getelementbyid("name").value, description:document.getelementbyid("description").value, enabled:document.getelementbyid("enabled").checked}; return true; } see also passing parameter to a dialog and getting return values from it.
Installing Extensions and Themes From Web Pages - Archive of obsolete content
ef, iconurl: aevent.target.getattribute("iconurl"), hash: aevent.target.getattribute("hash"), tostring: function () { return this.url; } } }; installtrigger.install(params); return false; } //--> </script> <a href="http://www.example.com/foo.xpi" iconurl="http://www.example.com/foo.png" hash="sha1:28857e60d043447c5f4550853f2d40770b326a13" on
click="return install(event);">install extension!</a> let's go through this piece by piece.
...users can save the xpi file to disk easily by right
clicking on the link and choosing "save link as..." when the link is
clicked it calls the function install passing the event object as the parameter.
... return false; this last part is the most important - the install function must return false so that when the link is
clicked, only the script is run, and the link href is not navigated to.
...well, xpi is a mozilla-specific extension and so we can have special handling for it, but jar is not - not all .jar files are firefox themes, so if you
click on a .jar link you'll be shown the save as decision dialog.
Adding Events and Commands - Archive of obsolete content
for a button, it represents the action of the user
clicking on it, or focusing it with the keyboard and then pressing the enter key.
... on
click.
... triggered when the user
clicks on the element, including right
clicks.
...for example: <button label="&xulschoolhello.defaultgreeting.label;" oncommand="xulschoolchrome.browseroverlay.changegreeting(event);" /> then on the javascript code you would have something like this: changegreeting : function(aevent) { // more stuff aevent.target.setattribute("label", somenewgreeting); } the target in this example is the button element, so
clicking on it will change its text.
Handling Preferences - Archive of obsolete content
right-
clicking on the list reveals several options that allow you to modify preference values and add new ones.
... the standard way of opening a preferences window is to open the add-ons manager, select the add-on, and then
click on the preferences button.
...on windows, changing preferences don't apply until the user
click on the ok button.
... the user can
click on the cancel button and none of the changes performed in the window will apply.
The Box Model - Archive of obsolete content
if the user
clicks on the label, the textbox will be focused.
...all you need is to set the text-link class to the label, and add an on
click handler (oncommand won't work for this).
... a trickier case is when you need only part of a label to be
clickable, just like in html.
... xulschoolhello.linkedtext.label = go to <html:a on
click="%s">our site</html:a> for more information to include html in a xul document, you need to add the namespace for it in the document root: <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> then you can have an html:p (paragraph) element where you insert the result of parsing the...
User Notifications and Alerts - Archive of obsolete content
all notifications have an additional close button, so you should take into account that it's possible that none of your custom buttons will be
clicked.
... also,
clicking on any of your custom buttons will cause the notification to be immediately closed, so you should only use notification boxes for single-step processes.
...you can associate an action to the user
clicking on the alert.
...we do this when we need to handle
clicks on the alert box.
Signing an extension - Archive of obsolete content
click the firefox button and select options.
...
click view certificates.
... select your organization's certificate and
click backup.
... enter the password to protect your certificate backup and
click ok.
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
32,371" href="#open"> <area alt="(4)" coords="90,384,127,417" href="#openuri-innards"> <area alt="(0) registercontentlistener()" coords="37,474,346,474,346,505,88,505,88,535,37,535" href="#registercontentlistener" shape="poly"> <area alt="(3) openuri() (nsuriloader)" coords="5,207,312,269" href="#openuri"> <area alt="(2)" coords="102,114,139,148" href="#internalload"> <area alt="(1) loaduri/onlink
click" coords="77,5,449,59" href="#loaduri"> <area alt="nsiexternalhelperappservice" coords="527,305,839,339" href="#nsiexternalhelperappservice"> <area alt="category manager" coords="683,467,807,527" href="#nscategorymanager"> <area alt="nsdocumentopeninfo" coords="371,71,635,185" href="#nsdocumentopeninfo"> <area alt="necko" coords="721,113,821,157" href="#necko"> <area alt="nsuriloader" coords="23,3...
...these can come in via nsiwebnavigation (a scriptable embedding interface) or nsilinkhandler (an internal interface used for link
clicks).
... nsuriloader::openuri gets a channel to open, a boolean indicating whether this load is the result of a link
click, and an nsisupports "window context" (the docshell triggering the load, actually, but in drag and heavy makeup).
...if the load is not aborted, we create an nsdocumentopeninfo object for this load, passing it the "this is a link
click" boolean and the window context.
Proxy UI - Archive of obsolete content
seamonkey menu: preferences > advanced group > proxies panel menu: right-
click on offline-online button (on browser windows).
...saving changes
click "ok" to save changes to prefs.
...
click "cancel" to discard changes.
...right-
click a menu is displayed that has the following items: online (proxy: none) online (proxy: auto discover) online (proxy: auto url) online (proxy: manual) --- proxy configuration...
Elements - Archive of obsolete content
mplied phase (capturing|bubbling|target) #implied button (1|2|3) #implied modifiers cdata #implied keycode cdata #implied key cdata #implied charcode cdata #implied
clickcount (1|2|3) #implied command id #implied preventdefault false|true #implied > the handler element describes a single event handler.
...
clickcount - the
clickcount attribute imposes a filter on the handler.
... it is used with mouse handlers to specify how many times a button has been
clicked.
... the event handler will only be matched if the value of the
clickcount field in the dom mouse event object matches the value of the attribute.
Introduction to XUL - Archive of obsolete content
<html:script type="application/javascript"> // dialog initialization code function initwindow() { var checkbox = document.getelementbyid("remember"); if (checkbox) checkbox.checked = true; } </html:script> javascript can be referenced as in html documents: as on
click handlers and the like.
...this tie is defined within the xul: <xul:window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <broadcaster id="cangoback"/> <titledbutton src="resource:/res/toolbar/tb_back.gif" align="bottom" value="back" on
click="browserback()"> <observes element="cangoback" attribute="disabled"/> </titledbutton> </window> but it is up to the application code to locate the broadcasters within a window so it can punch them when necessary.
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="file"> <menupopup> <menuitem label="hello world!" on
click="alert('hello world!\n');"/> </menupopup> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%"/> </window> the beginning of this example, down through the window tag, is the standard preamble.
...this menu contains a single menu item that has a simple javascript on
click handler attached to it.
Custom toolbar button - Archive of obsolete content
get a context menu for the image that you see here (for example, by right-
clicking it).
... get a context menu for the image that you see here (for example, by right-
clicking it).
... either get a context menu for the application's toolbar (for example, by right-
clicking it) and choose customize..., or choose view – toolbars – customize...
...
click the button to test it.
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
event handlers as you might expect, mouse
clicks, key presses and other events are passed to each of the elements inside the content.
...valid event types are those supported by xul and javascript, such as
click and focus.
...for example, a custom checkbox might have a checked property which needs to be changed when the user
clicks the checkbox: <handlers> <handler event="mouseup" action="this.checked=!this.checked"/> </handlers> when the user
clicks and releases the mouse button over the check box, the mouseup event is sent to it, and the handler defined here is called, causing the state of the checked property to be reversed.
...<handlers> <handler event="
click" button="0" action="alert('left button pressed');"/> <handler event="mouseup" button="1" action="alert('middle button pressed')"/> <handler event="
click" button="2" action="alert('right button pressed');"/> </handlers> handling key events for key events, you can use a number of attributes similar to those for the key element to match a specific key and match only when certain modifer keys ar...
arrowscrollbox - Archive of obsolete content
attributes
clicktoscroll, disabled, smoothscroll, tabindex properties disabled, scrollboxobject, scrollincrement, smoothscroll, tabindex methods ensureelementisvisible, scrollbyindex, scrollbypixels examples <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="sil...
...es, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width
clicktoscroll type: boolean
clicktoscroll, if true, the arrows must be
clicked to scroll the scrollbox content.
... scrollincrement type: integer a read only property that lets you retrieve the number of pixels by which scrolling will occur when the arrowscrollbox is
clicked.
... inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
colorpicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a palette of colors from which a user may select by
clicking on one of the grid cells.
...when the user
clicks the button, a popup appears for the user to select a color.
... value property gets and sets color attribute methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
...you may use on
click when you are working with a plain colorpicker and need the currently selected color for example to display in a <textbox>.
scrollbar - Archive of obsolete content
the user can adjust the position of the scroll bar by
clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around.
... increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are
clicked(or scales are dragged).
... pageincrement type: integer the amount by which the value of the curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is
clicked, or when the page up or page down keys are pressed.
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
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, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange style classes plain examples <vbox> ...
... increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are
clicked(or scales are dragged).
...
clickselectsall type: boolean if set to true, the contents of the textbox are selected when focused; otherwise, the cursor is left unchanged.
... inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
tooltip - Archive of obsolete content
attributes crop, default, label, noautohide, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, page, position properties accessibletype, label, popupboxobject, position, state methods hidepopup, moveto, openpopup, openpopupatscreen, showpopup, sizeto examples <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <label value="
click here to see more information"/> <label value="really!" style="color: red;"/> </tooltip> <vbox> <button label="simple" tooltiptext="a simple popup"/> <button label="more" tooltip="moretip"/> </vbox> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the cro...
... example <tooltip id="pagetooltip" page="true"/> <browser tooltip="pagetooltip"/> position type: string the position attribute determines where the popup appears relative to the element the user
clicked to invoke the popup.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
... triggerevent the event that triggered the popup (such as a mouse
click, if the user
clicked something to open the popup).
Gecko Compatibility Handbook - Archive of obsolete content
once you filled the dialog box (it should look like the screenshot below),
click ok and close theoptions dialog.
... you can now start using the user-agent string you've just created by
clicking tools | user agent switcher |the name you have chosen.
...more info
clicking a link results in a 404-page not found but works in internet explorer the link may use an invalid form of a relative url.
... verify that all hyperlinks use forward slashes (/)
clicking on a link displays a "download" or displays html code instead of rendering the page correctly, but works as expected in internet explorer the web server has incorrectly specified the mime type for the content.
2006-11-22 - Archive of obsolete content
to join, send a blank email with subscribe in the subject field to: nvda...@freelists.org (
click here to view the original post and unmask the e-mail address) michael would like to thank stormdragon for setting this up.
...
click here for more details.
...
click here for more details.
...for more information
click here.
Displaying notifications (deprecated) - Archive of obsolete content
setting up event listeners on the notification there are two events you can listen to on created notifications: on
click this event is fired when the user
clicks (or taps) on the notification.
... onclose this event is fired when the notification is closed (whether by being
clicked or by some other means).
... note: if the notification is dismissed by the user
clicking on it, both events will get fired.
... for example, let's simply append a little html to our document when these events fire: notification.on
click = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was
clicked.</strong>"; document.body.appendchild(e); }; notification.onclose = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was closed.</strong>"; document.body.appendchild(e); }; displaying the notification once the notification is configured the way you want it to be, call its show() method to display the notification: notification.show(); on android, for example, the resulting notification panel looks like this: when the user taps on the "hey, check this out!" notification here, the resulting changes to the document look like t...
2D maze game with device orientation - Game development
mainmenu.js the mainmenu state shows the main menu of the game, where you can start playing by
clicking the button.
... function that will be executed when someone
clicks the button.
... frame from the image asset used as the button's "
click" or "down" state.
...after
clicking the screen the actual game is launched.
Styling links - Learn web development
clicked on), styled using the :active pseudo class.
...this is because if the real links were included,
clicking on them would break the examples (you'd end up with an error, or a page loaded in the embedded example that you couldn't get back from.) # just links to the current page.
... focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you
click it.) interestingly enough, these default styles are nearly the same as they were back in the early days of browsers in the mid-1990s.
....value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("
click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("
click", function() { htmlinput.value = htmlcode; cssinput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n ...
How do I use GitHub Pages? - Learn web development
-site when the command line is pointing inside your website directory, type the following command, which tells the git tool to turn the directory into a git repository: git init an aside on command line interfaces the best way to upload your code to github is via the command line — this is a window where you type in commands to do things like create files and run programs, rather than
clicking inside a user interface.
...
click plus (+) in the top right of the github homepage, then choose new repository.
...your screen should look like this:
click create repository; this should bring you to the following page: uploading your files to github on the current page, you are interested in the section …or push an existing repository from the command line.
... go to the github pages section again, and you should see a line of the form "your site is ready to be published at https://xxxxxx." if you
click on this url, you should go to a live version of your example, provided the home page is called index.html — it goes to this entry point by default.
How do you set up a local testing server? - Learn web development
remote files throughout most of the learning area, we tell you to just open your examples directly in a browser — this can be done by double
clicking the html file, dragging and dropping it into the browser window, or choosing file > open...
...if you are a windows user, you can get an installer from the python homepage and follow the instructions to install it: go to python.org under the download section,
click the link for python "3.xxx".
...
click install, then
click close when the installation has finished.
...here you'll see the contents of the directory listed —
click the html file you want to run.
HTML forms in legacy browsers - Learn web development
supported not supported form buttons there are two ways to define buttons within html forms: the <input> element with its attribute type set to the values button, submit, reset or image the <button> element <input> the <input> element can make things a little difficult if you want to apply some css by using the element selector: <input type="button" value="
click me"> if we remove the border on all inputs, can we restore the default appearance on input buttons only?
... <button> the <button> element suffered from two issues that are now resolved: a bug in old versions of internet explorer sent the html content available between the starting and ending tag of the <button> element instead of the content of the value attribute when
clicked.
... this was only an issue if that value needed to be sent, such as when data processing depends on which button a user
clicked.
... <!--
clicking this button sent "<em>do a</em>" instead of "a" in some cases --> <button type="submit" name="iwantto" value="a"> <em>do a</em> </button> choosing one solution or the other is up to you based on your project's constraints.
How to structure a web form - Learn web development
labels are
clickable, too!
... another advantage of properly set up labels is that you can
click or tap the label to activate the corresponding widget.
... 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.
... for example,
clicking on the "i like cherry" label text in the example below will toggle the selected state of the taste_cherry checkbox: <form> <p> <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"> <label for="taste_1">i like cherry</label> </p> <p> <input type="checkbox" id="taste_2" name="taste_banana" value="banana"> <label for="taste_2">i like banana</label> </p> </form> note: you can find this example in checkbox-label.html (see it live also).
Sending forms through JavaScript - Learn web development
let's look at an example: <button>
click me!</button> and now the javascript: const btn = document.queryselector('button'); function senddata( data ) { console.log( 'sending data' ); const xhr = new xmlhttprequest(); let urlencodeddata = "", urlencodeddatapairs = [], name; // turn the data object into an array of url-encoded key/value pairs.
... xhr.send( urlencodeddata ); } btn.addeventlistener( '
click', function() { senddata( {test:'ok'} ); } ) here's the live result: note: this use of xmlhttprequest is subject to the same-origin policy if you want to send data to a third party web site.
... using this object is detailed in using formdata objects, but here are two examples: using a standalone formdata object <button>
click me!</button> you should be familiar with that html sample.
...something went wrong.' ); } ); // set up our request xhr.open( 'post', 'https://example.com/cors.php' ); // send our formdata object; http headers are set automatically xhr.send( fd ); } btn.addeventlistener( '
click', function() { senddata( {test:'ok'} ); } ) here's the live result: using formdata bound to a form element you can also bind a formdata object to an <form> element.
Your first form - Learn web development
there is great benefit to doing this — it associates the label with the form control, enabling mouse, trackpad, and touch device users to
click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users.
... a
click on a submit button (the default value) sends the form's data to the web page defined by the action attribute of the <form> element.
... a
click on a reset button resets all the form widgets to their default value immediately.
... a
click on a button button does...
Advanced text formatting - Learn web development
y { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...y { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...y { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...you should try having a play with these (try grabbing a copy of our other-semantics.html sample file): <pre><code>var para = document.queryselector('p'); para.on
click = function() { alert('owww, stop poking me!'); }</code></pre> <p>you shouldn't use presentational elements like <code><font></code> and <code><center></code>.</p> <p>in the above javascript example, <var>para</var> represents a paragraph element.</p> <p>select all the text with <kbd>ctrl</kbd>/<kbd>cmd</kbd> + <kbd>a</kbd>.</p> <pre>$ <kbd>ping mozilla.org</kbd> <samp>ping mozi...
Getting started with HTML - Learn web development
98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...you should see a link—that when hovered over—displays the value of the title attribute, and when
clicked, navigates to the web address in the href attribute.
... 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
...100%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
Test your skills: Links - Learn web development
the second link should be turned into a link you can
click to open up an email in the user's default mail application, with the recipient set as "whales@example.com".
... note: the first link in the example has the target="_blank" attribute set on it, so that when you
click on it, it opens the page in a new tab.
... note: the first three links in the example have the target="_blank" attribute set on them, so that when you
click on them, they open the linked page in a new tab.
... note: the first and third links in the example have the target="_blank" attribute set on them, so that when you
click on them, they open the linked page in a new tab.
TypeScript support in Svelte - Learn web development
clicking install all will install svelte for vs code.
... in this case, if you run npm run validate (either in the vs code console or terminal) you will get the following error: even better, if you run it from the vs code integrated terminal (you can open it with the ctrl + ` keyboard shortcut), cmd/ctrl +
clicking on the file name will take you to the line containing the error.
... replace the content of the filterbutton.svelte file with the following: <!-- components/filterbutton.svelte --> <script lang='ts'> import { filter } from '../types/filter.enum' export let filter: filter = filter.all </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === filter.all} aria-pressed={filter === filter.all} on:
click={()=> filter = filter.all} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === filter.active} aria-pressed={filter === filter.active} on:
click={()=> filter = filter.active} > <span class="visually-hidden">show</span> <span>active</span> <span clas...
...s="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === filter.completed} aria-pressed={filter === filter.completed} on:
click={()=> filter = filter.completed} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> here we are just importing the filter enum, and using it instead of the string values we used previously.
Handling common JavaScript problems - Learn web development
incorrectly using functions inside loops — for example, in bad-for-loop.html (see source code), we loop through 10 iterations, each time creating a paragraph and adding an on
click event handler to it.
... when
clicked, each one should alert a message containing its number (the value of i at the time it was created), however each one reports i as 11, because for loops do all their iterating before nested functions are invoked.
...
click on line number 51 in the center panel to add a breakpoint to it (you'll see a blue arrow appear over the top of it).
... exploring further down the call stack,
click onload in the call stack section.
Debugging a hang on OS X (Archived)
after about 3-4 seconds, select the hanging application in the “detected hangs” window and
click the “interrupt sampling” button.
... when it's done parsing the data,
click the "show text report" button; a new window will open with a couple of rows with stacktraces for all the threads in the sampled application.
... for a more detailed view of the sample data, make sure the sample you just recorded is selected in the “detected hangs” window and
click on the “open…” button.
... now,
click "start recording".
Tracking Protection
click the ⓘ symbol in the address bar to view information about the currently loaded page.
... if tracking cookies were present, you would be able to view the list by
clicking on "blocking tracking cookies" in the above image to view the following popup: you can
click "manage content blocking" to change the blocking settings: how does firefox choose what to block?
... for example, you should not use google analytics in the following way: <a href="http://www.example.com" on
click="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); ga('send', 'event', 'outbound', '
click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } </script> instead, you should account for the case when google analytics is missing by checking...
... to see if the ga object has initialized: <a href="http://www.example.com" on
click="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); if (window.ga && ga.loaded) { ga('send', 'event', 'outbound', '
click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } else { document.location = url; } } </script> more information about this technique is available at google analytics, privacy, and event tracking.
How to Report a Hung Firefox
type "about:crashes" in the url bar and
click on the top listing.
...type "about:crashes" in the url bar and
click on the top listing.
...(simple) use the menu button to find the crash me icon and
click the icon.
...type "about:crashes" in the url bar and
click on the top listing.
PopupNotifications.jsm
dismissed notifications can be activated by
clicking on their anchor.
... this lets you create a notification that will appear when the user
clicks the anchor.
...setting this property will make the prompt display a "learn more" link that, when
clicked, opens the url in a new tab.
...the first parameter to the callback is a string identifying the state change, and may be one of the following: "dismissed" the notification has been dismissed by the user (for example, by
clicking away or by switching tabs).
Fonts for Mozilla's MathML engine
open the latinmodern-math font file and
click the install button.
... open the stixmath-regular font file and
click the install button.
... double-
click the latinmodern-math font file
click the "install the font" button from the window that opens.
... open the stixmath-regular font file and
click the "install the font" button from the window that opens.
McCoy
simply
click the "create" toolbar button or select "create key" from the "keys" menu.
...the simplest way to do this is to select the key then
click the install toolbar button.
... if you wish to manually add the public key to the install.rdf you can right
click the key, select \"copy public key\" and then add it to the file as an updatekey entry.
...simply select the key you originally added to the add-on's install.rdf, then
click the "sign" toolbar button, select your update.rdf file and the data in it will be signed.
Rhino Debugger
you may set a breakpoint in a script by doing one of the following: place the cursor on the line at which you want to set a breakpoint and right-
click with the mouse.
... simply single-
click on the line number of the line at which you want to set a breakpoint.
... you may clear breakpoint in a script by doing one of the following: place the cursor on the line at which you want to clear a breakpoint and right-
click with the mouse.
... simply single-
click on the red dot or the line number of the line at which you want to clear a breakpoint.
Shumway
the user has adobe flash player disabled (or set to "
click-to-enable") for performance or security reasons.
... end-users and less involved developers may report issues by hovering over "shumway" within flash content,
clicking "report problems", and filling the form.
...from the main page for shumway at github,
click on "issues" and browse the outstanding issues for similar bugs to contribute to.
...
click on "new issue" to file a new entry if a duplicate is not found.
How to embed the JavaScript engine
then
click the view source button, and copy the code from the window that appears.
...// js_callfunctionname(cx, global, "func", 2, argv.begin(), rval.address()); js_callfunctionname(cx, global, "func", argv, &rval); example say the
click event is for the top-most or focused ui element at position (x, y): jsobject *target, *event; js::autovaluearray<1> argv(cx); /* * find event target and make event object to represent this
click.
... */ target = findeventtargetat(cx, global, x, y); event = neweventobject(cx, "
click", x, y); argv[0].setobjectornull(event); /* to emulate the dom, you might want to try "on
click" too.
... */ ok = js_callfunctionname(cx, target, "on
click", argv, &rval); /* now test rval to see whether we should cancel the event.
Building the WebLock UI
specifically, the user interface we create in this chapter will be overlaid into the statusbar of the browser component, where it will provide a small icon the user can
click to access the web lock interface.
... you also need to create the function that displays the weblock window itself when the user
clicks the weblock icon in the statusbar.
... note that this file defines the dialog that displays when the user/administrator
clicks the web locking icon in the bottom right corner of the browser.
... notice also that when it's
clicked, the button executes a javascript function called addthissite(), which we've already defined in the weblock.js file in client code overview above.
nsIDOMXULElement
66 introduced gecko 1.0 inherits from: nsidomelement last changed in gecko 1.9 (firefox 3) method overview void blur(); void
click(); void docommand(); void focus(); nsidomnodelist getelementsbyattribute(in domstring name, in domstring value); nsidomnodelist getelementsbyattributens(in domstring namespaceuri, in domstring name, in domstring value); attributes attribute type description align domstring gets/sets the value of the element's align attribute.
...
click() unless the element is disabled, sends mouse events that simulate the effect of
clicking the mouse on the element, then calls the docommand() method.
... void
click(); parameters none.
... docommand() generates and dispatches a basic command event, as if the element was
clicked with no keyboard modifiers.
nsIFrameLoader
); void activateremoteframe(); void destroy(); void loadframe(); void loaduri(in nsiuri auri); void sendcrossprocesskeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); void sendcrossprocessmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long a
clickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void updatepositionandsize(in nsiframe aiframe); native code only!
... void sendcrossprocessmouseevent( in astring atype, in float ax, in float ay, in long abutton, in long a
clickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe ); parameters atype the type of mouse event to send.
... abutton which button was
clicked, if any.
... a
clickcount the number of
clicks comprising the mouse button event, if any.
nsITaskbarPreviewController
method overview boolean drawpreview(in nsidomcanvasrenderingcontext2d ctx); boolean drawthumbnail(in nsidomcanvasrenderingcontext2d ctx, in unsigned long width, in unsigned long height); boolean onactivate(); void on
click(in nsitaskbarpreviewbutton button); void onclose(); attributes attribute type description height unsigned long the height in pixels of the preview image.
... onactivate() invoked when the user
clicks on the tab preview.
... on
click() invoked when one of the buttons on the window preview's toolbar is
clicked by the user.
... void on
click( in nsitaskbarpreviewbutton button ); parameters button an nsitaskbarpreviewbutton object representing the button that was pressed.
Troubleshooting XPCOM components registration
in the bottom right corner of the new dialog,
click browse...
... in the bottom left corner,
click add directory.
... after
clicking ok in the top right, check for any missing dependencies using file -> open -> firefox.exe (or equivalent).
...in the dialog that appears, you can provide command line parameters and
click ok to start the application.
Using popup notifications
in addition, notifications can be dismissed and recalled by
clicking anywhere outside the notification, then
clicking on the notification icon to bring it back again.
...", callback: function() { alert("first secondary option selected."); } }, { label: "second secondary option", accesskey: "2", callback: function() { alert("second secondary option selected."); } } ] ); when this notification is presented, and the user
clicks on the menu button in the panel, the display looks like this: when the user chooses one of your secondary actions from the drop-down menu, the corresponding callback is invoked.
... choosing the "not now" option dismisses the notification; it can be brought back by
clicking on the notification icon again.
....jsm'); var notify = new popupnotifications(gbrowser, document.getelementbyid("notification-popup"), document.getelementbyid("notification-popup-box")); var notification = notify.show( // browser gbrowser.selectedbrowser, // popup id "pdes-popup", // message "hi, there!, i'm gonna show you something today!!", // anchor id null, // main action { label: "
click here", accesskey: "d", callback: function() { // you can call your function here } }, // secondary action null, // options { // alternative way to set the popup icon popupiconurl: "chrome://popupnotifications/skin/mozlogo.png" } ); settimeout(function(){ notification.remove(); }, 900); // time in milliseconds to disappear the door-hanger popup.
Flash Activation: Browser Comparison - Plugins
mozilla firefox google chrome microsoft edge setting name ask to activate html5 by default
click-to-run 'application/x-shockwave-flash' in navigator.mimetypes by default when flash is inactive yes no no 'application/x-shockwave-flash' in navigator.mimetypes when user enables flash yes yes yes <object> with fallback content triggers ui yes, with exceptions no yes small/hidden flash triggers additional ui yes no no ...
...the user can
click on the flash object or the location bar icon to activate flash: users have the choice to allow flash just for the current session, or to remember their choice: google chrome in-page ui is displayed when the site attempts to use flash without fallback content: a user can
click the plugin element to show a prompt for allowing flash: if the site provides fallback content for an object e...
... a user can
click the information icon on the left side of the location bar on any site to open the site information and allow flash on that site: microsoft edge in-page ui is displayed when the site attempts to use flash.
...the user can
click the flash object to show activation options: users have the choice to allow flash just for the current session, or to remember their choice: site authoring tips if a flash element is very small, hidden, or covered by other content, users will probably not notice that flash is required and will become confused.
3D view - Firefox Developer Tools
when you
click on the 3d view button, the page goes into 3d view mode; in this mode, you can see your page presented in a 3d view in which nested blocks of html are increasingly "tall," projecting outward from the bottom of the page.
... by
clicking and dragging the view, you can rotate and re-orient the 3d presentation of the dom hierarchy of your page to see it from different angles, to better examine its structure.
...you can
click on elements to see their html in the html panel or the style panel.
... conversely, you can
click on elements in the breadcrumb bar to change which element is selected in the 3d view.
Index - Firefox Developer Tools
2 3d view html, tools, web development, web development:tools when you
click on the 3d view button, the page goes into 3d view mode; in this mode, you can see your page presented in a 3d view in which nested blocks of html are increasingly "tall," projecting outward from the bottom of the page.
... 50 network request details 110n:priority, debugging, dev tools, firefox, guide, networking, tools the request details pane appears when you
click on a network request in the request list.
... 102 rulers devtools, firefox, rulers, tools you can overlay horizontal and vertical rulers on a web page: 103 settings beginning with firefox 62, the icon to open developer tools settings has been moved into a menu accessed by
clicking/touching ...
... 125 open the debugger there are three ways to open the debugger: 126 pretty-print a minified file javascript to prettify a minified file,
click the pretty print source icon () at the bottom of the source pane.
Dominators view - Firefox Developer Tools
for example, if we
click on the first window object: we can see that this window dominates a css2properties object, whose retained size is 2% of the total snapshot size.
...by
clicking on the disclosure arrow next to the function, we can see those nodes.
... you can use alt +
click to expand the whole graph under a node.
...
clicking the file name will take you to that spot in the debugger.
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
in the html pane in the html pane, an element laid out with flexbox has the word flex next to it as shown in the following image:
click the word flex in the html pane to keep the overlay visible when you move the mouse away from the container.
...
clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item: the overlay will still be shown when you select other elements from the inspector panel, so you can edit related css properties and see how the flex items are affected by your changes.
... flex container options the flex container section of the layout view looks like this: there are two settings you can change in the flex container section: you can control the color of the overlay by
clicking on the small circle next to the selector.
... if you
click on the item, the display shifts to show details about that element: this view shows information about the calculations for the size of the selected flex item: a diagram visualizing the sizing of the flex item content size - the size of the component without any restraints imposed on it by its parent flexibility - how much a flex item grew or shrunk based on its flex-grow value when there ...
UI Tour - Firefox Developer Tools
click the name of the property to open the reference article for that property on mdn web docs.
... in the all issues section,
click the name of the element that uses the property to select that element in the inspector.
... if more than one element has a given property applied to it,
click the triangle to show all the occurences.
... to configure the set of browsers you want the compatibility view to check for,
click settings at the bottom of the panel.
Waterfall - Firefox Developer Tools
event type for example, "
click" or "message".
...
click the link to see the allocation profile leading up to this gc event.
...
click the link to see the allocation profile leading up to this gc event.
... for example, consider code like this: var timerbutton = document.getelementbyid("timer"); timerbutton.addeventlistener("
click", handle
click, false); function handle
click() { console.time("timer"); runtimer(1000).then(timerfinished); } function timerfinished() { console.timeend("timer"); console.log("ready!"); } function runtimer(t) { return new promise(function(resolve) { settimeout(resolve, t); }); } the waterfall will display a marker for the period between time() and timeend(), and if you select i...
Settings - Firefox Developer Tools
opening settings beginning with firefox 62, the icon to open developer tools settings has been moved into a menu accessed by
clicking/touching ...
...to see the settings, open any of the developer tools, and then:
click the "settings" command in the menu: or press f1 to toggle between the active tool and the settings pane the settings pane looks something like this: categories default firefox developer tools this group of checkboxes determines which tools are enabled in the toolbox.
... screenshot behavior screenshot to clipboard when you
click the icon for the screenshot tool, copy the screenshot image to the clipboard (the image will still be saved to your downloads directory).
... play camera shutter sound when you
click the icon for the screenshot tool, play a shutter sound.
Storage Inspector - Firefox Developer Tools
under "cache storage", objects are organized by origin and then by the name of the cache: indexeddb objects are organized by origin, then by database name, then by object store name: with the cookies, local storage, and session storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin: you can
click on each item in the tree to expand or collapse its children.
...
clicking on a tree item will display detailed information about that item in the table widget on the right.
... for example,
clicking on an origin which is a child of the cookies storage type will show all the cookies belonging to that domain.
...you can hide and show columns by context-
clicking on the table header and selecting the columns you want to see: search there's a search box at the top of the table widget: this filters the table to show only items which match the search term.
Rich output - Firefox Developer Tools
click on the triangle, and the object will be expanded to show its contents: starting with firefox 67 (available now in firefox developer) you can use the arrow keys on your keyboard to navigate through objects displayed in the console.
...
click on the arrow next to the request and a details panel will open that is equivalent to the headers panel in the network monitor tool.
... export output to the clipboard once you have output in the console window, you can save it to the clipboard by right-
clicking on the output and selecting export visible messages to clipboard: this will copy all of the output to the clipboard.
... object { status: "to do", description: "normalize table", datecreated: 1552404533790 } length: 4 <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console output, it's highlighted on the page: in the screenshot above you'll also see a blue "target" icon next to the node in the console output:
click it to switch to the inspector with that node selected.
Events and the DOM - Web APIs
eventtarget.addeventlistener // assuming mybutton is a button element mybutton.addeventlistener('
click', greet, false) function greet(event){ // print and have a look at the event object // always print arguments in case of overlooking any other arguments console.log('greet:', arguments) alert('hello world') } this is the method you should use in modern web pages.
... html attribute <button on
click="alert('hello world!')"> the javascript code in the attribute is passed the event object via the event parameter.
... dom element properties // assuming mybutton is a button element mybutton.on
click = function(event){alert('hello world')} the function can be defined to take an event parameter.
... function print(evt) { // the evt parameter is automatically assigned the event object // take care of the differences between console.log & alert console.log('print:', evt) alert(evt) } // any function should have an appropriate name, that's what called semantic table_el.on
click = print ...
EffectTiming.fill - Web APIs
first we'll define the two objects that describe the keyframes and the timing configuration to use, then we'll actually see the code that triggers and runs the animation when the "animatebutton" button is
clicked.
... document.getelementbyid("animatebutton").addeventlistener("
click", event => { document.getelementbyid("box").animate( boxrotationkeyframes, boxrotationtiming ); }, false); the rest of the code is pretty simple: it adds an event listener to the "animate" button so that when it's
clicked by the user, the box is animated by calling element.animate() on it, providing the boxrotationkeyframes and boxrotationtiming objects to describe the animation that...
...notice how before the animation starts running, the box is upright, then upon
clicking the "animate!" button, the box is instantly rotated 90° to the left (to correspond to the first keyframe in the animation sequence).
... elem.addeventlistener('
click', async evt => { const animation = elem.animate( { transform: `translate(${evt.clientx}px, ${evt.clienty}px)` }, { duration: 800, fill: 'forwards' } ); await animation.finished; // commitstyles will record the style up to and including `animation` and // update elem’s specified style with the result.
EventListener - Web APIs
example html <button id="btn">
click here!</button> javascript const buttonelement = document.getelementbyid('btn'); // add a handler for the '
click' event by providing a callback function.
... // whenever the element is
clicked, a pop-up with "element
clicked!" will // appear.
... buttonelement.addeventlistener('
click', function (event) { alert('element
clicked through function!'); }); // for compatibility, a non-function object with a `handleevent` property is // treated just the same as a function itself.
... buttonelement.addeventlistener('
click', { handleevent: function (event) { alert('element
clicked through handleevent property!'); } }); result see also: addeventlistener specifications specification status comment domthe definition of 'eventlistener' in that specification.
Force Touch events - Web APIs
force touch events are a proprietary, apple-specific feature which makes possible (where supported by the input hardware) new interactions based on how hard the user
clicks or presses down on the touchscreen or trackpad.
... webkitmouseforcedown this event is fired after the mousedown event as soon as sufficient pressure has been applied for it to qualify as a "force
click".
... webkitmouseforceup this event is fired after the webkitmouseforcedown event as soon as the pressure has been reduced sufficiently to end the "force
click".
...wn, webkitmouseforceup, mousemove, and mouseup event objects: mouseevent.webkitforce read only the amount of pressure currently being applied to the trackpad/touchscreen constants these constants are useful for determining the relative intensity of the pressure indicated by mouseevent.webkitforce: mouseevent.webkit_force_at_mouse_down read only minimum force necessary for a normal
click mouseevent.webkit_force_at_force_mouse_down read only minimum force necessary for a force
click specifications not part of any specification.
GeolocationCoordinates.longitude - Web APIs
javascript the javascript code below creates an event listener so that when the user
clicks on a button, the location information is retrieved and displayed.
... let button = document.getelementbyid("get-location"); let lattext = document.getelementbyid("latitude"); let longtext = document.getelementbyid("longitude"); button.addeventlistener("
click", function() { navigator.geolocation.getcurrentposition(function(position) { let lat = position.coords.latitude; let long = position.coords.longitude; lattext.innertext = lat.tofixed(2); longtext.innertext = long.tofixed(2); }); }); after setting up variables to more conveniently reference the button element and the two elements into which the latitude and logitude will be drawn, the event listener is established by calling addeventlistener() on the <button> element.
... when the user
clicks the button, we'll fetch and display the location information.
... upon receiving a
click event, we call getcurrentposition() to request the device's current position.
GlobalEventHandlers.onanimationiteration - Web APIs
@keyframes slidebox { from { left:0; top:0; } to { left:calc(100% - var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } javascript some javascript code will need to be written to handle the
click on the button to start the next iteration.
...it simply sets the box's animation-play-state to "paused", then updates the text displayed in the button to indicate that
clicking the button will start playing the next iteration of theanimation.
... finally, we set up a handler for a
click on the button that runs the animation: document.getelementbyid("play").addeventlistener("
click", function(event) { box.style.animationplaystate = "running"; iterationcounter++; }, false); this sets the box element's animation-play-state to "running" and increments the iteration counter.
... result assembled together, you get this: each time the box reaches the opposing corner, it stops, with the button reflecting which iteration number is up next, until you
click the button to run the next iteration.
GlobalEventHandlers.onpointerdown - Web APIs
var targetbox = document.getelementbyid("target"); targetbox.onpointerdown = handledown; function handledown(evt) { var action; switch(evt.pointertype) { case "mouse": action = "
clicking"; break; case "pen": action = "tapping"; break; case "touch": action = "touching"; break; default: action = "interacting with"; break; } targetbox.innerhtml = "<strong>thanks for " + action + " me!</strong>"; evt.preventdefault(); } this simply uses onpointerdown to establish the function handledown() as the event handler for pointe...
... we also have a handler for pointerup events: targetbox.onpointerup = handleup; function handleup(evt) { targetbox.innerhtml = "tap me,
click me, or touch me!"; evt.preventdefault(); } this code's job is to just restore the original text into the target box after the user's interaction with the element ends (for example, when they release the mouse button, or when they lift the stylus or finger from the screen).
... html the html is extremely simple: <div id="target"> tap me,
click me, or touch me!
...try tapping,
clicking, or touching the box and see what happens.
Using IndexedDB - Web APIs
'(biblioid: ' + value.biblioid + ') ' + value.title + '</li>'); if (value.year != null) list_item.append(' - ' + value.year); if (value.hasownproperty('blob') && typeof value.blob != 'undefined') { var link = $('<a href="' + cursor.key + '">file</a>'); link.on('
click', function() { return false; }); link.on('mouseenter', function(evt) { setinviewer(evt.target.getattribute('href')); }); list_item.append(' / '); list_item.append(link); } else { list_item.append(" / no attached file"); } pub_list.append(list_item); }; // move on to the next object...
..."failure: " + msg : "failure"; $('#msg').html('<span class="action-failure">' + msg + '</span>'); } function resetactionstatus() { console.log("resetactionstatus ..."); $('#msg').empty(); console.log("resetactionstatus done"); } function addeventlisteners() { console.log("addeventlisteners"); $('#register-form-reset').
click(function(evt) { resetactionstatus(); }); $('#add-button').
click(function(evt) { console.log("add ..."); var title = $('#pub-title').val(); var biblioid = $('#pub-biblioid').val(); if (!title || !biblioid) { displayactionfailure("required field(s) missing"); return; } var year = $('#pub-year').val(); if (year != '') { ...
... //file_input.val(null); var file_url = $('#pub-file-url').val(); if (selected_file) { addpublication(biblioid, title, year, selected_file); } else if (file_url) { addpublicationfromurl(biblioid, title, year, file_url); } else { addpublication(biblioid, title, year); } }); $('#delete-button').
click(function(evt) { console.log("delete ..."); var biblioid = $('#pub-biblioid-to-delete').val(); var key = $('#key-to-delete').val(); if (biblioid != '') { deletepublicationfrombib(biblioid); } else if (key != '') { // better use number.isinteger if the engine has ecmascript 6 if (key == '' || isnan(key)) { displayactionfailure("inval...
...id key"); return; } key = number(key); deletepublication(key); } }); $('#clear-store-button').
click(function(evt) { clearobjectstore(); }); var search_button = $('#search-list-button'); search_button.
click(function(evt) { displaypublist(); }); } opendb(); addeventlisteners(); })(); // immediately-invoked function expression (iife) test the online live demo note: window.indexeddb.open() is asynchronous; the method will finish running long before the success event is fired.
MediaStreamConstraints.audio - Web APIs
html content <p>
click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; fo...
...nt-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("
click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a
click event which uses getusermedia() to obtain an audio-only stream with no specific constraints, then attaches the resulting stream to an <audio> element once the stream is returned.
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>
click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement...
... = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("
click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a
click event which calls getusermedia(), specifying a set of audio constraints requesting that echo cancellation be enabled and that, if possible, the sample rate be 8 bits per sample instead of the more common 16 bits (possibly as a bandwidth saving measure).
MediaStreamConstraints.video - Web APIs
html content <p>
click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; fo...
...nt-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("
click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a
click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video> element once the stream is returned.
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>
click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement...
... = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("
click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a
click event which calls getusermedia(), specifying a set of video constraints that indicate a preference for a video track whose dimensions are as close as possible to 160x120 pixels, and whose frame rate is as close to 15 frames per second as possible.
Selection.modify() - Web APIs
click somewhere inside the example (optionally selecting some text), and then
click the button to expand the selection.
... html <p>
click somewhere in this example.
... then
click the button below to expand the selection.
...>line boundary</option> <option value="sentenceboundary">sentence boundary</option> <option value="paragraphboundary">paragraph boundary</option> <option value="documentboundary">document boundary</option> </select> <br><br> <button>extend selection</button> javascript let select = document.queryselector('select'); let button = document.queryselector('button'); button.addeventlistener('
click', modify); function modify() { let selection = window.getselection(); selection.modify('extend', 'forward', select.value); } result specifications this method is not part of any specification.
SubtleCrypto.exportKey() - Web APIs
*/ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.addeventlistener("
click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
...*/ window.crypto.subtle.generatekey( { name: "rsa-pss", // consider using a 4096-bit key for systems that require long-term security moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["sign", "verify"] ).then((keypair) => { const exportbutton = document.queryselector(".pkcs8"); exportbutton.addeventlistener("
click", () => { exportcryptokey(keypair.privatekey); }); }); subjectpublickeyinfo export this example exports an rsa public encryption key as a pem-encoded subjectpublickeyinfo object.
...*/ window.crypto.subtle.generatekey( { name: "rsa-oaep", // consider using a 4096-bit key for systems that require long-term security moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["encrypt", "decrypt"] ).then((keypair) => { const exportbutton = document.queryselector(".spki"); exportbutton.addeventlistener("
click", () => { exportcryptokey(keypair.publickey); }); }); json web key import this code exports an ecdsa private signing key as a json web key object.
...*/ window.crypto.subtle.generatekey( { name: "ecdsa", namedcurve: "p-384" }, true, ["sign", "verify"] ).then((keypair) => { const exportbutton = document.queryselector(".jwk"); exportbutton.addeventlistener("
click", () => { exportcryptokey(keypair.privatekey); }); }); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.exportkey()' in that specification.
Raining rectangles - Web APIs
the objective: try to catch as many of the raining rectangles as you can by
clicking on them.
..., setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") .addeventlistener("
click", player
click, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.scissor(rainingrect.position[0], rainingrect.position[1], rainingrect.size[0] , rainingrect.size[1]); gl.clear(gl.color_buffer_bit); rainingrect.position[1] -= rainingrect.velocity; if...
... timer = settimeout(drawanimation, 17); } function player
click (evt) { // we need to transform the position of the
click event from // window coordinates to relative position inside the canvas.
... var position = [ evt.pagex - evt.target.offsetleft, gl.drawingbufferheight - (evt.pagey - evt.target.offsettop), ]; // if the
click falls inside the rectangle, we caught it.
A simple RTCDataChannel sample - Web APIs
function startup() { connectbutton = document.getelementbyid('connectbutton'); disconnectbutton = document.getelementbyid('disconnectbutton'); sendbutton = document.getelementbyid('sendbutton'); messageinputbox = document.getelementbyid('message'); receivebox = document.getelementbyid('receivebox'); // set event listeners for user interface widgets connectbutton.addeventlistener('
click', connectpeers, false); disconnectbutton.addeventlistener('
click', disconnectpeers, false); sendbutton.addeventlistener('
click', sendmessage, false); } this is quite straightforward.
... establishing a connection when the user
clicks the "connect" button, the connectpeers() method is called.
... sending messages when the user presses the "send" button, the sendmessage() method we've established as the handler for the button's
click event is called.
... disconnecting the peers when the user
clicks the "disconnect" button, the disconnectpeers() method previously set as that button's handler is called.
Taking still photos with WebRTC - Web APIs
the first panel on the left contains two components: a <video> element, which will receive the stream from webrtc, and a <button> the user
clicks to capture a video frame.
...this function's job is to request access to the user's webcam, initialize the output <img> to a default state, and to establish the event listeners needed to receive each frame of video from the camera and react when the button is
clicked to capture an image.
... handle
clicks on the button to capture a still photo each time the user
clicks the startbutton, we need to add an event listener to the button, to be called when the
click event is issued: startbutton.addeventlistener('
click', function(ev){ takepicture(); ev.preventdefault(); }, false); this method is simple enough: it just calls our takepicture() function, defined below in the section ...
...capturing a frame from the stream, then calls event.preventdefault() on the received event to prevent the
click from being handled more than once.
Controlling multiple parameters with ConstantSourceNode - Web APIs
function setup() { context = new (window.audiocontext || window.webkitaudiocontext)(); playbutton = document.queryselector("#playbutton"); volumecontrol = document.queryselector("#volumecontrol"); playbutton.addeventlistener("
click", toggleplay, false); volumecontrol.addeventlistener("input", changevolume, false); gainnode1 = context.creategain(); gainnode1.gain.value = 0.5; gainnode2 = context.creategain(); gainnode3 = context.creategain(); gainnode2.gain.value = gainnode1.gain.value; gainnode3.gain.value = gainnode1.gain.value; volumecontrol.value = gainnode1.gain.value; constantnode = context.createc...
... then we assign a handler for the play button's
click event (see toggling the oscillators on and off for more on the toggleplay() method), and for the volume slider's input event (see controlling the linked oscillators to see the very short changevolume() method).
... toggling the oscillators on and off because oscillatornode doesn't support the notion of being in a paused state, we have to simulate it by terminating the oscillators and starting them again when the play button is
clicked again to toggle them back on.
... starting the oscillators when the user
clicks the play/pause toggle button while the oscillators aren't playing, the startoscillators() function gets called.
XRSystem - Web APIs
if (navigator.xr) { immersivebutton.addeventlistener("
click", onbutton
clicked); navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.disabled = false; } else { immersivebutton.disabled = true; }); } function onbutton
clicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then(() => { // onsessionstarted() not shown for reasons of brevity an...
...if it's found, we know webxr is present, so we proceed by establishing a handler for the button which the user can
click to toggle immersive vr mode on and off.
... the onbutton
clicked() function checks to see if there's already a session running.
...that way, if the user
clicks the button again, a new session will start.
ARIA: switch role - Accessibility
required javascript features handler for
click events when the user
clicks on the switch widget, a
click event is fired, which must be handled in order to change the state of the widget.
... changing the aria-checked attribute when a
click event is fired on the switch widget, the handler must change the value of the aria-checked attribute from true to false, or vice versa.
... <button role="switch" aria-checked="true" id="speakerpower" class="switch"> <span>off</span> <span>on</span> </button> <label for="speakerpower" class="switch">speaker power</label> javascript this javascript code defines and applies a function to handle
click events on switch widgets.
... document.queryselectorall(".switch").foreach(function(theswitch) { theswitch.addeventlistener("
click", handle
clickevent, false); }); function handle
clickevent(evt) { let el = evt.target; if (el.getattribute("aria-checked") == "true") { el.setattribute("aria-checked", "false"); } else { el.setattribute("aria-checked", "true"); } } css the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm.
Keyboard - Accessibility
see also tabindex global html attribute understanding focus order don't use tabindex greater than 0
clickable elements must be focusable and should have interactive semantics if an element can be
clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.
... an element is
clickable if it has an on
click event handler defined.
...that is, if you have defined event handlers for touch or
click events, you should also define them for keyboard events.
... the keyboard event handlers should enable the effectively the same interaction as the touch or
click handlers.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
<div class="box"> </div> <div class="runbutton">
click me to run the animation</div> css content now we'll define the animation itself using css.
...the meat of this technique is in the play() function, which is called when the user
clicks on the "run" button.
... of course, we also need to add an event handler to our "run" button so it'll actually do something: document.queryselector(".runbutton").addeventlistener("
click", play, false); result stopping an animation simply removing the animation-name applied to an element will make it jump or cut to its next state.
... the following demo shows how you'd achieve the aforementioned javascript technique: .slidein { animation-duration: 5s; animation-name: slidein; animation-iteration-count: infinite; } .stopped { animation-name: none; } @keyframes slidein { 0% { margin-left: 0%; } 50% { margin-left: 50%; } 100% { margin-left: 0%; } } <h1 id="watchme">
click me to stop</h1> let watchme = document.getelementbyid('watchme') watchme.classname = 'slidein' const listener = (e) => { watchme.classname = 'slidein stopped' } watchme.addeventlistener('
click', () => watchme.addeventlistener('animationiteration', listener, false) ) demo https://jsfiddle.net/morenoh149/5ty5a4oy/ ...
Using CSS animations - CSS: Cascading Style Sheets
examples note: some older browsers (pre-2017) may need prefixes; the live examples you can
click to see in your browser include the -webkit prefixed syntax.
... <p>the caterpillar and alice looked at each other for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> note: reload page to see the animation, or
click the codepen button to see the animation in the codepen environment.
... note: reload page to see the animation, or
click the codepen button to see the animation in the codepen environment.
... note: reload page to see the animation, or
click the codepen button to see the animation in the codepen environment.
Getting Started - Developer guides
<button id="ajaxbutton" type="button">make a request</button> <script> (function() { var httprequest; document.getelementbyid("ajaxbutton").addeventlistener('
click', makerequest); function makerequest() { httprequest = new xmlhttprequest(); if (!httprequest) { alert('giving up :( cannot create an xmlhttp instance'); return false; } httprequest.onreadystatechange = alertcontents; httprequest.open('get', 'test.html'); httprequest.send(); } function alertcontents() { if (httprequest.readystate === xmlhttprequest...
....done) { if (httprequest.status === 200) { alert(httprequest.responsetext); } else { alert('there was a problem with the request.'); } } } })(); </script> in this example: the user
clicks the "make a request" button; the event handler calls the makerequest() function; the request is made and then (onreadystatechange) the execution is passed to alertcontents(); alertcontents() checks if the response was received and ok, then alert()s the contents of the test.html file.
...on
click="makerequest('test.xml')"> ...
...er their name: <label>your name: <input type="text" id="ajaxtextbox" /> </label> <span id="ajaxbutton" style="cursor: pointer; text-decoration: underline"> make a request </span> we'll also add a line to our event handler to get the user's data from the text box and send it to the makerequest() function along with the url of our server-side script: document.getelementbyid("ajaxbutton").on
click = function() { var username = document.getelementbyid("ajaxtextbox").value; makerequest('test.php',username); }; we need to modify makerequest() to accept the user data and pass it along to the server.
Printing - Developer guides
n finished if you want to be able to automatically close a popup window (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this: <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript window close example </title> <script type="text/javascript"> function popupon
click() { my_window = window.open('', 'mywindow', 'status=1,width=350,height=150'); my_window.document.write('<html><head><title>print me</title></head>'); my_window.document.write('<body onafterprint="self.close()">'); my_window.document.write('<p>when you print this window, it will close afterward.</p>'); my_window.document.write('</body></html>'); } </script> </head...
...> <body> <p>to try out the <code>afterprint</code> event,
click the link below to open the window to print.
... you can also try changing the code to use <code>beforeprint</code> to see the difference.</p> <p><a href="javascript: popupon
click()">open popup window</a></p> </body> </html> view live examples print an external page without opening it if you want to be able to print an external page without opening it, you can utilize a hidden <iframe> (see: htmliframeelement), automatically removing it after the user prints its contents.
...rl) { var ohiddframe = document.createelement("iframe"); ohiddframe.onload = setprint; ohiddframe.style.position = "fixed"; ohiddframe.style.right = "0"; ohiddframe.style.bottom = "0"; ohiddframe.style.width = "0"; ohiddframe.style.height = "0"; ohiddframe.style.border = "0"; ohiddframe.src = surl; document.body.appendchild(ohiddframe); } </script> </head> <body> <p><span on
click="printpage('externalpage.html');" style="cursor:pointer;text-decoration:underline;color:#0000ff;">print external page!</span></p> </body> </html> note: older versions of internet explorer cannot print the contents of a hidden <iframe>.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
to find that, we
click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "monochromatic").
... paletton computes an appropriate accent color;
clicking on the accent color down in the bottom-right corner tells us that this color is #508d7c.
...for example, if we don't like the proposed greenish-blue color, we can
click the triad color scheme icon, which presents us with the following: that greyish blue in the top-right looks pretty good.
...
clicking on it, we find that it's #556e8d.
HTTP Index - HTTP
this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers (on
click) and xslt stylesheets which can trigger script execution.
...this includes only inline script event handlers like on
click, but not urls loaded directly into <script> elements.
... 100 csp: script-src-elem csp, content, content-security-policy, directive, http, reference, script, security, script-src, source the http content-security-policy (csp) script-src-elem directive specifies valid sources for javascript <script> elements, but not inline script event handlers like on
click.
...sites can use this to avoid
clickjacking attacks, by ensuring that their content is not embedded into other sites.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
instead of showing the notification immediately though, best practice dictates that we should show the popup when the user requests it by
clicking on a button: var button = document.getelementbyid("notifications"); button.addeventlistener('
click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications...
...the default option is chosen when the user won't make a choice, and the other two are set when the user
clicks yes or no respectively.
... fetch('./register', { method: 'post', headers: { 'content-type': 'application/json' }, body: json.stringify({ subscription: subscription }), }); then the globaleventhandlers.on
click function on the subscribe button is defined: document.getelementbyid('doit').on
click = function() { const payload = document.getelementbyid('notification-payload').value; const delay = document.getelementbyid('notification-delay').value; const ttl = document.getelementbyid('notification-ttl').value; fetch('./sendnotification', { method: 'post', headers: { ...
... 'content-type': 'application/json' }, body: json.stringify({ subscription: subscription, payload: payload, delay: delay, ttl: ttl, }), }); }; when the button is
clicked, fetch asks the server to send the notification with the given parameters: payload is the text that to be shown in the notification, delay defines a delay in seconds until the notification will be shown, and ttl is the time-to-live setting that keeps the notification available on the server for a specified amount of time, also defined in seconds.
simple-storage - Archive of obsolete content
for example, this add-on tries to store the urls of pages the user visits: var ss = require("sdk/simple-storage"); ss.storage.pages = []; require("sdk/tabs").on("ready", function(tab) { ss.storage.pages.push(tab.url); }); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", on
click: function() { console.log(ss.storage.pages); } }); but this isn't going to work, because it empties the array each time the add-on runs (for example, each time firefox is started).
...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", on
click: function() { ss.storage.value = 1; console.log("setting value"); } }); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", on
click: function() { console.log(ss.storage.value); } }); require("sdk/ui/button/action").actionbutton({ id: "delete", label: "delete", icon: "./delete.png", on
click: function() { delete ss.stor...
...age.value; console.log("deleting value"); } }); if you run it, you'll see that after
clicking "read" after
clicking "delete" gives you the expected output: info: undefined note that to run this add-on you'll have to save icon files named "write.png", "read.png", and "delete.png" to the add-on's "data" directory.
ui/frame - Archive of obsolete content
if you send a json object, the sdk takes care of serializing and deserializing it for you: // frame.js var label = window.document.getelementbyid("linky"); label.addeventlistener("
click", function() { window.parent.postmessage({ "type" : "ping", "reason" : "they
clicked me" }, "*"); }, true); // main.js var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); frame.on("message", pong); function pong(e) { if (e.data.type == "ping") { console.log(e.data.reason); e.source.postmessage("pong", event.origin); } } globals...
... message listen to this event if you want to receive messages from frame scripts that are sent using window.parent.postmessage(): // frame.js var label = window.document.getelementbyid("linky"); label.addeventlistener("
click", function() { window.parent.postmessage("ping", "*"); }, true); // main.js var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); frame.on("message", pong); function pong(e) { if (e.data == "ping") { e.source.postmessage("pong", e.origin); } } arguments event : this contains three properties: source, which defines a postmessage() function w...
...if the payload was a json object, you can access it like an object: // frame.js var label = window.document.getelementbyid("linky"); label.addeventlistener("
click", function() { window.parent.postmessage({ "type" : "ping", "reason" : "they
clicked me" }, "*"); }, true); // main.js var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); frame.on("message", pong); function pong(e) { if (e.data.type == "ping") { console.log(e.data.reason); e.source.postmessage("pong", e.origin); } } ...
Creating Reusable Modules - Archive of obsolete content
var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } putting it together the complete add-on adds a button to firefox: when the user
clicks the button, we ask them to select a file, compute the hash, and log the hash to the console: var {cc, ci} = require("chrome"); // return the two-digit hexadecimal code for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(16)).slice(-2); } function md5file(path) { var f = cc["@mozilla.org/file/local;1"] .createinstance(ci.nsilocalfile); f.initwithpath(pat...
... } return path; } require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png" }, on
click: function() { console.log(md5file(promptforfile())); } }); this works , but index.js is now getting longer and its logic is harder to understand.
...h, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } exports.hashfile = md5file; index.js finally, update index.js to import these two new modules and use them: var filepicker = require("./filepicker.js"); var md5 = require("./md5.js"); require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png" }, on
click: function() { console.log(md5.hashfile(filepicker.promptforfile())); } }); distributing modules with jpm, we use npm as the package manager for sdk modules that don't ship inside firefox.
List Open Tabs - Archive of obsolete content
the following add-on adds an action button that logs the urls of open tabs when the user
clicks it: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", on
click: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) console.log(tab.url); } note: to get this working, you will need to save an icon for the button to your add-on's "data" directory as "icon-16.png".
... run the add-on, load a couple of tabs and
click the button.
...the script adds a red border to the tab's document: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", on
click: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) runscript(tab); } function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.
Progress Listeners - Archive of obsolete content
note that onpageload does not fire for back button
clicks.
...using the following code, you will get notified when user navigates to another page (by
clicking a link, using the back/forward button, by typing an address in the location bar, etc.) and also when user switches tabs.
... var myext_urlbarlistener = { onlocationchange: function (aprogress, arequest, auri, aflags) { if (aflags & ci.nsiwebprogresslistener.location_change_same_document) { //anchor
clicked!
Offering a context menu for form controls - Archive of obsolete content
firefox 3 changed the behavior of right-
click on form controls to no longer display a context menu by default.
... <overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-
click behavior the overlaid code is responsible for adjusting the behavior of right-
clicking on form controls.
... as a result, all controls in the window will support a context menu when right-
clicked, since we've changed the core behavior of context menus to override their default behavior of doing nothing on form controls.
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
double-
click on quicknote.js to open it in source-code view (figure 2).
...next,
click the edit button to set up the “2 1+” test case (listing 2).
... the next command will import the source code: gonzui-import.exe mozilla once the import process is complete, type the following command to launch the gonzui server: gonzui-server.exe now you can access gonzui from your web browser by typing the following into your location bar : http://localhost:46984 this lets you browse all packages,
click on links to traverse them, and take traversed-link locations as search starting points (figure a).
Creating a dynamic status bar extension - Archive of obsolete content
version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" on
click="stockwatcher.refreshinformation()" /> </statusbar> </overlay> also, notice that the definition of the status bar panel now includes a new property, on
click, which references the javascript function that will be executed whenever the user
clicks on the status bar panel.
... our extension will refresh the stock information display when the user
clicks the panel.
...it's called whenever the user
clicks on the status bar panel, when our extension is first added to a browser window, and by the interval handler to periodically update the display.
Creating a Microsummary - Archive of obsolete content
install the extension (restarting firefox to complete installation) then go to the spread firefox home page, find the firefox download count (a large number at the bottom of the right-hand column), context
click on the number, and select view xpath from the context menu.
... for example, if we put the generator file on the web at http://people.mozilla.com/~myk/micro...-generator.xml, and we wanted users to be able to install it from http://people.mozilla.com/~myk/micro...ial/index.html, we might add the following code to the index.html page: <button on
click="window.sidebar.addmicrosummarygenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">install the spread firefox home page microsummary!</button>
clicking that button will generate a javascript error on browsers that don't support microsummaries, however, so to improve the experience for those users, we should check to see if the user is using a microsummaries-en...
...ng code: <script> const warning = "sorry, you need a microsummary-enabled browser like firefox 2.0 to install and use microsummary generators."; function addgenerator(url) { if (typeof window.sidebar == "object" && typeof window.sidebar.addmicrosummarygenerator == "function") window.sidebar.addmicrosummarygenerator(url); else alert(warning); } </script> <button on
click="addgenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">install the spread firefox home page microsummary!</button> note that due to bug 341283, addmicrosummarygenerator() will not accept a relative url.
In-Depth - Archive of obsolete content
click file->inspect and select the browser window.
...
click on the inspect icon and then
click on the back button in the browser window.
...
click the icon located above the dom information and choose css style rules.
jspage - Archive of obsolete content
ative({name:"event",initialize:function(a,f){f=f||window;var k=f.document;a=a||f.event;if(a.$extended){return a;}this.$extended=true;var j=a.type; var g=a.target||a.srcelement;while(g&&g.nodetype==3){g=g.parentnode;}if(j.test(/key/)){var b=a.which||a.keycode;var m=event.keys.keyof(b);if(j=="keydown"){var d=b-111; if(d>0&&d<13){m="f"+d;}}m=m||string.fromcharcode(b).tolowercase();}else{if(j.match(/(
click|mouse|menu)/i)){k=(!k.compatmode||k.compatmode=="css1compat")?k.html:k.body; var i={x:a.pagex||a.clientx+k.scrollleft,y:a.pagey||a.clienty+k.scrolltop};var c={x:(a.pagex)?a.pagex-f.pagexoffset:a.clientx,y:(a.pagey)?a.pagey-f.pageyoffset:a.clienty}; if(j.match(/dommousescroll|mousewheel/)){var h=(a.wheeldelta)?a.wheeldelta/120:-(a.detail||0)/3;}var e=(a.which==3)||(a.button==2);var l=null;if(j.mat...
...ch(/over|out/)){switch(j){case"mouseover":l=a.relatedtarget||a.fromelement; break;case"mouseout":l=a.relatedtarget||a.toelement;}if(!(function(){while(l&&l.nodetype==3){l=l.parentnode;}return true;}).create({attempt:browser.engine.gecko})()){l=false; }}}}return $extend(this,{event:a,type:j,page:i,client:c,right
click:e,wheel:h,relatedtarget:l,target:g,code:b,key:m,shift:a.shiftkey,control:a.ctrlkey,alt:a.altkey,meta:a.metakey}); }});event.keys=new hash({enter:13,up:38,down:40,left:37,right:39,esc:27,space:32,backspace:8,tab:9,"delete":46});event.implement({stop:function(){return this.stoppropagation().preventdefault(); },stoppropagation:function(){if(this.event.stoppropagation){this.event.stoppropagation();}else{this.event.cancelbubble=true;}return this;},preventdefault:function(){if(this.event.
...{var c=this.retrieve("events");if(!c||!c[d]){return this;}c[d].keys.each(function(e){e.create({bind:this,delay:a,"arguments":b})(); },this);return this;},cloneevents:function(d,a){d=document.id(d);var c=d.retrieve("events");if(!c){return this;}if(!a){for(var b in c){this.cloneevents(d,b); }}else{if(c[a]){c[a].keys.each(function(e){this.addevent(a,e);},this);}}return this;}});element.nativeevents={
click:2,dbl
click:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined)...
Tamarin build documentation - Archive of obsolete content
preparing your eclipse workspace and perspective open the c/c++ perspective open the 'c/c++ projects' view (window >> show view >> c/c++ projects) add view filter 'non-c elements' (in the top-right of the 'c/c++ projects' view,
click the down-arrow,
click 'filters...', check 'non-c elements') increase the threshold for 'editor scalability mode' to 20000 lines.
... importing the project into eclipse file >> import >> general >> existing projects into workspace
click next the root directory should be the full path to your top-level tamarin-redux directory ensure the 'avmshell-project' project is checked in the 'projects' list uncheck 'copy projects into workspace'
click finish building in eclipse 8 build configurations are included for macos with the gcc 4.0 toolchain: mac-32-release mac-64-release mac-32-debug mac-64-debug mac-32-release-debugg...
...additional things to try are
clicking on the project name then refreshing it (file/refresh or right-
click/refresh) and/or quitting and restarting eclipse.
Tamarin Build System Documentation - Archive of obsolete content
if buildbot is busy the queue is displayed http://tamarin-builds.mozilla.org/build_trigger/requestbuild.cfm the submitter of a sandbox build may remove a build request by
clicking on the cancel button tamarin-redux builds are higher priority than sandbox builds, they cannot be removed but the most checkin including all new checkins are built how can i run buildbot scripts locally?
...the phase state is idle or active
click on the phase (e.g.
... compile, smoke, or test to show the build slaves from the most recent phase run or
click on an individual box to display the test result below the phase table the waterfall displays each buildstep and result the left side contains the time column and the user/revision link to represent the revision triggering a build, mouse over the user to see the revision and submission notes each buildstep run on a slave is a box with color indicating status, red is failed, green passed, yellow has warnings
click the stdio link to see the output
click on the build yellow box at the bottom of a set of buildsteps to see the result of all of the buildsteps for a build and the time each buildstep took scroll down to see previous builds triggered at the bottom of the page
click on the [next page] link to disp...
Event Handlers - Archive of obsolete content
this means that <handler event="
click" action="foo()"/> is analogous to on
click="foo()" defined on the bound element.
... in addition, mouse events can specify the button and the
clickcount.
... this allows xbl authors to easily define handlers for right-
click, or for left double-
click, without having to write script on the same handler to differentiate those cases.
A XUL Bestiary - Archive of obsolete content
the "
click" event is fired by a button when it is
clicked.
...documents will load, buttons will be
clicked, and links will be hovered over, and events will be raised for all these actions behind closed doors.
...to create an event handler, simple place the code you want executed within the appropriate event listener: <menuitem value="
click me" on
click="alert('event handled.')" /> it follows from the description above that event handlers can be written for events that are fired somewhere below them in the hierarchy.
allowevents - Archive of obsolete content
this means that elements placed inside a listitem do not respond to events, and instead
clicking the mouse simply selects that item within the list.
... this behavior is used for menus, for instance, to allow a menu button to behave as a menu when
clicking on it, yet have part of the menu behave as a button.
... for the latter, the allowevents attribute is set to true to have a
click on the child button receive events instead of targeting all events at the menu.
collapse - Archive of obsolete content
« xul reference home collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is
clicked.
... before when the grippy is
clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0.
... after when the grippy is
clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0.
context - Archive of obsolete content
« xul reference home context type: id should be set to the value of the id of the popup element that should appear when the user context-
clicks on the element.
... a context-
click varies on each platform.
... usually it will be a right
click.
PopupEvents - Archive of obsolete content
this may happen because the user selected an item from the menu, or it may be because the popup was closed by
clicking elsewhere.
...for instance, right
clicking on an image might display items on a context menu pertaining to images, whereas
clicking on a link would display only those items pertaining to links.
...the popuphiding event is fired regardless of how the popup was hidden, whether because the user selected an item from a menu, or if the user
clicked outside the popup, or if the user pressed escape to cancel the menu.
Sorting Results - Archive of obsolete content
the user can change the sort column and direction by
clicking the column headers, however, you can programmatically change the sort as well.
...if the tree is sorted by name, and the user
clicks on the date column header, the sort will change to the date column.
...the tree will change both attributes as necessary automatically when the column headers are
clicked or the tree is sorted by other means.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
set the command to be executed when the button is
clicked in the oncommand attribute.
... if you need to handle middle-
click, add this line after the oncommand line.
... on
click="checkformiddle
click(this, event)" you can also handle middle-
click and right-
click using on
click handler and check event.button in it like this: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" on
click="myextension.on
click(event);"/> </toolbarpalette> on
click: function(event) { switch(event.button) { case 0: // left
click break; case 1: // middle
click break; case 2: // right
click break; } } to add more buttons, put more <toolbarbutton> elements inside the <toolbarpalette> element.
Focus and Selection - Archive of obsolete content
the user can change the focus by
clicking an element with the mouse or by pressing the tab key.
... second,
clicking the textbox's label changes the focus to the textbox.
... finally, the other label which displays the tag name has no control attribute, so
clicking it has no effect on the focused element.
Input Controls - Archive of obsolete content
note that the control attribute has been used so that the textbox is selected when the label is
clicked.
...when the user
clicks the checkbox, it switches between checked and unchecked.
...
clicking one will turn off all of the others in the same group.
List Controls - Archive of obsolete content
the user can see a single choice in a textbox and may
click the arrow or some similar such button next to the textbox to make a different selection.
...the second, menupopup, creates the popup window which appears when the button is
clicked.
...to show the choices,
click the arrow button on the menulist.
More Button Features - Archive of obsolete content
example 5 : source view <button type="menu" label="device"> <menupopup> <menuitem label="printer"/> <menuitem label="mouse"/> <menuitem label="keyboard"/> </menupopup> </button> in this example, the user may
click the button to pop up a menu containing three items.
...for the 'menu', the user may
click anywhere on the button to show the menu.
... for the 'menu-button', the user must
click the arrow to show the menu.
Using Remote XUL - Archive of obsolete content
the categorized links are analogous to menu items organized into menus, where
clicking the link/selecting the menu item performs some function, so we'll use xul menu elements to implement them in our document.
...it represents the rectangular box that appears when you
click a menu title.
...we add an id attribute to the iframe element so we can reference it from our function, and we add an oncommand event listener to the menubar element that calls the function every time the user
clicks a button or selects a menu item.
Using the Editor from XUL - Archive of obsolete content
the user
clicks the close widget in their os/window manager.
...this happens in response to mouse
click with button 2.
...the nseditorshellmouselistener essentially calls nseditorshell::handlemouse
clickonelement to show property dialogs for items that you double-
click on.
button - Archive of obsolete content
the user can
click the button to switch between the states.
...the user may
click anywhere on the button to open and close the menu.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
tabbrowser - Archive of obsolete content
onnewtab not in firefox type: script code this script will be called when the new tab button is
clicked.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
... load_flags_is_link: this flag is used when the url is loaded because a user
clicked on a link.
tabpanels - Archive of obsolete content
by
clicking the first tab, the first panel will be displayed.
... by
clicking the second tab, the second panel will be displayed and so on.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
tabs - Archive of obsolete content
onclosetab type: script code this script will be called when the close tab button is
clicked.
... onnewtab not in firefox type: script code this script will be called when the new tab button is
clicked.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
titlebar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] boxes created with the titlebar element behave just like a normal window titlebar: when the element is
clicked and dragged, the window moves with it.
...buttons inside it can't be
clicked and textboxes can't be focused with the mouse.
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
treecol - Archive of obsolete content
in the case,
clicking on a cell in the column will alternate its state between on and off.
...when the user double-
clicks an editable cell, a text field appears in which the user can edit the contents of the cell.
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
Building a Theme - Archive of obsolete content
select the node finding tool (the arrow-plus-box in the top-left corner of the dom inspector), and
click on any unused space on a toolbar.
...your theme will not be active the first time you install, and you will need to
click "enable" and restart before you can see your change.
...in windows, you can do this easily by selecting all the files and subfolders in your extension folder, right
click and choose "send to -> compressed (zipped) folder".
Common Firefox theme issues and solutions - Archive of obsolete content
to test this please go to bug 324777 using the default theme and activate the "
click me" link.
...this issue also applies to the edit bookmark panel, which is activated by double
clicking on the bookmark star in the url bar.
...ult theme into the mozapps/extensions/ folder of your theme and add the following style rule to the css file extensions.css: .addon[active="false"] .icon { filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); opacity:0.3; } about:memory about:memory nodes do not collapse the styling of about:memory is a little messed up in that nodes do not collapse as they should when
clicked on.
XForms Submit Element - Archive of obsolete content
representations the xforms submit element can be represented by the following widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/
clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul).
... characteristics analogous widgets are <html:input type="submit"/> and <xul:button/> link/
clickable text xforms authors can use this representation if they want to have a widget like a xhtml anchor (xhtml only).
... characteristics appearance attribute contains the value minimal analogue widget is <html:a on
click="form.submit();"/>.
Audio for Web games - Game development
many browsers will simply ignore any requests made by your game to automatically play audio; instead playback for audio needs to be started by a user-initiated event, such as a
click or tap.
... 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.
...nst anchor = el.queryselector('a'); const loadtext = el.queryselector('p'); const playbutton = el.queryselector('button'); // load file loadfile(anchor.href).then((track) => { // set loading to false el.dataset.loading = 'false'; // hide loading text loadtext.style.display = 'none'; // show button playbutton.style.display = 'inline-block'; // allow play on
click playbutton.addeventlistener('
click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } playtrack(track); playbutton.dataset.playing = true; }) }) }) note: you can see this demo in action here and view the source code here.
Extra lives - Game development
add the following lines below the existing scoretext definition inside your create() function: livestext = game.add.text(game.world.width-5, 5, 'lives: '+lives, { font: '18px arial', fill: '#0095dd' }); livestext.anchor.set(1,0); lifelosttext = game.add.text(game.world.width*0.5, game.world.height*0.5, 'life lost,
click to continue', { font: '18px arial', fill: '#0095dd' }); lifelosttext.anchor.set(0.5); lifelosttext.visible = false; the livestext and lifelosttext objects look very similar to the scoretext one — they define a position on the screen, the actual text to display, and the font styling.
...use this variable when stlying our text labels — update your code so that the multiple instances of the text styling are replaced with the variable: scoretext = game.add.text(5, 5, 'points: 0', textstyle); livestext = game.add.text(game.world.width-5, 5, 'lives: '+lives, textstyle); livestext.anchor.set(1,0); lifelosttext = game.add.text(game.world.width*0.5, game.world.height*0.5, 'life lost,
click to continue', textstyle); lifelosttext.anchor.set(0.5); lifelosttext.visible = false; this way changing the font in one variable will apply the changes to every place it is used.
...if yes, then the player still has some lives left and can continue to play — they will see the life lost message, the ball and paddle positions will be reset on screen and on the next input (
click or touch) the message will be hidden and the ball will start to move again.
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
they are most relevant when there are a plethora of links to external websites that may be
clicked on, like search engine results, dns prefetching resolves domain names in advance thereby speeding up load times by reducing the time associated with domain lookup at request time.
... <link rel="dns-prefetch" href="https://example.com/"> link prefetching link prefetching is a performance optimization technique that works by assuming which links the user is likely to
click, then downloading the content of those links.
... if the user decides to
click on one of the links, then the page will be rendered instantly as the content has already been downloaded.
Mobile accessibility - Learn web development
once you've selected the option you want, double-
click to choose that option.
... as an example, the
click event is good in terms of accessibility — an associated event handler can be invoked by
clicking the element the handler is set on, tabbing to it and pressing enter/return, or tapping it on a touchscreen device.
...
click here for a good hamburger menu example.
WAI-ARIA basics - Learn web development
if you just load the file by loading it directly into the browser (via double
clicking, etc.).
...if we test our fake-div-buttons.html example in a screenreader, our fake buttons will be reported using phrases like "
click me!, group", which is obviously confusing.
...make a local copy of fake-div-buttons.html, and add role="button" to each button <div>, for example: <div data-message="this is from the first button" tabindex="0" role="button">
click me!</div> now when you try this using a screenreader, you'll have buttons be reported using phrases like "
click me!, button" — much better.
Advanced form styling - Learn web development
fore { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: black; background: #ddd; color: gray; } you'll find more out about such pseudo-classes and more in the next article; the above ones do the following: :checked — the checkbox (or radio button) is in a checked state — the user has
clicked/activated it.
...> we then use generated content to generate a little down arrow, and put it in the right place using positioning: .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; position: absolute; } the second, slightly more major issue is that you don't have control over the box that appears containing the options when you
click on the <select> box to open it.
... one way around this is to take advantage of the fact that if you have a label associated with a form control,
clicking the label will activate the control.
Dealing with files - Learn web development
buttons that load data when
clicked).
...option, unchecking the hide extensions for known file types check box, then
clicking ok.
... save your html file, then load it in your web browser (double-
click the file).
What’s in the head? Metadata in HTML - Learn web development
view the page's source (right/ctrl +
click on the page, choose view page source from the context menu.) find the description meta tag.
...now when you
click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item.
...when you
click on an existing list item, a dialog box will pop up allowing you to change the item's text.
Functions — reusable blocks of code - Learn web development
you generally use an anonymous function along with an event handler, for example the following would run the code inside the function whenever the associated button is
clicked: const mybutton = document.queryselector('button'); mybutton.on
click = function() { alert('hello'); } the above example would require there to be a <button> element available on the page to select and
click.
...when creating functions, it is better to just stick to this form: function mygreeting() { alert('hello'); } you will mainly use anonymous functions to just run a load of code in response to an event firing — like a button being
clicked — using an event handler.
... again, this looks something like this: mybutton.on
click = function() { alert('hello'); // i can put as much code // inside here as i want } function parameters some functions require parameters to be specified when you are invoking them — these are values that need to be included inside the function parentheses, which it needs to do its job properly.
Manipulating documents - Learn web development
add the following line below the previous one: link.textcontent = 'mozilla developer network'; we should also change the url the link is pointing to, so that it doesn't go to the wrong place when it is
clicked on.
... create a function that will run in response to the button being
clicked.
... attach an event handler to the delete button, so that when
clicked it will delete the entire list item it is inside.
Third-party APIs - Learn web development
onto the end of the first method call we chain .bindpopup('this is manchester!'), which defines content to display when the marker is
clicked.
... let's request a key for the article search api — create a new app, selecting this as the api you want to use (fill in a name and description, toggle the switch under the "article search api" to the on position, and then
click "create").
... 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 function i...
Useful string methods - Learn web development
: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } 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.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solutio...
...: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } 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.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solutio...
... 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } 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.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solutio...
Accessibility in React - Learn web development
exploring the keyboard usability problem start by
clicking on the input at the top of our app, as if you're going to add a new task.
... the textbox <input> in your editing template should be updated like this: <input id={props.id} classname="todo-text" type="text" value={newname} onchange={handlechange} ref={editfieldref} /> the "edit" button in your view template should read like this: <button type="button" classname="btn" on
click={() => setediting(true)} ref={editbuttonref} > edit <span classname="visually-hidden">{props.name}</span> </button> focusing on our refs with useeffect to use our refs for their intended purpose, we need to import another react hook: useeffect().
... try it now, and you'll see that when you
click an "edit" button, focus moves to the corresponding edit <input>!
Adding a new todo form: Vue events, methods, and models - Learn web development
if you fill it out and
click the "add" button, the page will post the form back to the server, but this isn’t really what we want.
... update your onsubmit() method to look like this: methods: { onsubmit() { console.log('label value: ', this.label); } }, now go back to your running app, add some text to the <input> field, and
click the "add" button.
... update your todoform component’s onsubmit() method to this: onsubmit() { if(this.label === "") { return; } this.$emit('todo-added', this.label); this.label = ""; } now when you
click the "add" button, the "new-todo-input" will clear itself.
Strategies for carrying out testing - Learn web development
choose the google analytics (web) option, and
click the sign up button.
...at this point, you can double-
click to open it — it will start to boot up the virtual machine, but it won't yet have the operating system (os) installed.
...for example, the following would work for a sighted user:
click the question mark button using the mouse on your desktop computer a few times.
Deploying our app - Learn web development
give your repository a short, memorable name, without spaces in it (use hyphens to separate words), and a description, then
click create repository at the bottom of the page.
... to finish up,
click deploy site.
... when approaching tests there's a good deal of ways to approach the problem: end-to-end testing, which involves your visitor
clicking a thing and some other thing happening.
Communicating with frame scripts
the example below sends a message named "my-e10s-extension-message", with a data payload containing details and tag properties, and exposes the event.target object as a cpow: // frame script addeventlistener("
click", function (event) { sendasyncmessage("my-addon@me.org:my-e10s-extension-message", { details : "they
clicked", tag : event.target.tagname }, { target : event.target }); }, false); to receive messages from content, a chrome script needs to add a message listener using the message manager's addmessagelistener() api.
...e script messagemanager.addmessagelistener("my-addon@me.org:my-e10s-extension-message", listener); function listener(message) { console.log(message.name); console.log(message.sync); console.log(message.data); console.log(message.target); console.log(message.objects); } so combining this message listener with the message above will give console output somewhat like this, when the user
clicks a <div>: "my-addon@me.org:my-e10s-extension-message" false object { details: "they
clicked", tag: "div" } <xul:browser anonid="initialbrowser" ...
...because a single message can be received by more than one listener, the return value of sendsyncmessage() is an array of all the values returned from every listener, even if it only contains a single value: // frame script addeventlistener("
click", function (event) { var results = sendsyncmessage("my-addon@me.org:my-e10s-extension-message", { details : "they
clicked", tag : event.target.tagname }); content.console.log(results[0]); // "value from chrome" }, false); like arguments, return values from sendsyncmessage() must be json-serializable, so chrome can't return functions.
HTMLIFrameElement.sendMouseEvent()
syntax instanceofhtmliframeelement.sendmouseevent(type, x, y, button,
clickcount, modifiers); returns void.
...
clickcount the number of
clicks that should be performed.
... modifiers a number representing a key pressed at the same time the mouse button was
clicked: 1 : alt 2 : ctrl 4 : shift 8 : meta 16 : alt gr 32 : caps lock 64 : fn 128 : num lock 256 : scroll 512 : symbol lock 1024 : win note: you can specify multiple key modifiers separated by a pipe symbol, for example 1 | 1014.
How to get a stacktrace with WinDbg
now run firefox by opening the debug menu and
clicking go.
... q: should i
click yes or no when windbg asks me to "save information for workspace?" a:
click yes and windbg will save you from having to enter in the symbol location for firefox.exe in the future.
...
click no if you'd rather not having windbg save this information.
CustomizableUI.jsm
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.
...firefox does this when the user
clicks the "restore defaults" button in customize mode.
...one issue with this method, is that when the icon is removed to the "customize toolbox" (when you right
click and say customize and it opens that tab), it doesn't give it the 32x32 icon it needs (i have to figure out how and update the docs, its probably onwidgetremoved or something) giving the button an icon via style sheet method the above code creates your widget with
click functionality.
Interfacing with the Add-on Repository
this article provides some sample code that queries the recommended add-ons list on amo and lets the user
click a button to install an add-on from the list.
... when the user
clicks a toolbar button to initiate the query, the following code gets run to start the request: addonrepository.retrieverecommendedaddons(10, this); this asks the repository to fetch up to 10 add-ons, using the object this as the target for callbacks.
... the pop-up callback function that gets called when the user
clicks the button looks to see if there's a non-null addoninstall object reference; if it's null, then the pop-up is displaying an error notification, so
clicking the button simply dismisses the pop-up.
Localizing with Mercurial
in order to do so, right-
click on your computer icon, choose properties > advanced > environmental variables, select path and
click edit.
... if you don't see path among the options, you'll have to
click add and edit it within the add dialog.
... type cmd.exe and
click ok.
Localizing without a specialized tool
if you
click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines...
...(strings in the dtd files are called "entities".) "manage search engines..." can easily be found in the firefox browser ui by
clicking on the drop-down arrow in the search box in the upper-right corner of your browser.
... this string can easily be found in the browser ui by visiting a website that provides a search plugin (like http://developer.mozilla.org/) and
clicking on the drop-down arrow in the search box in the upper-right corner of your browser.
QA phase
feel free to skip ahead to the next section by
clicking on the next link at the bottom of the page.
... manual & automated builds with the
click of a button, some l10n tools (like narro and koala) automatically create language pack builds for you.
...
click here for guidelines on how to test your localization.
Activity Monitor, Battery Status Menu and top
they can all be customized to show any of the available measurements (by right-
clicking on the column strip) but only the "energy" tab groups child processes with parent processes, which is useful, so it's the best one to use.
...if a laptop is closed for several hours and then reopened, those hours are not included in the calculation.) battery status menu when you
click on the battery icon in the os x menu bar you get a drop-down menu that includes a list of “apps using significant energy”.
...furthermore, if you
click on an application name in the menu activity monitor will be opened and that application’s entry will be highlighted.
Profile Manager
additionally, you can manually add firefox versions by
clicking the "manage firefox versions..." button: each firefox version in the list has the following properties: path, version, and default.
... creating a profile to create a new profile, just
click the new button from profile manager's toolbar.
... other operations context-
clicking any profile in the profile list will cause a popup menu to appear with the following commands: copy - makes a copy of the profile using a name and location of your choice.
PKCS11 FAQ
what are "generic crypto svcs" (the first item listed when you
click the view/edit button for the nss internal pkcs #11 module under security devices under options/security in firefox)?
...first open the tools/options/advanced/security window in mozilla and
click security devices.
... then select your pkcs #11 module,
click view/edit, select the token, and
click change password.
PKCS11 Implement
to do so, the user should follow these steps:
click the security icon near the top of any communicator window.
... in the security info window,
click cryptographic modules.
... in the cryptographic modules frame,
click add.
Signing Mozilla apps for Mac OS X
click "certificates" from the left hand menu.
...
click "create a certificate" at the top right corner select the "developer id" radio button and uncheck the "developer id installer certificate" box.
...
click "create" and follow the instructions in the wizard.
Gecko states
for example, a user could change the size of a window by
clicking the border with a mouse and dragging the mouse.
...for example, a user can
click on the titlebar for the object and drag the object to a new location.
... state_traversed the object is a hyperlink that has been visited (previously
clicked) by a user.
Components.utils.cloneInto
example this add-on script creates an object, clones it into the content window and makes it a property of the content window global: // add-on script var addonscriptobject = {"greeting" : "hello from add-on"}; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow); scripts running in the page can now access the object: // page script button.addeventlistener("
click", function() { console.log(window.addonscriptobject.greeting); // "hello from add-on" }, false); of course, you don't have to assign the clone to the window itself: you can assign it to some other object in the target scope: contentwindow.foo.addonscriptobject = cloneinto(addonscriptobject, contentwindow); you can also pass it into a function defined in the page script.
...s.exportfunction: // add-on script var addonscriptobject = { greetme: function() { alert("hello from add-on"); } }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {clonefunctions: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("
click", function() { window.addonscriptobject.greetme(); }, false); cloning objects that contain dom elements by default, if the object you clone contains objects that are reflected from c++, such as dom elements, the cloning operation will fail with an error.
...clone is allowed to contain these objects: // add-on script var addonscriptobject = { body: contentwindow.document.body }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {wrapreflectors: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("
click", function() { console.log(window.addonscriptobject.body.innerhtml); }, false); access to these objects in the target scope is subject to the normal security checks.
Components.utils.exportFunction
ted function will affect the original object that was passed in: // privileged scope: for example, a content script function changemyname(user) { user.name = "bill"; } exportfunction(changemyname, contentwindow, { defineas: "changemyname" }); // less-privileged scope: for example, a page script var user = {name: "jim"}; var test = document.getelementbyid("test"); test.addeventlistener("
click", function() { console.log(user.name); // "jim" window.changemyname(user); console.log(user.name); // "bill" }, false); note that this is subject to the normal rules of xrays: for example, an expando property added to a dom node will not be visible in the original object.
...ontent script function loguser(user) { // console.log(user.getuser()); // error console.log(user.wrappedjsobject.getuser()); // "bill" } exportfunction(loguser, contentwindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script var user = {getuser: function() {return "bill";}} var test = document.getelementbyid("test"); test.addeventlistener("
click", function() { window.loguser(user); }, false); passing functions as arguments if functions are given as arguments, these are also passed as xrays.
...rks, making the allowcallbacks option redundant: // privileged scope: for example, a content script function loguser(getuser) { console.log(getuser()); // "bill" } exportfunction(loguser, unsafewindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script function getuser() { return "bill"; } var test = document.getelementbyid("test"); test.addeventlistener("
click", function() { window.loguser(getuser); }, false); cross-origin checking when the exported function is called each argument, including this, is checked to make sure that the caller subsumes that argument.
nsIAccessibleStates
for example, a user could change the size of a window by
clicking the border with a mouse and dragging the mouse.
...for example, a user can
click on the titlebar for the object and drag the object to a new location.
... state_traversed 0x00800000 the object is a hyperlink that has been visited (previously
clicked) by a user.
nsIPromptService
the implementation may interpret this loosely, as the intent is to ensure that the user does not
click through a security dialog too quickly.
...a delay can be useful not only to give the user more time to think before acting, but also as a countermeasure against malicious web sites that intentionally create a race condition whereby the user intends to
click or type a key responding, for example, to the web site's prompt but the security dialog pops up unexpectedly and its button is unintentionally activated.
...var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var result = prompts.confirm(null, "title of this dialog", "are you sure?"); // result is now true if ok was
clicked, and false if cancel was
clicked confirmcheck example confirmcheck displays a dialog with ok/cancel and a checkbox var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var check = {value: true}; // default the checkbox to true var result = prompts.confirmcheck(null, "title of...
nsITreeView
cyclecell() called on the view when a cell in a non-selectable cycling column (for example, unread/flag/and so on.) is
clicked.
... cycleheader() called on the view when a header is
clicked.
... toggleopenstate() called on the view when an item is opened or closed, e.g., by
clicking the twisty, keyboard access, et cetera.
Adding items to the Folder Pane
clicking on those items will display the number in the main viewing pane of thunderbird.
... (attribute) the level in the tree to display the item at open (rw, attribute) whether or not this container is open children (attribute) an array of child items also conforming to this spec getproperties (function) a call from getrowproperties or getcellproperties for this item will be passed into this function command (function) this function will be called when the item is double-
clicked for our example extension, two different types of folder-tree-items will be defined.
...thus, our _insert function becomes _insert: function gne__insert() { // only insert our nodes into the "all" mode if (gfoldertreeview.mode != "all") return; gfoldertreeview._rowmap.push(containerrow); }, right now,
clicking on these additional items has no effect.
Plug-in Basics - Plugins
go to the help menu, and
click help and then about plug-ins.
... var plugin = mimetype.enabledplugin; if (plugin) { // yes, so show the data in-line document.writeln("here\'s a movie: <object data='mymovie.swf' height='100' width='100'></object>"); } else { // no, so provide a link to the data document.writeln("<a href='mymovie.swf'>
click here</a> to see a movie."); } } else { // no, so tell them so document.writeln("sorry, can't show you this movie."); } overview of plug-in structure this section is an overview of basic information you will need as you develop plug-ins.
...plug-ins are embedded in much the same way as gif or jpeg images are, except that a plug-in can be live and respond to user events, such as mouse
clicks.
DOM Inspector FAQ - Firefox Developer Tools
or, if you do not know anything about the node, you can try to select it by
clicking on it.
... scroll the node into view, choose the select-by-
click toolbar button, and then
click on the element you wish to inspect.
... the edit menu also includes a select element by
click menu item.
Introduction to DOM Inspector - Firefox Developer Tools
inspecting arbitrary urls you may also inspect the dom of arbitrary urls by using the inspect a url menuitem in the file menu, or by just entering a url into the dom inspector's address bar and
clicking inspect or pressing enter.
...by
clicking around in the document pane, you'll see that the viewers are linked; whenever you select a new node from the dom nodes viewer, the dom node viewer is automatically updated to reflect the information for that node.
... basic actions of the dom nodes viewer selecting elements by
click another powerful interactive feature of the dom inspector is that when you have the dom inspector open and have enabled this functionality by choosing edit > select element by
click or by
clicking the little magnifying glass icon in the upper left portion of the dom inspector application, you can
click anywhere in a loaded web page or the the inspect chrome document, and the element you
click wi...
Browser Console - Firefox Developer Tools
the following image shows the browser console focused on the same page as above after
clicking on the show content messages checkbox.
...here's an example add-on that just logs an error when the user
clicks a widget: widget = require("sdk/widget").widget({ id: "an-error-happened", label: "error!", width: 40, content: "error!", on
click: logerror }); function logerror() { console.error("something went wrong!"); } if you build this as an xpi file, then open the browser console, then open the xpi file in firefox and install it, you'll see a widget labeled "error!" in the add-on bar: cli...
...if the result of a command is an object, you can
click on the object to see its details.
Browser Toolbox - Firefox Developer Tools
you will be presented with a dialog like this (it can be removed by setting the devtools.debugger.prompt-connection property to false):
click ok, and the browser toolbox will open in its own window: you'll be able to inspect the browser's chrome windows and see, and be able to debug, all the javascript files loaded by the browser itself and by any add-ons that are running.
... for example, here's what the frame selection popup lists when there are two browser windows open, one with one content tab, and one with two: debugging popups it's hard to debug popups, because the browser hides them as soon as you
click outside them.
...
click the toolbox menu and select disable popup auto-hide.
Examine, modify, and watch variables - Firefox Developer Tools
just
click on the variable's current value and you'll be able to type there: watch an expression watch expressions are expressions that are evaluated each time execution pauses.
...to add a watch expression,
click in the box that says "add watch expression" and enter a javascript expression whose output you'd like to monitor as you step through code.
...you can remove a watch expression by
clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.
Pretty-print a minified file - Firefox Developer Tools
to prettify a minified file,
click the pretty print source icon () at the bottom of the source pane.
... after you
click the icon, the source code looks like this: the pretty print source icon is available only if the source file is minified (i.e., not an original file), and is not already "prettified".
... note: if you want to prettify some inline javascript code, just double
click the code in the inspector pane.
Set a breakpoint - Firefox Developer Tools
you can set an unconditional breakpoint using the context menu (see above), or by:
clicking on the line number for the line you want to break at in the source pane.
...these are called column breakpoints, and allow you to set the breakpoint to happen exactly on any one of the function calls in the line (or multiple calls), by
clicking on each relevant one.
...e condition you want it to break on: once you've entered your condition and pressed enter/return, the line number will be highlighted in orange: breakpoints list once you've set some breakpoints, the breakpoints list in the right-hand column shows the filename and line number for each one: unsetting a breakpoint once a breakpoint has been set, you can unset it again in various ways:
click on the line number highlight.
Use watchpoints - Firefox Developer Tools
in the scopes pane on the right side of the debugger user interface, find an object you want to watch, and right-
click it to open its context menu.
...
click play or press f8 to resume execution.
...
click the watchpoint icon, or right-
click and choose remove watchpoint.
Using the Debugger map scopes feature - Firefox Developer Tools
when you
click the increment button on the page and hit the breakpoint, an additional section is added to the right-hand panel below the call stack to display variables mapped from the original scope, like this: as useful as this is, it would be even nicer if you could view the original code (before it was packages into the "bundle.js" file.
... right-
click on the source code and the context menu now includes an option to jump to original location as shown below.
...
click jump to original location.
DevTools API - Firefox Developer Tools
window.document.body.addeventlistener("
click", this.handle
click); } mypanel.prototype = { open: function() { // any asynchronous operations should be done here.
... this.window.document.body.removeeventlistener("
click", this.handle
click); // async destruction.
... return this.destroysomethingasynchronosly() .then(() => console.log("destroyed")); }, handle
click: function(event) { console.log("
clicked", event.originaltarget); }, }; eventemitter eventemitter is an interface many developer tool classes and objects implement and use to notify others about changes in their internal state.
Measure a portion of the page - Firefox Developer Tools
when you want to use the tool,
click this button.
... when you stop holding the mouse down, the rectangle that was displayed on screen when you released the button will stay there until you
click again, allowing you time to take screenshots, note the information down, etc.
... the rectangle can also be resized later on by
clicking one of the handles around it.
Aggregate view - Firefox Developer Tools
next to the type's name, there's an icon that contains three stars arranged in a triangle:
click this to see every instance of that type.
...if we
click the star-triangle, we'll see all four array instances: for each instance, you can see the retained size and shallow size of that instance.
... the file name and line number is a link: if we
click it, we go directly to that line in the debugger: inverted call stack the call stack view is top-down: it shows allocations that happen at that point or points deeper in the call tree.
Inspecting web sockets - Firefox Developer Tools
clicking on a web socket request opens the usual sidebar to reveal additional details.
...each frame expands on
click, so you can inspect the formatted data.
... columns in the response pane in the response pane, you can choose to show the following information about each frame: data size time opcode maskbit finbit the data and time columns are visible by default, but you can customize the interface to see more columns by choosing which ones to show from the context menu that is opened by right-
clicking in the table header.
Performance Analysis - Firefox Developer Tools
using the performance analysis tool to run the performance analysis tool
click the stopwatch icon in the toolbar.
... to get back to the network monitor's list of network requests
click the "back" button on the left.
...
clicking on a slice of the pie takes you to the network monitor for that run, with a filter automatically applied to see only that resource type.
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
clicking the icon toggles the display of a grid overlay on the page, which appears over the element, laid out like a grid to show the position of its grid lines and tracks: the overlay is still shown when you select other elements, so you can edit related css properties and see how the grid is affected.
...
clicking this also toggles the grid overlay on and off.
... a target icon that when
clicked immediately selects the html element that this grid entry relates to, inside the html pane.
Select an element - Firefox Developer Tools
click an element in the html pane to select it: you can also use the arrow keys to move around the dom with the keyboard.
... with the node picker to select an element in the page itself, activate the "node picker" by
clicking its icon: (also called the select element icon).
...
click the element to select it: starting in firefox 52, if you shift +
click the element, then it is selected but the picker stays active.
Select and highlight elements - Firefox Developer Tools
click an element in the html pane to select it: you can also use the arrow keys to move around the dom with the keyboard.
... with the node picker to select an element in the page itself, activate the "node picker" by
clicking its icon: (also called the select element icon).
...
click the element to select it: ...
Responsive Design Mode - Firefox Developer Tools
device selection just above the viewport there is a label "no device selected";
click this to see a list of device names.
... creating custom devices you can create and save custom devices in responsive design mode by
clicking the add custom device button.
... gprs 50 kb/s 20 kb/s 500 regular 2g 250 kb/s 50 kb/s 300 good 2g 450 kb/s 150 kb/s 150 regular 3g 750 kb/s 250 kb/s 100 good 3g 1.5 mb/s 750 kb/s 40 regular 4g/lte 4 mb/s 3 mb/s 20 dsl 2 mb/s 1 mb/s 5 wi-fi 30 mb/s 15 mb/s 2 to select a network,
click the list box that's initially labeled "no throttling": ...
Shader Editor - Firefox Developer Tools
click it and the shader editor opens.
...if you hover over an entry in the list, the geometry drawn by that program is highlighted in red: if you
click the eyeball icon just left of the program's entry, that program is disabled.
... this is useful for focusing on certain shaders or hiding overlapping geometry: if you
click the entry, its vertex and fragment shaders are shown in the other two panes, and you can edit them.
View Source - Firefox Developer Tools
to activate view source: context-
click in the page and select view page source press ctrl + u on windows and linux, or cmd + u on macos the command opens a new tab with the source for the current page.
... for example view-source:https://www.mozilla.org/#line100 view selection source if you select part of a web page and conext-
click, you'll see a context menu item labeled "view selection source", that behaves just like "view page source", except you only see the source for the selection.
... view mathml source if you context-
click while the mouse is over some mathml, you'll see a context menu item labeled "view mathml source":
click it to see the mathml source.
Animation.playbackRate - Web APIs
examples in the growing/shrinking alice game example,
clicking or tapping the bottle causes alice's growing animation (alicechange) to reverse, causing her to shrink: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } // on tap or
click, alice will shrink.
... bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); contrariwise,
clicking on the cake causes her to "grow," playing alicechange forwards again: var growalice = function() { alicechange.playbackrate = 1; alicechange.play(); } // on tap or
click, alice will grow.
...cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); in another example, the red queen's race game, alice and the red queen are constantly slowing down: setinterval( function() { // make sure the playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.playbackrate *= .9; } }, 3000); but
clicking or tapping on them causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.playbackrate *= 1.1; } document.addeventlistener("
click", gofaster); document.addeventlistener("touchstart", gofaster); specifications specification status comment web animationsthe definition of 'animation.playbackrate' in that specification.
AudioContext.createMediaStreamDestination() - Web APIs
when the button is
clicked, the oscillator starts, and the mediarecorder is started.
... <!doctype html> <html> <head> <title>createmediastreamdestination() demo</title> </head> <body> <h1>createmediastreamdestination() demo</h1> <p>encoding a pure sine wave to an opus file </p> <button>make sine wave</button> <audio controls></audio> <script> var b = document.queryselector("button"); var
clicked = false; var chunks = []; var ac = new audiocontext(); var osc = ac.createoscillator(); var dest = ac.createmediastreamdestination(); var mediarecorder = new mediarecorder(dest.stream); osc.connect(dest); b.addeventlistener("
click", function(e) { if (!
clicked) { mediarecorder.start(); osc.start(0); e.target.innerhtml = ...
..."stop recording";
clicked = true; } else { mediarecorder.stop(); osc.stop(0); e.target.disabled = true; } }); mediarecorder.ondataavailable = function(evt) { // push each chunk (blobs) in an array chunks.push(evt.data); }; mediarecorder.onstop = function(evt) { // make blob out of our blobs, and open it.
Using dynamic styling information - Web APIs
--> <p id="p1" on
click="alterstyle(this);">
click here to change background color.
...--> <button on
click="resetstyle('p1');">reset background color</button> </body> </html> the getcomputedstyle() method on the document.defaultview object returns all styles that have actually been computed for an element.
... <title>style property example</title> <link rel="stylesheet" href="example.css" type="text/css"> <script type="text/javascript"> function stilo() { document.getelementbyid('d').style.color = 'orange'; } function resetstyle() { document.getelementbyid('d').style.color = 'black'; } </script> </head> <body> <div id="d" class="thunder">thunder</div> <button on
click="stilo()">
click here to change text color</button> <button on
click="resetstyle()">reset text color</button> </body> </html> the media and type of the style may or may not be given.
Using channel messaging - Web APIs
var input = document.getelementbyid('message-input'); var output = document.getelementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button
clicks button.addeventlistener('
click', on
click); // listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is
clicked function on
click(e) { e.preventdefault(); port1.postmessage(input.value); } // handle messages received on port1 function on...
... when the iframe has loaded, we register an on
click handler for our button and an onmessage handler for messagechannel.port1.
... when our button is
clicked, we prevent the form from submitting as normal and then send the value entered in our text input to the iframe via the messagechannel.
Document.createTextNode() - Web APIs
example <!doctype html> <html lang="en"> <head> <title>createtextnode example</title> <script> function addtextnode(text) { var newtext = document.createtextnode(text), p1 = document.getelementbyid("p1"); p1.appendchild(newtext); } </script> </head> <body> <button on
click="addtextnode('yes!
... ');">yes!</button> <button on
click="addtextnode('no!
... ');">no!</button> <button on
click="addtextnode('we can!
Document.mozSetImageElement() - Web APIs
example this example changes the background of a <div> block each time the block is
clicked by the user.
... var c = 0x00; function
clicked() { var canvas = document.createelement("canvas"); canvas.setattribute("width", 100); canvas.setattribute("height", 100); var ctx = canvas.getcontext('2d'); ctx.fillstyle = "#" + c.tostring(16) + "0000"; ctx.fillrect(25, 25, 75, 75); c += 0x11; if (c > 0xff) { c = 0x00; } document.mozsetimageelement("canvasbg", canvas); } the code here is called each time the user
clicks the <div> element.
...each time the function is called, the square is a different color (its red component is increased each time), so each time the user
clicks the element, the background is filled with a brighter and brighter pattern of red tiles.
Document.requestStorageAccess() - Web APIs
examples: allow lists, block lists, on-device classification, user settings, anti-
clickjacking heuristics, or prompting the user for explicit permission.
... ...equal or more origins than the maximum: the user is prompted if the user
clicks “allow” or “allow on any site” the request is resolved.
... if the user
clicks “don’t allow”, the storage access request is rejected and the requesting origin can re-request once it receives another user interaction.
Document - Web APIs
globaleventhandlers.onaux
click an eventhandler called when an aux
click event is sent, indicating that a non-primary button has been pressed on an input device (e.g.
... globaleventhandlers.on
click is an eventhandler representing the code to be called when the
click event is raised.
... globaleventhandlers.ondbl
click is an eventhandler representing the code to be called when the dbl
click event is raised.
Element: contextmenu event - Web APIs
this event is typically triggered by
clicking the right mouse button, or by pressing the context menu key.
... any right-
click event that is not disabled (by calling the event's preventdefault() method) will result in a contextmenu event being fired at the targeted element.
...as a result, the first paragraph will do nothing when right-
clicked, while the second paragraph will show the standard context menu offered by your browser.
Element.innerHTML - Web APIs
we add a second method that logs information about mouseevent based events (such as mousedown,
click, and mouseenter): function logevent(event) { var msg = "event <strong>" + event.type + "</strong> at <em>" + event.clientx + ", " + event.clienty + "</em>"; log(msg); } then we use this as the event handler for a number of mouse events on the box that contains our log: var boxelem = document.queryselector(".box"); boxelem.addeventlistener("mousedown", logevent); boxelem.addeve...
...ntlistener("mouseup", logevent); boxelem.addeventlistener("
click", logevent); boxelem.addeventlistener("mouseenter", logevent); boxelem.addeventlistener("mouseleave", logevent); html the html is quite simple for our example.
...you can see output into the log by moving the mouse in and out of the box,
clicking in it, and so forth.
Event.composed - Web APIs
(that is, the first node in the shadow dom in which the event began to propagate.) all ua-dispatched ui events are composed (
click/touch/mouseover/copy/paste, etc.).
...er(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a
click event listener on the <html> element: document.queryselector('html').addeventlistener('
click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you
click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
... the composed property returns true beause the
click event is always able to propagate across shadow boundaries.
Event.eventPhase - Web APIs
example html <h4>event propagation chain</h4> <ul> <li>
click 'd1'</li> <li>analyse event propagation chain</li> <li>
click next div and repeat the experience</li> <li>change capturing mode</li> <li>repeat the experience</li> </ul> <input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divi...
... border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') chcapture.on
click = function () { removelisteners() addlisteners() } clear() addlisteners() } function removelisteners() { for (let i = 0; i < divs.length; i++) { let d = divs[i] if (d.id != "divinfo") { d.removeeventlistener("
click", ondiv
click, true) d.removeeventlistener("
click", ondiv
click, false) } } } function addlisteners() { for (let i = 0; i < divs.length; i++...
...) { let d = divs[i] if (d.id != "divinfo") { if (chcapture.checked) { d.addeventlistener("
click", ondiv
click, true) } else { d.addeventlistener("
click", ondiv
click, false) d.onmousemove = function () { clear = true } } } } } function ondiv
click(e) { if (clear) { clear() clear = false } if (e.eventphase == 2) e.currenttarget.style.backgroundcolor = 'red'; let level = e.eventphase == 0 ?
Event.preventDefault() - Web APIs
syntax event.preventdefault(); examples blocking default
click handling toggling a checkbox is the default action of
clicking on a checkbox.
... this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-checkbox").addeventlistener("
click", function(event) { document.getelementbyid("output-box").innerhtml += "sorry!
... <code>preventdefault()</code> won't let you check this!<br>"; event.preventdefault(); }, false); html <p>please
click on the checkbox control.</p> <form> <label for="id-checkbox">checkbox:</label> <input type="checkbox" id="id-checkbox"/> </form> <div id="output-box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault().
Event.type - Web APIs
it is set when the event is constructed and is the name commonly used to refer to the specific event, such as
click, load, or error.
... example this example logs the event type whenever you press a keyboard key or
click a mouse button.
... html <p>press any key or
click the mouse to get the event type.</p> <p id="log"></p> javascript function geteventtype(event) { const log = document.getelementbyid('log'); log.innertext = event.type + '\n' + log.innertext; } // keyboard events document.addeventlistener('keydown', geteventtype, false); // first document.addeventlistener('keypress', geteventtype, false); // second document.addeventlistener('keyup', geteventtype, false); // third // mouse events document.addeventlistener('mousedown', geteventtype, false); // first document.addeventlistener('mouseup', geteventtype, false); // second document.addeventlistener('
click', geteventtype, false); // third result specifications specification status comment domthe definition of 'event.type...
Event - Web APIs
clicking the mouse button or tapping keyboard, or generated by apis to represent the progress of an asynchronous task.
... it can also be triggered programmatically, such as by calling the htmlelement.
click() method of an element, or by defining the event, then sending it to a specified target using eventtarget.dispatchevent().
... event.istrusted read only indicates whether or not the event was initiated by the browser (after a user
click, for instance) or by a script (using an event creation method, like event.initevent).
GainNode - Web APIs
if modified, the new gain is instantly applied, causing unaesthetic '
clicks' in the resulting audio.
... example the following example shows basic usage of an audiocontext to create a gainnode, which is then used to mute and unmute the audio when a mute button is
clicked by changing the gain property value.
... mute.on
click = voicemute; function voicemute() { if(mute.id == "") { // 0 means mute.
GlobalEventHandlers.oncontextmenu - Web APIs
the contextmenu event typically fires when the right mouse button is
clicked on the window.
...the context menu typically appears upon a right
click.
... html <div class="shape">spinning</div> <p class="note" hidden>
click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.add('paused'); note.rem...
GlobalEventHandlers.ontransitioncancel - Web APIs
in addition, we also use a
click event to make the box dissappear (display: none;), showing how it triggers the transitioncancel event to fire.
... let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } box.on
click = function() { box.style.display = 'none'; timeout = window.settimeout(appear, 2000); function appear() { box.style.display = 'block'; } } box.ontransitioncancel = function(event) { console.log('transitioncancel fired after ' + event.elapsedtime + ' seconds.'); } result the resulting content looks like this: notice what happens when you hover your mouse cursor over the box, th...
... also note the log that appears in the javascript console when you
click the box, or move the cursor away before the transition has run to completion.
GlobalEventHandlers - Web APIs
globaleventhandlers.onaux
click an eventhandler called when an aux
click event is sent, indicating that a non-primary button has been pressed on an input device (e.g.
... globaleventhandlers.on
click is an eventhandler representing the code to be called when the
click event is raised.
... globaleventhandlers.ondbl
click is an eventhandler representing the code to be called when the dbl
click event is raised.
HTMLDialogElement.close() - Web APIs
examples the following example shows a simple button that, when
clicked, opens a <dialog> containing a form via the showmodal() method.
... from there you can
click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the form via the submit button.
...elbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('
click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('
click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.open - Web APIs
examples the following example shows a simple button that, when
clicked, opens a <dialog> containing a form via the showmodal() method.
... from there you can
click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the form via the submit button.
...elbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('
click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('
click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.show() - Web APIs
examples the following example shows a simple button that, when
clicked, opens a <dialog> containing a form via the show() method.
... from there you can
click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the form via the submit button.
...elbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('
click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('
click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> specifications specification status comment html living standardthe definition ...
HTMLDialogElement.showModal() - Web APIs
examples the following example shows a simple button that, when
clicked, opens a <dialog> containing a form via the showmodal() method.
... from there you can
click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the form via the submit button.
...elbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('
click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('
click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement - Web APIs
examples the following example shows a simple button that, when
clicked, opens a <dialog> containing a form via the htmldialogelement.showmodal() function.
... from there you can
click the cancel button to close the dialog (via the htmldialogelement.close() function), or submit the form via the submit button.
...elbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('
click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('
click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLElement.hidden - Web APIs
javascript document.getelementbyid("okbutton") .addeventlistener("
click", function() { document.getelementbyid("welcome").hidden = true; document.getelementbyid("awesome").hidden = false; }, false); this code sets up a handler for the welcome panel's "ok" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.
... the welcome panel <div id="welcome" class="panel"> <h1>welcome to foobar.com!</h1> <p>by
clicking "ok" you agree to be awesome every day!</p> <button class="button" id="okbutton">ok</button> </div> this html creates a panel (in a <div> block) that welcomes the user to a site and tells them what they're agreeing to by
clicking the ok button.
... the follow-up panel once the user
clicks the "ok" button in the welcome panel, the javascript code swaps the two panels by changing their respective values for hidden.
HTMLInputElement.select() - Web APIs
syntax element.select(); example
click the button in this example to select all the text in the <input> element.
... html <input type="text" id="text-box" size="20" value="hello world!"> <button on
click="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.select(); } result notes calling element.select() will not necessarily focus the input, so it is often used with htmlelement.focus().
... in browsers where it is not supported, it is possible to replace it with a call to htmlinputelement.setselectionrange() with parameters 0 and the input's value length: <input on
click="this.select();" value="sample text" /> <!-- equivalent to --> <input on
click="this.setselectionrange(0, this.value.length);" value="sample text" /> specifications specification status comment html living standardthe definition of 'select' in that specification.
HTMLInputElement.setSelectionRange() - Web APIs
this lets you indicate, for example, that the selection was set by the user
clicking and dragging from the end of the selected text toward the beginning.
... example
click the button in this example to select the third, fourth, and fifth characters in the text box ("zil" in the word "mozilla").
... html <input type="text" id="text-box" size="20" value="mozilla"> <button on
click="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.setselectionrange(2, 5); } result specifications specification status comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLInputElement - Web APIs
does not affect the value of the checked attribute, and
clicking the checkbox will set the value to false.
...
click() simulates a
click on the input element.
... recommendation technically, the tabindex and accesskey properties, as well as the blur(),
click(), and focus() methods, are now defined on htmlelement.
HTMLMediaElement.play() - Web APIs
this may happen, for example, if the browser requires the user to explicitly start media playback by
clicking a "play" button.
... example this example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback: let videoelem = document.getelementbyid("video"); let playbutton = document.getelementbyid("playbutton"); playbutton.addeventlistener("
click", handleplaybutton, false); playvideo(); async function playvideo() { try { await videoelem.play(); playbutton.classlist.add("playing"); } catch(err) { playbutton.classlist.remove("playing"); } } function handleplaybutton() { if (videoelem.paused) { playvideo(); } else { videoelem.pause(); playbutton.classlist.remove("playing"); } } in this example, playback...
...it then sets up an event handler for the
click event on the play toggle button and attempts to automatically begin playback by calling playvideo().
HTMLSelectElement.selectedOptions - Web APIs
javascript the javascript code that establishes the event handler for the button, as well as the event handler itself, looks like this: let orderbutton = document.getelementbyid("order"); let itemlist = document.getelementbyid("foods"); let outputbox = document.getelementbyid("output"); orderbutton.addeventlistener("
click", function() { let collection = itemlist.selectedoptions; let output = ""; for (let i=0; i<collection.length; i++) { if (output === "") { output = "your order for the following items has been placed: "; } output += collection[i].label; if (i === (collection.length - 2) && (collection.length < 3)) { output += " and "; } else if (i < (collection.length - 2))...
... { output += ", "; } else if (i === (collection.length - 2)) { output += ", and "; } } if (output === "") { output = "you didn't order anything!"; } outputbox.innerhtml = output; }, false); this script sets up a
click event listener on the "order now" button.
... when
clicked, the event handler fetches the list of selected options using selectedoptions, then iterates over the options in the list.
MouseEvent.altKey - Web APIs
on some linux variants, for example, a left mouse
click combined with the alt key is used to move or resize windows.
... example this example logs the altkey property when you trigger a
click event.
... html <p>
click anywhere to test the <code>altkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('
click', logkey); function logkey(e) { log.textcontent = `the alt key is pressed: ${e.altkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.altkey' in that specification.
MouseEvent.button - Web APIs
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.
... example html <button id="button" oncontextmenu="event.preventdefault();">
click here with your mouse...</button> <p id="log"></p> javascript let button = document.queryselector('#button'); let log = document.queryselector('#log'); button.addeventlistener('mouseup', logmousebutton); function logmousebutton(e) { if (typeof e === 'object') { switch (e.button) { case 0: log.textcontent = 'left button
clicked.'; break; case 1: log.text...
...content = 'middle button
clicked.'; break; case 2: log.textcontent = 'right button
clicked.'; break; default: log.textcontent = `unknown button code: ${e.button}`; } } } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.button' in that specification.
MouseEvent.initMouseEvent() - Web APIs
possible types for mouse events include:
click, mousedown, mouseup, mouseover, mousemove, mouseout.
... detail the event's mouse
click count.
... example html <div style="background:red; width:180px; padding:10px;"> <div id="out"></div> <input type="text"> </div> javascript document.body.on
click = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagname.tolowercase(); document.getelementbyid("out").innerhtml = stag; }; var simulate
click = function(){ var evt = document.createevent("mouseevents"); evt.initmouseevent("
click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null); document.body.dispatchevent(evt); } simulate
click(); result spe...
MouseEvent.pageX - Web APIs
the pagex read-only property of the mouseevent interface returns the x (horizontal) coordinate (in pixels) at which the mouse was
clicked, relative to the left edge of the entire document.
...for example, if the page is scrolled such that 200 pixels of the left side of the document are scrolled out of view, and the mouse is
clicked 100 pixels inward from the left edge of the view, the value returned by pagex will be 300.
... syntax var pagex = mouseevent.pagex; value a floating-point number of pixels from the left edge of the document at which the mouse was
clicked, regardless of any scrolling or viewport positioning that may be in effect.
NotificationEvent.action - Web APIs
returns the string id of the notification button the user
clicked.
... this value returns an empty string if the user
clicked the notification somewhere other than an action button, or the notification does not have a button.
... example self.registration.shownotification("new articles available", { actions: [{action: "get", title: "get now."}] }); self.addeventlistener('notification
click', function(event) { event.notification.close(); if (event.action === 'get') { synchronizereader(); } else { clients.openwindow("/reader"); } }, false); specifications specification status comment notifications apithe definition of 'action' in that specification.
NotificationEvent.notification - Web APIs
the notification read-only property of the notificationevent interface returns the instance of the notification that was
clicked to fire the event.
... the notification provides read-only access to many properties that were set at the instantiation time of the notification such as tag and data attributes that allow you to store information for defered use in the notification
click event.
... example self.addeventlistener('notification
click', function(event) { console.log('on notification
click'); // data can be attached to the notification so that you // can process it in the notification
click handler.
Using the Permissions API - Web APIs
revokebtn.on
click = function() { revokepermission(); } ...
...in the privacy section,
click content settings.
...finally,
click manage exceptions and remove the permissions you granted to the sites you are interested in.
SVGCircleElement - Web APIs
example svg content <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 250 250" width="250" height="250"> <circle cx="100" cy="100" r="50" fill="gold" id="circle" on
click="
clickcircle();"/> </svg> javascript content this function
clickcircle() is called when the circle is
clicked.
... function
clickcircle() { var circle = document.getelementbyid("circle"); // randomly determine if the circle radius will increase or decrease var change = math.random() > 0.5 ?
... 10 : -10; // clamp the circle radius to a minimum of 10 and a maximum of 250, // so it won't disappear or get bigger than the viewport var newvalue = math.min(math.max(circle.r.baseval.value + change, 10), 250); circle.setattribute("r", newvalue); }
click on the circle.
SVGTransformList - Web APIs
example using multiple svgtransform objects in this example we create a function that will apply three different transformations to the svg element that has been
clicked on.
... xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.target.parentnode; // svgtransformlist of the element that has been
clicked on var tfmlist = evt.target.transform.baseval; // create a seperate transform object for each transform var translate = svgroot.createsvgtransform(); translate.settranslate(50,5); var rotate = svgroot.createsvgtransform(); rotate.setrotate(10,0,0); var scale = svgroot.createsvgtransform(); scale.setscale(0.8,0.8); // apply the transforma...
...tions by appending the svgtranform objects to the svgtransformlist associated with the element tfmlist.appenditem(translate); tfmlist.appenditem(rotate); tfmlist.appenditem(scale); } ]]> </script> <polygon fill="orange" stroke="black" stroke-width="5" points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225" on
click="transformme(evt)"/> <rect x="200" y="100" width="100" height="100" fill="yellow" stroke="black" stroke-width="5" on
click="transformme(evt)"/> <text x="40" y="250" font-family="verdana" font-size="16" fill="green" >
click on a shape to transform it </text> </svg> live preview: specifications specification status comment scalable vector graphics (svg) 2the definitio...
Selection.deleteFromDocument() - Web APIs
example this example lets you delete selected text by
clicking a button.
... upon
clicking the button, the window.getselection() method gets the selected text, and the deletefromdocument() method removes it.
...once you do, you can remove the selected content by
clicking the button below.</p> <button>delete selected text</button> javascript let button = document.queryselector('button'); button.addeventlistener('
click', deleteselection); function deleteselection() { let selection = window.getselection(); selection.deletefromdocument(); } result specifications specification status comment selection apithe definition of 'selection.deletefromdocument()' in that specification.
Selection.rangeCount - Web APIs
before the user has
clicked a freshly loaded page, the rangecount is 0.
... after the user
clicks on the page, rangecount is 1, even if no selection is visible.
...firefox allows to select multiple ranges in the document by using ctrl+
click (unless the
click within an element with display: table-cell).
ServiceWorkerRegistration.showNotification() - Web APIs
appropriate responses are built using event.action within the notification
click event.
... requireinteraction: indicates that on devices with sufficiently large screens, a notification should remain active until the user
clicks or dismisses it.
...buzz!', icon: '../images/touch/chrome-touch-icon-192x192.png', vibrate: [200, 100, 200, 100, 200, 100, 200], tag: 'vibration-sample' }); }); } }); } to invoke the above function at an appropriate time, you could use the serviceworkerglobalscope.onnotification
click event handler.
UIEvent.detail - Web APIs
the uievent.detail read-only property, when non-zero, provides the current (or next, depending on the event)
click count.
... for
click or dbl
click events, uievent.detail is the current
click count.
... for mousedown or mouseup events, uievent.detail is 1 plus the current
click count.
Starting up and shutting down a WebXR session - Web APIs
finally, you must call requestsession() from a user event handler, such as the handler for the
click event.
...the shutdown of an xrsession can happen either due to the session itself deciding it's time to shut down (such as if the user turns off their xr device), because the user has
clicked a button to end the session, or some other situation as appropriate for your application.
...by calling freeresources() in the end event handler, we call it both when the user
clicks a button that triggers a shutdown such as by calling the shutdownxr() function shown above and when the session ends automatically, whether due to an error or some other reason.
Window.captureEvents() - Web APIs
syntax window.captureevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.
click, event.change, event.dbl
click, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
...--> <script> function reg() { window.captureevents(event.
click); window.on
click = page_
click; } function page_
click() { alert('page
click event detected!'); } </script> </head> <body onload="reg();"> <p>
click anywhere on this page.</p> </body> </html> notes events raised in the dom by user activity (such as
clicking buttons or shifting focus away from the current document) generally pass through the high-level window and document objects first before arriving at the object that initiated the event.
... when you call the captureevents() method on the window, events of the type you specify (for example, event.
click) no longer pass through to "lower" objects in the hierarchy.
window.location - Web APIs
example #4: display the properties of the current url in an alert dialog: function showloc() { var olocation = location, alog = ["property (typeof): value", "location (" + (typeof olocation) + "): " + olocation ]; for (var sprop in olocation){ alog.push(sprop + " (" + (typeof olocation[sprop]) + "): " + (olocation[sprop] || "n/a")); } alert(alog.join("\n")); } // in html: <button on
click="showloc();">show location properties</button> example #5: send a string of data to the server by modifying the search property: function senddata (sdata) { location.search = sdata; } // in html: <button on
click="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current document is reload...
...praesent bibendum condimentum feugiat.</p> <p id="mybookmark1">[ <span class="intlink" on
click="showbookmark('#mybookmark2');">go to bookmark #2</span> ]</p> <p>vivamus blandit massa ut metus mattis in fringilla lectus imperdiet.
...pellentesque porttitor facilisis ultricies.</p> <p id="mybookmark2">[ <span class="intlink" on
click="showbookmark('#mybookmark1');">go to bookmark #1</span> | <span class="intlink" on
click="showbookmark('#mybookmark1', false);">go to bookmark #1 without using location.hash</span> | <span class="intlink" on
click="showbookmark('#mybookmark3');">go to bookmark #3</span> ]</p> <p>phasellus tempus fringilla nunc, eget sagittis orci molestie vel.
Window.prompt() - Web APIs
are many ways to use the prompt feature sign = window.prompt(); // open the blank prompt window sign = prompt(); // open the blank prompt window sign = window.prompt('are you feeling lucky'); // open the window with text "are you feeling lucky" sign = window.prompt('are you feeling lucky', 'sure'); // open the window with text "are you feeling lucky" and default value "sure" when the user
clicks the ok button, text entered in the input field is returned.
... if the user
clicks ok without entering any text, an empty string is returned.
... if the user
clicks the cancel button, this function returns null.
WindowOrWorkerGlobalScope.clearTimeout() - Web APIs
example run the script below in the context of a web page and
click on the page once.
...if you
click the page multiple times in one second, the alert only appears once.
...r alarm = { remind: function(amessage) { alert(amessage); this.timeoutid = undefined; }, setup: function() { if (typeof this.timeoutid === 'number') { this.cancel(); } this.timeoutid = window.settimeout(function(msg) { this.remind(msg); }.bind(this), 1000, 'wake up!'); }, cancel: function() { window.cleartimeout(this.timeoutid); } }; window.on
click = function() { alarm.setup(); }; notes passing an invalid id to cleartimeout() silently does nothing; no exception is thrown.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
} function stoptextcolor() { clearinterval(nintervid); } </script> </head> <body onload="changecolor();"> <div id="my_box"> <p>hello world</p> </div> <button on
click="stoptextcolor();">stop</button> </body> </html> example 3: typewriter simulation the following example simulates typewriter by first clearing and then slowly typing content into the nodelist that matches a specified group of selectors.
...px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[ <span class="intlink" on
click="otwexample1.play();">play</span> | <span class="intlink" on
click="otwexample1.pause();">pause</span> | <span class="intlink" on
click="otwexample1.terminate();">terminate</span> ]</p> <div id="info"> vivamus blandit massa ut metus mattis in fringilla lectus imperdiet.
... example usage your html page: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>minidaemin example - mdn</title> <script type="text/javascript" src="minidaemon.js"></script> <style type="text/css"> #sample_div { visibility: hidden; } </style> </head> <body> <p> <input type="button" on
click="fadeinout.start(false /* optional */);" value="fade in" /> <input type="button" on
click="fadeinout.start(true);" value="fade out"> <input type="button" on
click="fadeinout.pause();" value="pause" /> </p> <div id="sample_div">some text here</div> <script type="text/javascript"> function opacity (nindex, nlength, bbackwards) { this.style.opacity = nindex / nlength; i...
XRSystem: isSessionSupported() - Web APIs
if it is, we set up a button to read "enter xr", to call a method onbutton
clicked(), and enable the button.
...if a session is already underway when the button is
clicked, we call the xrsession object's end() method to shut down the webxr session.
... if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { userbutton.addeventlistener('
click', onbutton
clicked); userbutton.innerhtml = 'enter xr'; userbutton.disabled = false; } }); } function onbutton
clicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity.
Using the link role - Accessibility
this includes javascript to grab the location and handle navigating to the new location using window.open() via
clicking, and using keyboard, css to give the desired visuals of a link, the tabindex="0" attribute to make it keyboard-focussable, and role="link" to make it recognised as a link by assistive technology.
...abindex="0" id="link1" role="link" class="link"> fake accessible link created using a span </span> <p><a href="https://mozilla.org" target="_blank">actual real link</a></p> css span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; } javascript const spanelem = document.queryselector('span'); //handles
clicks and keydowns on the link function navigatelink(e) { if (e.type === '
click' || e.key === 'enter') { let ref = e.target != null ?
... e.target : e.srcelement; if (ref) { window.open(ref.getattribute('data-href'), '_blank'); } } } spanelem.addeventlistener('
click', navigatelink); spanelem.addeventlistener('keydown', navigatelink); result notes if pressing the link triggers an action but does not change browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.
Accessibility Information for Web Authors - Accessibility
the output data report is displayed in a clear and well structured table where each and all checkpoints are identified and described (along with an helpful
clickable link to the related reference guideline) into logical groups and according to measurable results: passed, warning, failed for automated verification, warning for manual verification, not selected, not available, not related, etc.
...its accessibility report is viewable in the view source window (view > source code ctrl+u or right-
click on the status bar).
... two panes are added at the bottom of the view source code window: the left pane contains the errors and warnings (with their correspondent line number) and the right pane identifies the checkpoint along with an example and a
clickable link to the reference/guideline.
Cross-browser audio basics - Developer guides
> </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 'on
click' events play.on
click = playaudio; pause.on
click = 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?
...splaycontrols() { loading.style.display = "none"; play.style.display = "block"; } // check that the media is ready before displaying the controls if (myaudio.paused) { displaycontrols(); } else { // not ready yet - wait for canplay event myaudio.addeventlistener('canplay', function() { displaycontrols(); }); } play.addeventlistener('
click', function() { myaudio.play(); play.style.display = "none"; pause.style.display = "block"; }); pause.addeventlistener('
click', function() { myaudio.pause(); pause.style.display = "none"; play.style.display = "block"; }); // display progress myaudio.addeventlistener('timeupdate', function() { //sets the percentage bar.style.width = ...
... first of all, we apply a quick update to the progress bar css to display the hand pointer on hover: #progress { margin-left: 80px; border: 1px solid black; cursor: pointer; } then we add the code that detects the
click and moves the 'playhead' to the correct position: var progress = document.getelementbyid('progress'); progress.addeventlistener('
click', function(e) { // calculate the normalized position
clicked var
clickposition = (e.pagex - this.offsetleft) / this.offsetwidth; var
clicktime =
clickposition * myaudio.duration; // move the playhead to the correct position myaudio.currenttime = cli...
Audio and Video Delivery - Developer guides
you may detect
click, touch and/or keyboard events to trigger actions such as play, pause and scrubbing.
...'my-audio'); var mycontrol = document.getelementbyid('my-control'); function switchstate() { if (myaudio.paused == true) { myaudio.play(); mycontrol.innerhtml = "pause"; } else { myaudio.pause(); mycontrol.innerhtml = "play"; } } function checkkey(e) { if (e.keycode == 32 ) { //spacebar switchstate(); } } mycontrol.addeventlistener('
click', function() { switchstate(); }, false); window.addeventlistener( "keypress", checkkey, false ); } you can try this example out here.
...then you can replace the video with its fallback content: <video controls> <source src="dynamicsearch.mp4" type="video/mp4"></source> <a href="dynamicsearch.mp4"> <img src="dynamicsearch.jpg" alt="dynamic app search in firefox os"> </a> <p>
click image to play a video demo of dynamic app search</p> </video> var v = document.queryselector('video'), sources = v.queryselectorall('source'), lastsource = sources[sources.length-1]; lastsource.addeventlistener('error', function(ev) { var d = document.createelement('div'); d.innerhtml = v.innerhtml; v.parentnode.replacechild(d, v); }, false); audio/video javascript libraries a...
User input and controls - Developer guides
common mouse events include
click, dbl
click, mouseup, and mousedown.
... drag & drop drag & drop allows your application’s users to
click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.
...when you
click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse.
Writing forward-compatible websites - Developer guides
javascript prefix all global variable access in onfoo attributes with “window.” when an event handler content attribute (on
click, onmouseover, and so forth) is used on html element, all name lookup in the attribute first happens on the element itself, then on the element's form if the element is a form control, then on the document, and then on the window (where the global variables you have defined are).
... for example, if you have this markup: <div on
click="alert(ownerdocument)">
click me</div> then
clicking on the text alerts the ownerdocument of the div.
... to avoid this, fully qualify global variable access using "window.", like so: <script> function localname() { alert('function localname has been called'); } </script> <div on
click="window.localname()">
clicking me should show an alert<div> don't concatenate scripts you don't control the "use strict;" directive in ecmascript, when used on the file level, applies to everything in the file.
<a>: The Anchor element - HTML: Hypertext Markup Language
tpink'; function draw(x, y) { if (isdrawing) { c.beginpath(); c.arc(x, y, 10, 0, math.pi*2); c.closepath(); c.fill(); } } canvas.addeventlistener('mousemove', event => draw(event.offsetx, event.offsety) ); canvas.addeventlistener('mousedown', () => isdrawing = true); canvas.addeventlistener('mouseup', () => isdrawing = false); document.queryselector('a').addeventlistener('
click', event => event.target.href = canvas.todataurl() ); result security and privacy <a> elements can have consequences for users’ security and privacy.
... inaccessible, weak link text a sadly common mistake is to only link the words “
click here” or “here”: <p> learn more about our products <a href="/products">here</a>.
... on
click 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 .
<button>: The Button element - HTML: Hypertext Markup Language
the html <button> element represents a
clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
...(large text is defined as 18.66px and bold or larger, or 24px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0
clicking and focus whether
clicking on a <button> causes it to (by default) become focused varies by browser and os.
... does
clicking on a <button> give it focus?
<dialog>: The Dialog element - HTML: Hypertext Markup Language
examples simple example <dialog open> <p>greetings, one and all!</p> </dialog> advanced example this example opens a pop-up dialog box that contains a form, when the "update details" button is
clicked.
... aria-live="polite"></output> javascript var updatebutton = document.getelementbyid('updatedetails'); var favdialog = document.getelementbyid('favdialog'); var outputbox = document.queryselector('output'); var selectel = document.queryselector('select'); var confirmbtn = document.getelementbyid('confirmbtn'); // "update details" button opens the <dialog> modally updatebutton.addeventlistener('
click', function onopen() { if (typeof favdialog.showmodal === "function") { favdialog.showmodal(); } else { alert("the <dialog> api is not supported by this browser"); } }); // "favorite animal" input sets the value of the submit button selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "close" on dialo...
...g because of [method="dialog"] favdialog.addeventlistener('close', function onclose() { outputbox.value = favdialog.returnvalue + " button
clicked - " + (new date()).tostring(); }); result specifications specification status comment html living standardthe definition of '<dialog>' in that specification.
<input type="checkbox"> - HTML: Hypertext Markup Language
<div> <input type="checkbox" id="coding" name="interest" value="coding" checked> <label for="coding">coding</label> </div> <div> <input type="checkbox" id="music" name="interest" value="music"> <label for="music">music</label> </div> </fieldset> providing a bigger hit area for your checkboxes in the above examples, you may have noticed that you can toggle a checkbox by
clicking on its associated <label> element as well as on the checkbox itself.
... this is a really useful feature of html form labels that makes it easier to
click the option you want, especially on small-screen devices like smartphones.
... var overall = document.queryselector('input[id="enchtbl"]'); var ingredients = document.queryselectorall('ul input'); overall.addeventlistener('
click', function(e) { e.preventdefault(); }); for(var i = 0; i < ingredients.length; i++) { ingredients[i].addeventlistener('
click', updatedisplay); } function updatedisplay() { var checkedcount = 0; for(var i = 0; i < ingredients.length; i++) { if(ingredients[i].checked) { checkedcount++; } } if(checkedcount === 0) { overall.checked = false;...
<input type="datetime-local"> - HTML: Hypertext Markup Language
clicking the down arrow on the right hand side brings up a date picker to allow you to choose a date; you have to enter the time manually.
... the edge datetime-local control looks like the below;
clicking the date and the time parts of the value bring up two separate pickers for you, so you can easily set both the date and the time.
... additional attributes in addition to the attributes common to all <input> elements, datetime-local inputs offer the following attributes: attribute description max the latest date and time to accept min the earliest date and time to accept step the stepping interval to use for this input, such as when
clicking arrows on spinner controls or performing validation max the latest date and time to accept.
<input type="number"> - HTML: Hypertext Markup Language
it defaults to accepting a height in meters, but you can
click the relevant button to change the form to accept feet and inches instead.
...y, the javascript: let metersinputgroup = document.queryselector('.metersinputgroup'); let feetinputgroup = document.queryselector('.feetinputgroup'); let metersinput = document.queryselector('#meters'); let feetinput = document.queryselector('#feet'); let inchesinput = document.queryselector('#inches'); let switchbtn = document.queryselector('input[type="button"]'); switchbtn.addeventlistener('
click', function() { if(switchbtn.getattribute('class') === 'meters') { switchbtn.setattribute('class', 'feet'); switchbtn.value = 'enter height in meters'; metersinputgroup.style.display = 'none'; feetinputgroup.style.display = 'block'; feetinput.setattribute('required', ''); inchesinput.setattribute('required', ''); metersinput.removeattribute('required'); metersi...
... (note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.) note: when the user
clicks the button, the required attribute(s) are removed from the input(s) we are hiding, and empty the value attribute(s).
<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.
...they're rarely useful, and are instead more likely to frustrate users who
click them by mistake (often while trying to
click the submit button).
... value a domstring used as the button's label events
click supported common attributes type and value idl attributes value methods none value an <input type="reset"> element's value attribute contains a domstring that is used as the button's label.
<label> - HTML: Hypertext Markup Language
you can
click the associated label to focus/activate the input, as well as the input itself.
... when a <label> is
clicked or tapped and it is associated with a form control, the resulting
click event is also raised for the associated control.
... 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.
<template>: The Content Template element - HTML: Hypertext Markup Language
consider the following html and javascript: html <div id="container"></div> <template id="template"> <div>
click me</div> </template> javascript const container = document.getelementbyid("container"); const template = document.getelementbyid("template"); function
clickhandler(event) { alert("
clicked a div"); } const firstclone = template.content.clonenode(true); firstclone.addeventlistener("
click",
clickhandler); container.appendchild(firstclone); const secondclone = template.content.firstelementchil...
...d.clonenode(true); secondclone.addeventlistener("
click",
clickhandler); container.appendchild(secondclone); result firstclone is a documentfragment instance, so while it gets appended inside the container as expected,
clicking on it does not trigger the
click event.
... secondclone is an htmldivelement instance,
clicking on it works as one would expect.
HTML elements reference - HTML: Hypertext Markup Language
<map> the html <map> element is used with <area> elements to define an image map (a
clickable link area).
... element description <button> the html <button> element represents a
clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
...this includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been
clicked.
contextmenu - HTML: Hypertext Markup Language
a context menu is a menu that appears upon user interaction, such as a right-
click.
... example html <body contextmenu="share"> <menu type="context" id="share"> <menu label="share"> <menuitem label="twitter" on
click="shareviatwitter()"></menuitem> <menuitem label="facebook" on
click="shareviafacebook()"></menuitem> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu.
... </li> <li contextmenu="changefont" id="fontsizing"> on this specific list element, you can change the size of the text by using the "increase/decrease font" actions from your context menu </li> <menu type="context" id="changefont"> <menuitem label="increase font" on
click="incfont()"></menuitem> <menuitem label="decrease font" on
click="decfont()"></menuitem> </menu> <li contextmenu="changeimage" id="changeimage"> on the image below, you can fire the "change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="changeimage" id="promobutton" /> <menu type="context" id="changeimage"> <menuitem label="change image" on
click="changeimage()"></me...
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.).
...for example, client-side extensions allow an application to place elements on an html form and respond to user events such as mouse
clicks, form input, and page navigation.
... hello world to get started with writing javascript, open the web console in multi-line mode, and write your first "hello world" javascript code: (function(){ "use strict"; /* start of your code */ function greetme(yourname) { alert('hello ' + yourname); } greetme('world'); /* end of your code */ })(); press cmd+enter or ctrl+enter (or
click the run button) to watch it unfold in your browser!
Promise - JavaScript
the testpromise() method is called each time the <button> is
clicked.
...beforeend', val + ') promise fulfilled (async code terminated)'); }).catch((reason) => { // log the rejection reason console.log(`handle rejected promise (${reason}) here.`); }); // end log.insertadjacenthtml('beforeend', thispromisecount + ') promise made (sync code terminated)'); } if ("promise" in window) { let btn = document.getelementbyid("btn"); btn.addeventlistener("
click",testpromise); } else { log = document.getelementbyid('log'); log.innerhtml = "live example not available as your browser doesn't support the <code>promise<code> interface."; } this example is started by
clicking the button.
...) by
clicking the button several times in a short amount of time, you'll even see the different promises being fulfilled one after another.
<maction> - MathML
possible values are: statusline: if there is a
click on the expression or the reader moves the pointer over it, the message is sent to the browser's status line.
... toggle: when there is a
click on the subexpression, the rendering alternates the display of selected subexpressions.
... therefore each
click increments the selection value.
CSS and JavaScript animation performance - Web Performance
enabling fps tools before going through the example, please enable fps tools first to see the current frame rate: in the url bar, enter about:config;
click the i’ll be careful, i promise!
... double-
click the entry to set the value to true.
... the animation can be switched to requestanimationframe() by
clicking the toggle button.
Populating the page: how browsers work - Web Performance
it occurs whenever a user requests a page by entering a url into the address bar,
clicking a link, submitting a form, as well as other actions.
...time to first byte (ttfb) is the time between when the user made the request—say by
clicking on a link—and the receipt of this first packet of html.
...avoid occupying the main thread, as demonstrated in this webpagetest example: in this example, the dom content load process took over 1.5 seconds, and the main thread was fully occupied that entire time, unresponsive to
click events or screen taps.
Structural overview of progressive web apps - Progressive web apps (PWAs)
the app shell approach allows websites to be: linkable: even though it behaves like a native app, it is still a website — you can
click on the links within the page and send a url to someone if you want to share it.
...website/g,games[i].website) .replace(/github/g,games[i].github); entry = entry.replace('<a href=\'http:///\'></a>','-'); content += entry; }; document.getelementbyid('content').innerhtml = content; then it registers a service worker: if ("serviceworker" in navigator) { navigator.serviceworker.register("/pwa-examples/js13kpwa/sw.js"); } after that, the app adds a handler for
clicks on a button whose id is notifications; this handler requests permission to send notifications to the user, then generates and sends a random notification.
... var button = document.getelementbyid("notifications"); button.addeventlistener('
click', function(e) { notification.requestpermission().then(function(result) { if (result === 'granted') { randomnotification(); } }); }); the randomnotification() function follows, rounding out the last of the code in the file: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var notifbody = 'created by '+games[randomitem].author+'.'; var notifimg = 'data/img/'+games[randomitem].slug+'.jpg'; var options = { body: notifbody, icon: notifimg } var notif = new notification(notiftitle, options); settimeout(randomnotification, 30000); } the service worker the last file we'll briefly look at...
begin - SVG: Scalable Vector Graphics
those are: focus, blur, focusin, focusout, activate, aux
click,
click, dbl
click, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent.
.../> </svg> begin-2-syncbase.svg event example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="startbutton.
click" dur="8s" fill="freeze" /> </rect> <!-- trigger --> <rect id="startbutton" style="cursor:pointer;" x="19.5" y="62.5" rx="5" height="25" width="80" fill="#efefef" stroke="black" stroke-width="1" /> <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
click me.</text> <!-- grid --> <text x="10" y="20" text-an...
...if you want to activate the key events, you have to
click on it first.
end - SVG: Scalable Vector Graphics
those are: focus, blur, focusin, focusout, activate, aux
click,
click, dbl
click, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent .
...oke-width=".5" /> </svg> event example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="endbutton.
click" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger --> <rect id="endbutton" style="cursor:pointer;" x="19.5" y="62.5" rx="5" height="25" width="80" fill="#efefef" stroke="black" stroke-width="1" /> <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
click me.</text> <!-- grid --> <tex...
...if you want to activate the key events, you have to
click on it first.
Types of attacks - Web security
click-jacking
click-jacking is the practice of tricking a user into
clicking on a link, button, etc.
...(
click-jacking is sometimes called "user interface redressing", though this is a misuse of the term "redress".) cross-site request forgery (csrf) cross-site scripting (xss) cross-site scripting (xss) is a security exploit which allows an attacker to inject into a website malicious client-side code.
... reflected xss attacks when a user is tricked into
clicking a malicious link, submitting a specially crafted form, or browsing to a malicious site, the injected code travels to the vulnerable website.
Cross-domain Content Scripts - Archive of obsolete content
the "main.js": creates a panel whose content is supplied by "panel.html" and adds a content script "panel-script.js" to it sends the panel a "show" message when it is shown adds a button which shows the panel when it is
clicked // main.js var data = require("sdk/self").data; var forecast_panel = require("sdk/panel").panel({ height: 50, contenturl: data.url("panel.html"), contentscriptfile: data.url("panel-script.js") }); forecast_panel.on("show", function(){ forecast_panel.port.emit("show"); }); require("sdk/ui/button/action").actionbutton({ id: "get-forecast", label: "get the forecast", icon: "./ic...
...on-16.png", on
click: function() { forecast_panel.show(); } }); the "panel.html" just includes a <div> block for the forecast: <!doctype html> <!-- panel.html --> <html> <head></head> <body> <div id="forecast_summary"></div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-script.js var url = "http://datapoint.metoffice.gov.uk/public/data/txt/wxfcs/regionalforecast/json/500?key=your-api-key"; self.port.on("show", function () { var request = new xmlhttprequest(); request.open("get", url, true); request.onload = function () { var jsonresponse = json.parse(request.responsetext); var summary = getsummary(jsonresponse); var element = document.getelementbyid("forecast_summary"); element.textcontent = summa...
port - Archive of obsolete content
the button sends the content script a message called "get-first-para" when it is
clicked: // main.js pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", on
click: function() { console.log("sending 'get-first-para'"); pageworker.port.em...
... // content-script.js function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); self.port.removelistener("get-first-para", getfirstparagraph); } self.port.on("get-first-para", getfirstparagraph); the result is that the paragraph is only logged the first time the button is
clicked.
page-mod - Archive of obsolete content
for example, we might want to run a script in the context of the currently active tab when the user
clicks a button: to block certain content, to change the font style, or to display the document's dom structure.
... the following add-on creates a button which, when
clicked, highlights all the div elements in the document loaded into the active tab: require("sdk/ui/button/action").actionbutton({ id: "highlight-divs", label: "highlight divs", icon: "./icon-16.png", on
click: function() { require("sdk/tabs").activetab.attach({ contentscript: 'var divs = document.getelementsbytagname("div");' + 'for (var i = 0; i < divs.length; ++i) {' + 'divs[i].setattribute("style", "border: solid red 1px;");' + '}' }); } }); to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-on's...
simple-prefs - Archive of obsolete content
when the user
clicks the button, the function listening to the on() function for this preference is called.
... in "package.json": { "type": "control", "label": "
click me!", "name": "sayhello", "title": "say hello" } in "main.js": var sp = require("sdk/simple-prefs"); sp.on("sayhello", function() { console.log("hello"); }); localization using the sdk's localization system, you can provide translated forms of the title and description attributes.
ui - Archive of obsolete content
you give it an icon, a label, and a
click handler: var ui = require("sdk/ui"); var action_button = ui.actionbutton({ id: "my-button", label: "action button!", icon: "./icon.png", on
click: function(state) { console.log("you
clicked '" + state.label + "'"); } }); you can make a button standalone or add it to a toolbar.
...so they have a checked property which is toggled when the user
clicks the button, and the icon gets a "pressed" look when the button is checked.
Adding a Button to the Toolbar - Archive of obsolete content
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" }, on
click: handle
click }); function handle
click(state) { tabs.open("https://www.mozilla.org/"); } now run the add-on with jpm run.
...
clicking the button loads https://www.mozilla.org/ into a new tab.
Unit Testing - Archive of obsolete content
to show the module in use, edit the "index.js" file as follows: var base64 = require("./base64"); var button = require("sdk/ui/button/action").actionbutton({ id: "base64", label: "base64", icon: "./icon-16.png", on
click: function() { encoded = base64.btoa("hello"); console.log(encoded); decoded = base64.atob(encoded); console.log(decoded); } }); to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-ons "data" directory.
...if we run the add-on and
click the button, we should see the following logging output: info: agvsbg8= info: hello testing the base64 module navigate to the add-on's test directory and delete the test-index.js file.
Localization - Archive of obsolete content
to the html tag where you want the localized string to appear, and assign the identifier to it: <html> <body> <h1 data-l10n-id="hello_id"></h1> </body> </html> then you can use this html file to build your interface, for example inside a panel: var button = require("sdk/ui/button/action").actionbutton({ id: "localized-hello", label: "localized hello", icon: "./icon-16.png", on
click: function() { hello.show(); } }); var hello = require("sdk/panel").panel({ height: 75, width: 150, contenturl: require("sdk/self").data.url("my-panel.html") }); given locale files for "en-us" and "fr" which provide translations of hello_id, the panel will now display "hello!" or "bonjour !", according to the current locale: the translation is inserted into the node which has the ...
...once you've installed it, open the add-on manager, and you'll see a new button labeled "update l10n" next to each add-on you've installed:
click the button and you'll be prompted for a new .properties file for that add-on.
Miscellaneous - Archive of obsolete content
you can listen to mouse wheel
click events just like normal
click events (via mousedown and mouseup events).
... when the mouse wheel is
clicked, event.button will be equal to 1.
Tree - Archive of obsolete content
getting the cell from a mouse
click your first choice is likely to try <treecell on
click="yourfunc();"/> or something similar.
...for example, assuming the given <tree>: <tree id="my-tree" on
click="ontree
clicked(event)"> use the following javascript: function ontree
clicked(event){ var tree = document.getelementbyid("my-tree"); var tbo = tree.treeboxobject; // get the row, col and child element at the point var row = { }, col = { }, child = { }; tbo.getcellat(event.clientx, event.clienty, row, col, child); var celltext = tree.view.getcelltext(row.value, col.value); alert(celltext); } getting the selected indices of a multiselect tree var start = {}, end = {}, numranges = tree.view.selection.get...
Windows - Archive of obsolete content
draggable windows to make a window draggable by
clicking on the window's contents, you can use the mousedown and mousemove events.
... the following code does not care which element is
clicked on, simply responding to all mousedown events equally.
Displaying web content in an extension without security issues - Archive of obsolete content
it won’t harm disabling everything else as well unless it is really required: frame.docshell.allowauth = false; frame.docshell.allowimages = false; frame.docshell.allowjavascript = false; frame.docshell.allowmetaredirects = false; frame.docshell.allowplugins = false; frame.docshell.allowsubframes = false; but what about interactivity, for example if you want a certain reaction to mouse
clicks?
... this can be done as well, by placing the event handler on the frame tag (meaning that it is outside the restricted document and can execute without restrictions): <iframe type="content" on
click="handle
click(event);"/> and the event handler would look like that: function handlebrowser
click(event) { // only react to left mouse
clicks if (event.button != 0) return; // default action on link
clicks is to go to this link, cancel it event.preventdefault(); if (event.target instanceof htmlanchorelement && event.target.href) openlinkinbrowser(event.target.href); } safe html manipulation functions when it comes to displaying the data, it is tempting to generate some html code and to insert it into the document via innerhtml.
Interaction between privileged and non-privileged pages - Archive of obsolete content
finally, the code creates and dispatches a custom event named myextensionevent -- similar to the standard dom
click event you catch with on
click handlers.
...response.tosource() : response)); } } </script> </head> <body> <button on
click="return something.send_request({foo: 1}, something.callback)">send {foo: 1} with callback</button> <button on
click="return something.send_request({baz: 3}, something.callback)">send {baz: 3} with callback</button> <button on
click="return something.send_request({mozilla: 3})">send {mozilla: 3} without callback</button> <button on
click="return something.send_request({firefox: 4}, someth...
Adding windows and dialogs - Archive of obsolete content
all it does is display a text message that the user can read and then
click the ok button to dismiss it.
...the only constant rule is that
clicking on ok and cancel will close the dialog unless your associated function returns false.
Custom XUL Elements with XBL - Archive of obsolete content
we have a "
click" handler that displays the greeting when the "person" element is
clicked: <handler phase="bubbling" event="
click"><![cdata[ window.alert(this.greeting); ]]></handler> handlers are not necessary all that often, since in most cases you'll need the events to only apply to a part of the binding, not the whole thing.
... with inheritance you could take the richlistbox element and modify it to make a rich item tree, or create a switch button that changes state everytime it's
clicked.
Creating reusable content with CSS and XBL - Archive of obsolete content
copy and paste the content from here: <!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>mozilla css getting started - xbl demonstration</title> <link rel="stylesheet" type="text/css" href="style6.css"> </head> <body> <h1>xbl demonstration</h1> <div id="square">
click me</div> </body> </html> make a new css file, style6.css.
... settimeout(this.cleardemo, 2000, this) ]]></body> </method> <method name="cleardemo"> <parameter name="me"/> <body><![cdata[ me.square.style.backgroundcolor = "transparent" me.square.style.marginleft = "0" me.button.removeattribute("disabled") ]]></body> </method> </implementation> <handlers> <handler event="
click" button="0"><![cdata[ if (event.originaltarget == this.button) this.dodemo() ]]></handler> </handlers> </binding> </bindings> make a new css file, bind6.css.
Drag and Drop JavaScript Wrapper - Archive of obsolete content
if we wanted to handle the other cases also, we can call the other functions, as in the following example: <description value="
click and drag this text." ondraggesture="nsdraganddrop.startdrag(event,textobserver)" ondragover="nsdraganddrop.dragover(event,textobserver)" ondragexit="nsdraganddrop.dragexit(event,textobserver)" ondragdrop="nsdraganddrop.drop(event,textobserver)" /> as mentioned earlier, there is nothing special that happens during a dragenter event, so you can j...
...of course, you would want to calculate this value from the element that was
clicked on.
Repackaging Firefox - Archive of obsolete content
click the "choose" button to select the xpi file containing your extension; the id and name fields will be filled out automatically.
... first, set the source directory by
clicking its "choose" button.
slideBar - Archive of obsolete content
jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolon
clickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance.
... iconhref oficon to show in the slidebaruri htmlhtml content for the featurehtml/xml urlurl to load content for the featureuri widthwidth of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool on
clickcallback when the icon is
clickedfunction onselectcallback when the feature is selectedfunction onreadycallback when featured is loadedfunction an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, on
click: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...
PyDOM - Archive of obsolete content
an event handler like: <button on
click="print foo"/> should be able to reference 'foo' via globals as shown.
...for example, let's say you have xul similar to pyxultest: top-level script code says something like: button = document.getelementbyid("some-button") button.foo = 0 and the button itself might look like: <button id="some-button" label="
click here" on
click="event.target.foo += 1; print 'foo is now', event.target.foo"/> note that (a) we have stuck an arbitrary attribute on a dom element and (b) in all cases (e.g., event handler and top-level script), the dom node needs to be explicitly specified - the globals are the window itself.
Content Panels - Archive of obsolete content
each time the user
clicks the next button, the next screen of the wizard is displayed.
...when the user enters a url or
clicks on a link in a document, the source of the frame is changed.
More Tree Features - Archive of obsolete content
you do this by adding the container attribute to it as follows: <treeitem container="true" /> this allows the user to
click on the row that corresponds to the treeitem to expand and collapse the inner rows.
...by
clicking the row, the user can open and close the list.
Tree Box Objects - Archive of obsolete content
this is convenient since you could determine whether the user
clicked on a twisty instead of another part of the row.
... in fact, this is what the underlying tree code does when the user double
clicks the twisty.
Trees - Archive of obsolete content
the user can select the treeitems by
clicking on them with the mouse, or by highlighting them with the keyboard.
... the user can select multiple items by holding down the shift or control keys and
clicking additional rows.
XPCOM Examples - Archive of obsolete content
window mediator component this is fine for displaying a list of open windows, but we would like to enhance this so that
clicking on the menu item will switch to that window.
...that means that in order to switch the window focus, we need to do the following: determine the element that the user
clicked on.
browser - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
... load_flags_is_link: this flag is used when the url is loaded because a user
clicked on a link.
menu - Archive of obsolete content
when the user
clicks the menu element, the child menupopup of the menu will be displayed.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
menulist - Archive of obsolete content
the user may enter text into the textbox or select one of the choices by
clicking from the drop-down.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
popupset - Archive of obsolete content
examples <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right
click for popup" context="clipmenu"/> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient,...
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
richlistbox - Archive of obsolete content
you can
click on any richlistitem element and use the keyboard to move the selection around.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
tab - Archive of obsolete content
the user may
click a tab to bring the associated page of the tabbox to the front.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
tabbox - Archive of obsolete content
, selectedtab, tabs, tabpanels examples <tabbox id="mytablist" selectedindex="2"> <tabs> <tab label="a first tab"/> <tab label="second tab"/> <tab label="another tab"/> <tab label="last tab"/> </tabs> <tabpanels> <tabpanel><!-- tabpanel first elements go here --></tabpanel> <tabpanel><!-- tabpanel second elements go here --></tabpanel> <tabpanel><button label="
click me"/></tabpanel> <tabpanel><!-- tabpanel fourth elements go here --></tabpanel> </tabpanels> </tabbox> attributes eventnode type: one of the values below indicates where keyboard navigation events are listened to.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
toolbarbutton - Archive of obsolete content
the user may
click anywhere on the button to open and close the menu.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
toolbox - Archive of obsolete content
the user may
click the grippy to collapse the toolbar.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
tree - Archive of obsolete content
the user can select multiple rows by holding down shift or control and
clicking on a row.
... methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
treecell - Archive of obsolete content
when the user double-
clicks an editable cell, a text field appears in which the user can edit the contents of the cell.
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
treeitem - Archive of obsolete content
the treeitem can be
clicked by the user to select the row of the tree.
... , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
nsIContentPolicy - Archive of obsolete content
type_ping 10 indicates a ping triggered by a
click on an <a> element using the ping attribute.
... note: acontext is the new tab/window when a user uses the context menu to open a link in a new tab/window or cmd/ctrl +
clicks the link (i.e., acontext is not the tab which the link was on in these cases).
Extentsions FAQ - Archive of obsolete content
how to get the value of a text box when a button is
clicked?
...however, it's functional and does allow for the explorer to be handling the display of the folder contents, and all of the right-
click context menu support is present so it should meet my needs.
NPEvent - Archive of obsolete content
in addition to these standard types, the browser provides three additional event types that can be passed in the what field of the eventrecord: getfocusevent: sent when the instance could become the focus of subsequent key events, when the user
clicks the instance or presses the tab key to focus the instance.
... losefocusevent: sent when the instance has lost the text focus, as a result of the user
clicking elsewhere on the page or pressing the tab key to move the focus.
NPP_URLNotify - Archive of obsolete content
npres_user_break: user canceled stream directly by
clicking the stop button or indirectly by some action such as deleting the instance or initiating higher-priority network operations.
...other possible reason codes are npres_user_break, indicating that the request was halted due to a user action (for example,
clicking the stop button), and npres_network_err, indicating that the request could not be completed, perhaps because the url could not be found.
Vulnerabilities - Archive of obsolete content
an attacker could craft a fraudulent email message that contains hyperlinks that, when rendered in html, appear to the recipient to be benign but actually take the recipient to a malicious web site when they are
clicked on.
... one of the trust assumptions in the design of the html content rendering feature was that users would not receive malicious hyperlinks and
click on them.
-ms-filter - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm <body> <p>
click the image to start the filter.</p> // call the function.
...="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </div> <script type="text/javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('
click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter.
XForms Input Element - Archive of obsolete content
specific handling of attributes incremental - if "true", the bound instance node will be updated on each character typed by the user or when the user
clicks on a date from the calendar widget.
...e: xsd:integer xsd:nonpositiveinteger 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.
XForms Trigger Element - Archive of obsolete content
representations the xforms trigger element can be represented by the following widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/
clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul).
... characteristics analogous widgets are <html:input type="button"/> and <xul:button/> link/
clickable text xforms authors can use this representation if they want to have a widget like a xhtml anchor (xhtml only).
The Business Benefits of Web Standards - Archive of obsolete content
there should be little need to plunge into the increasing costs and uncertain quality and integrity of proprietary pay per
click campaigns.
...put simply - and quite crudely - a pleasing, satisfying and fulfilling user experience translates, into more traffic, more repeat visitors, fewer bounces, greater loiter time and higher
click throughs.
Mobile touch controls - Game development
an additional advantage of using phaser is that the buttons you create will take any type of input, whether it's a touch on mobile or a
click on desktop — the framework sorts this out in the background for you.
... implementation the easiest way to add an interactive object that will listen for user input is to create a button: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.
clickenclave, this); this one is formed in the mainmenu state — it will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and execute the
clickenclave() function when it is touched.
Implementing game control mechanisms - Game development
var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.
clickenclave, this); // ...
... } it will be created once at the start of the game, and will execute this.
clickenclave() action assigned to it when
clicked, but you can also use the mouse's pointer value in the update() function to make an action: update: function() { // ...
Index - MDN Web Docs Glossary: Definitions of Web-related terms
when they
click a link, tap on a button, or use a custom, javascript-powered control) to the time when the browser is actually able to respond to that interaction.
...basically, rtsp is the protocol that describes what happens when you
click "pause"/"play" when streaming a video.
SQL Injection - MDN Web Docs Glossary: Definitions of Web-related terms
how it works after entering username and password, behind the gui the sql queries work as follows: "select count(*) from users where username=' " + txt.user.text+" ' and password=' "+ txt.password.text+" ' "; now suppose user enters the username: admin and password: passwd123, so after
clicking on the log in button, sql query will run as follows: "select count(*) from users where username=' admin ' and password=' passwd123 ' "; if the credentials are correct, then the user is allowed to log in, so it's a very simple (and therefore insecure) mechanism.
... hackers use a simple string called a magical string, for example: username: admin password: anything 'or'1'='1 after
clicking on the login button, the sql query will work as follows: "select count(*) from users where username=' admin ' and password=' anything 'or'1'='1 ' "; just take a closer look at the above query's password section.
Accessible multimedia - Learn web development
add it to your code, at the bottom: playpausebtn.on
click = function() { if(player.paused) { player.play(); playpausebtn.textcontent = 'pause'; } else { player.pause(); playpausebtn.textcontent = 'play'; } }; next, add this code to the bottom, which controls the stop button: stopbtn.on
click = function() { player.pause(); player.currenttime = 0; playpausebtn.textcontent = 'play'; }; there is no stop() function available on ...
... next, our rewind and fast forward buttons — add the following blocks to the bottom of your code: rwdbtn.on
click = function() { player.currenttime -= 3; }; fwdbtn.on
click = function() { player.currenttime += 3; if(player.currenttime >= player.duration || player.paused) { player.pause(); player.currenttime = 0; playpausebtn.textcontent = 'play'; } }; these are very simple, just adding or subtracting 3 seconds to the currenttime each time they are
clicked.
Getting started with CSS - Learn web development
this has different states depending on whether it is unvisited, visited, being hovered over, focused via the keyboard, or in the process of being
clicked (activated).
...leaving the underline in place, can be an important clue for people to realize that some text inside a paragraph can be
clicked on — this is the behavior they are used to.
Web fonts - Learn web development
note: under the "find fonts" section in the right-hand column, you can
click on the different tags and classifications to filter the displayed choices.
... check the checkbox labeled "yes, the fonts i'm uploading are legally eligible for web embedding."
click download your kit.
The HTML5 input types - Learn web development
often, search fields are rendered with rounded corners; they also sometimes display an "Ⓧ", which clears the field of any value when
clicked).
... a color control can be created using the <input> element with its type attribute set to the value color: <input type="color" name="color" id="color"> when supported,
clicking a color control will tend to display the operating system's default color picking functionality for you to actually make your choice with.
Example 4 - Learn web development
); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('
click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(func...
...tion (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('
click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index < length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...
UI pseudo-classes - Learn web development
while it is being
clicked on, or when the return/enter key is being pressed down in the case of a keyboard activation).
... styling enabled and disabled inputs, and read-only and read-write an enabled element is an element that can be activated; it can be selected,
clicked on, typed into, etc.
Images in HTML - Learn web development
98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
... 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('
click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('
click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solut...
Test your skills: Events - Learn web development
events 1 in our first events-related task, you need to create a simple event handler that causes the text inside the button (btn) to change when it is
clicked on, and change back when it is
clicked again.
...</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.
Animation.play() - Web APIs
return value undefined example in the growing/shrinking alice game example,
clicking or tapping the cake causes alice's growing animation (alicechange) to play forward, causing her to get bigger, as well as triggering the cake's animation.
...nommingcake.pause(); // this function will play when ever a user
clicks or taps var growalice = function() { // play alice's animation.
AudioContext.close() - Web APIs
example the following snippet is taken from our audiocontext states demo (see it running live.) when the stop button is
clicked, close() is called.
... stopbtn.on
click = function() { audioctx.close().then(function() { startbtn.removeattribute('disabled'); susresbtn.setattribute('disabled', 'disabled'); stopbtn.setattribute('disabled', 'disabled'); }); } specifications specification status comment web audio apithe definition of 'close()' in that specification.
AudioContext.getOutputTimestamp() - Web APIs
performancetime: a point in the time coordinate system of a performance interface; the time after the document containing the audio context was first rendered examples in the following code we start to play an audio file after a play button is
clicked, and start off a requestanimationframe loop running, which constantly outputs the contexttime and performancetime.
... play.addeventlistener('
click', () => { if(!audioctx) { audioctx = new window.audiocontext(); } getdata(); source.start(0); play.setattribute('disabled', 'disabled'); raf = requestanimationframe(outputtimestamps); }); stop.addeventlistener('
click', () => { source.stop(0); play.removeattribute('disabled'); cancelanimationframe(raf); }); // function to output timestamps function outputtimestamps() { let ts = audioctx.getoutputtimestamp() console.log('context time: ' + ts.contexttime + ' | performance time: ' + ts.performancetime); raf = requestanimationframe(outputtimestamps); } specifications specification status comment web audio apithe definition of 'getout...
AudioContext.resume() - Web APIs
example the following snippet is taken from our audiocontext states demo (see it running live.) when the suspend/resume button is
clicked, the audiocontext.state is queried — if it is running, suspend() is called; if it is suspended, resume() is called.
... susresbtn.on
click = function() { if(audioctx.state === 'running') { audioctx.suspend().then(function() { susresbtn.textcontent = 'resume context'; }); } else if(audioctx.state === 'suspended') { audioctx.resume().then(function() { susresbtn.textcontent = 'suspend context'; }); } } specifications specification status comment web audio apithe definition of 'resume()' in that specification.
AudioContext.suspend() - Web APIs
example the following snippet is taken from our audiocontext states demo (see it running live.) when the suspend/resume button is
clicked, the audiocontext.state is queried — if it is running, suspend() is called; if it is suspended, resume() is called.
... susresbtn.on
click = function() { if(audioctx.state === 'running') { audioctx.suspend().then(function() { susresbtn.textcontent = 'resume context'; }); } else if(audioctx.state === 'suspended') { audioctx.resume().then(function() { susresbtn.textcontent = 'suspend context'; }); } } specifications specification status comment web audio apithe definition of 'close()' in that specification.
AudioTrackList: change event - Web APIs
y onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audiotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('
click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.audiotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.que...
...ryselector('.toggle-track'); toggletrackbutton.addeventlistener('
click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); specifications specification status html living standardthe definition of 'change' in that specification.
Background Tasks API - Web APIs
" + data.text); } } the main program everything is triggered when the user
clicks the start button, which causes the decodetechnostuff() function to be called.
...ff() { totaltaskcount = 0; currenttasknumber = 0; updatedisplay(); let n = getrandomintinclusive(100, 200); for (i=0; i<n; i++) { let taskdata = { count: getrandomintinclusive(75, 150), text: "this text is from task number " + (i+1).tostring() + " of " + n }; enqueuetask(logtaskhandler, taskdata); } } document.getelementbyid("startbutton").addeventlistener("
click", decodetechnostuff, false); decodetechnostuff() starts by zeroing the values of totaltaskcount (the number of tasks added to the queue so far) and currenttasknumber (the task currently being run), and then calls updatedisplay() to reset the display to its "nothing's happened yet" state.
BaseAudioContext.createGain() - Web APIs
example the following example shows basic usage of an audiocontext to create a gainnode, which is then used to mute and unmute the audio when a mute button is
clicked by changing the gain property value.
... mute.on
click = voicemute; function voicemute() { if(mute.id == "") { // 0 means mute.
Blob - Web APIs
click the link to see the decoded object url.</p> javascript the main piece of this code for example purposes is the typedarraytourl() function, which creates a blob from the given typed array and returns an object url for it.
...pedarraytourl(typedarray, mimetype) { return url.createobjecturl(new blob([typedarray.buffer], {type: mimetype})) } const bytes = new uint8array(59); for(let i = 0; i < 59; i++) { bytes[i] = 32 + i; } const url = typedarraytourl(bytes, 'text/plain'); const link = document.createelement('a'); link.href = url; link.innertext = 'open the array url'; document.body.appendchild(link); result
click the link in the example to see the browser decode the object url.
Body.arrayBuffer() - Web APIs
once getdata() has finished running, we start the audio source playing with start(0), then disable the play button so it can't be
clicked again when it is already playing (this would cause 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.on
click = 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.
Body.text() - Web APIs
example in our fetch text example (run fetch text live), we have an <article> element and three links (stored in the mylinks array.) first, we loop through all of these and give each one an on
click event handler so that the getdata() function is run — with the link's data-page identifier passed to it as an argument — when one of the links is
clicked.
... let myarticle = document.queryselector('article'); let mylinks = document.queryselectorall('ul a'); for(let i = 0; i <= mylinks.length-1; i++) { mylinks[i].on
click = function(e) { e.preventdefault(); let linkdata = e.target.getattribute('data-page'); getdata(linkdata); } }; function getdata(pageid) { console.log(pageid); var myrequest = new request(pageid + '.txt'); fetch(myrequest).then(function(response) { return response.text().then(function(text) { myarticle.innerhtml = text; }); }); } specifications speci...
BroadcastChannel: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples live example in this example there's a "sender" <iframe> that broadcasts the contents of a <textarea> when the user
clicks a button.
...s-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.addeventlistener('
click', () => { channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener...
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
on1">continue</button> <button id="button2">quit</button> </canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const button1 = document.getelementbyid('button1'); const button2 = document.getelementbyid('button2'); document.addeventlistener('focus', redraw, true); document.addeventlistener('blur', redraw, true); canvas.addeventlistener('
click', handle
click, false); redraw(); function redraw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawbutton(button1, 20, 20); drawbutton(button2, 20, 80); } function handle
click(e) { // calculate
click coordinates const x = e.clientx - canvas.offsetleft; const y = e.clienty - canvas.offsettop; // focus button1, if appropriate drawbutton(button1, 20, 20); if (ctx.ispoint...
...'blue' : 'black'; ctx.filltext(el.textcontent, x + width / 2, y + height / 2); // define
clickable area ctx.beginpath(); ctx.rect(x, y, width, height); // draw focus ring, if appropriate ctx.drawfocusifneeded(el); } result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.drawfocusifneeded' in that specification.
Advanced animations - Web APIs
the
click event releases the ball and lets it bounce again.
...all.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestanimationframe(draw); } canvas.addeventlistener('mousemove', function(e) { if (!running) { clear(); ball.x = e.clientx; ball.y = e.clienty; ball.draw(); } }); canvas.addeventlistener('
click', function(e) { if (!running) { raf = window.requestanimationframe(draw); running = true; } }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); running = false; }); ball.draw(); move the ball using your mouse and release it with a
click.
Basic animations - Web APIs
/canvas> </body> </html> output snake game <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>nokia 1100:snake..member berries</title> </head> <body> <div class="keypress hide"> <div class="up" on
click="emit(38)">↑</div> <div class="right" on
click="emit(39)">→</div> <div class="left" on
click="emit(37)">←</div> <div class="down" on
click="emit(40)">↓</div> </div> <div class="banner" id="selector"> <div> time :<span id="time">0</span> </div> <div>lousygames ©</div> <div> score :<span id...
...="score">0</span> </div> <div class="touch off" on
click="touch(this)">touch</div> </div> <canvas id="main"></canvas> </body> <style> body { margin: 0; overflow: hidden; background: #000 } .banner { text-align: center; color: #fff; background: #3f51b5; line-height: 29px; position: fixed; left: 0; top: 0; right: 0; font-family: monospace; height: 30px; opacity: .4; display: flex; transition: .5s } .banner:hover { opacity: 1 } div#selector>div { flex-basis: 30% } @keyframes diss { from { opacity: 1 } to { opacity: 0 } } .keypres...
Clients.openWindow() - Web APIs
in firefox, the method is allowed to show popups only when called as the result of a notification
click event.
... examples // send notification to os if applicable if (self.notification.permission === 'granted') { const notificationobject = { body: '
click here to view your messages.', data: { url: self.location.origin + '/some/path' }, // data: { url: 'http://example.com' }, }; self.registration.shownotification('you\'ve got messages!', notificationobject); } // notification
click event listener self.addeventlistener('notification
click', e => { // close the notification popout e.notification.close(); // get all the window client...
Clients - Web APIs
examples the following example shows an existing chat window or creates a new one when the user
clicks a notification.
... addeventlistener('notification
click', event => { event.waituntil(async function() { const allclients = await clients.matchall({ includeuncontrolled: true }); let chatclient; // let's see if we already have a chat window open: for (const client of allclients) { const url = new url(client.url); if (url.pathname == '/chat/') { // excellent, let's use it!
console - Web APIs
clicking the object name opens more information about it in the inspector.
... for example, given this code: console.time("answer time"); alert("
click to continue"); console.timelog("answer time"); alert("do a bunch of other stuff..."); console.timeend("answer time"); will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console: notice that the timer's name is displayed both when the timer is started and when it's stopp...
ConstantSourceNode.offset - Web APIs
let's say we have an event handler (for
click events, in this case) which needs to respond by altering the value of the two gain nodes.
... with the linkage above in place, that can be done using this simple event handler: function handle
clickevent(event) { volumeslidercontrol.value = constantsource.offset.value; } all this function has to do is fetch the current value of the slider control we're using to control the paired nodes' gains, then store that value into the constantsourcenode's offset parameter.
Document.caretRangeFromPoint() - Web APIs
example basic demo: when
clicking in a paragraph insert a line break at the caret position: html <p>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
...ner; offset = range.startoffset; } // only split text_nodes if (textnode && textnode.nodetype == 3) { let replacement = textnode.splittext(offset); let br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } let paragraphs = document.getelementsbytagname("p"); for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].addeventlistener('
click', insertbreakatpoint, false); } result ...
Document.cookie - Web APIs
examples example #1: simple usage document.cookie = "name=oeschger"; document.cookie = "favorite_food=tripe"; function alertcookie() { alert(document.cookie); } <button on
click="alertcookie()">show cookies</button> example #2: get a sample cookie named test2 document.cookie = "test1=hello"; document.cookie = "test2=world"; const cookievalue = document.cookie .split('; ') .find(row => row.startswith('test2')) .split('=')[1]; function alertcookievalue() { alert(cookievalue); } <button on
click="alertcookievalue()">show cookie value</button> example #3: ...
... function doonce() { if (!document.cookie.split('; ').find(row => row.startswith('dosomethingonlyonce'))) { alert("do something here!"); document.cookie = "dosomethingonlyonce=true; expires=fri, 31 dec 9999 23:59:59 gmt"; } } <button on
click="doonce()">only do something once</button> example #4: reset the previous cookie function resetonce() { document.cookie = "dosomethingonlyonce=; expires=thu, 01 jan 1970 00:00:00 gmt"; } <button on
click="resetonce()">reset only once cookie</button> example #5: check a cookie existence //es5 if (document.cookie.split(';').some(function(item) { return item.trim().indexof('reader=') ...
Document.exitFullscreen() - Web APIs
example this example causes the current document to toggle in and out of a full-screen presentation whenever the mouse button is
clicked within it.
... document.on
click = function (event) { if (document.fullscreenelement) { document.exitfullscreen() .then(() => console.log("document exited form full screen mode")) .catch((err) => console.error(err)) } else { document.documentelement.requestfullscreen(); } } note: for a more complete example, see the example in element.requestfullscreen().
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).
...yle="border: solid green 3px"> <p>some outer text</p> <p>some outer text</p> <div id="div1" style="border: solid blue 3px"> <p>some div1 text</p> <p>some div1 text</p> <p>some div1 text</p> <div id="div2" style="border: solid red 3px"> <p>some div2 text</p> <p>some div2 text</p> </div> </div> <p>some outer text</p> <p>some outer text</p> <button on
click="getallparaelems();"> show all p elements in document</button><br /> <button on
click="div1paraelems();"> show all p elements in div1 element</button><br /> <button on
click="div2paraelems();"> show all p elements in div2 element</button> </body> </html> notes when called on an html document, getelementsbytagname() lower-cases its argument before proceeding.
Document.hasFocus() - Web APIs
to test the functionality of hasfocus(),
click on the button to open a new window, and try switching between the two pages.
... html <p id="log">awaiting focus check.</p> <button on
click="openwindow()">open a new window</button> javascript function checkpagefocus() { let body = document.queryselector('body'); let log = document.getelementbyid('log'); if (document.hasfocus()) { log.textcontent = 'this document has the focus.'; body.style.background = '#fff'; } else { log.textcontent = 'this document does not have the focus.'; body.style.background = '#ccc'; } } function openwindow() { window.open('https://developer.mozilla.org/', 'mdn', 'width=640,height=320,left=150,top=150'); } // check page focus every 300 milliseconds setinterval(checkpagefocus, 300); result specification specification status comment html living standardthe definition of 'document...
DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
example this example inserts line breaks wherever you
click.
...ange.startoffset; } // only split text_nodes if (textnode.nodetype == 3) { var replacement = textnode.splittext(offset); var br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } window.onload = function (){ var paragraphs = document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addeventlistener("
click", insertbreakatpoint, false); } }; specifications specification status comment css object model (cssom) view modulethe definition of 'caretpositionfrompoint()' in that specification.
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
example: creating an html table dynamically (sample1.html) html <input type="button" value="generate a table." on
click="generate_table()"> javascript function generate_table() { // get the reference for the body var body = document.getelementsbytagname("body")[0]; // creates a <table> element and a <tbody> element var tbl = document.createelement("table"); var tblbody = document.createelement("tbody"); // creating all cells for (var i = 0; i < 2; i++) { // creates a table row var row = ...
... html <body> <input type="button" value="set paragraph background color" on
click="set_background()"> <p>hi</p> <p>hello</p> </body> javascript function set_background() { // get a list of all the body elements (there will only be one), // and then select the zeroth (or first) such element mybody = document.getelementsbytagname("body")[0]; // now, get all the p elements that are descendants of the body mybodyelements = mybody.getelementsbytagname("p"); // g...
Element: MSGestureTap event - Web APIs
the msgesturetap event is fired when the user "taps" the pointing device (e.g., touches the touch surface with their finger, taps the touch surface with a pen device,
clicks with a mouse).
... typically, it's preferable to listen for the
click event instead.
Element: compositionend event - Web APIs
bles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos,
click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-templat...
...nts { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('
click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status...
Element: compositionstart event - Web APIs
es yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos,
click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-templat...
...nts { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('
click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status...
Element: compositionupdate event - Web APIs
s yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos,
click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-templat...
...nts { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('
click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status...
Element: fullscreenchange event - Web APIs
if the user
clicks on the "toggle fullscreen mode" button, the
click handler will toggle full-screen mode for the div.
... if (document.fullscreenelement) { console.log(`element: ${document.fullscreenelement.id} entered fullscreen mode.`); } else { console.log('leaving full-screen mode.'); } }); document.getelementbyid('toggle-fullscreen').addeventlistener('
click', (event) => { if (document.fullscreenelement) { // exitfullscreen is only available on the document object.
Element.insertAdjacentElement() - Web APIs
example beforebtn.addeventlistener('
click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('beforebegin',tempdiv); } setlistener(tempdiv); }); afterbtn.addeventlistener('
click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) { active...
...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.part - Web APIs
here the part attribute is used to find the shadow parts, and the part property is then used to change the part identifiers of each tab so the correct styling is applied to the active tab when tabs are
clicked.
... let tabs = []; let children = this.shadowroot.children; for(let elem of children) { if(elem.getattribute('part')) { tabs.push(elem); } } tabs.foreach((tab) => { tab.addeventlistener('
click', (e) => { tabs.foreach((tab) => { tab.part = 'tab'; }) e.target.part = 'tab active'; }) console.log(tab.part); }) specifications specification status comment shadow partsthe definition of 'element.part' in that specification.
Comparison of Event Targets - Web APIs
targetting of the event for some reason <small> event.originaltarget</small> contains the target before retargetting (may contain anonymous targets)</td> </tr> </thead> <tr> <td id="target"></td> <td id="currenttarget"></td> <td id="relatedtarget"></td> <td id="explicitoriginaltarget"></td> <td id="originaltarget"></td> </tr> </table> <p>
clicking on the text will show the difference between explicitoriginaltarget, originaltarget, and target</p> <script> function handle
clicks(e) { document.getelementbyid('target').innerhtml = e.target; document.getelementbyid('currenttarget').innerhtml = e.currenttarget; document.getelementbyid('relatedtarget').innerhtml = e.relatedtarget; document.getelementbyid('exp...
...licitoriginaltarget').innerhtml = e.explicitoriginaltarget; document.getelementbyid('originaltarget').innerhtml = e.originaltarget; } function handlemouseover(e) { document.getelementbyid('target').innerhtml = e.target; document.getelementbyid('relatedtarget').innerhtml = e.relatedtarget; } document.addeventlistener('
click', handle
clicks, false); document.addeventlistener('mouseover', handlemouseover, false); </script> </body> </html> use of target and relatedtarget the relatedtarget property for the mouseover event holds the node that the mouse was previously over.
Event.composedPath() - Web APIs
er(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a
click event listener on the <html> element: document.queryselector('html').addeventlistener('
click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you
click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
... first, the composed property returns true beause the
click event is always able to propagate across shadow boundaries.
Event.defaultPrevented - Web APIs
html <p><a id="link1" href="#link1">visit link 1</a></p> <p><a id="link2" href="#link2">try to visit link 2</a> (you can't)</p> <p id="log"></p> javascript function stoplink(event) { event.preventdefault(); } function log
click(event) { const log = document.getelementbyid('log'); if (event.target.tagname === 'a') { if (event.defaultprevented) { log.innertext = 'sorry, but you cannot visit this link!\n' + log.innertext; } else { log.innertext = 'visiting link...\n' + log.innertext; } } } const a = document.getelementbyid('link2'); a.addeventlistener('
click', stoplink); document.addeven...
...tlistener('
click', log
click); result specifications specification status comment domthe definition of 'event.defaultprevented()' in that specification.
Event.initEvent() - Web APIs
var event = document.createevent('event'); // create a
click event that bubbles up and // cannot be canceled event.initevent('
click', true, false); // listen for the event.
... elem.addeventlistener('
click', function (e) { // e.target matches elem }, false); elem.dispatchevent(event); specifications specification status comment domthe definition of 'event.initevent()' in that specification.
EventTarget.removeEventListener() - Web APIs
example this example shows how to add a mouseover-based event listener that removes a
click-based event listener.
... const body = document.queryselector('body') const
clicktarget = document.getelementbyid('
click-target') const mouseovertarget = document.getelementbyid('mouse-over-target') let toggle = false; function makebackgroundyellow() { if (toggle) { body.style.backgroundcolor = 'white'; } else { body.style.backgroundcolor = 'yellow'; } toggle = !toggle; }
clicktarget.addeventlistener('
click', makebackgroundyellow, false ); mouseovertarget.addeventlistener('mouseover', function () {
clicktarget.removeeventlistener('
click', makebackgroundyellow, false ); }); specifications specification status comment domthe definition of 'eventtarget.removeeventlistener()' in that specification.
GainNode.gain - Web APIs
example the following example shows basic usage of an audiocontext to create a gainnode, which is then used to mute and unmute the audio when a mute button is
clicked by changing the gain property value.
... mute.on
click = voicemute; function voicemute() { if(mute.id == "") { // 0 means mute.
GlobalEventHandlers.onchange - Web APIs
this may be done, for example, by
clicking outside of the control or by using the tab key to switch to a different control.
... html <input type="text" placeholder="type something here, then
click outside of the field." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.onchange = handlechange; function handlechange(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; } result specification specification status comment html living s...
HTMLButtonElement - Web APIs
htmlbuttonelement.disabled is a boolean indicating whether or not the control is disabled, meaning that it does not accept any
clicks.
... htmlbuttonelement.menu is a htmlmenuelement representing the menu element to be displayed if the button is
clicked and is of type="menu".
HTMLCanvasElement.mozGetAsFile() - Web APIs
html <canvas id="canvas" width="100" height="100"></canvas> <p><a href="#" id="link">
click here to try out mozgetasfile()</a>.</p> javascript the following code uses mozgetasfile() to create a file object from the canvas and appends it as an image to the page by loading it as a data url using the readasdataurl() method.
... function draw() { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 55, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 55, 50); var link = document.getelementbyid('link'); link.addeventlistener('
click', copy); } function copy() { var canvas = document.getelementbyid('canvas'); var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg = document.createelement('img'); newimg.src = reader.result; document.body.appendchild(newimg); } } window.addeventlistener('load', draw); specifications not part of any sp...
HTMLDialogElement: cancel event - Web APIs
for example, the browser might fire this event when the user presses the esc key or
clicks a "close dialog" button which is part of the browser's ui.
...alog">open dialog</button> <div class="result"></div> css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('cancel', (event) => { result.textcontent = 'dialog was canceled'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('
click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutton = document.queryselector('.close'); closebutton.addeventlistener('
click', () => { dialog.close(); }); result specifications specification status ...
HTMLElement: change event - Web APIs
bubbles yes cancelable no interface event event handler property onchange depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by
clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse
click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but n...
...try entering something into the field below, and then
click somewhere else to trigger the event.
HTMLImageElement.sizes - Web APIs
; 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.
... let image = document.queryselector("article img"); let break40 = document.getelementbyid("break40"); let break50 = document.getelementbyid("break50"); break40.addeventlistener("
click", event => image.sizes = image.sizes.replace(/50em,/, "40em,")); break50.addeventlistener("
click", event => image.sizes = image.sizes.replace(/40em,/, "50em,")); result this result may be viewed in its own window here.
HTMLImageElement - Web APIs
this is different from a client-side image map, specified using an <img> element and a corresponding <map> which contains <area> elements indicating the
clickable areas in the image.
...the <map> in turn contains <area> elements indicating the
clickable areas in the image.
HTMLInputElement.setRangeText() - Web APIs
example
click the button in this example to replace part of the text in the text box.
... html <input type="text" id="text-box" size="30" value="this text has not been updated."> <button on
click="selecttext()">update text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.setrangetext('already', 14, 17, 'select'); } result specifications specification status comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLInputElement.stepDown() - Web APIs
example
click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="decrementer" min="-2" max="15"> </label> </p...
...> <input type="button" value="decrement" id="thebutton"> javascript /* make the button call the function */ let button = document.getelementbyid('thebutton'); button.addeventlistener('
click', function() { stepondown();} ); function stepondown() { let input = document.getelementbyid('thenumber'); let val = document.getelementbyid('decrementer').value; if (val) { /* increment with a parameter */ input.stepdown(val); } else { /* or without a parameter.
HTMLInputElement.stepUp() - Web APIs
example
click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="incrementer" min="0" max="25"> </label> </p>...
... <input type="button" value="increment" id="thebutton"> javascript /* make the button call the function */ let button = document.getelementbyid('thebutton') button.addeventlistener('
click', function() { steponup() }) function steponup() { let input = document.getelementbyid('thenumber') let val = document.getelementbyid('incrementer').value if (val) { /* increment with a parameter */ input.stepup(val) } else { /* or without a parameter.
HTMLMediaElement.captureStream() - Web APIs
example in this example, an event handler is established so that
clicking a button starts capturing the contents of a media element with the id "playback" into a mediastream.
... document.queryselector('.playandrecord').addeventlistener('
click', function() { var playbackelement = document.getelementbyid("playback"); var capturestream = playbackelement.capturestream(); playbackelement.play(); }); see recording a media element for a longer and more intricate example and explanation.
HTMLElement.focus() - Web APIs
examples focus on a text field javascript focusmethod = function getfocus() { document.getelementbyid("mytextfield").focus(); } html <input type="text" id="mytextfield" value="text field."> <p></p> <button type="button" on
click="focusmethod()">
click me to focus on the text field!</button> result focus on a button javascript focusmethod = function getfocus() { document.getelementbyid("mybutton").focus(); } html <button type="button" id="mybutton">
click me!</button> <p></p> <button type="button" on
click="focusmethod()">
click me to focus on the button!</button> result focus with focusoption java...
...script focusscrollmethod = function getfocus() { document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() { document.getelementbyid("mybutton").focus({preventscroll:true}); } html <button type="button" on
click="focusscrollmethod()">
click me to focus on the button!</button> <button type="button" on
click="focusnoscrollmethod()">
click me to focus on the button without scrolling!</button> <div id="container" style="height: 1000px; width: 1000px;"> <button type="button" id="mybutton" style="margin-top: 500px;">
click me!</button> </div> result specification specification status comment html living standardthe definition of 'focus' in that specification.
HTMLTextAreaElement - Web APIs
nselend : nselstart) + sstarttag.length); omsginput.focus(); } css css to decorate the internal span to behave like a link: .intlink { cursor: pointer; text-decoration: underline; color: #0000ff; } html: <form name="myform"> <p>[ <span class="intlink" on
click="insertmetachars('<strong>','<\/strong>');"><strong>bold</strong></span> | <span class="intlink" on
click="insertmetachars('<em>','<\/em>');"><em>italic</em></span> | <span class="intlink" on
click="var newurl=prompt('enter the full url for the link');if(newurl){insertmetachars('<a href=\u0022'+newurl+'\u0022>','<\/a>');}else{document.myform.mytxtarea.focus();}">...
...url</span> | <span class="intlink" on
click="insertmetachars('\n<code>\n','\n<\/code>\n');">code</span> | <span class="intlink" on
click="insertmetachars(' :-)');">smile</span> | etc.
The HTML DOM API - Web APIs
of special importance is what is gained by inheriting from eventtarget: the ability to receive and handle events such as mouse
clicks, play and pause events, and so forth.
... the htmlinputelement object for the "send" button's disabled property is set to true, which disables the "send" button so it can't be
clicked.
Drag Operations - Web APIs
to see this in effect, select an area of a webpage, and then
click and hold the mouse and drag the selection.
... note: when an element is made draggable, text or other elements within it can no longer be selected in the normal way by
clicking and dragging with the mouse.
History.replaceState() - Web APIs
suppose now that the user navigates to https://www.microsoft.com, then
clicks the back button.
...if the user now
clicks back again, the url bar will display https://www.mozilla.org/foo.html, and totally bypass bar.html.
History - Web APIs
back() this asynchronous method goes to the previous page in session history, the same action as when the user
clicks the browser's back button.
... forward() this asynchronous method goes to the next page in session history, the same action as when the user
clicks the browser's forward button; this is equivalent to history.go(1).
Ajax navigation example - Web APIs
ocesslink () { if (this.classname === sajaxclass) { requestpage(this.href); return false; } return true; } function init () { opageinfo.title = document.title; history.replacestate(opageinfo, opageinfo.title, opageinfo.url); for (var olink, nidx = 0, nlen = document.links.length; nidx < nlen; document.links[nidx++].on
click = processlink); } const /* customizable constants */ stargetid = "ajax-content", sviewkey = "view_as", sajaxclass = "ajax-nav", /* not customizable constants */ rsearch = /\?.*$/, rhost = /^[^\?]*\?*&*/, rview = new regexp("&" + sviewkey + "\\=[^&]*|&*$", "i"), rendqstmark = /\?$/, oloadingbox = document.createelement("div"), ocover = document.cr...
...p version not supported", 506: "variant also negotiates (experimental)", 507: "insufficient storage", 508: "loop detected", 509: "unassigned", 510: "not extended", 511: "network authentication required" }; var oreq, bisloading = false, bupdateurl = false; oloadingbox.id = "ajax-loader"; ocover.on
click = abortreq; oloadingimg.src = "data:image/gif;base64,r0lgodlheaaqapiaap///waaamlcwkjcqgaaagjiyokcgpkskih/c05fvfndqvbfmi4waweaaaah/hpdcmvhdgvkihdpdgggywphegxvywquaw5mbwah+qqjcgaaacwaaaaaeaaqaaadmwi63p4wyklre2mioggznadomgyjrbexwroumcg2lmdewnhqlvsyod2mbzkydadka+diaaah+qqjcgaaacwaaaaaeaaqaaadnai63p5ojcegg4qmu7dmikrxqlfuydezigbmrvsaqhwctxxf7weyb4ag1xjihkmzsiukkhiaifkecqoaaaasaaaaabaaeaaaazyiujijk8...
History API - Web APIs
moving forward and backward to move backward through history: window.history.back() this acts exactly as if the user
clicked on the back button in their browser toolbar.
... similarly, you can move forward (as if the user
clicked the forward button), like this: window.history.forward() moving to a specific point in history you can use the go() method to load a specific page from session history, identified by its relative position to the current page.
ImageCapture - Web APIs
var imagecapture; function ongetusermediabutton
click() { navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); }) .catch(error => console.log(error)); } function ongrabframebutton
click() { imagecapture.grabframe() .then(imagebitmap => { const canvas = docume...
...nt.queryselector('#grabframecanvas'); drawcanvas(canvas, imagebitmap); }) .catch(error => console.log(error)); } function ontakephotobutton
click() { imagecapture.takephoto() .then(blob => createimagebitmap(blob)) .then(imagebitmap => { const canvas = document.queryselector('#takephotocanvas'); drawcanvas(canvas, imagebitmap); }) .catch(error => console.log(error)); } /* utils */ function drawcanvas(canvas, img) { canvas.width = getcomputedstyle(canvas).width.split('px')[0]; canvas.height = getcomputedstyle(canvas).height.split('px')[0]; let ratio = math.min(canvas.width / img.width, canvas.height / img.height); let x = (canvas.width - img.width * ratio) / 2; let y = (canvas.height - img.height * ratio) / 2; canvas.getcontext('2d').clearrect(0, 0, canvas...
KeyboardEvent.code - Web APIs
a, sans-serif; border: 1px solid black; } javascript window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.innerhtml = str + "<br/>"; document.getelementbyid("output").appendchild(el); }, true); try it out to ensure that keystrokes go to the sample,
click in the output box below before pressing keys.
...); break; case "keya": case "arrowleft": // handle "turn left" angle -= turnrate; break; case "keyd": case "arrowright": // handle "turn right" angle += turnrate; break; } refresh(); // consume the event so it doesn't get handled twice event.preventdefault(); }, true); try it out to ensure that keystrokes go to the sample code,
click inside the black game play field below before pressing keys.
MediaDevices.ondevicechange - Web APIs
html content <p>
click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div class="left"> <h2>audio devices:</h2> <ul class="devicelist" id="audiolist"></ul> </div> <div class="right"> <h2>video devices:</h2> <ul class="devicelist" id="videolist"></ul> </div> <div id="log"></div> css c...
... let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("
click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 30 }, audio: { samplerate: 44100, samplesize: 16, volume: 0.25 } }).then(stream => { videoelement.srcobject = stream; updatedevicelist(); }) .catch(err => log(err.name + ": " + err.message)); }, false); we set up global var...
MediaRecorder - Web APIs
example if (navigator.mediadevices) { console.log('getusermedia supported.'); var constraints = { audio: true }; var chunks = []; navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var mediarecorder = new mediarecorder(stream); visualize(stream); record.on
click = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } stop.on
click = function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.
...o); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; var audiourl = url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); deletebutton.on
click = function(e) { evttgt = e.target; evttgt.parentnode.parentnode.removechild(evttgt.parentnode); } } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } }) .catch(function(err) { console.log('the following error occurred: ' + err); }) } this code sample is inspired by the web dictaphone demo.
MediaSession.setActionHandler() - Web APIs
let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user
clicked "seek forward" media notification icon.
... audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user
clicked "seek backward" media notification icon.
Media Session action types - Web APIs
let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user
clicked "seek forward" media notification icon.
... audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user
clicked "seek backward" media notification icon.
MediaSessionActionDetails - Web APIs
let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user
clicked "seek forward" media notification icon.
... audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user
clicked "seek backward" media notification icon.
MediaStreamTrack.enabled - Web APIs
example this example demonstrates a
click event handler for a pause button.
... pausebutton.on
click = function(evt) { const newstate = !myaudiotrack.enabled; pausebutton.innerhtml = newstate ?
MouseEvent.ctrlKey - Web APIs
example this example logs the ctrlkey property when you trigger a
click event.
... html <p>
click anywhere to test the <code>ctrlkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('
click', logkey); function logkey(e) { log.textcontent = `the ctrl key is pressed: ${e.ctrlkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.ctrlkey' in that specification.
MouseEvent.metaKey - Web APIs
example this example logs the metakey property when you trigger a
click event.
... html <p>
click anywhere to test the <code>metakey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('
click', logkey); function logkey(e) { log.textcontent = `the meta key is pressed: ${e.metakey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.metakey' in that specification.
MouseEvent.shiftKey - Web APIs
example this example logs the shiftkey property when you trigger a
click event.
... html <p>
click anywhere to test the <code>shiftkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('
click', logkey); function logkey(e) { log.textcontent = `the shift key is pressed: ${e.shiftkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.shiftkey' in that specification.
Navigator.share() - Web APIs
examples in our web share test (see the source code) there is a button which, when
clicked, invokes the web share api to share mdn's url.
... the javascript looks like this: const sharedata = { title: 'mdn', text: 'learn web development on mdn!', url: 'https://developer.mozilla.org', } const btn = document.queryselector('button'); const resultpara = document.queryselector('.result'); // must be triggered some kind of "user activation" btn.addeventlistener('
click', async () => { try { await navigator.share(sharedata) resultpara.textcontent = 'mdn shared successfully' } catch(err) { resultpara.textcontent = 'error: ' + err } }); sharing files to share files, first test for and call navigator.canshare().
Notification.requestPermission() - Web APIs
possible values for this string are: granted denied default examples assume this basic html: <button on
click="notifyme()">notify me!</button> it's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.
...to see a example in action, check out our to-do list example (also see the app running live.) note: in the above example we spawn notifications in response to a user gesture (
clicking a button).
Notifications API - Web APIs
this should be done in response to a user gesture, such as
clicking a button, for example: btn.addeventlistener('
click', function() { let promise = notification.requestpermission(); // wait for permission }) this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture.
... serviceworkerglobalscope includes the serviceworkerglobalscope.onnotification
click handler, for firing custom functions when a notification is
clicked.
ParentNode.replaceChildren() - Web APIs
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.
... const noselect = document.getelementbyid('no'); const yesselect = document.getelementbyid('yes'); const nobtn = document.getelementbyid('to-no'); const yesbtn = document.getelementbyid('to-yes'); yesbtn.addeventlistener('
click', () => { const selectedtransferoptions = document.queryselectorall('#no option:checked'); const existingyesoptions = document.queryselectorall('#yes option'); yesselect.replacechildren(...selectedtransferoptions, ...existingyesoptions); }); nobtn.addeventlistener('
click', () => { const selectedtransferoptions = document.queryselectorall('#yes option:checked'); const existingnooptions = document.queryselect...
RTCPeerConnection.removeTrack() - Web APIs
example this example adds a video track to a connection and sets up a listener on a close button which removes the track when the user
clicks the button.
... var pc, sender; navigator.getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); var track = stream.getvideotracks()[0]; sender = pc.addtrack(track, stream); }); document.getelementbyid("closebutton").addeventlistener("
click", function(event) { pc.removetrack(sender); pc.close(); }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.removetrack()' in that specification.
Range.extractContents() - Web APIs
select one or more item, and then
click "swap" to move them to the opposite container.
...item(s)</button> <p id="list2">abcdef</p> css body { pointer-events: none; } p { border: 1px solid; font-size: 2em; padding: .3em; } button { font-size: 1.2em; padding: .5em; pointer-events: auto; } javascript const list1 = document.getelementbyid('list1'); const list2 = document.getelementbyid('list2'); const button = document.getelementbyid('swap'); button.addeventlistener('
click', e => { selection = window.getselection(); for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); if (range.commonancestorcontainer === list1 || range.commonancestorcontainer.parentnode === list1) { const documentfragment = range.extractcontents(); list2.appendchild(documentfragment); } else if (range.commonancestorcontainer ...
ReportingObserver - Web APIs
examples in our deprecation_report.html example, we create a simple reporting observer to observe usage of deprecated features on our web page: let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.on
click = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor: observer.observe(); later on in the example we deliberately use the deprecated version of mediadevices.getusermedia(): if(navigator.m...
...ozgetusermedia) { navigator.mozgetusermedia( constraints, success, failure); } else { navigator.getusermedia( constraints, success, failure); } this causes a deprecation report to be generated; because of the event handler we set up inside the reportingobserver() constructor, we can now
click the button to display the report details.
Reporting API - Web APIs
examples in our deprecation_report.html example, we create a simple reporting observer to observe usage of deprecated features on our web page: let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.on
click = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor: observer.observe(); later on in the example we deliberately use the deprecated version of mediadevices.getusermedia(): if(navigator.m...
...ozgetusermedia) { navigator.mozgetusermedia( constraints, success, failure); } else { navigator.getusermedia( constraints, success, failure); } this causes a deprecation report to be generated; because of the event handler we set up inside the reportingobserver() constructor, we can now
click the button to display the report details.
SVGAElement - Web APIs
example in the example below, the target attribute of the <a> element is set to _blank and when the link is
clicked, it logs to notify whether the condition is met or not.
... var linkref = document.queryselector("a"); linkref.target = "_self"; linkref.on
click = function(){ if (linkref.target === "_blank") { console.log("blank!"); linkref.target = "_self"; } else { console.log("sorry!
SVGRectElement - Web APIs
(changing the color of the rect interface on every
click) svg content <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" id="myrect" on
click="dorect
click()" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> <text x="60" y="40" fill="white" font-size="40" on
click="dorect
click();">
click me</text> </svg> javascript content function dorect
click(){ var myrect = document.getelementbyid('my...
...rect'); var r = math.floor(math.random() * 255); var g = math.floor(math.random() * 255); var b = math.floor(math.random() * 255); myrect.style.fill = 'rgb(' + r + ', ' + g + ' , ' + b + ')'; }
click the rect.
Selection - Web APIs
can return null if selection never existed in the document (e.g., an iframe that was never
clicked on).
...can return null if selection never existed in the document (for example, in an iframe that was never
clicked on).
ServiceWorkerGlobalScope - Web APIs
notification
click occurs when a user
clicks on a displayed notification.
... also available via the serviceworkerglobalscope.onnotification
click property.
SpeechRecognition - Web APIs
after some other values have been defined, we then set it so that the recognition service starts when a
click event occurs (see speechrecognition.start().) when a result has been successfully recognised, the speechrecognition.onresult handler fires, we extract the color that was spoken from the event object, and then set the background color of the <html> element to that color.
...ognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.on
click = function() { recognition.start(); console.log('ready to receive a color command.'); } recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speechrecognition' in ...
Storage Access API - Web APIs
this is enforced through the following constraints: access requests are automatically denied unless the embedded content is currently processing a user gesture such as a tap or
click.
... note: user interaction propagates to the promise returned by both of these methods, allowing the callers to take actions that require user interaction without requiring a second
click from the user.
SubtleCrypto.deriveBits() - Web APIs
t generatebobskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); promise.all([generatealiceskeypair, generatebobskeypair]).then(values => { const aliceskeypair = values[0]; const bobskeypair = values[1]; const derivebitsbutton = document.queryselector(".ecdh .derive-bits-button"); derivebitsbutton.addeventlistener("
click", () => { // alice then generates a secret using her private key and bob's public key.
...(".pbkdf2 .derived-bits-value"); derivedbitsvalue.classlist.add("fade-in"); derivedbitsvalue.addeventlistener("animationend", () => { derivedbitsvalue.classlist.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton = document.queryselector(".pbkdf2 .derive-bits-button"); derivebitsbutton.addeventlistener("
click", () => { getderivedbits(); }); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.derivebits()' in that specification.
SubtleCrypto.deriveKey() - Web APIs
let encryptbutton = document.queryselector(".ecdh .encrypt-button"); encryptbutton.addeventlistener("
click", () => { encrypt(alicessecretkey); }); // bob can use his copy to decrypt the message.
... let decryptbutton = document.queryselector(".ecdh .decrypt-button"); decryptbutton.addeventlistener("
click", () => { decrypt(bobssecretkey); }); } pbkdf2 in this example we ask the user for a password, then use it to derive an aes key using pbkdf2, then use the aes key to encrypt a message.
Supporting both TouchEvent and MouseEvent - Web APIs
event firing the touch events standard defines a few browser requirements regarding touch and mouse interaction (see the interaction with mouse events and
click section for details), noting the browser may fire both touch events and mouse events in response to the same user input.
..._touchmove(ev) { // call preventdefault() to prevent any further handling ev.preventdefault(); } event order although the specific ordering of touch and mouse events is implementation-defined, the standard indicates the following order is typical: for single input: touchstart zero or more touchmove events, depending on movement of the finger(s) touchend mousemove mousedown mouseup
click if the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or
click events will be fired, and the resulting sequence of events would just be: touchstart zero or more touchmove events, depending on movement of the finger(s) touchend community touch events community group mail list w3c #touchevents irc channel related topics and resources touch eve...
UIEvent.initUIEvent() - Web APIs
for mouse events, it indicates how many times the mouse has been
clicked on a given screen location.
... example var e = document.createevent("uievent"); // creates a
click event that bubbles, can be cancelled, // and with its view and detail property initialized to window and 1, // respectively e.inituievent("
click", true, true, window, 1); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'uievent.inituievent()' in that specification.
UIEvent.layerX - Web APIs
1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please
click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so
clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so
clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
...this is a positioned div so
clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
UIEvent.layerY - Web APIs
1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please
click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so
clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so
clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
...this is a positioned div so
clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
UIEvent.pageY - Web APIs
1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please
click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so
clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so
clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
...this is a positioned div so
clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
VideoTrackList: change event - Web APIs
onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('
click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.videotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.
...queryselector('.toggle-track'); toggletrackbutton.addeventlistener('
click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); specifications specification status html living standardthe definition of 'change' in that specification.
WakeLockSentinel.release() - Web APIs
examples in this example, when a user
clicks a button the wakelocksentinel is released.
... wakelockoffbutton.addeventlistener('
click', () => { wakelocksentinel.release(); }) specifications specification status comment screen wake lock apithe definition of 'release()' in that specification.
Color masking - Web APIs
note that the calls to colormask() only occur when the user
clicks on one of the toggle buttons.
... may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation, 1000); var mask = [true, true, true]; var redtoggle = document.queryselector("#red-toggle"), greentoggle = document.queryselector("#green-toggle"), bluetoggle = document.queryselector("#blue-toggle"); redtoggle.addeventlistener("
click", setcolormask, false); greentoggle.addeventlistener("
click", setcolormask, false); bluetoggle.addeventlistener("
click", setcolormask, false); function setcolormask(evt) { var index = evt.target === greentoggle && 1 || evt.target === bluetoggle && 2 || 0; mask[index] = !mask[index]; if (mask[index] === true) evt.target.innerhtml="on"; else evt.
Detect WebGL - Web APIs
window.addeventlistener("load", function() { var paragraph = document.queryselector("p"), button = document.queryselector("button"); // adding
click event handler to button.
... button.addeventlistener("
click", detectwebglcontext, false); function detectwebglcontext () { // create canvas element.
Hello vertex attributes - Web APIs
click on the canvas to change the horizontal position of the square.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 10...
..." + "error log: " + linkerrlog; return; } initializeattributes(); gl.useprogram(program); gl.drawarrays(gl.points, 0, 1); document.queryselector("canvas").addeventlistener("
click", function (evt) { var
clickxrelativtocanvas = evt.pagex - evt.target.offsetleft; var
clickxinwebglcoords = 2.0 * (
clickxrelativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float32array([
clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, false); } var bu...
Scissor animation - Web APIs
position = [0, gl.drawingbufferheight]; var button = document.queryselector("button"); var timer; function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("
click", stopanimation, false); document.queryselector("strong").innerhtml = "stop"; timer = setinterval(drawanimation, 17); drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false); button.addeventlistener("
click", startanimation, false); document.queryselector("strong").innerhtml = "start"; clearinterval(timer); } s...
...topanimation({type: "
click"}); } // variables to hold the size and velocity of the square.
WebGL by example - Web APIs
clearing by
clicking how to combine user interaction with graphics operations.
... clearing the rendering context with a random color when the user
clicks.
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
among the simplest things you can do is to implement a "hold" feature, wherein a participant in a call can
click a button and turn off their microphone, begin sending music to the other peer instead, and stop accepting incoming audio.
... deactivating hold mode local peer when the local user
clicks the interface widget to disable hold mode, the disablehold() method is called to begin the process of restoring normal functionality.
Writing a WebSocket server in C# - Web APIs
send</button> <div id=output></div> <script> // http://www.websocket.org/echo.html var button = document.queryselector("button"), output = document.queryselector("#output"), textarea = document.queryselector("textarea"), // wsuri = "ws://echo.websocket.org/", wsuri = "ws://127.0.0.1/", websocket = new websocket(wsuri); button.addeventlistener("
click", on
clickbutton); websocket.onopen = function (e) { writetoscreen("connected"); dosend("websocket rocks"); }; websocket.onclose = function (e) { writetoscreen("disconnected"); }; websocket.onmessage = function (e) { writetoscreen("<span>response: " + e.data + "</span>"); }; websocket.onerror = function (e) { writetoscreen("<s...
...pan class=error>error:</span> " + e.data); }; function dosend(message) { writetoscreen("sent: " + message); websocket.send(message); } function writetoscreen(message) { output.insertadjacenthtml("afterbegin", "<p>" + message + "</p>"); } function on
clickbutton() { var text = textarea.value; text && dosend(text); textarea.value = ""; textarea.focus(); } </script> related writing websocket servers ...
Using the Web Animations API - Web APIs
to prevent the cake from eating itself up before the user has had the chance to
click on it, we call animation.pause() on it immediately after it is defined, like so: nommingcake.pause(); we can now use the animation.play() method to run it whenever we’re ready: nommingcake.play(); specifically, we want to link it to alice’s animation, so she gets bigger as the cupcake gets eaten.
...we use updateplaybackrate() instead of setting the playbackrate directly since that produces a smooth update: setinterval( function() { // make sure the playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.updateplaybackrate(redqueen_alice.playbackrate * .9); } }, 3000); but urging them on by
clicking or tapping causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.updateplaybackrate(redqueen_alice.playbackrate * 1.1); } document.addeventlistener("
click", gofaster); document.addeventlistener("touchstart", gofaster); the background elements also have playbackrates that are impacted when you
click or tap.
Advanced techniques: Creating and sequencing audio - Web APIs
we'll add a loading screen that disappears when the file has been fetched and decoded, then we can allow the scheduler to start using the play button
click event.
... // when the sample has loaded allow play let loadingel = document.queryselector('.loading'); const playbutton = document.queryselector('[data-playing]'); let isplaying = false; setupsample() .then((sample) => { loadingel.style.display = 'none'; // remove loading screen dtmf = sample; // to be used in our playsample function playbutton.addeventlistener('
click', function() { isplaying = !isplaying; if (isplaying) { // start playing // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } currentnote = 0; nextnotetime = audioctx.currenttime; scheduler(); // kick of...
Using IIR filters - Web APIs
the play button html looks like this: <button class="button-play" role="switch" data-playing="false" aria-pressed="false">play</button> and the
click event listener starts like so: playbutton.addeventlistener('
click', function() { if (this.dataset.playing === 'false') { srcnode = playsourcenode(audioctx, sample); ...
...first, the html: <button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button> the filter button's
click handler then connects the iirfilter up to the graph, between the source and the detination: filterbutton.addeventlistener('
click', function() { if (this.dataset.filteron === 'false') { srcnode.disconnect(audioctx.destination); srcnode.connect(iirfilter).connect(audioctx.destination); ...
Using the Web Audio API - Web APIs
since our scripts are playing audio in response to a user input event (a
click on a play button, for instance), we're in good shape and should have no problems from autoplay blocking.
... // select our play button const playbutton = document.queryselector('button'); playbutton.addeventlistener('
click', function() { // check if context is in suspended state (autoplay policy) if (audiocontext.state === 'suspended') { audiocontext.resume(); } // play or pause track depending on state if (this.dataset.playing === 'false') { audioelement.play(); this.dataset.playing = 'true'; } else if (this.dataset.playing === 'true') { audioelement.pause(...
Window: blur event - Web APIs
html <p id="log">
click on this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
...
click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play); result specifications specification status comment ui events working draft added info that this event is composed.
Window: focus event - Web APIs
html <p id="log">
click on this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
...
click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play); result specifications specification status comment ui events working draft added info that this event is composed.
Window.onbeforeinstallprompt - Web APIs
}); window.onbeforeinstallprompt = function(event) { ...}; example the following example uses the beforeinstallprompt event to make an install button operable, by using the event inside a
click handler.
... window.addeventlistener("beforeinstallprompt", function(beforeinstallpromptevent) { beforeinstallpromptevent.preventdefault(); // prevents immediate prompt display // shows prompt after a user
clicks an "install" button installbutton.addeventlistener("
click", function(mouseevent) { // you should not use the mouseevent here, obviously beforeinstallpromptevent.prompt(); }); installbutton.hidden = false; // make button operable }); ...
Window - Web APIs
globaleventhandlers.on
click called after the any mouse button is pressed & released globaleventhandlers.ondbl
click called when a double
click is made with any mouse button.
...this happens, for example, when the user
clicks the back button or when they
click the forward button to move ahead in session history.
XMLHttpRequest: abort event - Web APIs
bubbles no cancelable no interface progressevent event handler property onabort examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="
click to start xhr (success)" /> <input class="xhr error" type="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; ...
....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 specification status comm...
XMLHttpRequest: error event - Web APIs
bubbles no cancelable no interface progressevent event handler property onerror examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="
click to start xhr (success)" /> <input class="xhr error" type="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...
....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 specification status comm...
XMLHttpRequest: load event - Web APIs
bubbles no cancelable no interface progressevent event handler property onload examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="
click to start xhr (success)" /> <input class="xhr error" type="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 xhrbutton...
....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 specification status comm...
XMLHttpRequest: loadend event - Web APIs
bubbles no cancelable no interface progressevent event handler property onloadend examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="
click to start xhr (success)" /> <input class="xhr error" type="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 { widt...
....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 specification status comm...
XMLHttpRequest: loadstart event - Web APIs
bubbles no cancelable no interface progressevent event handler property onloadstart examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="
click to start xhr (success)" /> <input class="xhr error" type="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 ...
....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 specification status comm...
XMLHttpRequest: progress event - Web APIs
bubbles no cancelable no interface progressevent event handler property onprogress examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="
click to start xhr (success)" /> <input class="xhr error" type="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 xhrbuttonsuc...
....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 specification status comm...
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
in this example, we'll show code that lets the user look around by right-
clicking and moving the mouse to change the viewing angle.
...this prevents the right-
clicks from causing the context menu from appearing in the browser.
XRSystem: requestSession() - Web APIs
finally, the onbutton
clicked() method calls requestsession() using the same session option passed to issessionsupported().
... if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.addeventlistener('
click', onbutton
clicked); immersivebutton.innerhtml = 'enter xr'; immersivebutton.disabled = false; } else { console.log("webxr doesn't support immersive-vr mode!"); } }); } else { console.log("webxr is not available!"); } function onbutton
clicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity.
XRTargetRayMode - Web APIs
targeting may be done by looking at the target using a gaze-tracking system, pointing at the target with a hand controller, glove, or motion-tracking system, or by tapping or
clicking on the target using a finger on a screen or with a mouse.
... for each such input, this example looks for inputs whose targetraymode is tracked-pointer, indicating that the input is in fact intended to represent a targeting device rather than a gazing device, screen tap, or mouse
click.
ARIA: timer role - Accessibility
required javascript features keypress used to handle keyboard input and control the focus
click, touch handle as appropriate for your widget as well changing attribute values aria-activedescendant is used to manage the focus inside the application container.
... <div id="clock" role="timer" aria-live="off">20</div> <button on
click="starttimer('clock')">start</button> /* basic javascript to update a timer */ function starttimer(timername) { // get the number of seconds let timer = document.getelementbyid(timername), seconds = parseint(timer.innertext); // remove a second // updated the content of timer timer.innertext = --seconds // if timer != 0, settimeout if (seconds) { settimeout( function() ...
ARIA: tab role - Accessibility
: 0 0.5em 0.5em 0.7em; border: 1px solid grey; border-radius: 0 0 5px 5px; background: white; z-index: 2; } [role="tabpanel"]:focus { border-color: orange; outline: 1px solid orange; } there are two things we need to do with javascript: we need to change focus and tab index of our tab elements with the right and left arrows, and we need to change the active tab and tabpanel when we
click on a tab.
... window.addeventlistener("domcontentloaded", () => { const tabs = document.queryselectorall('[role="tab"]'); const tablist = document.queryselector('[role="tablist"]'); // add a
click event handler to each tab tabs.foreach(tab => { tab.addeventlistener("
click", changetabs); }); // enable arrow navigation between tabs in the tab list let tabfocus = 0; tablist.addeventlistener("keydown", e => { // move right if (e.keycode === 39 || e.keycode === 37) { tabs[tabfocus].setattribute("tabindex", -1); if (e.keycode === 39) { tabfocus++; ...
ARIA: checkbox role - Accessibility
keyboard interactions key function space activates the checkbox required javascript required event handlers on
click handle mouse
clicks that will change the state of the checkbox by changing the value of the aria-checked attribute and the appearance of the checkbox so it appears checked or unchecked to the sighted user onkeypress handle the case where the user presses the space key to change the state of the checkbox by changing the value of the aria-checked attribute and the appearance of the checkbox so i...
... html <span role="checkbox" id="chkpref" aria-checked="false" on
click="changecheckbox()" onkeypress="changecheckbox()" tabindex="0" aria-labelledby="chk1-label"></span> <label id="chk1-label" on
click="changecheckbox()" onkeypress="changecheckbox()">remember my preferences</label> css [role="checkbox"] { padding:5px; } [aria-checked="true"]::before { content: "[x]"; } [aria-checked="false"]::before { content: "[ ]"; } javascript function changecheckbox(event) { let item = document.getelementbyid('chkpref'); switch(item.getattribute('aria-checked')) { case "...
ARIA: listbox role - Accessibility
update the aria-activedescendant value on the listbox to the id of the newly selected option visually handle the blur, focus, and selected states of the option toggling the state of an option in a multi select listbox when the user
clicks on an option, hits space when focused on an option, or otherwise toggles the state of an option, the following must occur: toggle the aria-selected state of the currently focused option, changing the state of the aria-selected to true if it was false or false if it was true.
... <p id="listbox1label" role="label">select a color:</p> <div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label" on
click="return listitem
click(event);" onkeydown="return listitemkeyevent(event);" onkeypress="return listitemkeyevent(event);" aria-activedescendant="listbox1-1"> <div role="option" id="listbox1-1" class="selected" aria-selected="true">green</div> <div role="option" id="listbox1-2">orange</div> <div role="option" id="listbox1-3">red</div> <div role="option" id="listbox1-4">blue</di...
Web applications and ARIA FAQ - Accessibility
// bind a
click handler to the button, which will update the progress bar to 75%.
... document.getelementbyid("update-button").addeventlistener("
click", function (e) { updateprogress(75); e.preventdefault(); }, false); } initdemo(); how do assistive technologies work?
Keyboard-navigable JavaScript widgets - Accessibility
for example, the code that updates the tabindex or the styling when users navigate using the arrow keys should also be used by mouse
click handlers to produce the same changes.
...for example, to ensure that the enter key will activate an element, if you have an on
click="dosomething()", you should bind dosomething() to the key down event as well: onkeydown="return event.keycode != 13 || dosomething();".
Operable - Accessibility
this can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "
click here", "
click here", "
click here" would be confusing.
...this can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "
click here", "
click here", "
click here" would be confusing.
:active - CSS: Cascading Style Sheets
syntax :active examples active links html <p>this paragraph contains a link: <a href="#">this link will turn red while you
click on it.</a> the paragraph will get a gray background while you
click on it or the link.
...k { color: blue; } /* unvisited links */ a:visited { color: purple; } /* visited links */ a:hover { background: yellow; } /* hovered links */ a:active { color: red; } /* active links */ p:active { background: #eee; } /* active paragraphs */ result active form elements html <form> <label for="my-button">my button: </label> <button id="my-button" type="button">try
clicking me or my label!</button> </form> css form :active { color: red; } form button { background: white; } result specifications specification status comment html living standardthe definition of ':active' in that specification.
:focus-visible - CSS: Cascading Style Sheets
compare what happens when you
click on the different controls with a mouse, versus when you tab through them using a keyboard.
... <custom-button tabindex="0" role="button">
click me</custom-button> custom-button { display: inline-block; margin: 10px; } custom-button:focus { /* provide a fallback style for browsers that don't support :focus-visible */ outline: none; background: lightgrey; } custom-button:focus:not(:focus-visible) { /* remove the focus indicator on mouse-focus for browsers that do support :focus-visible */ background: transparent;...
Border-radius generator - CSS: Cascading Style Sheets
s-user-select: text; user-select: text; float: right; } javascript content 'use strict'; /** * ui-inputslidermanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.addeventlistener('
click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parseint(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); subscribe(obj.topic, function(value) { input.value = value + obj.unit; }); return input; } var slidercomponent = function slidercomponent(obj...
..., sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("
click", function(e) { setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mousemove", slidermotion); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }); var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.step + start_value...
user-select - CSS: Cascading Style Sheets
if a double-
click or context-
click occurred in sub-elements, the highest ancestor with this value will be selected.
... formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | text | none | contain | all examples html <p>you should be able to select this text.</p> <p class="unselectable">hey, you can't select this text!</p> <p class="all">
clicking once will select all of this text.</p> css .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .all { -moz-user-select: all; -webkit-user-select: all; -ms-user-select: all; user-select: all; } result specifications specification status comment css basic user interface module level 4...
Adding captions and subtitles to HTML5 video - Developer guides
em = 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'); }); // find the language to activate var lang = this.getattribute('lang'); for (var i = 0; i < video.texttracks.length; i++) { // for the 'subtitles-off' button, the first condition will neve...
... initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it: subtitles.addeventlistener('
click', function(e) { if (subtitlesmenu) { subtitlesmenu.style.display = (subtitlesmenu.style.display == 'block' ?
Audio and video manipulation - Developer guides
ue="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.value; function setplaybackrate() { eval(textarea.value); } reset.addeventlistener('
click', function() { textarea.value = code; setplaybackrate(); }); edit.addeventlistener('
click', function() { textarea.focus(); }) textarea.addeventlistener('input', setplaybackrate); window.addeventlistener('load', setplaybackrate); note: try the playbackrate example live.
...source(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setfilter() { eval(textarea.value); } reset.addeventlistener('
click', function() { textarea.value = code; setfilter(); }); edit.addeventlistener('
click', function() { textarea.focus(); }) textarea.addeventlistener('input', setfilter); window.addeventlistener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code.
Creating and triggering events - Developer guides
function() { // create and dispatch/trigger an event on the fly // note: optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element this.dispatchevent(new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) }); triggering built-in events this example demonstrates simulating a
click (that is programmatically generating a
click event) on a checkbox using dom methods.
... function simulate
click() { const event = new mouseevent('
click', { view: window, bubbles: true, cancelable: true }); const cb = document.getelementbyid('checkbox'); const cancelled = !cb.dispatchevent(event); if (cancelled) { // a handler called preventdefault.
disabled - HTML: Hypertext Markup Language
often browsers grey out such controls and it won't receive any browsing events, like mouse
clicks or focus-related ones.
... usability browsers display disabled form controls greyed as disabled form controls are immutable, won't receive focus or any browsing events, like mouse
clicks or focus-related ones, and aren't submitted with the form.
<area> - HTML: Hypertext Markup Language
deprecated attributes name define a names for the
clickable area so that it can be scripted by older browsers.
...(the w3c 5.3 fork of the html specification defines it as valid, but the canonical html specification doesn’t, and it has no effect in any user agents.) examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html" alt="
click to go left"> <area shape="circle" coords="275,75,75" href="right.html" alt="
click to go right"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic"> result specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
when the user
clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents: from there, you can use css to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute.
...ns", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where
clicking the tab opens it to reveal its contents.
this - JavaScript
// when called as a listener, turns the related element blue function bluify(e) { // always true console.log(this === e.currenttarget); // true when currenttarget and target are the same object console.log(this === e.target); this.style.backgroundcolor = '#a5d9f3'; } // get a list of every element in the document var elements = document.getelementsbytagname('*'); // add bluify as a
click listener so when the // element is
clicked on, it turns blue for (var i = 0; i < elements.length; i++) { elements[i].addeventlistener('
click', bluify, false); } in an inline event handler when the code is called from an inline on-event handler, its this is set to the dom element on which the listener is placed: <button on
click="alert(this.tagname.tolowercase());"> show this </button> the...
...note however that only the outer code has its this set this way: <button on
click="alert((function() { return this; })());"> show inner this </button> in this case, the inner function's this isn't set so it returns the global/window object (i.e.
void operator - JavaScript
for example: <a href="javascript:void(0);">
click here to do nothing </a> <a href="javascript:void(document.body.style.backgroundcolor='green');">
click here for green background </a> note: javascript: pseudo protocol is discouraged over other alternatives, such as unobtrusive event handlers.
... button.on
click = () => void dosomething(); this ensures the return value of dosomething changing from undefined to true will not change the behavior of this code.
import - JavaScript
} export function getusefulcontents(url, callback) { getjson(url, data => callback(json.parse(data))); } the main program: main.js import { getusefulcontents } from '/modules/file.js'; getusefulcontents('http://www.example.com', data => { dosomethinguseful(data); }); dynamic import this example shows how to load functionality on to a page based on a user action, in this case a button
click, and then call a function within that module.
... const main = document.queryselector("main"); for (const link of document.queryselectorall("nav > a")) { link.addeventlistener("
click", e => { e.preventdefault(); import('/modules/my-module.js') .then(module => { module.loadpageinto(main); }) .catch(err => { main.textcontent = err.message; }); }); } specifications specification ecmascript (ecma-262)the definition of 'imports' in that specification.
Autoplay guide for media and Web Audio APIs - Web media technologies
autoplay availability as a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true: the audio is muted or its volume is set to 0 the user has interacted with the site (by
clicking, tapping, pressing keys, etc.) if the site has been whitelisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features if the autoplay feature policy is used to grant autoplay support to an <iframe> and its document.
...the user has the option, however, of re-enabling the audio by
clicking on the unmute button in the controls.
Performance fundamentals - Web Performance
make events immediate as old-school, accessibility-aware web developers we love
click events since they also support keyboard input.
...for example, the financial times uses a library called fast
click for that purpose, which is available for you to use.
Progressive web app structure - Progressive web apps (PWAs)
the app shell approach allows websites to be: linkable: even though it behaves like a native app, it is still a website — you can
click on the links within the page and send a url to someone if you want to share it.
...replace(/github/g,games[i].github); entry = entry.replace('<a href=\'http:///\'></a>','-'); content += entry; }; document.getelementbyid('content').innerhtml = content; next, it registers a service worker: if('serviceworker' in navigator) { navigator.serviceworker.register('/pwa-examples/js13kpwa/sw.js'); }; the next code block requests permission for notifications when a button is
clicked: var button = document.getelementbyid("notifications"); button.addeventlistener('
click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); the last block creates notifications that display a randomly-selected item from the games list: function randomnotification() { var ran...
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
notice that even the
clickable areas for links are clipped.
...</p> <button on
click="toggleradius()">toggle radius</button> <svg height="0"> <clippath id="clipping-path-1" clippathunits="objectboundingbox"> <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> <rect x="0.5" y="0.2" width="0.5" height="0.8"/> </clippath> </svg> .target { clip-path: url(#clipping-path-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } this establishes a c...
pointer-events - SVG: Scalable Vector Graphics
to change the color of the rect underneath you have to
click outside the circle --> <rect x="0" y="0" height="10" width="10" fill="black" /> <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblepoint" /> <!-- the circle below will never catch a mouse event.
... the rect underneath will change color whether you are
clicking on the circle or the rect itself --> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" /> </svg> window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually
clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, ...
Linking - SVG: Scalable Vector Graphics
="50" type="image/svg+xml" data="button.svg"/> </body> </html> button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical elements here --> </g> </a> </svg> the specification says that the browser should navigate to the html document page2.html when the button graphics are
clicked.
... to get around this, requires a little ugly javascript hacking: button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <g on
click="top.document.href='page2.html'" cursor="pointer"> <!-- button graphical elements here --> </g> </svg> example for an example of this solution at work see www.codedread.com.
Web security
clickjacking protection in
clickjacking, a user is fooled into
clicking on a ui element that performs some action other than what the user expects.
...sites can use this to avoid
clickjacking attacks, by ensuring that their content is not embedded into other sites.
indexed-db - Archive of obsolete content
uest.onsuccess = function(e) { var result = e.target.result; if(!!result == false) return; items.push(result.value.name); result.continue(); }; cursorrequest.onerror = database.onerror; }; function listitems(itemlist) { console.log(itemlist); } open("1"); var add = require("sdk/ui/button/action").actionbutton({ id: "add", label: "add", icon: "./add.png", on
click: function() { additem(require("sdk/tabs").activetab.title); } }); var list = require("sdk/ui/button/action").actionbutton({ id: "list", label: "list", icon: "./list.png", on
click: function() { getitems(listitems); } }); note that to run this add-on you'll need to provide icons named "add.png" and "list.png" in the add-on's "data" directory.
selection - Archive of obsolete content
(discontiguous selections can be created by the user with ctrl+
click-and-drag.) events select this event is emitted whenever the user makes a new selection in a page.
windows - Archive of obsolete content
} }); returns the window that was opened: var windows = require("sdk/windows").browserwindows; var example = windows.open("http://www.example.com"); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", on
click: function() { example.close(); } }); this example uses the action button api, which is only available from firefox 29 onwards.
Urlbar-icons - Archive of obsolete content
(the url bar is also known as the address bar and the navigation bar.) example the default contents of browser.xul: <hbox id="urlbar-icons"> <button be="" chromedir="ltr" class="urlbar-icon"
click="" for="" id="safebrowsing-urlbar-icon" img="" level="safe" might="" on
click="godocommand('safebrowsing-show-warning');" page="" style="-moz-user-focus:" tooltiptext="this" type="menu"> <img class="urlbar-icon" id="star-button" on
click="placesstarbutton.on
click(event);" /> <img address="" chromedir="ltr" class="urlbar-icon" id="go-button" in="" location="" on
click="handleurlbarcommand(eve...
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption
clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale scrip...
XML - Archive of obsolete content
all of the events and attributes -- even the javascript event listeners normally formatted in the javascript world with uppercase verbs (e.g., on
click, onload) -- must be lowercase or they are invalid.
action - Archive of obsolete content
, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
assign - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
bbox - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
binding - Archive of obsolete content
r, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
bindings - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
box - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
broadcaster - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
broadcasterset - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
caption - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
checkbox - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
column - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
columns - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
command - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
commandset - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
conditions - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
content - Archive of obsolete content
métodos inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
datepicker - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
deck - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
description - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
dialog - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
dialogheader - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
dropmarker - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
editor - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
grid - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
grippy - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
groupbox - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
hbox - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
iframe - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
image - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
key - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
keyset - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
listbox - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
listcell - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
listcol - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
listcols - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
listhead - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
listheader - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
listitem - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
member - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
menubar - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
menuitem - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
menuseparator - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
notification - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
notificationbox - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
observes - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
page - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
param - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
preference - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
preferences - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
prefpane - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
prefwindow - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
progressmeter - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
query - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
queryset - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
radio - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
radiogroup - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
resizer - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
richlistitem - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
row - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
rows - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
rule - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
script - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
scrollbox - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
scrollcorner - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
separator - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
spacer - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
spinbuttons - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
stack - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
statusbar - Archive of obsolete content
r, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
<statusbarpanel> - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
stringbundle - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
stringbundleset - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
tabpanel - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
template - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
textnode - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
timepicker - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
toolbar - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
toolbargrippy - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
toolbaritem - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
toolbarpalette - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
toolbarseparator - Archive of obsolete content
r, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
toolbarset - Archive of obsolete content
r, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
toolbarspacer - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
toolbarspring - Archive of obsolete content
r, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
treechildren - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
treecols - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
treerow - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
treeseparator - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
triple - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
vbox - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
where - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
window - Archive of obsolete content
, , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
wizard - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(),...
wizardpage - Archive of obsolete content
collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur,
click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), hasc...
XULRunner tips - Archive of obsolete content
r chrome manifest add a "skin" line: skin communicator classic/1.0 skin/communicator/ add a skin folder named "communicator" and add a single css file named "communicator.css" with this content: @import url("chrome://global/skin"); dom inspector to add dom inspector 2.0.* to your xulrunner 1.9.0.* application follow these steps: download the dom inspector (instead of
clicking the "add to..." button, right-
click and select "save link as...").
AudioParam.exponentialRampToValueAtTime() - Web APIs
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 on
click exprampplus.on
click = function() { gainnode.gain.exponentialramptovalueattime(1.0, audioctx.currenttime + 2); } exprampminus.on
click = 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 thrown if 0 is used — the...
AudioParam.linearRampToValueAtTime() - Web APIs
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 on
click linearrampplus.on
click = function() { gainnode.gain.linearramptovalueattime(1.0, audioctx.currenttime + 2); } linearrampminus.on
click = function() { gainnode.gain.linearramptovalueattime(0, audioctx.currenttime + 2); } specifications specification status comment web audio apithe definition of 'linearramptovalueattime' in that specification.
AudioParam.setTargetAtTime() - Web APIs
ource = 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 on
click attimeplus.on
click = function() { currgain = 1.0; gainnode.gain.settargetattime(1.0, audioctx.currenttime + 1, 0.5); } attimeminus.on
click = function() { currgain = 0; gainnode.gain.settargetattime(0, audioctx.currenttime + 1, 0.5); } specifications specification status comment web audio apithe definition of 'settargetattime' in that specification.
AudioParam.setValueAtTime() - Web APIs
ource = 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 on
click targetattimeplus.on
click = function() { currgain += 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } targetattimeminus.on
click = function() { currgain -= 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } specifications specification status comment web audio apithe definition of 'setvalueattime' in that specificati...
AudioParam.setValueCurveAtTime() - Web APIs
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 button to do something on
click var wavearray = new float32array(9); wavearray[0] = 0.5; wavearray[1] = 1; wavearray[2] = 0.5; wavearray[3] = 0; wavearray[4] = 0.5; wavearray[5] = 1; wavearray[6] = 0.5; wavearray[7] = 0; wavearray[8] = 0.5; valuecurve.on
click = function() { gainnode.gain.setvaluecurveattime(wavearray, audioctx.currenttime, 2); } specifications specification status comment web au...
AudioProcessingEvent - Web APIs
getchanneldata(channel); // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.on
click = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } ...
BaseAudioContext.createBufferSource() - Web APIs
ueryselector('button'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // stereo var channels = 2; // create an empty two second stereo buffer at the // sample rate of the audiocontext var framecount = audioctx.samplerate * 2.0; var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); button.on
click = function() { // fill the buffer with white noise; //just random values between -1.0 and 1.0 for (var channel = 0; channel < channels; channel++) { // this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.
BaseAudioContext.createDelay() - Web APIs
var synthsource; playsynth.on
click = function() { synthsource = audioctx.createbuffersource(); synthsource.buffer = buffers[2]; synthsource.loop = true; synthsource.start(); synthsource.connect(synthdelay); synthdelay.connect(destination); this.setattribute('disabled', 'disabled'); } stopsynth.on
click = function() { synthsource.disconnect(synthdelay); synthdelay.disconnect(destination); synthsource.stop(); p...
BaseAudioContext.createDynamicsCompressor() - Web APIs
or.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.on
click = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); butto...
BaseAudioContext.createScriptProcessor() - Web APIs
getchanneldata(channel); // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } getdata(); // wire up play button playbutton.on
click = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status comment web audio apithe definition of 'creat...
BaseAudioContext.decodeAudioData() - Web APIs
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.on
click = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); } stop.on
click = 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 here }); specifications spec...
CSSStyleDeclaration.setProperty() - Web APIs
const newborder = random(1, 50) + 'px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbgcolor = randomcolor(); boxpararule.style.setproperty('background-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('
click', setrandomborder); bgcolorbtn.addeventlistener('
click', setrandombgcolor); colorbtn.addeventlistener('
click', setrandomcolor); result specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.setproperty()' in that specification.
Cache - Web APIs
note: in chrome, visit chrome://inspect/#service-workers and
click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing.
CanvasPattern.setTransform() - Web APIs
canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('
click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('
click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas); window.addeventlistener('load', drawcanvas); specifications specification status comment html living standardthe definition of 'canvaspattern.settransform' in that specification.
CanvasRenderingContext2D.addHitRegion() - Web APIs
.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("
click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("
click", function() { textarea.focus(); }); canvas.addeventlistener("mousemove", function(event){ if(event.region) { alert("ouch, my eye :("); } }); textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications canvas hit regions have been removed from...