Search completed in 1.24 seconds.
ServiceWorkerGlobalScope: notificationclick event - Web APIs
the notificati
onclick event is fired to indicate that a system notification spawned by serviceworkerregistration.shownotification() has been clicked. ...
... the notificati
onclick event is fired to indicate that a system notification spawned by serviceworkerregistration.shownotification() has been clicked. ...
... the notificati
onclick event is fired to indicate that a system notification spawned by serviceworkerregistration.shownotification() has been clicked. ...
...And 3 more matches
GlobalEventHandlers.onclick - Web APIs
the
onclick 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. it fires after the mousedown and mouseup events, in that order. 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. syntax target.
onclick = functionref; value functionref is a function name or a function expression. the function receives a mouseevent object as its sole argument. within the function, this will be the element upon which the event was triggered. only one
onclick handler can be assigned to an object at a time. you may prefer to use the eventtarge...
...e element upon which the event was triggered. only one
onclick handler can be assigned to an object at a time. you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible. examples detecting clicks this example simply changes the color of an element when it's clicked upon. html <div id="demo">click here</div> javascript document.getelementbyid('demo').
onclick = function changecontent() { document.getelementbyid('demo').innerhtml = "help me"; document.getelementbyid('demo').style = "color: red"; } result getting the coordinates of clicks this example displays the coordinates at which the most recent mouse button click occurred. html <p>click anywhere in this example.</p> <p id="log"></p> javascript let log = document.getelementbyid('lo...
...ngecontent() { document.getelementbyid('demo').innerhtml = "help me"; document.getelementbyid('demo').style = "color: red"; } result getting the coordinates of clicks this example displays the coordinates at which the most recent mouse button click occurred. html <p>click anywhere in this example.</p> <p id="log"></p> javascript let log = document.getelementbyid('log'); document.
onclick = inputchange; function inputchange(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; } result specification specification status comment html living standardthe definition of '
onclick' in that specification. living standard ...
Notification.onclick - Web APIs
note: this feature is available in web workers. the
onclick 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.
onclick = function(event) { ... }; the default behavior is to move the focus to the viewport of the notification's related browsing context. if you don't want that behaviour, call preventdefault() on the event object. ...
...n event listener to receive click events. these events occur when the user clicks on a displayed notification. syntax notification.
onclick = function(event) { ... }; the default behavior is to move the focus to the viewport of the notification's related browsing context. if you don't want that behaviour, call preventdefault() on the event object. ...
...ion(event) { ... }; the default behavior is to move the focus to the viewport of the notification's related browsing context. if you don't want that behaviour, call preventdefault() on the event object. examples in the following example, we use an
onclick handler to open a webpage in a new tab (specified by the inclusion of the '_blank' parameter) once a notification is clicked: notification.
onclick = 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 '
onclick' in that specification. living standard living standard. ...
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
the serviceworkerglobalscope.onnotificati
onclick property is an event handler called whenever the notificati
onclick 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. note: trying to create a notification inside the serviceworkerglobalscope using the notification() constructor will throw an error. syntax serviceworkerglobalscope.onnotificati
onclick = function(notificationevent) { ... ...
...workers which aren't service workers using the notification() constructor will instead receive a click event on the notification object itself. note: trying to create a notification inside the serviceworkerglobalscope using the notification() constructor will throw an error. syntax serviceworkerglobalscope.onnotificati
onclick = function(notificationevent) { ... ...
... living standard initial definition. this property is specified on the notifications_api even though it's part of serviceworkerglobalscope. ...
onclick - SVG: Scalable Vector Graphics
the
onclick attribute specifies some script to run when the element is clicked. ...
... candidate recommendation no change scalable vector graphics (svg) 1.
...: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100"
onclick="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 '
onclick' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of '
onclick' in that specification. recommendation initial definition ...
onclick - Archive of obsolete content
« xul reference home
onclick type: script code this event handler is called when the object is clicked. ...
... « xul reference home
onclick type: script code this event handler is called when the object is clicked. ...
Introduction to events - Learn web development
the examples, but let's recap just to cement our knowledge. in the following example, we have a single <button>, which when pressed, makes the background change to a random color: <button>change color</button> button { margin: 10px }; the javascript looks like so: const btn = document.queryselector('button'); function random(number) { return math.floor(math.random() * (number+1)); } btn.
onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } in this code, we store a reference to the button inside a constant called btn, using the document.queryselector() function. we also define a function that returns a random number. the third part of the code is the event handler. the btn constant po...
...ton inside a constant called btn, using the document.queryselector() function. we also define a function that returns a random number. the third part of the code is the event handler. the btn constant points to a <button> element, and this type of object has a number of events that can fire on it, and therefore, event handlers available. we are listening for the click event firing, by setting the
onclick event handler property to equal an anonymous function containing code that generates a random rgb color and sets the <body> background-color equal to it. this code is run whenever the click event fires on the <button> element, that is, whenever a user selects it. the example output is as follows: it's not just web pages another thing worth mentioning at this point is that events are not uni...
...s to add event listener code to web pages so it runs when the associated event fires. in this section, we review the various mechanisms and discuss which ones you should use. event handler properties these are the properties that exist to contain event handler code we have seen most frequently during the course. returning to the above example: const btn = document.queryselector('button'); btn.
onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } the
onclick property is the event handler property being used in this situation. it is essentially a property like any other available on the button (e.g. btn.textcontent, or btn.style), but it is a special type — when you set it to be equal to s...
...And 17 more matches
Rich-Text Editing in Mozilla - Developer guides
ontains a doricheditcommand function that makes it easier to execute commands on the iframe's document and keeps the html code clean. 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. ...
...reen">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"
onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqka...
...ta:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print"
onclick="printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+uf...
...And 11 more matches
Making content editable - Developer guides
reen">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"
onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqka...
...ta:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0kegtfolizlwre4ocqwrxototaihmcz0tvgmbqkzhayyfewev14eq8iflhnehmfdqkaiskqci2pdc4qbg+oajc0ewadncogo6anqkkoiqa7" /> <img class="intlink" title="print"
onclick="printdoc();" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaalewaacxmbajqcgaaaaad0su1fb9oebxczfmgboiwaaaaidevydenvbw1lbnqa9sywvwaaaufjrefuomvtlutsjfeux//n3nn0ydpbh1abrpt4lfqtqkc3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+uf...
...lt7dtgdegxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo"
onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/dzmice3/c4nbqbads=" /> <img class="intlink" title="redo"
onclick="formatdoc('redo');" src="data:image/gif;base64,r0lgodlhfgawamihab1chdljwl9vj1ie34kl...
...And 11 more matches
DOM onevent handlers - Developer guides
nt handlers the onevent handlers are properties on certain dom elements to manage how that element reacts to events. elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <body> element). events are actions like: being clicked detecting pressed keys getting focus the onevent handler is usually named with the event it reacts to, like
onclick, 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
onclick="handleclick()">, or by setting the corresponding property from javascript: document.queryselector("button").
onclick = function(event) { … }. an onevent event handler property ser...
...en be removed from the object by calling its removeeventlistener() function. when an event occurs that applies to an element, each of its event handlers is called to allow them to handle the event, one after another. you don't need to call them yourself, although you can do so in many cases to easily simulate an event taking place. for example, given a button object mybutton, you can do mybutton.
onclick(myeventobject) to call the event handler directly. if the event handler doesn't access any data from the event object, you can leave out the event when calling
onclick(). this continues until every handler has been called, unless one of the event handlers explicitly halts the processing of the event by calling stoppropagation() on the event object itself. non-element objects event handlers can...
... dom object that represents the element, so that accessing the attributes' values using javascript will get the value set in the html. further changes to the html attribute value can be done via the setattribute method; making changes to the javascript property will have no effect. ...
...And 9 more matches
JavaScript Daemons Management - Archive of obsolete content
ner); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>new daemon(<em>@thisobject</em>, <em>@callback</em>[, <em>@rate</em>, <em>@length</em>, <em>@init</em>, <em>@onstart</em>])</h1> <p><button
onclick="orecompose.skipto(11);">skipto(11)</button> <button
onclick="orecompose.makesteps(29);">makesteps(29)</button> <button
onclick="orecompose.fixposition(-13);">fixposition(-13)</button> <button
onclick="orecompose.play();">play</button> <button
onclick="orecompose.turn();">turn</button> <button
onclick="orecompose.pause();">pause</button> <button
onclick="orecompose.reverseplay();">reverseplay</bu...
...kipto(11);">skipto(11)</button> <button
onclick="orecompose.makesteps(29);">makesteps(29)</button> <button
onclick="orecompose.fixposition(-13);">fixposition(-13)</button> <button
onclick="orecompose.play();">play</button> <button
onclick="orecompose.turn();">turn</button> <button
onclick="orecompose.pause();">pause</button> <button
onclick="orecompose.reverseplay();">reverseplay</button> <button
onclick="orecompose.reversals = 2;alert('changed');">two reversals</button> <button
onclick="orecompose.makeloop();alert('changed');">makeloop</button> <button
onclick="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button
onclick="orecompose.close();">close</button> <button
onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style=...
...ad = function () { ounhide.owner.target.id = "animate-me"; document.body.appendchild(ounhide.owner.target); ounhide.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>daemon.buildaround()</h1> <p><button
onclick="ounhide.skipto(11);">skipto(11)</button> <button
onclick="ounhide.makesteps(29);">makesteps(29)</button> <button
onclick="ounhide.fixposition(-13);">fixposition(-13)</button> <button
onclick="ounhide.play();">play</button> <button
onclick="ounhide.turn();">turn</button> <button
onclick="ounhide.pause();">pause</button> <button
onclick="ounhide.reverseplay();">reverseplay</button> <button
onclick...
...And 5 more matches
EventTarget.addEventListener() - Web APIs
sname) // logs the classname of my_element console.log(e.currenttarget === this) // logs `true` }) as a reminder, arrow functions do not have their own this context. ...
...rrenttarget === this) // logs `false` }) if an event handler (for example,
onclick) is specified on an element in the html source, the javascript code in the attribute value is effectively wrapped in a handler function that binds the value of this in a manner consistent with the addeventlistener(); an occurrence of this within the code represents a reference to the element. <table id="my_table"
onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' --> ... </table> note that the value of this inside a function, called by the code in the attribute value, behaves as per standard rules. ...
...</table> the value of this within logid() is a reference to the global object window (or undefined in the case of strict mode. ...
...And 5 more matches
Content Scripts - Archive of obsolete content
important differences: first, if you define an event listener by passing it as a string into setattribute(), then the listener is evaluated in the page's context, so it will not have access to any variables defined in the content script. ...
...er is evaluated in the page's context, so it will not have access to any variables defined in the content script. for example, this content script will fail with the error "themessage is not defined": var themessage = "hello from content script!"; anelement.setattribute("
onclick", "alert(themessage);"); second, if you define an event listener by direct assignment to a global event handler like
onclick, then the assignment might be overridden by the page. ...
...ll fail with the error "themessage is not defined": var themessage = "hello from content script!"; anelement.setattribute("
onclick", "alert(themessage);"); second, if you define an event listener by direct assignment to a global event handler like
onclick, then the assignment might be overridden by the page. ...
...And 4 more matches
widget - Archive of obsolete content
ng" id="stop-button"> </body> </html> we just include three icons, and assign an id to each one. this html file, and the icon files it references, are saved in the add-on's data directory. 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.
onclick = function() { self.port.emit("play"); } var pause_button = document.getelementbyid("pause-button"); pause_button.
onclick = function() { self.port.emit("pause"); } var stop_button = document.getelementbyid("stop-button"); stop_button.
onclick = function() { self.port.emit("stop"); } we save this file in the add-on's data directory as "button-script.js". finally. in the add-on's "main.js" ...
...ostmessage and port objects through the addon object, whereas content scripts access them through the self object. to show the difference, convert the player add-on above to use normal page scripts instead of content scripts. ...
...ence, convert the player add-on above to use normal page scripts instead of content scripts. ...
...And 4 more matches
ui/button/action - Archive of obsolete content
th this module you can create buttons that display icons and can respond to click events. usage creating buttons to create a button you must give it an id, an icon, and a label: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" },
onclick: function(state) { console.log("button '" + state.label + "' was clicked"); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel using the toolbar customization feature: badged buttons new in firefox 36. you can add a "badge" to a button using its badge property. this can be a number or a string, and you can updat...
...ses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel. read more about specifying icons in the reference documentation for the actionbutton constructor. responding to click events you can respond to click events by assigning a listener to the button's click event. ...
...tener to the button's click event. you can do this in the button's constructor, by assigning the listener to the
onclick option. you can also add, or change, the listener afterwards: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" },
onclick: firstclick }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick); button.on("click", subsequentclicks); } function subsequentclicks(state) { console.log("you clicked '" + state.label + "' again"); } the listener is passed a state object that contains all the button's properties. you can generate click events p...
...And 4 more matches
Build your own function - Learn web development
the first line uses a dom api function called document.queryselector() to select the <html> element and store a reference to it in a constant called html, so we can do things to it later on: const html = document.queryselector('html'); the next section...
...paragraph, and an 'x' inside the button. 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.
onclick 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. briefly, the
onclick handler is a property available on the button (or in fact, any element on the page) that can be set to a function to specify what code to run when the button is clicked. you'll learn a lot more about these in our later events art...
...t so that when the button is clicked, some code is run to delete the whole panel from the page — to close the message box. briefly, the
onclick handler is a property available on the button (or in fact, any element on the page) that can be set to a function to specify what code to run when the button is clicked. you'll learn a lot more about these in our later events article. we are making the
onclick handler equal to an anonymous function, which contains the code to run when the button is clicked. ...
...And 4 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
var oelem = document.getelementbyid('my_box'); oelem.style.color = oelem.style.color == 'red' ? 'blue' : 'red'; // oelem.style.color == 'red' ? 'blue' : 'red' is a conditional or ternary operator. } function stoptextcolor() { clearinterval(nintervid); } </script> </head> <body onload="changecolor();"> <div id="my_box"> <p>hello world</p> </div> <button
onclick="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. <!doctype html> <html> <head> <meta charset="utf-8" /> <title>javascript typewriter - mdn example</title> <script> function typewriter (sselector, nrate) { ...
...proin ac ante a felis ornare vehicula. fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. pellentesq...
...proin ac ante a felis ornare vehicula. fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla...
...And 4 more matches
ui/button/toggle - Archive of obsolete content
ll icon when the button is in the toolbar and the large icon when the button is in the menu panel. read more about specifying icons in the reference documentation for the togglebutton constructor. responding to click events you can respond to click events by assigning a listener to the button's click or change events. ...
...lick or change events. you can do this in the button's constructor, by assigning the listener to the
onclick or onchange option. ...
...er is an object containing the state properties you wish to update. here's an add-on with a button that disables itself when you click it, but only for the currently active window: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" },
onclick: disableforthiswindow }); function disableforthiswindow(state) { button.state("window", { disabled: true }); } to fetch the state for a specific window or tab, call state(), passing in the window or tab you are interested in, and it will return the state: var labelforactivetab = button.state("tab").label; to learn more about this, see the api documentation for state(). updating che...
...And 3 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
this means that the return statement of <todo /> is now repetitious — it also contains a definition of the "view" templa...
...dit button toggle this in the next section! toggling the <todo /> templates at long last, we are ready to make our final core feature interactive. to start with, we want to call setediting() with a value of true when a user presses the "edit" button in our viewtemplate, so that we can switch templates. ...
...eature interactive. to start with, we want to call setediting() with a value of true when a user presses the "edit" button in our viewtemplate, so that we can switch templates. ...
...And 3 more matches
Examples of web and XML development using the DOM - Web APIs
in this case,...
...in this case, you are manipulating the individual styles directly. in the next example (see example...
...dual styles directly. in the next example (see example 4), you can use stylesheets and their rules to change styles for whole documents. <!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"
onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button"
onclick="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. you can access these stylesheets and their rules individually using the stylesheet, ...
...And 3 more matches
Index - Web APIs
erence the oncanplaythrough property of the globaleventhandlers mixin is the eventhandler for processing canplaythrough events. 1486 globaleventhandlers.onchange api, event handler, globaleventhandlers, html dom, property, reference the onchange property of the globaleventhandlers mixin is an eventhandler for processing change events. 1487 globaleventhandlers.
onclick api, event handler, globaleventhandlers, html dom, property, reference the
onclick property of the globaleventhandlers mixin is the eventhandler for processing click events on a given element. 1488 globaleventhandlers.onclose api, dialog, event handler, experimental, globaleventhandlers, html dom, needsexample, property, reference the onclose property of the globale...
...n.maxactions api, dom, notifications, reference, web notifications, web notifications api, actions the maxactions attribute of the notification interface returns the maximun number of actions supported by the device and the user agent. effectively, this is the maximum number of elements in notification.actions array which will be respected by the user agent. 2774 notification.
onclick api, dom, notifications, property, reference,
onclick the
onclick property of the notification interface specifies an event listener to receive click events. these events occur when the user clicks on a displayed notification. 2775 notification.onclose api, dom, notifications, obsolete, property, reference, onclose the onclose property of the notification interface ...
...the notification() constructor. 2787 notificationaction the notificationaction interface of the notifications api is used to represent action buttons the user can click to interact with notifications. 2788 notificationevent api, experimental, interface, notificationevent, reference, service workers, serviceworker the parameter passed into the onnotificati
onclick handler, the notificationevent interface represents a notification click event that is dispatched on the serviceworkerglobalscope of a serviceworker. 2789 notificationevent.notificationevent() api, constructor, experimental, notificationevent, reference, service workers, serviceworker the notificationevent() constructor creates a new notificationevent object. 2790 ...
...And 3 more matches
Window.open() - Web APIs
dowobjectreference.focus(); /* else the window reference must exist and the window is not closed; therefore, we can bring it back on top of any other window with the focus() method. there would be no need to re-create the window or to reload the referenced resource. ...
...eadfirefox.com/" target="promotefirefoxwindowname"
onclick="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
onclick 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
onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "promotefirefoxwindowname". if no frame nor window has the name "promotefirefoxwindowname", th...
...ference = null; // global variable function openrequestedpopup(url, windowname) { if(windowobjectreference == null || windowobjectreference.closed) { windowobjectreference = window.open(url, windowname, "resizable,scrollbars,status"); } else { windowobjectreference.focus(); }; } </script> (...) <p><a href="http://www.spreadfirefox.com/" target="promotefirefoxwindow"
onclick="openrequestedpopup(this.href, this.target); return false;" title="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> you can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner: <script type="text/javascript"> var windowobjectreference = null; // global va...
...And 3 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
); this code creates an arbitrary element -- <myextensiondataelement/> -- and inserts it into the web page's dom. values are set for two arbitrary attributes on the element. these can also be named anything you like, but we've chosen attribute1 and attribute2. finally, the code creates and dispatches a custom event named myextensionevent -- similar to the standard dom click event you catch with
onclick handlers. the event bubbles up from the web page and reaches the extension (privileged code) where your listener catches it and reads the attribute values from the dom element where the event originated. (to better ensure others do not also implement the same event with a different meaning, one might either attach a namespace to <myextensiondataelement/> and check on the event handler for the c...
... document.head.appendchild(request); var event = document.createevent("htmlevents"); event.initevent("something-query", true, false); request.dispatchevent(event); }, callback: function(response) { return alert("response: " + (response ? ...
...initevent("something-query", true, false); request.dispatchevent(event); }, callback: function(response) { return alert("response: " + (response ? ...
...And 2 more matches
JavaScript basics - Learn web development
teractivity on a website requires events handlers. these are code structures that listen for activity in the browser, and run code in response. the most obvious example is handling the click event, which is fired by the browser when you click on something with your mouse. ...
... 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').
onclick = function() { alert('ouch! stop poking me!'); } there are many ways to attach an event handler to an element. here we select the <html> element, setting its
onclick handler property equal to an anonymous (i.e. nameless) function, which contains the code we want the click event to run. note that document.queryselector('html').
onclick = function() {}; is equivalent to let myhtml = document.queryselector('html'); myhtml.
onclick = function() {}; it's just shorter. supercharging our example website with this review of javascript basics completed (above), l...
...e an image you want to feature on your example site. ideally, the image will be the same size as the image you added previously, or as close as possible. save this image in your images folder. rename the image firefox2.png. add the javascript below to your main.js file. (also delete your hello world! javascript from the earlier exercise.) let myimage = document.queryselector('img'); myimage.
onclick = function() { let mysrc = myimage.getattribute('src'); if(mysrc === 'images/firefox-icon.png') { myimage.setattribute('src','images/firefox2.png'); } else { myimage.setattribute('src','images/firefox-icon.png'); } } save all files and load index.html in the browser. now when you click the image, it should change to the other one. this is what happened. you stored...
...And 2 more matches
Componentizing our Svelte app - Learn web development
lt. let's look at a way to solve this. sharing data between components: passing a handler as a prop one way to let child components notify their parents of any changes is to pass a handler as a prop. the child component will execute the handler, passing the needed information as a parameter, and the handler will modify the parent's state. ...
...e way to let child components notify their parents of any changes is to pass a handler as a prop. the child component will execute the handler, passing the needed information as a parameter, and the handler will modify the parent's state. in our case, the filterbutton component will receive an
onclick handler from its parent. whenever the user clicks on any filter button, the child will call the
onclick handler, passing the selected filter as a parameter, back up to its parent. we will just declare the
onclick prop assigning a dummy handler to prevent errors, like this: export let
onclick = (clicked) => {} and we'll declare the following reactive statement — $:
onclick(filter) — to call the
onclick handler whenever the filter variable is updated. the <script> section of our filterbu...
...igning a dummy handler to prevent errors, like this: export let
onclick = (clicked) => {} and we'll declare the following reactive statement — $:
onclick(filter) — to call the
onclick handler whenever the filter variable is updated. the <script> section of our filterbutton component should end up looking like this — update it now: <script> export let filter = 'all' export let
onclick = (clicked) => {} $:
onclick(filter) </script> now when we call filterbutton inside todos.svelte we'll need to specify the handler. update it like this: <filterbutton {filter}
onclick={ (clicked) => filter = clicked }/> when any filter button is clicked, we just update the filter variable with the new filter. now our filterbutton component will work again. easier two-way data bind...
...And 2 more matches
HTMLTextAreaElement - Web APIs
g(nselend); omsginput.setselectionrange(bdouble || nselstart === nselend ? nselstart + sstarttag.length : nselstart, (bdouble ? ...
..., (bdouble ? ...
...etc. ]</p> <p><textar...
...And 2 more matches
XUL Migration Guide - Archive of obsolete content
accessing tabbrowser this example uses the action button api, which is only available from firefox 29 onwards. the tabs/utils module gives you direct access to the tabbrowser object and the xul tab objects it contains. this simple example modifies the selected ...
...this is useful, because it means that if a malicious web page is able to inject code into your add-on's context, it is only able to use the apis you have imported. for example, if you have only imported the notifications module, ...
...en use to load and access any xpcom object. the following complete add-on uses nsipromptservice to display an alert dialog: var {cc, ci} = require("chrome"); var promptsvc = cc["@mozilla.org/embedcomp/prompt-service;1"]. getservice(ci.nsipromptservice); require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-16.png",
onclick: 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. for example, we could package the alert feature implemented above using a script like: var {cc, ci} = require("chrome"); var promptsvc = cc["@mozilla.org/embedcomp/prompt-service;1"]. getservice(ci.nsipromptser...
...a.org/embedcomp/prompt-service;1"]. 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",
onclick: 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. security implications we saw above that using powerful low-level modules like tab-browser increases the damage that a malicious web page could do if it we...
Modifying the Page Hosted by a Tab - Archive of obsolete content
is tutorial you'll need to have learned the basics of jpm. to modify the page hosted by a particular tab, load one or more content scripts into it using attach() method of tab object. the job of these scripts is to interact with web content. here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png",
onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory. you could download this icon: . this add-on creates a button with mozilla favicon as an icon. it has a click handler which fetches the active tab and loads a script i...
...to do this, provide option contentscriptfile not contentscript, whose value is a url pointing to one or more content script files. for example, if we save the script above under the add-on's data directory in a file called my-script.js: var self = require("sdk/self"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png",
onclick: function() { require("sdk/tabs").activetab.attach({ contentscriptfile: self.data.url("my-script.js") }); } }); you can load more than one script, and the scripts can interact directly with each other. so you can load jquery, and then your content script can use that. loading several content script files the data assigned to contentscriptfile can be a vector. scripts will be l...
...ing example, we are loading two scripts, first.js & second.js. both scripts will be executed in the same context, so everything publicly defined in first.js will be accessible from second.js. // index.js var self = require("sdk/self"); var tabs = require("sdk/tabs"); require("sdk/ui/button/action").actionbutton({ id: "load-several", label: "load several scripts", icon: "./icon-16.png",
onclick: function () { tabs.activetab.attach({ contentscriptfile: [self.data.url('first.js'), self.data.url('second.js')] }); } }); communicating with the content scripts your add-on script and content scripts can't directly access each other's variables or call each other's functions, but they can send each other messages. to send a message from one side to ...
... injecting css unlike the page-mod api, tab.attach() doesn't enable you to inject css directly into a page. to modify ...
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
}); return frag; } // single element? parse element namespace prefix (if none exists, default to defaultnamespace), and create element var elemns = namespace(elemnameorarray); var elem = doc.createelementns(elemns.namespace || jsontodom.defaultnamespace, elemns.shortname); // set element's attributes and/or callback functions (eg. ...
... namespace prefixes which can be used in the given dom tree. ...
...stances should code resembling 'callback("' + str + '")' appear anywhere in your add-on. closures by far the best way to create dynamic event listeners is to use closures. ...
...address) }, false); } function clickify(elem, address) { elem.
onclick = function (event) { openwindow(address) }; } multiple attributes sometimes there is a need for event listeners to appear as attributes in the dom. in these cases, multiple attributes should be used, one for each variable: function clickify(elem, address) { elem.setattribute("href", address); elem.setattribute("
onclick", "openwindow(this.getattribute('href'))"); } escaping functions when the code fragment in question is not an event handler attribute and there is no feasible way to pass the data through other means, they must be escaped with functions such as uneval, string.quote, json.stringify, or number. generating scripts in this matter is deprecated and should be avoided wherever possible, but is relativ...
Introduction to XUL - Archive of obsolete content
a xul file, so script is just mixed in with the other content, delimited by a script element in the html namespace. <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
onclick handlers and the like. see individual widget documentation referenced at the index for a list of attributes accepting javascript values. javascript is most safely kept in a separate file and included in the xul file <html:script language="javascript" src="our.js"/> or relegated to the contents of a cdata section, to prevent the xml parser from choking on javascript which may look like xml con...
... changes of state between widgets. a widget or several widgets can arrange to have the value of one of their attributes be tied to a broadcaster node. 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"
onclick="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. broadcasters can broadcast any change of state, which can be tied to the value of any attribute in another xul widget. for more complete documentation, see broadcasters and observe...
...n this document. follow the links for details. <?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!"
onclick="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. notice that the example window tag has an id attached to it. strictly speaking, that is unnecessary for this example. however in practice, most nodes in x...
...ow { display: block; width: 100%; height: 100%; } for example, the above style rule would apply to the main window and dictates that the window should consume the full width and height available to it in a content area. the next element in the example declares the menubar. the menubar contains a single menu called "file". this menu contains a single menu item that has a simple javascript
onclick handler attached to it. this handler fires when the menu is selected by the user, and it dumps the text "hello world!" to the debug console. (see menu bars and menus for details.) finally there is an html iframe. note that the frame is qualified with the prefix html:, since it is an html object being used inside a default xul namespace. the frame also has a special attribute called flex, which i...
Document.cookie - Web APIs
accessor property with native setter and getter functions, and consequently is not a data property with a value: what you write is not the same as what you read, everything is always mediated by the javascript interpreter. ...
... function alertcookie() { alert(document.cookie); } <button
onclick="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
onclick="alertcookievalue()">show cookie value</button> example #3: do something only once in order to use the following code, please replace all occurrences of the word dosomethingonlyonce (the name of the cookie) with a custom name. function doonce() { if (!document.cookie.split('; ').find(row => row.startswith('dosomethingonlyonce'))) { alert("do something here!"); document.cookie = "do...
...ly once in order to use the following code, please replace all occurrences of the word dosomethingonlyonce (the name of the cookie) with a custom name. ...
...ind(row => row.startswith('dosomethingonlyonce'))) { alert("do something here!"); document.cookie = "dosomethingonlyonce=true; expires=fri, 31 dec 9999 23:59:59 gmt"; } } <button
onclick="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
onclick="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=') == 0 })) { console.log('the cookie "reader" exists (es5)') } //es2016 if (document.cookie.split(';').some((item) => item.trim().startswith('reader='))) { console.log('the cookie "reader" exists (es6)'...
Using the MediaStream Recording API - Web APIs
encoding format of your browser. const mediarecorder = new mediarecorder(stream); there are a series of methods available in the mediarecorder interface that allow you to control recording of the media stream; in web dictaphone we just make use of two, and listen to some events. first of all, mediarecorder.start() is used to start recording the stream once the record button is pressed: record.
onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } when the mediarecorder is recording, the mediarecorder.state property will return a value of "recording". as recording progresses, we need to collect the audio data. we register an event handler to do this using media...
...u want to intervene you can also include a timeslice when invoking the start() method — for example start(10000) — to control this interval, or call mediarecorder.requestdata() to trigger an event when you need it. lastly, we use the mediarecorder.stop() method to stop the recording when the stop button is pressed, and finalize the blob ready for use somewhere else in our application. stop.
onclick = function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.color = ""; } note that the recording may also stop naturally if the media stream ends (e.g. if you were grabbing a song track and the track ended, or the user stopped sharing their microphone). grabbing and using the blob when recording h...
... first, we display a prompt asking the user to name their clip. next, we create an html structure like the following, inserting it into our clip container, which is an <article> element. <article class="clip"> <audio c...
... <p>your clip name</p> <button>delete</button> </article> after that, we create a combined blob out of the recorded audio chunks, and create an object url pointing to it, using window.url.createobjecturl(blob). we then set the value of the <audio> element's src attribute to the object url, so that when the play button is pressed on the audio player, it will play the blob. finally, we set an
onclick handler on the delete button to be a function that deletes the whole clip html structure. specifications specification status comment mediastream recording working draft initial definition ...
WebGLRenderingContext.makeXRCompatible() - Web APIs
*/ outputcanvas.addeventlistener("webglcontextrestored", (event) => { loadsceneresources(c...
...*/ outputcanvas.addeventlistener("webglcontextrestored", (event) => { loadsceneresources(currentscene); }); async function onstartedxrsession(xrsession) { ...
... 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 handlestartbutt
onclick(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...
...ession("immersive-vr"); usingxr = true; } catch(err) { xrsession = null; usingxr = false; } } startgame(); } function startgame() { currentscene = "scene1"; loadsceneresources(currentscene); /* and so on */ } this works by having two buttons, one which starts the game normally and the other which starts the game in vr mode. these both use the handlestartbutt
onclick() function as their event handler. the function determines that the button clicked was the one requesting immersive-vr mode by checking to see if the button has the use-webxr class on it. if the button clicked by the user has that class (and we've confirmed that webxr is available by ensuring that the navigator.xr property exists), we use requestsession() to request a new webxr session and set th...
ARIA: button role - Accessibility
ed the dialog unless the function performed in the dialog context logically leads to a different element. if the button alters the current context, then focus typically remains on the button, such as muting and unmuting an audio file. required javascript features required event handlers buttons can be operated by mouse, touch, and keyboard users. ...
...s typically remains on the button, such as muting and unmuting an audio file. required javascript features required event handlers buttons can be operated by mouse, touch, and keyboard users. for native html <button> elements, the button's
onclick event fires for mouse clicks and when the user presses space or enter while the button has focus. but if another tag is used to create a button, the
onclick event only fires when clicked by the mouse cursor, even if role="button" is used. because of this, separate key event handlers must be added to the element so that the button is be triggered when the space or enter key is pressed.
onclick handles the event raised when the button is activated using a mouse click or touch event. onkeydown handles the event raised when the button is activated ...
... click or the space or enter key. in this case, the action is to add a new name to the list of names. try the example by adding a name to the text box. the button will cause the name to be added to a list. ...
...o the list. let list = document.getelementbyid('namelist'); list.appendchild(listitem); } } toggle button example in this snippet a <span> element is converted to a toggle button using the button role and the aria-pressed attribute. when the button is activated, the aria-pressed value switches states; changing from true to false and back again. html <button type="button"
onclick="handlebtnclick()" onkeydown="handlebtnkeydown()"> mute audio </button> <span role="button" tabindex="0" aria-pressed="false"
onclick="handlebtnclick(event)" onkeydown="handlebtnkeydown(event)"> mute audio </span> <audio id="audio" src="https://udn.realityripple.com/samples/41/191d072707.mp3"> your browser does not support the <code>audio</code> element. </audio> css button, [role="...
contextmenu - HTML: Hypertext Markup Language
te is the id of a <menu> to use as the contextual menu for this element. a context menu is a menu that appears upon user interaction, such as a right-click. html5 now allows us to customize this menu. here are some implementation examples, including nested menus. example html <body contextmenu="share"> <menu type="context" id="share"> <menu label="share"> <menuitem label="twitter"
onclick="shareviatwitter()"></menuitem> <menuitem label="facebook"
onclick="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...
...ple you can share the page on twitter and facebook using the share menu from your context menu. ...
...re menu from your context menu. ...
...i am learning contextmenu from mdn via mozilla"); } function shareviafacebook() { window.open("https://facebook.com/sharer/sharer.php?u=" + "https://developer.mozilla.org/en/html/element/using_html_context_m...
Working with Events - Archive of obsolete content
adding listeners in constructors event emitters may be modules, as is the case for the ready event above, or they may be objects returned by constructors. in the latter case the options object passed to the constructor typically d...
...ies whose names are the names of supported event types prefixed with "on": for example, "onopen", "onready" and so on. then in the constructor you can assign a listener function to this property as an alternative to calling the object's on() method. for example: the actionbutton object emits an event when the button is clicked. ...
...or example: the actionbutton object emits an event when the button is clicked. the following add-on creates a button and assigns a listener to the
onclick property of the options object supplied to the button's constructor. ...
simple-storage - Archive of obsolete content
your code, or you may zero them each time the construction code runs. 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",
onclick: 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). line 2 needs to be made conditional, so the array is only constructed if it does not already exist: if (!ss.storage.pages) ss.storage.pages = []; deleting data you can delete properties using the delete ope...
...e array is only constructed if it does not already exist: if (!ss.storage.pages) ss.storage.pages = []; deleting data you can delete properties using the delete operator. ...
...that adds three buttons to write, read, and delete a value: var ss = require("sdk/simple-storage"); require("sdk/ui/button/action").actionbutton({ id: "write", label: "write", icon: "./write.png",
onclick: function() { ss.storage.value = 1; console.log("setting value"); } }); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png",
onclick: function() { console.log(ss.storage.value); } }); require("sdk/ui/button/action").actionbutton({ id: "delete", label: "delete", icon: "./delete.png",
onclick: function() { delete ss.storage.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 t...
slideBar - Archive of obsolete content
res of browsers. they allow quick access to a wide range of both temporary and permanent information at the side of your browser window. when a slidebar feature is selected its contents will be revealed from behind the current webpage. it currently under development and lives in the future. jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadbool
onclickfunctiononselectfunctiononreadyfunction)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 ...
...ctfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance. ...
...th of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool
onclickcallback 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,
onclick: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
tscape model. in internet explorer, if a function is called from an event, it can access the event object through window.event. mozilla passes an event object to event handlers. they must specifically pass the object on to the function called through an argument. a cross-browser event handling example follows (note that it means you can't define a global variable named event in your code): <div
onclick="handleevent(event);">click me!</div> <script> function handleevent(aevent) { var myevent = window.event ? window.event : aevent; } </script> the properties and functions that the event object exposes are also often named differently in mozilla and internet explorer, as table 4 shows. table 4. event properties differences between mozilla and internet explorer internet explor...
...oelement currenttarget for mouse events, this is the element to which the mouse moved. type type returns the name of the event. attach event handlers mozilla supports two ways to attach events through javascript. the first, supported by all browsers, sets event properties directly on objects. ...
...you use the addeventlistener() and removeeventlistener() methods, and have the benefit of being able to set multiple listeners for the same event type. ...
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
window (the parent window of the toolbar you wish to insert a button). see below for the list of common palette ids. class="toolbarbutton-1" makes the toolbar button appear correctly in icons and text mode; it also adjusts padding. 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. ...
...mon palette ids. class="toolbarbutton-1" makes the toolbar button appear correctly in icons and text mode; it also adjusts padding. 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. ...
...middle-click, add this line after the oncommand line.
onclick="checkformiddleclick(this, event)" you can also handle middle-click and right-click using
onclick 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;"
onclick="myextension.
onclick(event);"/> </toolbarpalette>
onclick: 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. wrap elements other than <toolbarbutton> in <toolbaritem>. adding the button bootstrap style adding a button...
CSS and JavaScript accessibility best practices - Learn web development
a value filled in when the form is submitted, we create a list item with a link and insert it in the errorlist. 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.
onclick = 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. note: the focus() part of this example is a bit tricky. chrome and edge (and newer versions of ie) w...
...ild(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. note: the focus() part of this example is a bit tricky. chrome and edge (and newer versions of ie) will focus the element when the link is clicked, without needing the
onclick/focus() block. safari will only highlight the form element with the link on its own, so needs the
onclick/focus() block to actually focus it. firefox doesn't focus the inputs properly at all in this context, so firefox users can't take advantage of this at present (although everything else works fine). the firefox issue should be fixed soon — work is being done to give firefox behaviour parity ...
...l, respectively. this won't allow us to access the zoomed view by keyboard though — to allow that, we've included the last two lines, which run the functions when the image is focused and blurred (when focus stops). this can be done by tabbing over the image, because we've included tabindex="0" on it. the click event is interesting — it sounds mouse-dependent, but most browsers will activate
onclick event handlers after enter/return is pressed on a link or form element that has focus, or when such an element is tapped on a touchscreen device. this doesn't work by default however when you allow a non-default-focusable event to have focus using tabindex — in such cases you need to detect specifically when that exact key is pressed (see building keyboard accessibility back in). test your ski...
Accessible multimedia - Learn web development
ther than just not including the controls attribute in the first place has the advantage that if our javascript fails for any reason, the user still has some controls available. wiring up our buttons first, let's set up the play/pause button. we can get this to toggle between play and pause with a simple conditional function, like the following. ...
...is to toggle between play and pause with a simple conditional function, like the following. add it to your code, at the bottom: playpausebtn.
onclick = 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.
onclick = function() { player.pause(); player.currenttime = 0; playpausebtn.textcontent = 'play'; }; there is no stop() function available on htmlmediaelements, so instead we pause() it, and at the same time set the currenttime to 0. ...
...e bottom, which controls the stop button: stopbtn.
onclick = function() { player.pause(); player.currenttime = 0; playpausebtn.textcontent = 'play'; }; there is no stop() function available on htmlmediaelements, so instead we pause() it, and at the same time set the currenttime to 0. next, our rewind and fast forward buttons — add the following blocks to the bottom of your code: rwdbtn.
onclick = function() { player.currenttime -= 3; }; fwdbtn.
onclick = 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. in a real video player, you'd p...
Image gallery - Learn web development
<button> that is used to control the darkening effect. it sets the width of any images inside the thumb-bar <div> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line. your javascript needs to: loop through all the images, and for each one insert an <img> element inside the thumb-bar <div> that embeds that image in the page. attach an
onclick 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
onclick 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. to give you more of an idea, have a look at the finished exa...
......
...e current image. set the src attribute value of the displayed-img <img> to the src value passed in as a parameter. alternatively, you can add one event listener to the thumb bar. writing a handler that runs the darken/lighten button that just leaves our darken/lighten <button> — we've already provided a line that stores a reference to the <button> in a constant called btn. you need to add an
onclick handler that: checks the current class name set on the <button> — you can again achieve this by using getattribute(). if the class name is "dark", changes the <button> class to "light" (using setattribute()), its text content to "lighten", and the background-color of the overlay <div> to "rgba(0,0,0,0.5)". if the class name not "dark", changes the <button> class to "dark", its text content...
What is JavaScript? - Learn web development
...
... using a pure javascript construct allows you to select all the buttons using one instruction. ...
...very button you want the javascript to apply to. using a pure javascript construct allows you to select all the buttons using one instruction. the code we used above to serve this purpose looks like this: const buttons = document.queryselectorall('button'); for(let i = 0; i < buttons.length ; i++) { buttons[i].addeventlistener('click', createparagraph); } this might be a bit longer than the
onclick attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. the javascript does not need to be changed. note: try editing your version of apply-javascript.html and add a few more buttons into the file. when you reload, you should find that all of the buttons when clicked will create a paragraph. neat, huh? script loading strategies t...
React interactivity: Events and state - Learn web development
ou've only written vanilla javascript before now, you might be used to having a separate javascript file, where you query for some dom nodes and attach listeners to them. for example: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like this: <button type="button"
onclick={() => alert("hi!")} > say hi! </button> note: this may seem counter-intuitive regarding best-practice advice that tends to advise against use of inline event handlers on html, but remember that jsx is actually part of your javascript. in the above example, we're adding an
onclick attribute to the <button> element. the value of that attribute is a function that triggers a simple alert. the...
...{() => alert("hi!")} > say hi! </button> note: this may seem counter-intuitive regarding best-practice advice that tends to advise against use of inline event handlers on html, but remember that jsx is actually part of your javascript. in the above example, we're adding an
onclick attribute to the <button> element. the value of that attribute is a function that triggers a simple alert. the
onclick attribute has special meaning here: it tells react to run a given function when the user clicks on the button. there are a couple of other things to note: the camel-cased nature of
onclick is important — jsx will not recognize
onclick (again, it is already used in javascript for a specific purpose, which is related but different — standard
onclick handler properties). all browser events f...
...={task.id} toggletaskcompleted={toggletaskcompleted} deletetask={deletetask} /> )); in todo.js, we want to call props.deletetask() when the "delete" button is pressed. deletetask() needs to know the id of the task that called it, so it can delete the correct task from the state update the "delete" button inside todo.js, like so: <button type="button" classname="btn btn__danger"
onclick={() => props.deletetask(props.id)} > delete <span classname="visually-hidden">{props.name}</span> </button> now when you click on any of the "delete" buttons in the app, your browser console should log the id of the related task. deleting tasks from state and ui now that we know deletetask() is invoked correctly, we can call our settasks() hook in deletetask() to actually delete that task fr...
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
in the scratchpad, ensure that no text is selected, and press the "run" button. (if you get an error complaining that components.utils is not defined, be sure you've selected browser from the scratchpad's environment menu, as described in step 2.) save the following html text to a file, and visit the file in your browser. make sure the current browser tab is displaying this page. <div
onclick="dodivsandspans()"> click here to make the page do some allocations. </div> <script> function makefactory(type) { return function factory(content) { var elt = document.createelement(type); elt.textcontent = content; return elt; }; } var divfactory = makefactory('div'); var spanfactory = makefactory('span'); function divsandspans() { for (i = 0; i < 10;...
...ent page by the web browser, like dom events. indeed, this display shows that popup.xml and content.js, which are internal components of firefox, allocated more objects in the page's compartment than the page itself. ...
...which are internal components of firefox, allocated more objects in the page's compartment than the page itself. (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
onclick handler is responsible for all allocation done by the page's own code. (the line number for the
onclick handler is 1, indicating that the allocating call is located on line one of the handler text itself. we will probably change this to be the line number within page.html, not the line number within the handler code.) the
onclick handler calls dodivsandspans, which calls divsandspans, which invokes closures of factory to do all the actual allocation. (it is unclear why spanfactory allocated thir...
Using dynamic styling information - Web APIs
ple</title> <script type="text/javascript"> function alterstyle(elem) { elem.style.background = 'green'; } function resetstyle(elemid) { elem = document.getelementbyid(elemid); elem.style.background = 'white'; } </script> <style type="text/css"> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1"
onclick="alterstyle(this);"> click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button
onclick="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. see example 6: getcomputedstyle in the examp...
... using the setattribute method note that you can also change style of an element by getting a reference to it and then use its setattribute method to specify the css property and its value. var el = document.
... using the setattribute method note that you can also change style of an element by getting a reference to it and then use its setattribute method to specify the css property and its value. var el = document.getelementbyid('some-element'); el.setattribute('style', 'background-...
Document.forms - Web APIs
ection object listing all of the document's forms. each item in the collection is a htmlformelement representing a single <form> element. if the document has no forms, the returned collection is empty, with a length of zero. ...
... a single <form> element. if the document has no forms, the returned collection is empty, with a length of zero. ...
...o. ...
Document.getElementsByTagName() - Web APIs
this is undesirabl...
...this is undesirable when trying to match camelcase svg elements in a subtree in an html document. document.get...
...this is undesirable when trying to match camelcase svg elements in a subtree in an html document. document.getelementsbytagnamens() is useful in that case. see also bug 499656. document.getelementsbytagn...
Events and the DOM - Web APIs
rguments) alert('hello world') } this is the method you should use in modern web pages. note: internet explorer 6–8 didn't support this method, offering a similar eventtarget.attachevent api instead. for cross-browser compatibility, use one of the many javascript libraries available. more details can be found on the eventtarget.addeventlistener reference page. html attribute <button
onclick="alert('hello world!')"> the javascript code in the attribute is passed the event object via the event parameter. the return value is treated in a special way, described in the html specification. warning: this method should be avoided! it inflates the markup, and makes it less readable. concerns of content/structure and behavior are not well-separated, making a bug harder to find. dom elem...
...s passed the event object via the event parameter. the return value is treated in a special way, described in the html specification. warning: this method should be avoided! it inflates the markup, and makes it less readable. concerns of content/structure and behavior are not well-separated, making a bug harder to find. dom element properties // assuming mybutton is a button element mybutton.
onclick = function(event){alert('hello world')} the function can be defined to take an event parameter. the return value is treated in a special way, described in the html specification. the problem with this method is that only one handler can be set per element and per event. accessing event interfaces event handlers may be attached to various objects (including dom elements, document, the window ...
...mple shows how an event object is passed to the event handler function, and can be used from within one such function. 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.
onclick = print ...
HTMLElement.focus() - Web APIs
ntscroll (the default) means that the browser will scroll the element into view after focusing it. if preventscroll is set to true, no scrolling will occur. ...
...); } html <input type="text" id="mytextfield" value="text field."> <p></p> <button type="button"
onclick="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"
onclick="focusmethod()">click me to focus on the button!</button> result focus with focusoption javascript focusscrollmethod = function getfocus() { document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() { document.getelementbyid("mybutton").focus({preventscroll:true}); } html <button type="button" o...
... living ...
ImageCapture - Web APIs
he example below starts with a device's media device (in other words a camera). this example shows, roughly, a mediastreamtrack extracted from a device's mediastream. the track is then used to create an imagecapture object so that takephoto() and grabframe() can be called. finally, it shows how to apply the results of these calls to a canvas object. ...
...of these calls to a canvas object. ...
... const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); }) .catch(error => console.log(error)); } function ongrabframebutt
onclick() { imagecapture.grabframe() .then(imagebitmap => { const canvas = document.queryselector('#grabframecanvas'); drawcanvas(canvas, imagebitmap); }) .catch(error => console.log(error)); } function ontakephotobutt
onclick() { 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).
MediaRecorder - Web APIs
lowed or was attempted using an unsupported codec. also available via the onerror property. ...
...unks = []; navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var mediarecorder = new mediarecorder(stream); visualize(stream); record.
onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; } stop.
onclick = function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.color = ""; } mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var clipname = prompt('enter a name for your sound clip'); var clipcontainer...
...some lines have been omitted for b...
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
onclick="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
onclick="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...
...r cursus. ut vitae quam elit. donec dignissim est in quam tempor consequat. aliquam aliquam diam non felis convallis suscipit. nulla facilisi. donec lacus risus, dignissim et fringilla et, egestas vel eros. duis malesuada accumsan dui, at fringilla mauris bibendum quis. cras adipiscing ultricies fermentum. praesent bibendum condimentum feugiat.</p> <p id="mybookmark1">[ <span class="intlink"
onclick="showbookmark('#mybookmark2');">go to bookmark #2</span> ]</p> <p>vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. proin ac ante a felis ornare vehicula. fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. in tincidunt tincidunt tincidunt. nulla vitae tempor nisl. etiam c...
...vitae eros. sed pretium pharetra dapibus. donec auctor interdum erat, lacinia molestie nibh commodo ut. maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. curabitur id arcu est. in semper mollis lorem at pellentesque. sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. pellentesque porttitor facilisis ultricies.</p> <p id="mybookmark2">[ <span class="intlink"
onclick="showbookmark('#mybookmark1');">go to bookmark #1</span> | <span class="intlink"
onclick="showbookmark('#mybookmark1', false);">go to bookmark #1 without using location.hash</span> | <span class="intlink"
onclick="showbookmark('#mybookmark3');">go to bookmark #3</span> ]</p> <p>phasellus tempus fringilla nunc, eget sagittis orci molestie vel. nulla sollicitudin diam non quam iaculis ac porta...
XRSystem: requestSession() - Web APIs
mode the following example shows how to use both issessionsupported() and requestsession(). first, it checks to see if webxr is available by verifying the existence of navigator.xr. next, it calls issessionsupported(), passing it the desired session option before enabling controls for entering xr. adding controls is a necessary step because entering xr requires a user action. ...
...rols for entering xr. adding controls is a necessary step because entering xr requires a user action. finally, the onbutt
onclicked() method calls requestsession() using the same session option passed to issessionsupported(). ...
...or.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.addeventlistener('click', onbutt
onclicked); 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 onbutt
onclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity. onsessionstarted(xrsession); }); } else { // button is a toggle button. xrsession.end().then(() => xrsession = null); } } specifications specification status co...
ARIA: checkbox role - Accessibility
the checkbox is checked false the checkbox is not checked mixed the checkbox is partially checked, or indeterminate tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away. ...
... key to 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 examples the following example creates a simple checkbox element using css and javascript to handle the checked or unchecked status of the element. ...
... appears checked or unchecked to the sighted user examples the following example creates a simple checkbox element using css and javascript to handle the checked or unchecked status of the element. ...
Printing - Developer guides
hen 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 popup
onclick() { 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...
...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: popup
onclick()">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. the following is a possible example which will print a file named externalpage.html: <!doctype ht...
... ...
Writing forward-compatible websites - Developer guides
e released. this is especially important for intranets and other non-public websites; if we can't see your code, we can't see that it broke. it's not always possible to follow all of these, but following as many of them as possible will help future-proof your website. ...
...this happens even if there is a var ownerdocument declared in global scope. ...
...name as your function or variable, and a browser implements it. if that happens, then suddenly your function stops being called. this has happened multiple times to various sites already during the evolution of html5. to avoid this, fully qualify global variable access using "window.", like so: <script> function localname() { alert('function localname has been called'); } </script> <div
onclick="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. so appending a script that depends on non-strict-mode behavior to a strict-mode script will cause things to break. ask the authors of any javascript libraries you use to also follow the...
<menu> - HTML: Hypertext Markup Language
n</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> result toolbar toolbar menus haven't been implemented in any known browsers yet. html <!-- a context menu for a simple editor, - containing two menu buttons. ...
...nuitem> </menu> result toolbar toolbar menus haven't been implemented in any known browsers yet. html <!-- a context menu for a simple editor, - containing two menu buttons. ...
...u buttons. --> <menu type="toolbar"> <li> <button type="menu" menu="file-menu">file</button> <menu type="context" id="file-menu"> <menuitem label="new..."
onclick="newfile()"> <menuitem label="save..."
onclick="savefile()"> </menu> </li> <li> <button type="menu" menu="edit-menu">edit</button> <menu type="context" id="edit-menu"> <menuitem label="cut..."
onclick="cutedit()"> <menuitem label="copy..."
onclick="copyedit()"> <menuitem label="paste..."
onclick="pasteedit()"> </menu> </li> </menu> result specifications specification status comment html living standardthe definition of '<menu>' in that specification. living standard no change from latest snapshot, unknown html 5.1the definition...
Communicating With Other Scripts - Archive of obsolete content
", 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
onclick="sendmessage()">send message</button> </body> </html> finally, the content script "listen.js" uses window.addeventlistener() to listen for messages from the page script: // listen.js window.addeventlistener('message', function(event) { console.log(event.data); // message from page script console.log(event.origin); }, false); using postmessage() before firefox 31 if your add-on is r...
...tom 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
onclick="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); ...
Interacting with page scripts - Archive of obsolete content
", 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
onclick="sendmessage()">send message</button> </body> </html> finally, the content script "listen.js" uses window.addeventlistener() to listen for messages from the page script: // listen.js window.addeventlistener('message', function(event) { console.log(event.data); // message from page script console.log(event.origin); }, false); postmessage() before firefox 31 if your add-on is running...
...tom 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
onclick="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); ...
indexed-db - Archive of obsolete content
globals properties indexeddb ...
...r = 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",
onclick: function() { additem(require("sdk/tabs").activetab.title); } }); var list = require("sdk/ui/button/action").actionbutton({ id: "list", label: "list", icon: "./list.png",
onclick: 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. globals properties indexeddb enables you to create, open, and delete databases. see the idbfactory documentation. idbkeyrange defines a range of keys. see the idbkeyrange documentation. domexception provides more detail...
notifications - Archive of obsolete content
fications on windows, os x using growl (and notification center as of os x 10.9 mavericks), and linux using libnotify. here's a typical example. 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",
onclick: function (data) { console.log(data); // console.log(this.data) would produce the same result. } }); this one displays an icon that's stored in the add-on's data directory. see the self module documentation for more information. var notifications = require("sdk/notifications"); var self = require("sdk/self"); var myiconurl = self.data.url("myicon.png"); notifications.notify({ text:...
...ns : object optional options: name type title string a string to display as the message's title. text string a string to display as the body of the message. iconurl string the url of an icon to display inside the message. it may be a remote url, a data uri, or a url returned by the self module.
onclick function a function to be called when the user clicks the message. it will be passed the value of data. data string a string that will be passed to
onclick. ...
panel - Archive of obsolete content
, and loading the "get-text.js" script // into it. var textentrypanel = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" },
onclick: handleclick }); // show the panel when the user clicks the button. function handleclick(state) { textentrypanel.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. textentrypanel.on("show", function() { texte...
...xt-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it. var textentrypanel = require("sdk/panel").panel({ contenturl: data.url("text-entry.html") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" },
onclick: handleclick }); // show the panel when the user clicks the button. function handleclick(state) { textentrypanel.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. textentrypanel.on("show", function() { texte...
Creating Reusable Modules - Archive of obsolete content
eturnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string. note that you usually won't // need to work with the string paths. var path = fp.file.path; // work with returned nsilocalfile... } return path; } require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png" },
onclick: function() { console.log(md5file(promptforfile())); } }); this works , but index.js is now getting longer and its logic is harder to understand. let's factor the file picker and hashing code into separate modules. creating separate modules filepicker.js first create a new file in "lib" called "filepicker.js". copy the file picker code into this new file, and add the following line at ...
...module developers can publish sdk modules to npm, and add-on developers can install them from npm and build them into their add-ons. to learn how to use third-party modules in your own code, see the tut...
Getting Started (jpm) - Archive of obsolete content
es in "index.js" file in the root of your add-on. this file was created for you in the previous step. open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" },
onclick: handleclick }); function handleclick(state) { tabs.open("http://www.mozilla.org/"); } note that "entry point" defaults to "index.js" in jpm, meaning that your main file is "index.js", and it is found directly in your add-on's root. in cfx, the entry point defaults to "main.js", and is located in the "lib" directory under the add-on's root. save the file. next, create a directory called...
...ck handler that loads the mozilla home page in a new tab. try editing this file. for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" },
onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute jpm run again. this time clicking it takes you to https://developer.mozilla.org/. packaging the add-on when you've finished the add-on and are ready to distribute it, you'll need to package it as an xpi file. this is the installable file format for firefox add-ons. yo...
Getting started (cfx) - Archive of obsolete content
es in the "main.js" file in your "lib" directory. this file was created for you in the previous step. open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" },
onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } save the file. next, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png back at the command prompt, type: cfx run this is the sdk command to run a new instance of firefox with your add-on installed. when firefox launc...
...ck handler that loads the mozilla home page in a new tab. try editing this file. for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" },
onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute cfx run again. this time clicking it takes you to https://developer.mozilla.org/. packaging the add-on when you've finished the add-on and are ready to distribute it, you'll need to package it as an xpi file. this is the installable file format for firefox add-ons. yo...
List Open Tabs - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm. to list the open tabs, you can iterate over the tabs object itself. 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",
onclick: 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". you can download the icon here: . run the add-on, load a couple of tabs and click the button. you'll see output in the command line console that looks something like this: info: http://...
...rg/about/ info: http://www.bbc.co.uk/ you don't get direct access to any content hosted in the tab. to access tab content, you need to attach a script to the tab using tab.attach(). this add-on attaches a script to all open tabs. 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",
onclick: 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. to learn more about running scripts in tabs, see the tutorial on usi...
Forms related code snippets - Archive of obsolete content
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.container.appendchild(othead); this.current.setdate(1); this.writedays(); otarget.
onclick = 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); }; ain...
... 0; niter < ntotal; niter++) { if (niter % 7 === 0) { otr = document.createelement("tr"); this.otbody.appendchild(otr); } nday = niter - nendblanks + 1; otd = document.createelement("td"); if (niter + 1 > nendblanks && niter < nend) { otd.classname = sprefs + "-active-cell"; otd.id = sprefs + "-day-" + this.id + "-" + nday; otd.
onclick = ondayclick; otd.appendchild(document.createtextnode(nday)); } else { otd.classname = sprefs + "-empty-cell"; } otr.appendchild(otd); } this.display.innerhtml = smonthsnames[this.current.getmonth()] + " " + this.current.getfullyear(); this.container.appendchild(this.otbody); }; function ondocclick (opssevt) { const oevt = opssevt || /* ie ...
Tree - Archive of obsolete content
"my-tree">, you can use the following to get the tree item: var view = document.getelementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 if the tree is not focused var treeitem = view.getitematindex(sel); note that the current index may be unselected (for example, a multi-select tree). ...
...e). getting the cell from a mouse click your first choice is likely to try <treecell
onclick="yourfunc();"/> or something similar. but this will not work. you can't add event handlers to <treecell>. instead, you can add the event handler to the <tree> element. you can then use the event and some utility methods to find the <treecell>. ...
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
frozen or sealed, then creating a proxy around the object might be a viable approach. triggering event handlers sometimes scripts might want to manually trigger an event handler that is defined directly in the xul document. consider the following xul fragment throughout the rest of this section. ...
... fragment throughout the rest of this section. <menuitem id="mymenu" oncommand="executesomething(); executesomethingelse();"/> <label id="mylabel"
onclick="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("
onclick")); 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.getelement...
The Box Model - Archive of obsolete content
re it was cut. you can choose where to cut the text, but cropping at the end is the most common practice. similarly as with wrapping, cropping will only occur is there is no room for the text to grow, so you'll need to restrict the width using css. text links xul makes it very easy for you to create a label that is also a link. all you need is to set the text-link class to the label, and add an
onclick handler (oncommand won't work for this). the label is displayed with the expected link style so that users can easily recognize it as a link. a trickier case is when you need only part of a label to be clickable, just like in html. since labels can't handle rich text, workarounds have to implemented using javascript. one possibility is to use special markup in a locale property so that the link ...
...this way, but string bundles won't do anything special with it. you'll have to break the string using regular expressions and generate 3 different labels, one with the text-link class. you'll also need to do some css work on the labels so that the inner spacing in the text looks right. another option is to take it up a notch and really use html. ...
Creating a dynamic status bar extension - Archive of obsolete content
our extension will refresh the stock information display when the user clicks the panel. write the javascript code the work of...
...ul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value"
onclick="stockwatcher.refreshinformation()" /> </statusbar> </overlay> also, notice that the definition of the status bar panel now includes a new property,
onclick, 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. write the javascript code the work of fetching the stock quote and updating the status bar panel's display is handled by the javascript code in the file stockwatcher.js. unlike our previous sample...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
var testxmlhttprequest=false; try { xcomp = new xmlhttprequest(); if(xcomp) testxmlhttprequest=true; } catch (e) { try { xcomp = new activexobject("microsoft.xmlhttp"); if(xcomp) testxmlhttprequest=true; } catch (e) { } } if(testxmlhttprequest&&document.getelementsbytagname) { document.write("<span style=\"margin-left:1em;\"> <a href=\"javascript:\" class=\"tab \"
onclick=\"calldevedge('/viewsource/catalog-new_en.xml',this);return false;\">devedge news</a> <a href=\"javascript:\" class=\"tab\"
onclick=\"calldevedge('/central/css/catalog-new_en.xml',this);return false;\" title=\"css articles\">css</a> <a href=\"javascript:\" class=\"tab\"
onclick=\"calldevedge('/central/xml/catalog-new_en.xml',this);return false;\" title=\"xml articles\">xml</a> <a href=\"javascrip...
...ewsource/catalog-new_en.xml',this);return false;\">devedge news</a> <a href=\"javascript:\" class=\"tab\"
onclick=\"calldevedge('/central/css/catalog-new_en.xml',this);return false;\" title=\"css articles\">css</a> <a href=\"javascript:\" class=\"tab\"
onclick=\"calldevedge('/central/xml/catalog-new_en.xml',this);return false;\" title=\"xml articles\">xml</a> <a href=\"javascript:\" class=\"tab\"
onclick=\"calldevedge('/central/dom/catalog-new_en.xml ',this);return false;\" title=\"dom articles\">dom</a></span>"); } </script> <!-- ***** this represents the container ***** --> <div style="margin-left:0px;border:1px solid #dddddd;" > <div style="padding:10px;" id="container"> </div> </div> </body> </html> original document information author(s): marcio galli, netscape communication...
Creating a Microsummary - Archive of obsolete content
web page that calls firefox's window.sidebar.addmicrosummarygenerator() method to download and install the generator. ...
... conclusion you should now have a microsummary generator that displays the current firefox download count when you install it, bookmark the spread firefox ho...
PyDOM - Archive of obsolete content
the global object (i.e., the window), instead of to a module's __dict__ as you expect in the python world. note that we don't actually 'import' anything here - the scripts and event handlers do not exist in a python module. the intent is to provide similar semantics to js. for example, when a top-level window has something like: <window ... script="foo = 1" ... an event handler like: <button
onclick="print foo"/> should be able to reference 'foo' via globals as shown. note that you can stick arbitrary values on any dom object - this is what js calls 'expandos'. 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" labe...
...be able to reference 'foo' via globals as shown. note that you can stick arbitrary values on any dom object - this is what js calls 'expandos'. 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"
onclick="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. the event handler could also have used getelementbyid - the point is that both the event handler and top-level script...
Urlbar-icons - Archive of obsolete content
cation of ui elements like the bookmarks, feed and go buttons. create new image or button child elements to add your own items. ...
...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=""
onclick="godocommand('safebrowsing-show-warning');" page="" style="-moz-user-focus:" tooltiptext="this" type="menu"> <img class="urlbar-icon" id="star-button"
onclick="placesstarbutton.
onclick(event);" /> <img address="" chromedir="ltr" class="urlbar-icon" id="go-button" in="" location=""
onclick="handleurlbarcommand(event);" p="" the="" to="" tooltiptext="go" /> </button> </hbox> ...
XUL Event Propagation - Archive of obsolete content
ined, though xul provide generalized event listeners (i.e., oncommand event listeners) for most of the elements in the widget hierarchy. event handlers are written by you, the developer of the interface. very often, the event raised by the element is heard by the element itself and handled right there before it bubbles up any higher. this is the case in the example code in the diagram, where the
onclick event listener for the button element handles the click event by displaying a simple alert dialog: <button value="click me"
onclick="alert('thank you')" /> the opposite of event bubbling is event capturing. where event bubbling propagates an event from its target up higher into the node hiearchy, event capturing intercepts an event before it is received by other elements, even by the event tar...
...he event itself. in another example, an onload event handler for a xul window can register a box element to capture all the click events that are raised from its child elements: var bbox = document.getelementbyid("bigbox"); if (bbox) bbox.addeventlistener("click", function() { alert('captured'); }, true); ... <box id="bigbox"> <menu value="file"> <menupopup> <menuitem value="new"
onclick="alert('not captured')" /> ... <menupopup> </menu> </box> adding an event listener in order to take advantage of event capturing (or event bubbling with elements that do not already have event listeners), you must add an event listener to the element that wants to capture events taking place below it. any xul element may use the dom addeventlistener method to register itself to c...
Displaying notifications (deprecated) - Archive of obsolete content
refox 4. you should take some action. right now!"); this returns a new notification object, but does not actually display the notification. this lets you configure the event listeners before the notification is shown, if you need to be notified when the notification is dismissed. ...
...s:
onclick 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. ...
Windows Media in Netscape - Archive of obsolete content
thus, in order to deploy cross-platform code, avoiding syntax that makes use of global namespace is important. ...
...of global namespace is important. here, for example, is a code snippet that works equally well on both netscape 7.1 and ie: <object id="player" height="0" width="0" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6"> <param name="autostart" value="true"> </object> <input type="button" name="playmedia" value="play"
onclick="startmediaup()"> <input type="button" name="stopmedia" value="stop"
onclick="shutmediadown()"> <p>this example shows a minimally-functional player <script> <!-- function startmediaup () { document.player.url = "preludesteel.wma"; document.player.controls.play(); } function shutmediadown () { document.player.controls.stop(); } --> </script> more extensive examples of working cross-browser code can be found in the examples section at the end. qualifying refere...
HTML: A good basis for accessibility - Learn web development
: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.click(); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard. we check what button was pressed via the event object's keycode property; if it is the keycode that matches return/enter, we run the function stored in the button's
onclick handler using document.activeelement.click(). activeelement which gives us the element that is currently focused on the page. this is a lot of extra hassle to build the functionality back in. and there's bound to be other problems with it. better to just use the right element for the right job in the first place. meaningful text labels ui control text labels are very useful to all users, but g...
...color, like all text, has to be significantly different from the background color (a 4.5:1 contrast). in addition, links should visually be significantly different from non-linking text. with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4:5 contrast between all those state colors and the background color.
onclick events anchor tags are often abused with the
onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing. these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled. this also conveys incorrect semantics...
HTML: A good basis for accessibility - Learn web development
: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.click(); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard. we check what button was pressed via the event object's keycode property; if it is the keycode that matches return/enter, we run the function stored in the button's
onclick handler using document.activeelement.click(). activeelement which gives us the element that is currently focused on the page. this is a lot of extra hassle to build the functionality back in. and there's bound to be other problems with it. better to just use the right element for the right job in the first place. meaningful text labels ui control text labels are very useful to all users, but g...
...color, like all text, has to be significantly different from the background color (a 4.5:1 contrast). in addition, links should visually be significantly different from non-linking text. with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4:5 contrast between all those state colors and the background color.
onclick events anchor tags are often abused with the
onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing. these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled. this also conveys incorrect semantics...
Practical positioning examples - Learn web development
cript. ...
...hen we use a for loop to cycle through all the tabs and run a function called settabhandler() on each one, which sets up the functionality that should occur when each one is clicked on. when run, the function is passed a reference to the particular tab it is being run for, and an index number i that indentifies the tab's position in the tabs array. in the settabhandler() function, the tab has an
onclick event handler set on it, so that when the tab is clicked, the following occurs: a for loop is used to cycle through all the tabs and remove any classes that are present on them. a class of active is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the css that sets the same color and background-color on the tab as the panels are style...
Functions — reusable blocks of code - Learn web development
tion that doesn't have a name: function() { alert('hello'); } this is called an anonymous function — it has no name! it also won't do anything on its own. 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.
onclick = function() { alert('hello'); } the above example would require there to be a <button> element available on the page to select and click. you've already seen this structure a few times throughout the course, and you'll learn more about and see it in use in the next article. you can also assign an anonymous function to be the value of a variable, for example: const mygreeting = function() { ...
...reeting(); anothergreeting(); but this would just be confusing, so don't do it! 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.
onclick = 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. note: parameters are sometimes called arguments, properties, or even attributes. as an e...
Arrays - Learn web development
list.innerhtml = ''; // loop through the array, and display all the search terms in the list for (let i = 0...
...olution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');\nconst searchinput = document.queryselector(\'.output input\');\nconst searchbtn = document.queryselector(\'.output button\');\n\nlist.innerhtml = \'\';\n\nlet myhistory= [];\n\nsearchbtn.
onclick = function() {\n if(searchinput.value !== \'\') {\n myhistory.unshift(searchinput.value);\n\n list.innerhtml = \'\';\n\n for(let i = 0; i < myhistory.length; i++) {\n itemtext = myhistory[i];\n const listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n }\n\n if(myhistory.length >= 5) {\n myhistory.pop();\n }\n\n searchinput.value = \'\';\n ...
Framework main features - Learn web development
without you needing to write code to do that yourself. events in order to be interactive, components need ways to respond to browser events, so our applications can respond to our users. frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events. in react, listening for the click event requires a special property,
onclick. ...
...ur users. frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events. in react, listening for the click event requires a special property,
onclick. let’s update our counterbutton code from above to allow it to count clicks: function counterbutton() { const [count, setcount] = usestate(0); return ( <button
onclick={() => setcount(count + 1)}>clicked {count} times</button> ); } in this version we are using additional usestate() functionality to create a special setcount() function, which we can invoke to update the value of count. we call this function on line 4, and set count to whatever its current value is, plus one. styling components each framework offers a way to define styles for your components...
Handling common accessibility problems - Learn web development
(including via tab) by giving each one the attribute tabindex="0" (see webaim's tabindex article for more really useful details). this allows us to tab to the buttons, but not to activate them via the enter/return key. to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.
onclick(e); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard. we check what button was pressed via the event object's keycode property; if it is the keycode that matches return/enter, we run the function stored in the button's
onclick handler using document.activeelement.
onclick(). activeelement gives us the element that is currently focused ...
...addeventlistener won't work. this is a lot of extra hassle to build the functionality back in. and there's bound to be other problems with it. better to just use the right element for the right job in the first place. ...
Tracking Protection
acking more subtly, if other parts of your site depend on trackers being loaded, then these parts will also be broken when tracking protection is enabled. for example, if your site includes a callback that runs when content from a tracking site is loaded, then the callback will not execute. ...
...cript> 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"
onclick="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; } } </scr...
L20n HTML Bindings
s. in addition to the pre-defined whitelists, any element found in the original source html is allowed in the translation as well. consider the following source html: <p data-l10n-id="save"> <input type="submit"> <a href="/main" class="btn-cancel"></a> </p> assume the following malicious translation: <save """ <input value="save" type="text"> or <a href="http://myevilwebsite.com"
onclick="alert('pwnd!')" title="back to the homepage">cancel</a>. """> the result will be: <p data-l10n-id="back"> <input value="save" type="submit"> or <a href="/main" class="btn-cancel" title="back to the homepage">cancel</a>. </p> the input element is not on the default whitelist but since it's present in the source html, it is also allowed in the translation. the value attribute is ...
..."""> the result will be: <p data-l10n-id="back"> <input value="save" type="submit"> or <a href="/main" class="btn-cancel" title="back to the homepage">cancel</a>. </p> the input element is not on the default whitelist but since it's present in the source html, it is also allowed in the translation. the value attribute is allowed on input elements, but type is not. similarly, href and
onclick attributes are not allowed in translations and they are not inserted in the final dom. however, the title attribute is safe. it is important to note that applying translations doesn't replace dom elements, but only modifies their text nodes and their attributes. this makes it possible to use l20n in conjunction with mvc frameworks. when all dom nodes are localized, the document element will fir...
nsITaskbarPreviewController
ther the controller is connected to an nsitaskbartabpreview or nsitaskbarwindowpreview, only certain methods and attributes need to be implemented. method overview boolean drawpreview(in nsidomcanvasrenderingcontext2d ctx); boolean drawthumbnail(in nsidomcanvasrenderingcontext2d ctx, in unsigned long width, in unsigned long height); boolean onactivate(); void
onclick(in nsitaskbarpreviewbutton button); void onclose(); attributes attribute type description height unsigned long the height in pixels of the preview image. this value may change at any time. see drawpreview() for more information. read only. thumbnailaspectratio float the thumbnail's aspect ratio. this doesn't need to match the preview's...
... will equal the thumbnailaspectratio, within the margin of rounding errors. return value true if you want a frame drawn around the thumbnail, otherwise false. onactivate() invoked when the user clicks on the tab preview. boolean onactivate(); parameters none. return value true if the top level window corresponding to the preview should be activated, false if activation is not accepted.
onclick() invoked when one of the buttons on the window preview's toolbar is clicked by the user. void
onclick( in nsitaskbarpreviewbutton button ); parameters button an nsitaskbarpreviewbutton object representing the button that was pressed. this can be compared to the buttons returned by the nsitaskbarwindowpreview.getbutton(). onclose() invoked when the user presses the close button on th...
Tutorial: Set a breakpoint - Firefox Developer Tools
lick 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. these are located at the bottom right of the options panel; you may need to scroll to see them. once they’re checked, you can close the developer tools. save the following text to an html file: <div
onclick="report('the best div');">click me!</div> <div
onclick="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”. if that item doesn’t appear in the “w...
..., { hit: function (frame) { console.log('hit breakpoint in ' + frame.callee.name); console.log('what = ' + frame.eval('what').return); } }); console.log('finished setting breakpoint!'); in the scratchpad, ensure that no text is selected, and press the “run” button. now, click on the text that says “click me!” in the web page. this runs the div element’s
onclick handler. when control reaches the start of the report function, debugger calls the breakpoint handler’s hit method, passing a debugger.frame instance. the hit method logs the breakpoint hit to the browser content toolbox’s console. then it evaluates the expression what in the given stack frame, and logs its result. the toolbox’s console now looks like this: you can also click on the ...
BaseAudioContext.createDelay() - Web APIs
y buttons, the loops will start immediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time. var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ... ...
... var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ... var synthsource; playsynth.
onclick = function() { synthsource = audioctx.createbuffersource(); synthsource.buffer = buffers[2]; synthsource.loop = true; synthsource.start(); synthsource.connect(synthdelay); synthdelay.connect(destination); this.setattribute('disabled', 'disabled'); } stopsynth.
onclick = function() { synthsource.disconnect(synthdelay); synthdelay.disconnect(destination); synthsource.stop(); playsynth.removeattribute('disabled'); } ... var delay1; rangesynth.oninput = function() { delay1 = rangesynth.value; synthdelay.delaytime.setvalueattime(delay1, audioctx.currenttime); } specifications specification status comment web audio apithe def...
Body.text() - Web APIs
esponse is always decoded using utf-8. syntax response.text().then(function (text) { // do something with the text response }); parameters none. return value a promise that resolves with a usvstring. 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
onclick 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. when getdata() is run, we create a new request using the request() constructor, then use it to fetch a specific .txt file. when the fetch is successful, we read a usvstring (text) object out of the response using text(), then set the inner...
...e request() constructor, then use it to fetch a specific .txt file. when the fetch is successful, we read a usvstring (text) object out of the response using text(), then set the innerhtml of the <article> element equal to the text object. ...
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"
onclick="emit(38)">↑</div> <div class="right"
onclick="emit(39)">→</div> <div class="left"
onclick="emit(37)">←</div> <div class="down"
onclick="emit(40)">↓</div> </div> <div class="banner" id="selector"> <div> time :<span id="time">0</span> </div> <div>lousygames ©</div> <div> score :<span id...
...it(39)">→</div> <div class="left"
onclick="emit(37)">←</div> <div class="down"
onclick="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"
onclick="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;...
Using channel messaging - Web APIs
mentbyid('message-input'); var output = document.getelementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click',
onclick); // listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function
onclick(e) { e.preventdefault(); port1.postmessage(input.value); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; ...
...finally we transfer messagechannel.port2 to the iframe using the window.postmessage method. let's explore how the iframe.contentwindow.postmessage line works in a bit more detail. it takes three arguments: the message being sent. ...
DelayNode.delayTime - Web APIs
y buttons, the loops will start immediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time. var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ... ...
... var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ... var synthsource; playsynth.
onclick = function() { synthsource = audioctx.createbuffersource(); synthsource.buffer = buffers[2]; synthsource.loop = true; synthsource.start(); synthsource.connect(synthdelay); synthdelay.connect(destination); this.setattribute('disabled', 'disabled'); } stopsynth.
onclick = function() { synthsource.disconnect(synthdelay); synthdelay.disconnect(destination); synthsource.stop(); playsynth.removeattribute('disabled'); } ... var delay1; rangesynth.oninput = function() { delay1 = rangesynth.value; synthdelay.delaytime.setvalueattime(delay1, audioctx.currenttime); } specifications specification status comment web audio apithe def...
DelayNode - Web APIs
y buttons, the loops will start immediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time. var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ... ...
... var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ... var synthsource; playsynth.
onclick = function() { synthsource = audioctx.createbuffersource(); synthsource.buffer = buffers[2]; synthsource.loop = true; synthsource.start(); synthsource.connect(synthdelay); synthdelay.connect(destination); this.setattribute('disabled', 'disabled'); } stopsynth.
onclick = function() { synthsource.disconnect(synthdelay); synthdelay.disconnect(destination); synthsource.stop(); playsynth.removeattribute('disabled'); } ... var delay1; rangesynth.oninput = function() { delay1 = rangesynth.value; synthdelay.delaytime.setvalueattime(delay1, audioctx.currenttime); } specifications specification status comment web audio apithe def...
Document.getElementById() - Web APIs
locate. the id is case-sensitive string which is unique within the document; only one element may have any given id. return value an element object describing the dom element object matching the specified id, or null if no matching element was found in the document. ...
...e within the document; only one element may have any given id. return value an element object describing the dom element object matching the specified id, or null if no matching element was found in the document. example html <html> <head> <title>getelementbyid example</title> </head> <body> <p id="para">some text here</p> <button
onclick="changecolor('blue');">blue</button> <button
onclick="changecolor('red');">red</button> </body> </html> javascript function changecolor(newcolor) { var elem = document.getelementbyid('para'); elem.style.color = newcolor; } result usage notes the capitalization of "id" in the name of this method must be correct for the code to function; getelementbyid() is not valid and will not work, however natural it may seem. unlike some other elemen...
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
versions of firefox and ie 5+. the dom methods presented here are part of the document object model (core) level 1 specification. dom level 1 includes both methods for generic document access and manipulation (dom 1 core) as well as methods specific to html documents (dom 1 html). ...
...xample: setting the background color of a paragraph getelementsbytagname(tagnamevalue) is a method available in any dom element or the root document element. when called, it returns an array with all of the element's descendants matching the tag name. the first element of the list is located at position [0] in the array. ...
Element: auxclick event - Web APIs
f the mousedown or pointerdown event. additionally, you may need to avoid opening a system context menu after a right click. due to timing differences between operating systems, this too is not a preventable default behavior of auxclick. instead, this can be done by preventing the default behavior of the contextmenu event. examples in this example we define functions for two event handlers —
onclick and onauxclick. the former changes the color of the button background, while the latter changes the button foreground (text) color. you also can see the two functions in action by trying the demo out with a multi-button mouse (see it live on github; also see the source code). javascript let button = document.queryselector('button'); let html = document.queryselector('html'); function random(nu...
... functions in action by trying the demo out with a multi-button mouse (see it live on github; also see the source code). ...
Element: click event - Web APIs
an element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. bubbles yes cancelable yes interface mouseevent event handler property
onclick if the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements. click fires after both the mousedown and mouseup events have fired, in that order. usage notes the mouseevent object passed into the event handler for click has its detail property set to the number of times the target was clicked. in other words, detail will be 2 for a double-clic...
... interactive (e.g. <div>) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). see this live example for a demonstration. see also safari's docs on making elements clickable and the definition of "clickable element". known workarounds for this bug: set cursor: pointer; on the element or any of its ancestors. add a dummy
onclick="void(0)" attribute to the element or any of its ancestors up to but not including <body>. use a typically interactive element (e.g., <a>) instead of one that isn't typically interactive (e.g., <div>). stop using click event delegation. safari mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug): <a> (but it must have an href) <ar...
GlobalEventHandlers.onauxclick - Web APIs
expression. the function receives a mouseevent object as its sole argument. within the function, this will be the element upon which the event was triggered. only one onauxclick handler can be assigned to an object at a time. you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible. example in this example we define functions for two event handlers —
onclick and onauxclick. the former changes the color of the button background, while the latter changes the button foreground (text) color. you can see the two functions in action by trying the demo out with a multi-button mouse (see it live on github; also see the source code). var button = document.queryselector('button'); var html = document.queryselector('html'); function random(number) { return ...
...of the button background, while the latter changes the button foreground (text) color. you can see the two functions in action by trying the demo out with a multi-button mouse (see it live on github; also see the source code). ...
HTMLInputElement.select() - Web APIs
the htmlinputelement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field. 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
onclick="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: <inpu...
...t() { 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
onclick="this.select();" value="sample text" /> <!-- equivalent to --> <input
onclick="this.setselectionrange(0, this.value.length);" value="sample text" /> specifications specification status comment html living standardthe definition of 'select' in that specification. living standard ...
Ajax navigation example - Web APIs
processlink () { 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++].
onclick = 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...
...ttp 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.
onclick = abortreq; oloadingimg.src = "data:image/gif;base64,r0lgodlheaaqapiaap///waaamlcwkjcqgaaagjiyokcgpkskih/c05fvfndqvbfmi4waweaaaah/hpdcmvhdgvkihdpdgggywphegxvywquaw5mbwah+qqjcgaaacwaaaaaeaaqaaadmwi63p4wyklre2mioggznadomgyjrbexwroumcg2lmdewnhqlvsyod2mbzkydadka+diaaah+qqjcgaaacwaaaaaeaaqaaadnai63p5ojcegg4qmu7dmikrxqlfuydezigbmrvsaqhwctxxf7weyb4ag1xjihkmzsiukkhiaifkecqoaaaasaaaaabaaeaaaazyiujijk8...
Notification - Web APIs
ttings. notification.timestamp read only specifies the time at which a notification is created or applicable (past, present, or future). notification.title read only the title of the notification as specified in the first parameter of the constructor. notification.vibrate read only specifies a vibration pattern for devices with vibration hardware to emit. event handlers notification.
onclick a handler for the click event. it is triggered each time the user clicks on the notification. notification.onclose a handler for the close event. it is triggered when the user closes the notification. notification.onerror a handler for the error event. it is triggered each time the notification encounters an error. notification.onshow a handler for the show event. it is triggered when the ...
...ation.requestpermission() requests permission from the user to display notifications. instance methods these properties are available only on an instance of the notification object or through its prototype. the notification object also inherits from the eventtarget interface. notification.close() programmatically closes a notification instance. examples assume this basic html: <button
onclick="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. function noti...
NotificationAction - Web APIs
name of the action, which can be used to identify the clicked action similar to input names. notificationaction.title read only the string describing the action that is displayed to the user. notificationaction.icon read only the url of the image used to represent the notification when there is not enough space to display the notification itself. example notifications can fire notificati
onclick events on the serviceworkerglobalscope. here a service worker shows a notification with a single "archive" action, allowing users to perform this common task from the notification without having to open the website. the user can also click the main body of the notification to open their inbox instead. self.registration.shownotification("new mail from alice", { actions: [ { action: '...
...ion with a single "archive" action, allowing users to perform this common task from the notification without having to open the website. the user can also click the main body of the notification to open their inbox instead. ...
NotificationEvent - Web APIs
this interface inherits from the extendableevent interface. constructor notificationevent() creates a new notificationevent object. properties inherits properties from its ancestor, event. 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. ...
...on 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. methods inherits methods from its parent, extendableevent. extendableevent.waituntil() extends the lifetime of the event. tells the browser that work is ongoing. ...
PaymentRequest.show() - Web APIs
d returns a promise that resolves to a paymentresponse object when the user interaction is complete. the developer then uses the information in the paymentresponse object to format and send payment data to the server. you should send the payment information to the server asynchronously so that the final call to paymentresponse.complete() can indicate the success or failure of the payment. button.
onclick = async function handlepurchase() { // initialization of paymentrequest arguments are excerpted for the sake of // brevity. const payment = new paymentrequest(methods, details, options); try { const response = await payment.show(); // process response here, including sending payment instrument // (e.g., credit card) information to the server. // paymentresponse.methodname ...
...the `methods` if (!await request.canmakepayment()) { return; // no, so use a web form instead. } // let's update the total as the sheet is shown const updateddetails = { total: { label: "total", amount: { value: "20", currency: "aud" }, }, }; const response = await request.show(updateddetails); // check response, etc... } document.getelementbyid("buybutton").
onclick = requestpayment; specifications specification status comment payment request apithe definition of 'show(optional detailspromise)' in that specification. candidate recommendation initial definition. ...
SVGRectElement - Web APIs
ng to the ry attribute of the given <rect> element. methods this interface doesn't implement any specific methods, but inherits methods from its parent, svggeometryelement. example here is a simple usage of rect interface. ...
...parent, svggeometryelement. example here is a simple usage of rect interface. (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"
onclick="dorectclick()" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> <text x="60" y="40" fill="white" font-size="40"
onclick="dorectclick();">click me</text> </svg> javascript content function dorectclick(){ var myrect = document.getelementbyid('myrect'); 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. specifications specification status...
ServiceWorkerRegistration.showNotification() - Web APIs
of the array should be an object literal. it may contain the following values: action: a domstring identifying a user action to be displayed on the notification. title: a domstring containing action text to be shown to the user. icon: a usvstring containing the url of an icon to display with the action. appropriate responses are built using event.action within the notificati
onclick event. badge: a usvstring containing the url of an image to represent the notification when there is not enough space to display the notification itself such as for example, the android notification bar. on android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked. body: a string representing an extra content to di...
... you can also retrieve details of the notifications that have been fired from the current service worker using serviceworkerregistration.getnotifications(). specifications specification status comment notifications apithe definition of 'shownotification()' in that specification. living standard initial definition. ...
Writing a WebSocket server in C# - Web APIs
tton> <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",
onclickbutton); 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("<span class=...
...nse: " + e.data + "</span>"); }; websocket.onerror = function (e) { writetoscreen("<span 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
onclickbutton() { var text = textarea.value; text && dosend(text); textarea.value = ""; textarea.focus(); } </script> related writing websocket servers ...
Movement, orientation, and motion: A WebXR example - Web APIs
lating as needed from the values found in the texture and applying the lighting effects. starting up and shutting down webxr upon initially loading the script, we install a handler for the load event, so that we can perform initialization. ...
... }) .catch(() => { xrbutton.disabled = true; }); } } the label of the button gets adjusted in the code that handles actuallys ttarting and stopping the webxr session; we'll see that below. 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". this is done by the onxrbutt
onclick() event handler. async function onxrbutt
onclick(event) { if (!xrsession) { navigator.xr.requestsession(session_type) .then(sessionstarted); } else { await xrsession.end(); if (xrsession) { sessionended(); } } } this begins by looking at the value of xrsession to see if we already have a xrsession object representing an ongoing webxr session. if we don't, the cli...
Using the Web Speech API - Web APIs
this is achieved by calling speechrecognition.start(). the foreach() method is used to output colored indicators showing what colors to try saying. var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); var hints = document.queryselector('.hints'); var colorhtml= '...
...queryselector('.output'); var bg = document.queryselector('html'); var hints = document.queryselector('.hints'); var colorhtml= ''; colors.foreach(function(v, i, a){ console.log(v, i); colorhtml += '<span style="background-color:' + v + ';"> ' + v + ' </span>'; }); hints.innerhtml = 'tap/click then say a color to change the background color of the app. ...
XRSystem: isSessionSupported() - Web APIs
se name is one of the following strings. securityerror the document's origin does not have permission to use the xr-spatial-tracking feature policy. examples in this example, we see issessionsupported() used to detect whether or not the device supports vr mode by checking to see if an immersive-vr session is supported. if it is, we set up a button to read "enter xr", to call a method onbutt
onclicked(), and enable the button. if no session is already underway, we request the vr session and, if successful, set up the session in a method called onsessionstarted(), not shown. 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((iss...
...ion and, if successful, set up the session in a method called onsessionstarted(), not shown. 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', onbutt
onclicked); userbutton.innerhtml = 'enter xr'; userbutton.disabled = false; } }); } function onbutt
onclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity. onsessionstarted(xrsession); }); } else { // button is a toggle b...
XRSystem - Web APIs
g the ondevicechange event handler. usage notes thsi interface was previously known as simply xr in earlier versions of the specification; if you see references to xr in code or documentation, simply replace that with xrsystem. examples the following example shows how to use both issessionsupported() and requestsession(). if (navigator.xr) { immersivebutton.addeventlistener("click", onbutt
onclicked); navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.disabled = false; } else { immersivebutton.disabled = true; }); } function onbutt
onclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then(() => { // onsessionstarted() not shown for reasons of brevity and clarity. ...
... on and off. however, we don't yet know if the desired immersive mode is available. to determine this, we call issessionsupported(), passing it the desired session option before enabling the button, immersivebutton, which the user can then use to switch to immersive mode only if immersive vr mode is available. if immersive vr isn't available, the button is disabled to prevent its use. the onbutt
onclicked() function checks to see if there's already a session running. if there isn't, we use requestsession() to start one and, once the returned promise resolves, we call a function onsessionstarted() to set up our session for rendering and so forth. if, on the other hand, there is already an ongoing xr session, we instead call end() to end the current session. when the returned promise resolves, we...
Color picker tool - CSS: Cascading Style Sheets
}; var addsamplebutton = (function addsamplebutton() { var node; var _index = 0; var _posx; var _posy; var updateposition = function updateposition(index) { _index = index; _posy = 5 + ((index / samples_per_line) | 0) * 52; _posx = 5 + ((index % samples_per_line) | 0) * 52; node.style.top = _posy + 'px'; node.style.left = _posx + 'px'; }; var addbutt
onclick = function addbutt
onclick() { var sample = new colorsample(); container.appendchild(sample.node); updateposition(_index + 1); updateui(); }; var init = function init() { node = document.createelement('div'); var icon = document.createelement('div'); node.classname = 'sample'; icon.id = 'add-icon'; node.appendchild(icon); node.addeventlistener('click...
...n addbutt
onclick() { var sample = new colorsample(); container.appendchild(sample.node); updateposition(_index + 1); updateui(); }; var init = function init() { node = document.createelement('div'); var icon = document.createelement('div'); node.classname = 'sample'; icon.id = 'add-icon'; node.appendchild(icon); node.addeventlistener('click', addbutt
onclick); updateposition(0); container.appendchild(node); }; return { init : init, updateposition : updateposition }; })(); var init = function init() { container = getelembyid('picker-samples'); trash_can = getelembyid('trash-can'); addsamplebutton.init(); for (var i=0; i<16; i++) { var sample = new colorsample(); container.appendchild(sample.node); ...
Getting Started - Developer guides
ttp request we used the request object's responsetext property , which contained the contents of the test.html file. now let's try the responsexml property. first off, let's create a valid xml document that we'll request later on. the document (test.xml) contains the following: <?xml version="1.0" ?> <root> i'm a test. </root> in the script we only need to change the request line to: ...
onclick="makerequest('test.xml')"> ... then in alertcontents(), we need to replace the line alert(httprequest.responsetext); with: var xmldoc = httprequest.responsexml; var root_node = xmldoc.getelementsbytagname('root').item(0); alert(root_node.firstchild.data); this code takes the xmldocument object given by responsexml and uses dom methods to access some of the data contained in the xml document.
...we'll change the request method from get to post, and include our data as a parameter in the call to httprequest.send(): function makerequest(url, username) { ... httpr...
CSP: script-src - HTTP
csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. ...
...sample' requires a sample of the violating code to be included in the violation report. examples violation case given this csp header: content-security-policy: script-src https://example.com/ the following script is blocked and won't be loaded or executed: <script src="https://not-example.com/js/library.js"></script> note that inline event handlers are blocked as well: <button id="btn"
onclick="dosomething()"> you should replace them with addeventlistener calls: document.getelementbyid("btn").addeventlistener('click', dosomething); unsafe inline script note: disallowing inline styles and inline scripts is one of the biggest security wins csp provides. however, if you absolutely have to use it, there are a few mechanisms that will allow them. to allow inline scripts and inline ev...
HTTP Index - HTTP
and enforcing a same-origin policy. 98 csp: script-src csp, content, content-security-policy, directive, http, reference, script, security, script-src, source the http content-security-policy (csp) script-src directive specifies valid sources for javascript. ...
...ers (
onclick) and xslt stylesheets which can trigger script execution. 99 csp: script-src-attr csp, content, content-security-policy, directive, http, reference, script, security, script-src, source the http content-security-policy (csp) script-src-attr directive specifies valid sources for javascript inline event handlers. this includes only inline script event handlers like
onclick, 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
onclick. 101 csp: s...
this - JavaScript
the default object in non–strict mode where this isn't ...
...+) { 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
onclick="alert(this.tagname.tolowercase());"> show this </button> the above alert shows button. note however that only the outer code has its this set this way: <button
onclick="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. the default object in non–strict mode where this isn't set by the call). this in classes just like with regular functions, the value of this within methods depends on how they are called. sometimes it is useful to override th...
Cross-domain Content Scripts - Archive of obsolete content
s 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: "./icon-16.png",
onclick: 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/wxf...
Reddit Example - Archive of obsolete content
ipt in the context of the reddit page which intercepts mouse clicks on each title link and fetches the link's target url. the content script then needs to send the url to the add-on script. ...
port - Archive of obsolete content
t. 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",
onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script listens for "get-first-para". when it receives this message, the script logs the first paragraph of the document and then calls removelistener() to stop listening. // content-script.js function getfirstparagraph() { var paras = document.getelementsbytagname('p'); ...
Communicating using "port" - Archive of obsolete content
"listener.js". the button sends the content script a message called "get-first-para" when it is clicked: pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png",
onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script "listener.js" listens for "get-first-para". when it receives this message, the script logs the first paragraph of the document and then calls removelistener() to stop listening. function getfirstparagraph() { var paras = document.getelementsbytagname('p'); conso...
ui - Archive of obsolete content
s its own reference page, linked above: for all the details please refer to the reference page. this page just provides a quick overview. actionbutton an action button is a button in the main firefox toolbar. 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",
onclick: function(state) { console.log("you clicked '" + state.label + "'"); } }); you can make a button standalone or add it to a toolbar. if it's standalone, it appears in the toolbar at the top right of the browser window: togglebutton a toggle button is a special kind of button that's for representing a binary on/off state, like a checkbox. so they have a checked property which is toggled ...
windows - Archive of obsolete content
en" event. windows.open({ url: "http://www.example.com", onopen: function(window) { // do stuff like listen for content // loading. } }); 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",
onclick: function() { example.close(); } }); this example uses the action button api, which is only available from firefox 29 onwards. parameters options : object required options: name type url string string url to be opened in the new window. this is a required property. isprivate boolean boolean which will determine whether...
core/promise - Archive of obsolete content
xes: function blackbox(a, b) { var c = assemble(a); return combine(b, c); } we're forced into continuation passing style, involving lots of machinery: function sphagetti(a, b, callback) { assemble(a, function continuewith(error, c) { if (error) callback(error); else combine(b, c, callback); }); } this style also makes doing things in sequence hard: widget.on('click', function
onclick() { promptuserfortwitterhandle(function continuewith(error, handle) { if (error) return ui.displayerror(error); twitter.gettweetsfor(handle, funtion continuewith(error, tweets) { if (error) return ui.displayerror(error); ui.showtweets(tweets); }); }); }); doing things in parallel is even harder: var tweets, answers, checkins; twitter.gettweetsfor(user, function conti...
Adding a Button to the Toolbar - Archive of obsolete content
the button is added to the toolbar at the top of the browser window: you can't set the initial location for the button, but the user can move it using the browser's customization feature. the id attribute is mandatory, and is used to remember the position of the button, so...
Display a Popup - Archive of obsolete content
tory, and loading the "get-text.js" script // into it. var text_entry = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" },
onclick: handleclick }); // show the panel when the user clicks the button. function handleclick(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. text_entry.on("show", function() { text_entry.po...
Unit Testing - Archive of obsolete content
modules/services.jsm"); exports.atob = a => atob(a); exports.btoa = b => btoa(b); this code exports two functions, which just call the platform's btoa() and atob() functions. 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",
onclick: 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. you could download this icon: . now "index.js" imports the base64 module and calls its two exported functions. if we run the add-on a...
Localization - Archive of obsolete content
te 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",
onclick: 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 ...
Installing Extensions and Themes From Web Pages - Archive of obsolete content
the html <a> is the install link. the href attribute contains a direct link to the extension xpi file, this is what will show in the location bar when the link is moused over. 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 ca...
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
enus by adding class="menuitem-iconic" to a menuitem element, along with a src attribute that gives an image uri. figure 7 shows an example of how this is displayed. figure 7: menu items with icons executing commands when selecting menu items much like dynamic html, event handlers are used to execute a command when a menu item is selected. to respond to mouse and keyboard inputs in html, the
onclick 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. listin...
Adding Events and Commands - Archive of obsolete content
l. it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes. for a button, it represents the action of the user clicking on it, or focusing it with the keyboard and then pressing the enter key. it's an abstraction of the main way to interact with a control element. onselect. fired when the selection in a tree or listbox changes.
onclick. triggered when the user clicks on the element, including right clicks. you shouldn't normally use this event to trigger actions on input controls such as buttons. use oncommand instead. onfocus and onblur. used when an element receives or loses focus when the user is navigating with the keyboard. you can combine these with -moz-user-focus to add custom focus behavior to elements that normally w...
Tabbed browser - Archive of obsolete content
ordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held. the code given is for a menuitem, but will work equally well for other xul elements. this will only work in an overlay of browser.xul. ...
Adding preferences to an extension - Archive of obsolete content
ons.stockwatcher2.symbol" type="string" title="stock to watch" /> </vbox> adding the context menu adding the contextual menu is easy; all the work that needs doing is done in the stockwatcher2.xul file. the first step is to add the context attribute to the status bar panel: <statusbar id="status-bar"> <statusbarpanel id="stockwatcher2" label="loading..." context="stockmenu"
onclick="stockwatcher.refreshinformation()" /> </statusbar> now when the user clicks on the status bar panel, the stock information refreshes, but when they right-click on it, a context menu pops up. defining the menu is also easy. all we need to do is add a popupset describing the menu to the statusbar, as follows: <popupset> <menupopup id="stockmenu"> <menuitem label="refresh now" defa...
Index - Archive of obsolete content
reference no summary! 964 onbookmarkgroup xul attributes, xul reference no summary! 965 onchange needshelp, reference, référence(2), xul attributes, xul reference an onchange attribute is an event listener to the object for the event change. ...
Creating a Web based tone generator - Archive of obsolete content
s have samples to play, a buffer of 500 ms is created. the function mozcurrentsampleoffset() is used to know the position of the samples being played so that we can fill a 500 ms buffer of audio samples. <!doctype html> <html> <head> <title>javascript audio write example</title> </head> <body> <input type="text" size="4" id="freq" value="440"><label for="hz">hz</label> <button
onclick="start()">play</button> <button
onclick="stop()">stop</button> <script type="text/javascript"> function audiodatadestination(samplerate, readfn) { // initialize the audio output. var audio = new audio(); audio.mozsetup(1, samplerate); var currentwriteposition = 0; var prebuffersize = samplerate / 2; // buffer 500ms var tail = null; ...
Adding the structure - Archive of obsolete content
it can contain both text messages (i.e. "done" in mozilla when a document finishes loading) and graphical messages (f.e. the lock icon in mozilla that shows whether or not a loaded document was encrypted with ssl...
Event Handlers - Archive of obsolete content
javascript body is compiled just before execution; code that does not depend on the context of the event should be factored into normal javascript file. (note that there is a possibility that this may change in the future.) handlers are attached to the bound element, and they are registered by default for bubbling events. this means that <handler event="click" action="foo()"/> is analogous to
onclick="foo()" defined on the bound element. the phase attribute specifies the phase of event flow that the handler is registered for. the default value is bubbling, which means that the event handler will fire during the bubbling phase. the other possible values are target, which means the handler will only fire if event.originaltarget is the same as the target to which the handler is attached, and ca...
InstallTrigger.startSoftwareUpdate - Archive of obsolete content
installtrigger.startsoftwareupdate this is a very simple example of the installtrigger object's principal method, startsoftwareupdate, which takes a string representing the path to the xpi and installs that xpi on the local machine. function triggerurl(url) { installtrigger.startsoftwareupdtate(url); } // get the url to the .xpi from either a form // or text field entry. then do: ...
onclick="triggerurl(this.form.url.value); ...
A XUL Bestiary - Archive of obsolete content
and the event listener attribute provides a very convenient place in which to write event handlers -- so convenient, in fact, that the term "event handler" is often used to describe both the event listener attribute and the event handler code you write within it. to create an event handler, simple place the code you want executed within the appropriate event listener: <menuitem value="click me"
onclick="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. a menubar in xul, for instance, can contain event handlers for events fired by its child menuitems. mozilla xparchitecture mozilla is obviously a lot more than simply an interface. it's cross-platform, and standards-based, and y...
Attribute (XUL) - Archive of obsolete content
stpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange
onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontext...
XUL Events - Archive of obsolete content
e 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. the detail property specifies how many clicks occurred. you can also check for triple-clicks in a similar manner. you should not use this event in xul to respond to user actions; the command event should be used instead. attribute:
onclick dblclick this event is like the click event except it is only sent when the user double clicks with the mouse. this is an alternative to checking the detail property in the click event. attribute: ondblclick dommousescroll ...
Index - Archive of obsolete content
reference no summary! 217 onbookmarkgroup xul attributes, xul reference no summary! 218 onchange needshelp, reference, référence(2), xul attributes, xul reference an onchange attribute is an event listener to the object for the event change. ...
Sorting and filtering a custom tree view - Archive of obsolete content
filter">filter</label> <textbox id="filter" oninput="inputfilter(event)" flex="1"/> <button id="clearfilter" oncommand="clearfilter()" label="clear" accesskey="c" disabled="true"/> </hbox> <tree id="tree" flex="1" persist="sortdirection sortresource" sortdirection="ascending" sortresource="description"> <treecols> <treecol id="name" label="name" flex="1" persist="width ordinal hidden"
onclick="sort(this)" class="sortdirectionindicator" sortdirection="ascending"/> <splitter class="tree-splitter"/> <treecol id="description" label="description" flex="1" persist="width ordinal hidden"
onclick="sort(this)" class="sortdirectionindicator"/> <splitter class="tree-splitter"/> <treecol id="weapon" label="weapon" flex="1" persist="width ordinal hidden"
onclick="sort(this)" class="sor...
Adding Event Handlers - Archive of obsolete content
lay an alert containing the target's tag name. the target is useful when using a bubbling event so that you could have a set of buttons which are all handled by a single script. you might notice that the attribute syntax is similar to that used for events in html documents. in fact, both html and xul share the same event mechanism. one important difference is that while the 'click' event (or the
onclick attribute) is used in html to respond to buttons, in xul the command event should be used instead. xul does have a click event, but it only responds to mouse clicks, not to keyboard usage. thus, the click event should be avoided in xul, unless you have a reason to have an element that can only be handled with a mouse. in addition, whereas the command event will not be sent if an element is disabl...
XML - Archive of obsolete content
ces, xul offers no flexibility to you as acoder. you must be very careful about your syntax, and in particular about these four cardinal rules of xul: all events and attributes must be written in lowercase. unlike html, xul is very sensitive to case. all of the events and attributes -- even the javascript event listeners normally formatted in the javascript world with uppercase verbs (e.g.,
onclick, onload) -- must be lowercase or they are invalid. all strings must be double quoted. all of the values for all of the attributes declared in xul are strings. when an attribute is assigned a value (e.g., flex="1" or "onload='dointerestingstartupthing()'") that value must be double-quoted. every xul widget must use close tags to be well-formed. html allows some elements, such as <br> and...
Windows and menus in XULRunner - Archive of obsolete content
opup> </menu> </menubar> <toolbar id="main-toolbar"> <toolbarbutton id="open" label="&file.open;" oncommand="dofileopen();"/> <toolbarbutton id="save" label="&file.save;" oncommand="dofilesave();"/> </toolbar> </toolbox> ... </window> notice that i used entity-references for the menu and toolbar labels. the oncommand event is hooked up to javascript, just like an
onclick in html. the javascript is contained in the main.js file. xul has a way to centralize commands and event handlers for menus and toolbars that do the same thing, like open and save in the above example. you can add a <commandset> and <command> elements like this: <commandset> <command id="cmd_open" label="&file.open;" oncommand="dofileopen();"/> <command id="cmd_save" label="&file.save;" onco...
Developing cross-browser and cross-platform pages - Archive of obsolete content
in the visiting browser. let's see a basic, simple object support detection example. function hideelement(id_attribute_value) { if (document.getelementbyid && document.getelementbyid(id_attribute_value) && document.getelementbyid(id_attribute_value).style ) { document.getelementbyid(id_attribute_value).style.visibility = "hidden"; }; } // example: // <button type="button"
onclick="hideelement('d1');">hide div</button> // <div id="d1">some text</div> these repeated calls to document.getelementbyid are not the most efficient way to check for the existence of particular objects or features in the browser's dom implementation, but they serve to illustrate clearly how object support detection works. the top-level if clause looks to see if there is support for a method called...
Advanced text formatting - Learn web development
xt editor. <var>: for specifically marking up variable names. <kbd>: for marking up keyboard (and other types of) input entered into the computer. <samp>: for marking up the output of a computer program. let's look at a few examples. ...
Client-side storage - Learn web development
to delete items listitem.setattribute('data-note-id', cursor.value.id); // create a button and place it inside each listitem const deletebtn = document.createelement('button'); listitem.appendchild(deletebtn); deletebtn.textcontent = 'delete'; // set an event handler so that when the button is clicked, the deleteitem() // function is run deletebtn.
onclick = deleteitem; // iterate to the next item in the cursor cursor.continue(); } else { // again, if list item is empty, display a 'no notes stored' message if(!list.firstchild) { const listitem = document.createelement('li'); listitem.textcontent = 'no notes stored.'; list.appendchild(listitem); } // if there are no more cursor items t...
Video and Audio APIs - Learn web development
r/scrobbler — i.e., when you click somewhere on the bar, it jumps to that relative position in the video playback? as a hint, you can find out the x and y values of the element's left/right and top/bottom sides via the getboundingclientrect() method, and you can find the coordinates of a mouse click via the event object of the click event, called on the document object. for example: document.
onclick = function(e) { console.log(e.x) + ',' + console.log(e.y) } ...
Handling text — strings in JavaScript - Learn web development
let response = one + 'i am fine — ' + two; response; note: when you enter an actual string in your code, enclosed in single or double quotes, it is called a string literal. concatenation in context let's have a look at concatenation being used in action — here's an example from earlier in the course: <button>press me</button> const button = document.queryselector('button'); button.
onclick = function() { let name = prompt('what is your name?'); alert('hello ' + name + ', nice to see you!'); } here we're using a window.prompt() function in line 4, which asks the user to answer a question via a popup dialog box then stores the text they enter inside a given variable — in this case name. we then use a window.alert() function in line 5 to display another popup containing a str...
Storing the information you need — Variables - Learn web development
for more information on how to access this tool). what is a variable? a variable is a container for a value, like a number we might use in a sum, or a string that we might use as part of a sentence. but one special thing about variables is that their contained values can change. let's look at a simple example: <button>press me</button> const button = document.queryselector('button'); button.
onclick = function() { let name = prompt('what is your name?'); alert('hello ' + name + ', nice to see you!'); } in this example pressing the button runs a couple of lines of code. the first line pops a box up on the screen that asks the reader to enter their name, and then stores the value in a variable. the second line displays a welcome message that includes their name, taken from the variable ...
Accessibility in React - Learn web development
of ref to each element, and set their values to the appropriately named ref objects. 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"
onclick={() => 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(). useeffect() is so named because it runs after react renders a given component, and will run any side-effects that we'd like to add to the render p...
Handling common JavaScript problems - Learn web development
y examples like this one, which shows a typical pattern of saving a this scope to a separate variable, then using that variable in nested functions so you can be sure you are applying functionality to the correct this scope. 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
onclick 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. if you want this to work correctly, you need to define a function to add the handler separately, calling it on each iteration and passing it the current ...
Mozilla’s UAAG evaluation report
oard access. (p1) vg we have some remaining bugs, and some keyboard usability issues, but in general mozilla now has keyboard equivalents for almost everything. most browsers do not allow the user to select text with the keyboard alone. we intend to do this with a caret browsing feature. 1.2 activate event handlers. (p1) p onmouseover, onmousedown, onmouseup, onmousemove,
onclick, ondbclick: no keyboard support onfocus and onblur: cannot be activated with pointer 1.3 provide text messages. (p1) c status line and alert boxes used to convey messages and alerts guideline 2. ensure user access to all content. checkpoint title status notes/plans checkpoint title status notes/plans 2.1 render content ac...
API-provided widgets
ll non-custom widgets; a function that will be invoked after the widget has a dom node destroyed, passing the document from which it was removed. this is useful especially for 'view' type widgets that need to cleanup after views that were constructed on the fly. oncommand(aevt) only useful for button widgets; a function that will be invoked when the user activates the button.
onclick(aevt) attached to all widgets; a function that will be invoked when the user clicks the widget. onviewshowing(aevt) only useful for views; a function that will be invoked when a user shows your view. onviewhiding(aevt) only useful for views; a function that will be invoked when a user hides your view. ...
How to embed the JavaScript engine
cused 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. * pass cx to neweventobject so js_newobject can be called. */ 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 "
onclick" too. */ ok = js_callfunctionname(cx, target, "
onclick", argv, &rval); /* now test rval to see whether we should cancel the event. */ if (rval.isboolean() && !rval.toboolean()) cancelevent(event); again, i've elided error checking (such as testing for !ok after the call), and i've faked up some c event management routines that emulate the dom's convention of canceling an event if its handl...
JSAPI User Guide
make life easier when using spidermonkey and jsapi. what spidermonkey does the javascript engine compiles and executes scripts containing javascript statements and functions. the engine handles memory allocation for the objects needed to execute scripts, and it cleans up—garbage collects—objects it no longer needs. the word javascript may bring to mind features such as event handlers (like
onclick), dom objects, window.open, and xmlhttprequest. but in mozilla, all of these features are actually provided by other components, not the spidermonkey engine itself. spidermonkey provides a few core javascript data types—numbers, strings, arrays, objects, and so on—and a few methods, such as array.push. it also makes it easy for each application to expose some of its own objects and functions ...
Packaging WebLock
ets called when the user clicks the hyperlink. <!doctype html> <html> <title>weblock installation</title> <script> /* * trigger function that downloads the xpi so the * install.js file inside can be read and executed */ function installweblock() { weblock_xpi = {'weblock extension': 'weblock.xpi'}; installtrigger.install(weblock_xpi); } </script> <h1>install weblock</h1> <p><a href="#"
onclick="installweblock();">install weblock</a></p> </html> distributing your component once you have the component packaged properly and the necessary installation and trigger scripts, you are ready to distribute your component so others can install it in their gecko applications. in mozilla and netscape browsers, xpinstall makes this process especially easy by providing the file format (xpi) and t...
nsITaskbarPreviewButton
(firefox 3.6 / thunderbird 3.1 / fennec 1.0) you can't directly instantiate this interface. instead, you use the nsitaskbarwindowpreview.getbutton() to get the objects representing the buttons. attributes attribute type description disabled boolean if true, the button is disabled. this is not the same as visible, which indicates whether or not the button should be displayed at all. dismiss
onclick boolean if true, the array of previews should be dismissed when the button is clicked. this is false by default. hasborder boolean if true, the taskbar should draw a border around this button's image. this is true by default. image imgicontainer the icon displayed in the button. this is null by default. tooltip domstring the string displayed in the button's tooltip. by default, this is an e...
nsITaskbarWindowPreview
. window preview toolbars window previews may have a toolbar with up to seven buttons. the array of buttons may be accessed by calling getbutton(); each button is an nsitaskbarpreviewbutton object. you may customize these buttons using the attributes on that interface. user clicks on the toolbar buttons are reported to your nsitaskbarpreviewcontroller implementation's nsitaskbarpreviewcontroller.
onclick() method. method overview nsitaskbarpreviewbutton getbutton(in unsigned long index); attributes attribute type description enablecustomdrawing boolean if true, the nsitaskbarpreviewcontroller object's nsitaskbarpreviewcontroller.drawpreview() and nsitaskbarpreviewcontroller.drawthumbnail() methods will be called to dra...
XUL Overlays
thus, given the following base: ... <menu id="file-menu"> <menupopup id="menu_filepopup"> <menuitem name="new"/> <menuitem name="open"/> <menuitem name="save"/> <menuitem name="close"/> </menupopup> </menu> ... and given the following overlay: <?xml version="1.0"?> <overlay id="...
Browser Console - Firefox Developer Tools
ton'); clearbtn.addeventlistener('mouseover', function() { hud.jsterm.clearoutput(true); }, false); bonus features available for add-on sdk add-ons, the console api is available automatically. 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!",
onclick: 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: click the icon. you'll see output like this in the browser console: for add-on sdk-based add-ons only, the message is prefixed with the name o...
Attr.prefix - Web APIs
the attr.prefix read-only property returns the namespace prefix of the specified attribute, or null if no prefix is specified. before dom4 this api was defined within the node interface. syntax string = attribute.prefix examples the following logs "x" to the console. <div x:id="example"
onclick="console.log(this.attributes[0].prefix)"/> notes this will only work when a namespace-aware parser is used, i.e. when a document is served with an xml mime type. this will not work for html documents. specifications specification status comment domthe definition of 'attr: prefix' in that specification. living standard dom4the definition of 'attr.prefix' in that specification. obsolete ...
AudioBuffer.duration - Web APIs
the buffer. syntax var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); myarraybuffer.duration; value a double. ...
AudioBuffer.getChannelData() - Web APIs
.queryselector('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.
onclick = 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.
AudioBuffer.length - Web APIs
n the buffer. syntax var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); myarraybuffer.length; value an integer. ...
AudioBuffer.sampleRate - Web APIs
erate); myarraybuffer.samplerate; value a floating-point value indicating the current sample rate of the buffers data, in samples per second. ...
AudioBufferSourceNode.buffer - Web APIs
nerates a single channel containing silence (that is, every sample is 0). syntax audiobuffersourcenode.buffer = soundbuffer; value an audiobuffer which contains the data representing the sound which the node will play. example for a full working example, see this code running live, or view the source. ...
AudioBufferSourceNode.playbackRate - Web APIs
ta(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range slider control play.
onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } stop.
onclick = function() { source.stop(0); play.removeattribute('disabled'); playbackcontrol.setattribute('disabled', 'disabled'); } playbackcontrol.oninput = function() { source.playbackrate.value = playbackcontrol.value; playbackvalue.innerhtm...
AudioContext.close() - Web APIs
diocontext. syntax var audioctx = new audiocontext(); audioctx.close().then(function() { ... }); await audioctx.close(); returns a promise that resolves with void. example the following snippet is taken from our audiocontext states demo (see it running live.) when the stop button is clicked, close() is called. when the promise resolves, the example is reset to its beginning state. stopbtn.
onclick = 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. working draft ...
AudioContext.resume() - Web APIs
e context has already been closed. 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. in each case, the text label of the button is updated as appropriate once the promise resolves. ...
AudioContext.suspend() - Web APIs
e context has already been closed. 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. in each case, the text label of the button is updated as appropriate once the promise resolves. ...
AudioParam.exponentialRampToValueAtTime() - Web APIs
to it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set its gain value to 0.5 var gainnode = audioctx.creategain(); // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination gainnode.gain.setvalueattime(0, audioctx.currenttime); source.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons to do something
onclick exprampplus.
onclick = function() { gainnode.gain.exponentialramptovalueattime(1.0, audioctx.currenttime + 2); } exprampminus.
onclick = function() { gainnode.gain.exponentialramptovalueattime(0.01, audioctx.currenttime + 2); } note: a value of 0.01 was used for the value to ramp down to in the last function rather than 0, as an invalid or illegal string error is thrown if 0 is used — the...
AudioParam.setValueAtTime() - 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 buttons to do something
onclick targetattimeplus.
onclick = function() { currgain += 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } targetattimeminus.
onclick = function() { currgain -= 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } specifications specification status comment web audio apithe definition of 'setvalueattime' in that specificati...
AudioParam.setValueCurveAtTime() - Web APIs
r 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
onclick 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.
onclick = function() { gainnode.gain.setvaluecurveattime(wavearray, audioctx.currenttime, 2); } specifications specification status comment web au...
AudioProcessingEvent - Web APIs
r.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.
onclick = 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
.queryselector('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.
onclick = 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.createDynamicsCompressor() - Web APIs
ssor.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.
onclick = 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.createGain() - Web APIs
{ audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your browser!'); } source.connect(gainnode); gainnode.connect(audioctx.destination); ... mute.
onclick = voicemute; function voicemute() { if(mute.id == "") { // 0 means mute. if you still hear something, make sure you haven't // connected your source into the output in addition to using the gainnode. gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); ...
BaseAudioContext.createScriptProcessor() - Web APIs
r.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.
onclick = 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.
onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); } stop.
onclick = function() { source.stop(0); play.removeattribute('disabled'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; new promise-based syntax ctx.decodeaudiodata(audiodata).then(function(decodeddata) { // use the decoded data here }); specifications spec...
Body.arrayBuffer() - Web APIs
function readfile(file) { return new response(file).arraybuffer(); } <input type="file" onchange="readfile(this.files[0])"> specifications specification status co...
Client.url - Web APIs
the url read-only property of the client interface returns the url of the current service worker client. syntax var clienturl = client.url; value a usvstring. ...
Clients - Web APIs
lients returned. clients.openwindow() opens a new browser window for a given url and returns a promise for the new windowclient. clients.claim() allows an active service worker to set itself as the controller for all clients within its scope. examples the following example shows an existing chat window or creates a new one when the user clicks a notification. ...
Document.characterSet - Web APIs
e header or inline like <meta charset="utf-8">, such as with firefox's view → text encoding menu. this override is provided to fix incorrect developer-specified encodings that result in garbled text. the properties document.charset and document.inputencoding are legacy aliases for document.characterset. do not use them any more. syntax var string = document.characterset; examples <button
onclick="console.log(document.characterset);"> log character encoding </button> <!-- displays document's character encoding in the dev console, such as "iso-8859-1" or "utf-8" --> specifications specification status comment domthe definition of 'characterset' in that specification. living standard initial definition. ...
Document.createTextNode() - Web APIs
ment.createtextnode(data); text is a text node. data is a string containing the data to be put in the text node. example <!doctype html> <html lang="en"> <head> <title>createtextnode example</title> <script> function addtextnode(text) { var newtext = document.createtextnode(text), p1 = document.getelementbyid("p1"); p1.appendchild(newtext); } </script> </head> <body> <button
onclick="addtextnode('yes! ');">yes!</button> <button
onclick="addtextnode('no! ');">no!</button> <button
onclick="addtextnode('we can! ');">we can!</button> <hr /> <p id="p1">first line of paragraph.</p> </body> </html> specifications specification status comment domthe definition of 'document: createtextnode' in that specification. living standard ...
Document.exitFullscreen() - Web APIs
creen(); parameters none. return value a promise which is resolved once the user agent has finished exiting full-screen mode. if an error occurs while attempting to exit full-screen mode, the catch() handler for the promise is called. 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.
onclick = 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(). specifications specification st...
Document.getElementsByTagNameNS() - Web APIs
/head> <body style="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
onclick="getallparaelems();"> show all p elements in document</button><br /> <button
onclick="div1paraelems();"> show all p elements in div1 element</button><br /> <button
onclick="div2paraelems();"> show all p elements in div2 element</button> </body> </html> potential workaround for other browsers which do not support if the desired browser did not support xpath, another approach (such as trav...
Document.hasFocus() - Web APIs
asfocus(); return value false if the active element in the document has no focus; true if the active element in the document has focus. example this example checks whether the document has focus every 300 milliseconds. to test the functionality of hasfocus(), click on the button to open a new window, and try switching between the two pages. ...
Document.onfullscreenchange - Web APIs
hether the transition is into or out of full-screen mode, so your event handler should look at the value of document.fullscreenelement. if it's null, the event indicates a transition out of full-screen mode. otherwise, the specified element is about to take over the screen. example document.onfullscreenchange = function ( event ) { console.log("full screen change") }; document.documentelement.
onclick = function () { // requestfullscreen() must be in an event handler or it will fail document.documentelement.requestfullscreen(); } specifications specification status comment fullscreen apithe definition of 'onfullscreenchange' in that specification. living standard initial definition. ...
Document.queryCommandState() - Web APIs
mmandstate() method will tell you if the current selection has a certain document.execcommand() command applied. syntax querycommandstate(string command) parameters command is a command from document.execcommand() return value querycommandstate() can return a boolean value or null if the state is unknown. ...
Document - Web APIs
aised. globaleventhandlers.oncanplay is an eventhandler representing the code to be called when the canplay event is raised. globaleventhandlers.oncanplaythrough is an eventhandler representing the code to be called when the canplaythrough event is raised. globaleventhandlers.onchange is an eventhandler representing the code to be called when the change event is raised. globaleventhandlers.
onclick is an eventhandler representing the code to be called when the click event is raised. globaleventhandlers.onclose is an eventhandler representing the code to be called when the close event is raised. globaleventhandlers.oncontextmenu is an eventhandler representing the code to be called when the contextmenu event is raised. globaleventhandlers.oncuechange is an eventhandler representing th...
DocumentOrShadowRoot.elementFromPoint() - Web APIs
ocated under the coordinates (2, 2). javascript function changecolor(newcolor) { elem = document.elementfrompoint(2, 2); elem.style.color = newcolor; } the changecolor() method simply obtains the element located at the specified point, then sets that element's current foreground color property to the color specified by the newcolor parameter. html <p id="para1">some text here</p> <button
onclick="changecolor('blue');">blue</button> <button
onclick="changecolor('red');">red</button> the html provides the paragraph whose color will be affected, as well as two buttons: one to change the color to blue, and another to change the color to red. result specifications specification status shadow domthe definition of 'elementsfrompoint()' in that specification. o...
Example - Web APIs
cond paragraph var newelement = document.createelement("p"); // put the text in the paragraph newelement.appendchild(newtext); // and put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } </script> </head> <body> <input type="button" value="change this document."
onclick="change()"> <h1>header</h1> <p>paragraph</p> </body> </head> ...
Using the W3C DOM Level 1 Core - Web APIs
to use javascript to access the document property of the global object. this document object implements the document interface from the w3c's dom level 1 spec. a simple example suppose the author wants to change the header of the above document and write two paragraphs instead of one. ...
DynamicsCompressorNode.attack - Web APIs
ssor.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.
onclick = 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...
DynamicsCompressorNode.knee - Web APIs
ssor.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.
onclick = 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...
DynamicsCompressorNode.ratio - Web APIs
ssor.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.
onclick = 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...
DynamicsCompressorNode.release - Web APIs
ssor.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.
onclick = 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...
DynamicsCompressorNode.threshold - Web APIs
ssor.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.
onclick = 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...
DynamicsCompressorNode - Web APIs
ssor.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.
onclick = 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...
Element.attributes - Web APIs
living standard from document object model (dom) level 3 core specification, moved from node to element document object model (dom) level 3 core sp...
Element.prefix - Web APIs
the element.prefix read-only property returns the namespace prefix of the specified element, or null if no prefix is specified. before dom4 this api was defined within the node interface. syntax string = element.prefix examples the following logs "x" to the console. <x:div
onclick="console.log(this.prefix)"/> notes this will only work when a namespace-aware parser is used, i.e. when a document is served with an xml mime type. this will not work for html documents. specifications specification status comment domthe definition of 'element: prefix' in that specification. living standard ...
Element.scrollLeft - Web APIs
the maximum. example html <div id="container"> <div id="content">click the button to slide right!</div> </div> <button id="slide" type="button">slide right</button> css #container { width: 100px; height: 100px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 250px; background-color: #ccc; } javascript const button = document.getelementbyid('slide'); button.
onclick = function () { document.getelementbyid('container').scrollleft += 20; }; result specifications specification status comment css object model (cssom) view modulethe definition of 'scrollleft' in that specification. working draft ...
Element: show event - Web APIs
the show event is fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute. bubbles no cancelable no interface event event handler property onshow examples <div contextmenu="test"></div> <menu type="context" id="test"> <menuitem label="alert"
onclick="alert('the alert label has been clicked')" /> </menu> <script> document.getelementbyid("test").addeventlistener("show", function(e){ alert("the context menu will be displayed"); }, false); </script> specifications specification status html5the definition of 'show event' in that specification. recommendation ...
Element - Web APIs
available via the onkeyup property. mouse events auxclick fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element. also available via the onauxclick property. click fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element. also available via the
onclick property. contextmenu fired when the user attempts to open a context menu. also available via the oncontextmenu property. dblclick fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element. also available via the ondblclick property. domactivate occurs when an element is activated, for instance, through a mouse click or a keypress. moused...
Event.cancelBubble - Web APIs
e cancelbubble property of the event interface is a historical alias to event.stoppropagation(). setting its value to true before returning from an event handler prevents propagation of the event. in later implementations, setting this to false does nothing. see browser compatibility for details. syntax event.cancelbubble = bool; var bool = event.cancelbubble; value a boolean. example elem.
onclick = function(event) { // do cool things here event.cancelbubble = true; } specifications specification status comment domthe definition of 'cancelbubble' in that specification. living standard ...
Event.eventPhase - Web APIs
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.
onclick = 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", ondivclick, true) d.removeeventlistener("click", ondivclick, false) } } } function addlisteners() { for (let i = 0; i < divs.length; i++...
EventSource.close() - Web APIs
the close() method of the eventsource interface closes the connection, if one is made, and sets the eventsource.readystate attribute to 2 (closed). note: if the connection is already closed, the method does nothing. syntax eventsource.close(); parameters none. return value void. examples var button = document.queryselector('button'); var evtsource = new eventsource('sse.php'); button.
onclick = function() { console.log('connection closed'); evtsource.close(); } note: you can find a full example on github — see simple sse demo using php. specifications specification status comment html living standardthe definition of 'close()' in that specification. living standard initial definition ...
GainNode.gain - Web APIs
{ audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your browser!'); } source.connect(gainnode); gainnode.connect(audioctx.destination); ... mute.
onclick = voicemute; function voicemute() { if(mute.id == "") { // 0 means mute. if you still hear something, make sure you haven't // connected your source into the output in addition to using the gainnode. gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); ...
GainNode - Web APIs
{ audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your browser!'); } source.connect(gainnode); gainnode.connect(audioctx.destination); ... mute.
onclick = voicemute; function voicemute() { if(mute.id == "") { // 0 means mute. if you still hear something, make sure you haven't // connected your source into the output in addition to using the gainnode. gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); ...
GlobalEventHandlers.ontransitioncancel - Web APIs
00px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends. ...
GlobalEventHandlers - Web APIs
aised. globaleventhandlers.oncanplay is an eventhandler representing the code to be called when the canplay event is raised. globaleventhandlers.oncanplaythrough is an eventhandler representing the code to be called when the canplaythrough event is raised. globaleventhandlers.onchange is an eventhandler representing the code to be called when the change event is raised. globaleventhandlers.
onclick is an eventhandler representing the code to be called when the click event is raised. globaleventhandlers.onclose is an eventhandler representing the code to be called when the close event is raised. globaleventhandlers.oncontextmenu is an eventhandler representing the code to be called when the contextmenu event is raised. globaleventhandlers.oncuechange is an eventhandler representing th...
accessKeyLabel - Web APIs
ment.accesskeylabel read-only property returns a string that represents the element's assigned access key (if any); otherwise it returns an empty string. syntax label = element.accesskeylabel example javascript var node = document.getelementbyid('btn1'); if (node.accesskeylabel) { node.title += ' [' + node.accesskeylabel + ']'; } else { node.title += ' [' + node.accesskey + ']'; } node.
onclick = function () { var p = document.createelement('p'); p.textcontent = 'clicked!'; node.parentnode.appendchild(p); }; html <button accesskey="h" title="caption" id="btn1">hover me</button> result specifications specification status comment html living standardthe definition of 'htmlelement.accesskeylabel' in that specification. living standard no cha...
HTMLElement.click() - Web APIs
hen 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()"
onclick="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. ...
HTMLFormElement - Web APIs
"/cgi-bin/some.cgi"; // add action and method attributes f.method = "post"; f.submit(); // call the form's submit() method extract information from a <form> element and set some of its attributes: <form name="forma" action="/cgi-bin/test" method="post"> <p>press "info" for form details, or "set" to change those details.</p> <p> <button type="button"
onclick="getforminfo();">info</button> <button type="button"
onclick="setforminfo(this.form);">set</button> <button type="reset">reset</button> </p> <textarea id="form-info" rows="15" cols="20"></textarea> </form> <script> function getforminfo(){ // get a reference to the form via its name var f = document.forms["forma"]; // the form properties we're interested in var properties...
HTMLInputElement.setRangeText() - Web APIs
ted text. "end" moves the selection to just after the inserted text. "preserve" attempts to preserve the selection. this is the default. example click the button in this example to replace part of the text in the text box. the newly inserted text will be highlighted (selected) afterwards. html <input type="text" id="text-box" size="30" value="this text has not been updated."> <button
onclick="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. living standard...
HTMLInputElement.setSelectionRange() - Web APIs
rection in which the selection is considered to have been performed. possible values: "forward" "backward" "none" if the direction is unknown or irrelevant. default value. 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
onclick="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. living standard no change ...
HTMLElement.blur() - Web APIs
the htmlelement.blur() method removes keyboard focus from the current element. syntax element.blur(); examples remove focus from a text input html <input type="text" id="mytext" value="sample text"> <br><br> <button type="button"
onclick="focusinput()">click me to gain focus</button> <button type="button"
onclick="blurinput()">click me to lose focus</button> javascript function focusinput() { document.getelementbyid('mytext').focus(); } function blurinput() { document.getelementbyid('mytext').blur(); } result specification specification status comment html living standardthe definition of 'blur' in that specification. living standard html 5.1the definition of 'blur' in that specification. recommendation html5the definit...
ImageCapture.grabFrame() - Web APIs
ebitmap object. example this example is extracted from this simple image capture demo. it shows how to use the promise returned by grabframe() to copy the returned frame to a <canvas> element. for simplicy it does not show how to instantiate the imagecapture object. ...
ImageCapture.takePhoto() - Web APIs
olves with a blob. example this example is extracted from this simple image capture demo. it shows how to use the promise returned by takephoto() to copy the returned blob to an <img> element. for simplicy it does not show how to instantiate the imagecapture object. ...
KeyboardEvent.metaKey - Web APIs
the ⌘ command key. on windows keyboards, this is the windows key (⊞ windows). at least as of firefox 48, the ⊞ windows key is not considered the "meta" key. keyboardevent.metakey is false when the ⊞ windows is pressed. syntax var metakeypressed = instanceofkeyboardevent.metakey return value a boolean example function ismetakey(e) { alert("metakey = " + e.metakey); } <button
onclick="ismetakey(event)">click me with the meta key</button> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.metakey' in that specification. obsolete initial definition ...
MediaDevices.getUserMedia() - Web APIs
ction(e) { video.play(); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); frame rate lower frame-rates may be desirable in some cases, like webrtc transmissions with bandwidth restrictions. var constraints = { video: { framerate: { ideal: 10, max: 15 } } }; front and back camera on mobile phones. var front = false; document.getelementbyid('flip-button').
onclick = function() { front = !front; }; var constraints = { video: { facingmode: (front? "user" : "environment") } }; specifications specification status comment media capture and streamsthe definition of 'mediadevices.getusermedia()' in that specification. candidate recommendation initial definition ...
MediaRecorder.onpause - Web APIs
iarecorder.onpause event handler (part of the mediarecorder api) handles the pause event, allowing you to run code in response to the media recording being paused. the pause event is thrown as a result of the mediarecorder.pause() method being invoked. syntax mediarecorder.onpause = function(event) { ... } mediarecorder.addeventlistener('pause', function(event) { ... }) example ... ...
MediaRecorder.onresume - Web APIs
vent handler (part of the mediarecorder api) handles the resume event, allowing you to run code in response to the media recording being resumed after pausing. the resume event is thrown as a result of the mediarecorder.resume() method being invoked. syntax mediarecorder.onresume = function(event) { ... } mediarecorder.addeventlistener('resume', function(event) { ... }) example ... ...
MediaRecorder.onstart - Web APIs
e start event, allowing you to run code in response to media recording being started by a mediarecorder. the start event is thrown as a result of the mediarecorder.start() method being invoked. at this point, the data starts being gathered into a blob. syntax mediarecorder.onstart = function(event) { ... } mediarecorder.addeventlistener('start', function(event) { ... }) example ... record.
onclick = function() { mediarecorder.start(); console.log("recorder started"); } mediarecorder.onstart = function() { // do something in response to // recording being started } ... properties none. specifications specification status comment mediastream recordingthe definition of 'mediarecorder.onstart' in that specification. working draft initia...
MediaRecorder.pause() - Web APIs
op gathering data into the current blob, but keep it available so that recording can be resumed later on. raise a pause event. syntax mediarecorder.pause() return value undefined. exceptions invalidstateerror the mediarecorder is currently "inactive"; you can't pause recording if it's not active. if you call pause() while already paused, it silently does nothing. example ... pause.
onclick = function() { mediarecorder.pause(); console.log("recording paused"); } ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.pause()' in that specification. working draft initial definition ...
MediaRecorder.requestData() - Web APIs
b is available under the event's data attribute.) create a new blob and place subsequently captured data into it. syntax mediarecorder.requestdata() errors an invalidstate error is raised if the requestdata() method is called while the mediarecorder object’s mediarecorder.state is not "recording" — the media cannot be captured if recording is not occurring. example ... capturemedia.
onclick = function() { mediarecorder.requestdata(); // makes snapshot available of data so far // ondataavailable fires, then capturing continues // in new blob } ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.requestdata()' in that specification. working draft initial definition ...
MediaRecorder.resume() - Web APIs
nue gathering data into the current blob. raise a resume event. syntax mediarecorder.resume() errors an invalidstate error is raised if the resume() method is called while the mediarecorder object’s mediarecorder.state is "inactive" — the recording cannot be resumed if it is not already paused; if mediarecorder.state is already "recording", resume() has no effect. example ... pause.
onclick = function() { if(mediarecorder.state === "recording") { mediarecorder.pause(); // recording paused } else if(mediarecorder.state === "paused") { mediarecorder.resume(); // resume recording } } ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.resume()' in that specification. wo...
MediaRecorder.start() - Web APIs
rmission to use an input device. this also happens when a mediastreamtrack within the stream is marked as isolated due to the peeridentity constraint on the source stream. this exception may also be delivered as an error event if the security options for the source media change after recording begins. unknownerror something else went wrong during the recording process. example ... record.
onclick = function() { mediarecorder.start(); console.log("recorder started"); } ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.start()' in that specification. working draft initial definition ...
MediaRecorder.state - Web APIs
one of the following values: enumeration description inactive recording is not occuring — it has either not been started yet, or it has been started and then stopped. recording recording has been started and the ua is capturing data. paused recording has been started, then paused, but not yet stopped or resumed. example ... record.
onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); // will return "recording" console.log("recorder started"); } ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.state' in that specification. working draft initial definition ...
MediaRecorder.stop() - Web APIs
ctive" and stop capturing media. raise a dataavailable event containing the blob of data that has been gathered. raise a stop event. syntax mediarecorder.stop() errors an invalidstate error is raised if the stop() method is called while the mediarecorder object’s mediarecorder.state is "inactive" — it makes no sense to stop media capture if it is already stopped. example ... stop.
onclick = function() { mediarecorder.stop(); console.log("recorder stopped, data available"); } ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.stop()' in that specification. working draft initial definition ...
MediaStreamTrack.enabled - Web APIs
input from a camera, disabling the track by setting enabled to false also updates device activity indicators to show that the camera is not currently recording or streaming. for example, the green "in use" light next to the camera in imac and macbook computers turns off while the track is muted in this way. example this example demonstrates a click event handler for a pause button. ...
MouseEvent.initMouseEvent() - Web APIs
was depressed during the event. sets the value of mouseevent.metakey. button the event's mouse button. relatedtarget the event's related eventtarget. only used with some event types (e.g., mouseover and mouseout). in other cases, pass null. ...
Navigator.productSub - Web APIs
the navigator.productsub read-only property returns the build number of the current browser. syntax prodsub = window.navigator.productsub prodsub is a string. example <script> function prodsub() { var dt = document.getelementbyid("d").childnodes[0]; dt.data = window.navigator.productsub; } </script> <button
onclick="prodsub();">productsub</button> // returns: 20010725 notes on ie, this property returns undefined. on apple safari and google chrome this property always returns 20030107. specifications specification status comment html living standardthe definition of 'navigatorid: productsub' in that specification. living standard initial definition ...
Node.cloneNode() - Web APIs
rbird 29 / seamonkey 2.26)), a shallow clone is defaulted instead of a deep clone. example let p = document.getelementbyid("para1") let p_prime = p.clonenode(true) notes cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners. it does not copy event listeners added using addeventlistener() or those assigned to element properties (e.g., node.
onclick = somefunction). additionally, for a <canvas> element, the painted image is not copied. warning: clonenode() may lead to duplicate element ids in a document! if the original node has an id attribute, and the clone will be placed in the same document, then you should modify the clone's id to be unique. name attributes may need to be modified also, depending on whether duplicate names are expec...
Node.prefix - Web APIs
when a document is served with an xml mime type. this will not work for html documents. ...
Notification.requestPermission() - Web APIs
mission(callback); parameters callback optional deprecated since gecko 46 an optional callback function that is called with the permission value. deprecated in favor of the promise return value. returns a promise that resolves to a domstring with the permission picked by the user. possible values for this string are: granted denied default examples assume this basic html: <button
onclick="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. function noti...
NotificationEvent.action - Web APIs
button, or the notification does not have a button. the notification id is set during the creation of the notification via the actions array attribute and can't be modified unless the notification is replaced. returns a domstring object. example self.registration.shownotification("new articles available", { actions: [{action: "get", title: "get now."}] }); self.addeventlistener('notificati
onclick', 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. living standard living standard. ...
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 notificati
onclick event. returns a notification object. example self.addeventlistener('notificati
onclick', function(event) { console.log('on notification click'); // data can be attached to the notification so that you // can process it in the notificati
onclick handler. console.log('notification tag:', event.notification.tag); console.log('notification data:', event.notification.data); event.notification.close(); // this ...
Using the Notifications API - Web APIs
ggered on the notification instance: click triggered when the user clicks on the notification. close triggered once the notification is closed. error triggered if something goes wrong with the notification; this is usually because the notification couldn't be displayed for some reason. show triggered when the notification is displayed to the user. these events can be tracked using the
onclick, onclose, onerror, and onshow handlers. because notification also inherits from eventtarget, it's possible to use the addeventlistener() method on it. replacing existing notifications it is usually undesirable for a user to receive a lot of notifications in a short space of time — for example, what if a messenger application notified a user for each incoming message, and they were being sent ...
Notifications API - Web APIs
using the notifications api. notifications interfaces notification defines a notification object. service worker additions serviceworkerregistration includes the serviceworkerregistration.shownotification() and serviceworkerregistration.getnotifications() method, for controlling the display of notifications. serviceworkerglobalscope includes the serviceworkerglobalscope.onnotificati
onclick handler, for firing custom functions when a notification is clicked. notificationevent a specific type of event object, based on extendableevent, which represents a notification that has fired. specifications specification status comment notifications api living standard living standard ...
OfflineAudioContext.startRendering() - Web APIs
source.start(); //source.loop = true; offlinectx.startrendering().then(function(renderedbuffer) { console.log('rendering completed successfully'); var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var song = audioctx.createbuffersource(); song.buffer = renderedbuffer; song.connect(audioctx.destination); play.
onclick = function() { song.start(); } }).catch(function(err) { console.log('rendering failed: ' + err); // note: the promise should reject when startrendering is called a second time on an offlineaudiocontext }); }); } request.send(); } // run getdata to start the process off getdata(); specifications specification status comm...
OfflineAudioContext - Web APIs
; source.buffer = mybuffer; source.connect(offlinectx.destination); source.start(); //source.loop = true; offlinectx.startrendering().then(function(renderedbuffer) { console.log('rendering completed successfully'); var song = audioctx.createbuffersource(); song.buffer = renderedbuffer; song.connect(audioctx.destination); play.
onclick = function() { song.start(); } }).catch(function(err) { console.log('rendering failed: ' + err); // note: the promise should reject when startrendering is called a second time on an offlineaudiocontext }); }); } request.send(); } // run getdata to start the process off getdata(); specifications specification status comm...
Using the Payment Request API - Web APIs
r); // the user may have turned off query ability in their privacy settings. // let's use paymentrequest by default and fallback to legacy // web form based checkout. shouldcallpaymentrequest = true; fallbacktolegacyonpaymentrequestfailure = true; }); // user has clicked on the checkout button. we know // what's in the cart, but we don't have a `checkout` object. function oncheckoutbutt
onclicked(lineitems) { callservertoretrievecheckoutdetails(lineitems); } // the server has constructed the `checkout` object. now we know // all of the prices and shipping options. function onservercheckoutdetailsretrieved(checkoutobject) { if (shouldcallpaymentrequest) { const request = new paymentrequest(supportedpaymentmethods, checkoutobject); request.show().then(function(paymentresponse...
Using the Permissions API - Web APIs
ow revoke existing permissions, using the permissions.revoke() method. this works in exactly the same way as the permissions.query() method, except that it causes an existing permission to be reverted back to its default state when the promise successfully resolves (which is usually prompt). see the following code in our demo: var revokebtn = document.queryselector('.revoke'); ... revokebtn.
onclick = function() { revokepermission(); } ... function revokepermission() { navigator.permissions.revoke({name:'geolocation'}).then(function(result) { report(result.state); }); } the revoke() function has been disabled by default starting in firefox 51, since its design has been brought into question in the web applications security working group. it can be re-enabled by setting the pr...
Pointer Lock API - Web APIs
nt browser implementations. canvas.requestpointerlock = canvas.requestpointerlock || canvas.mozrequestpointerlock; document.exitpointerlock = document.exitpointerlock || document.mozexitpointerlock; now we set up an event listener to run the requestpointerlock() method on the canvas when it is clicked, which initiates pointer lock. canvas.
onclick = function() { canvas.requestpointerlock(); } now for the dedicated pointer lock event listener: pointerlockchange. when this occurs, we run a function called lockchangealert() to handle the change. // pointer lock event listener // hook pointer lock state change events for different browsers document.addeventlistener('pointerlockchange', lockchangealert, false); document.addeventlistener('m...
Multi-touch interaction - Web APIs
rowser's default touch behavior from overriding this application's pointer handling, the touch-action property is applied to the <body> element. <body onload="init();" style="touch-action:none"> <div id="target1"> tap, hold or swipe me 1</div> <div id="target2"> tap, hold or swipe me 2</div> <div id="target3"> tap, hold or swipe me 3</div> <!-- ui for logging/debugging --> <button id="log"
onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog"
onclick="clearlog(event);">clear the log</button> <p></p> <output></output> </body> miscellaneous functions these functions support the application but aren't directly involved with the event flow. cache management these functions manage the global event caches evcache1, evcache2 and evcache3. function get_cache(...
Pinch zoom gestures - Web APIs
handling, the touch-action property is applied to the <body> element. <body onload="init();" style="touch-action:none"> <div id="target">touch and hold with 2 pointers, then pinch in or out.<br/> the background color will change to pink if the pinch is opening (zoom in) or changes to lightblue if the pinch is closing (zoom out).</div> <!-- ui for logging/debugging --> <button id="log"
onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog"
onclick="clearlog(event);">clear the log</button> <p></p> <output></output> </body> miscellaneous functions these functions support the application but aren't directly involved in the event flow. cache management this function helps manage the global event caches evcache. function remove_event(ev) { // remove th...
Using Pointer Events - Web APIs
it could, of course, also be a stylus, mouse, or other method of pointing at a location. create a canvas the touch-action property is set to none to prevent the browser from applying its default touch behavior to the application. <canvas id="canvas" width="600" height="600" style="border:solid black 1px; touch-action:none"> your browser does not support canvas element. </canvas> <br> <button
onclick="startup()">initialize</button> <br> log: <pre id="log" style="border: 1px solid #ccc;"></pre> setting up the event handlers when the page loads, the startup() function shown below should be called by our <body> element's onload attribute (but in the example we use a button to trigger it, due to limitations of the mdn live example system). function startup() { var el = document.getelementsb...
Report - Web APIs
methods this interface has no methods defined on it. events this interface has no events that fire on it. ...
ReportingObserver() - Web APIs
ash (although this last type usually isn't retrievable via a reportingobserver). buffered: a boolean that defines whether the reports that were generated before the observer was able to be created should be observable (true) or not (false). examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.
onclick = () => displayreports(reports); }, options); specifications specification status comment reporting apithe definition of 'reportingobserver()' in that specification. editor's draft ...
ReportingObserver.disconnect() - Web APIs
calling disconnect(), neither reportingobserver.takerecords() nor the records parameter of the reportingobserver() callback will return any reports. the associated observer will no longer be active. syntax reportingobserverinstance.disconnect() examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.
onclick = () => displayreports(reports); }, options); observer.observe() ... observer.disconnect() specifications specification status comment reporting apithe definition of 'reportingobserver.disconnect()' in that specification. editor's draft ...
ReportingObserver.observe() - Web APIs
the observe() method of the reportingobserver interface instructs a reporting observer to start collecting reports in its report queue. syntax reportingobserverinstance.observe() examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.
onclick = () => displayreports(reports); }, options); observer.observe() specifications specification status comment reporting apithe definition of 'reportingobserver.observe()' in that specification. editor's draft ...
ReportingObserver.takeRecords() - Web APIs
kerecords() method of the reportingobserver interface returns the current list of reports contained in the observer's report queue, and empties the queue. syntax reportingobserverinstance.takerecords() return value an array of report objects. examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.
onclick = () => displayreports(reports); }, options); observer.observe() // ... let records = observer.takerecords(); console.log(records); specifications specification status comment reporting apithe definition of 'reportingobserver.takerecords()' in that specification. editor's draft ...
ReportingObserver - Web APIs
in the observer's report queue, and empties the queue. events this interface has no events that fire on it. ...
ReportingObserverOptions - Web APIs
ected by this observer. available types include deprecation, intervention, and crash. buffered a boolean that defines whether the reports that were generated before the observer was able to be created should be observable (true) or not (false). examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.
onclick = () => displayreports(reports); }, options); specifications specification status comment reporting apithe definition of 'reportingobserveroptions' in that specification. editor's draft ...
Reporting API - Web APIs
opped running due to a browser crash. indicated by a report.body property with a crashreportbody return value. ...
SVGAElement - Web APIs
ndicating the mime type of the linked resource. methods this interface has no methods but inherits methods from its parent, svggraphicselement. 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. ...
SVGCircleElement - Web APIs
leelement.r read only this property defines the radius of the <circle> element. it is denoted by the r of the element. methods this interface has no methods but inherits methods from its parent, svggeometryelement. 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"
onclick="clickcircle();"/> </svg> javascript content this function clickcircle() is called when the circle is clicked. it randomly increases or decreases the radius of the circle element. 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 ...
SVGEllipseElement - Web APIs
ad only this property returns a svganimatedlength reflecting the ry attribute of the given <ellipse> element. methods this interface doesn't implement any specific methods, but inherits methods from its parent interface, svggeometryelement. ...
SVGTransformList - Web APIs
); // apply the transformations 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"
onclick="transformme(evt)"/> <rect x="200" y="100" width="100" height="100" fill="yellow" stroke="black" stroke-width="5"
onclick="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 vecto...
ScriptProcessorNode.bufferSize - Web APIs
tputbuffer.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.
onclick = 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 'buffersize'...
ScriptProcessorNode.onaudioprocess - Web APIs
r.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.
onclick = 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 'onaud...
ScriptProcessorNode - Web APIs
tputbuffer.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.
onclick = 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 'scriptproce...
onnotificationclose - Web APIs
(notificationevent) { ... }; serviceworkerglobalscope.addeventlistener('notificationclose', function(notificationevent) { ... }); example //inside a service worker. self.onnotificationclose = function(event) { console.log('on notification close: ', event.notification.tag); }; specifications specification status comment notifications apithe definition of 'onnotificati
onclick' in that specification. living standard initial definition. this property is specified on the notifications_api even though it's part of serviceworkerglobalscope. ...
ServiceWorkerGlobalScope - Web APIs
scope.oninstall property. message occurs when incoming messages are received. controlled pages can use the messageport.postmessage() method to send messages to service workers. the service worker can optionally send a response back via the messageport exposed in event.data.port, corresponding to the controlled page. also available via the serviceworkerglobalscope.onmessage property. notificati
onclick occurs when a user clicks on a displayed notification. also available via the serviceworkerglobalscope.onnotificati
onclick property. notificationclose occurs — when a user closes a displayed notification. also available via the serviceworkerglobalscope.onnotificationclose property. push occurs when a server push notification is received. also available via the serviceworkerglobalscope.o...
Service Worker API - Web APIs
ed during installation. navigationpreloadmanager provides methods for managing the preloading of resources with a service worker. navigator.serviceworker returns a serviceworkercontainer object, which provides access to registration, removal, upgrade, and communication with the serviceworker objects for the associated document. notificationevent the parameter passed into the onnotificati
onclick handler, the notificationevent interface represents a notification click event that is dispatched on the serviceworkerglobalscope of a serviceworker. serviceworker represents a service worker. multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same serviceworker object. serviceworkercontainer provides an object representing the service worker as an overall u...
SpeechRecognition.abort() - Web APIs
n | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.
onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.
onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status comment web speech apithe ...
SpeechRecognition.start() - Web APIs
n | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.
onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.
onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status comment web speech apithe ...
SpeechRecognition.stop() - Web APIs
n | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.
onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.
onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status comment web speech apithe ...
SpeechRecognition - Web APIs
ecognition(); 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.
onclick = 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 ...
Stylesheet.href - Web APIs
tion of the style sheet. syntax uri = stylesheet.href parameters uri is a string containing the stylesheet's uri. example // on a local machine: <html> <head> <link rel="stylesheet" href="example.css" type="text/css" /> <script> function sref() { alert(document.stylesheets[0].href); } </script> </head> <body> <div class="thunder">thunder</div> <button
onclick="sref()">ss</button> </body> </html> // returns "file:////c:/windows/desktop/example.css notes if the style sheet is a linked style sheet, the value of its attribute is its location. for inline style sheets, the value of this attribute is null. this property is read-only in firefox, opera, google chrome, and safari, and it is read/write in internet explorer. specifications speci...
StyleSheet.ownerNode - Web APIs
ernode property of the stylesheet interface returns the node that associates this style sheet with the document. this is usually an html <link> or <style> element, but can also return a processing instruction node in the case of <?xml-stylesheet ?>. syntax noderef = stylesheet.ownernode example <html lang="en"> <head> <link rel="stylesheet" href="example.css"> </head> <body> <button
onclick="alert(document.stylesheets[0].ownernode)">show example.css’s ownernode</button> </body> </html> // displays "object htmllinkelement" notes for style sheets that are included by other style sheets, such as with @import, the value of this property is null. specifications specification status comment css object model (cssom)the definition of 'stylesheet: ownernod...
Multi-touch interaction - Web APIs
olid black"; } } application ui the application uses <div> elements for the touch areas and provides buttons to enable logging and clear the log. <div id="target1"> tap, hold or swipe me 1</div> <div id="target2"> tap, hold or swipe me 2</div> <div id="target3"> tap, hold or swipe me 3</div> <div id="target4"> tap, hold or swipe me 4</div> <!-- ui for logging/bebugging --> <button id="log"
onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog"
onclick="clearlog(event);">clear the log</button> <p></p> <output></output> miscellaneous functions these functions support the application but aren't directly involved with the event flow. update background color the background color of the touch areas will change as follows: no touch is white; one touch is yellow; ...
Signaling and video calling - Web APIs
the chat client to support video calling. updating the html the html for our client needs a location for video to be presented. this requires video elements, and a button to hang up the call: <div class="flexchild" id="camera-container"> <div class="camera-box"> <video id="received_video" autoplay></video> <video id="local_video" autoplay muted></video> <button id="hangup-button"
onclick="hangupcall();" disabled> hang up </button> </div> </div> the page structure defined here is using <div> elements, giving us full control over the page layout by enabling the use of css. we'll skip layout detail in this guide, but take a look at the css on github to see how we handled it. take note of the two <video> elements, one for your self-view, one for the connection, and the <...
Window.captureEvents() - Web APIs
k, 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. example <!doctype html> <html lang="en"> <head> <!-- ... ...
Window.defaultStatus - Web APIs
ers, its use is discouraged since it could be removed at any time. try to avoid using it. summary gets/sets the status bar text for the given window. syntax var smsg = window.defaultstatus; window.defaultstatus = smsg; parameters smsg is a string containing the text to be displayed by default in the statusbar. example <html> <body onload="window.defaultstatus='hello!';"/> <button
onclick="window.confirm('are you sure you want to quit?');">confirm</button> </body> </html> notes to set the status once the window has been opened, use window.status. specification html5 ...
Window.find() - Web APIs
true, specifies a whole word search. this is not implemented; see bug 481513. asearchinframes boolean. if true, specifies a search in frames. returns true if the string is found; otherwise, false. example javascript findstring = function findtext(text) { alert("string \x22" + text + "\x22 found? " + window.find(text)); } html <p>apples, bananas, and oranges.</p> <button type="button"
onclick='findstring("apples")'>search for apples</button> <button type="button"
onclick='findstring("banana")'>search for banana</button> <button type="button"
onclick='findstring("orange")'>search for orange</button> result notes in some browsers, window.find() selects (highlights) the found content on the site. specification this is not part of any specification. ...
Window.scroll() - Web APIs
rd, y-coord) window.scroll(options) parameters x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left. y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left. - or - options is a scrolltooptions dictionary. examples <!-- put the 100th vertical pixel at the top of the window --> <button
onclick="scroll(0, 100);">click to scroll down 100 pixels</button> using options: window.scroll({ top: 100, left: 100, behavior: 'smooth' }); notes window.scrollto() is effectively the same as this method. for relative scrolling, see window.scrollby(), window.scrollbylines(), and window.scrollbypages(). for scrolling elements, see element.scrolltop and element.scrollleft. specification ...
Window.scrollByLines() - Web APIs
the window.scrollbylines() method scrolls the document by the specified number of lines. syntax window.scrollbylines(lines) parameters lines is the number of lines to scroll the document by. it may be a positive or negative integer. example <!-- scroll up the document by 5 lines --> <button id="scroll-up"
onclick="scrollbylines(-5);">up 5 lines</button> <!-- scroll down the document by 5 lines --> <button id="scroll-down"
onclick="scrollbylines(5);">down 5 lines</button> specification this is not part of any specification. ...
Window - Web APIs
eventhandlers.onbeforeprint called when the print dialog box is opened. see beforeprint event. windoweventhandlers.onbeforeunload an event handler property for before-unload events on the window. globaleventhandlers.onblur called after the window loses focus, such as due to a popup. globaleventhandlers.onchange an event handler property for change events on the window. globaleventhandlers.
onclick called after the any mouse button is pressed & released globaleventhandlers.ondblclick called when a double click is made with any mouse button. globaleventhandlers.onclose called after the window is closed globaleventhandlers.oncontextmenu called when the right mouse button is pressed globaleventhandlers.onerror called when a resource fails to load or when an error occurs at runtime. se...
WindowClient.focus() - Web APIs
the windowclient interface gives user input focus to the current client and returns a promise that resolves to the existing windowclient. syntax windowclient.focus().then(function(windowclient) { // do something with your windowclient once it has been focused }); parameters none. return value a promise that resolves to the existing windowclient. ...
WindowClient.focused - Web APIs
the focused read-only property of the windowclient interface is a boolean that indicates whether the current client has focus. syntax var myfocused = windowclient.focused; value a boolean. ...
WindowClient - Web APIs
ontrolled client page. properties windowclient inherits properties from its parent interface, client. windowclient.focused read only a boolean that indicates whether the current client has focus. windowclient.visibilitystate read only indicates the visibility of the current client. this value can be one of "hidden", "visible", or "prerender". ...
WindowOrWorkerGlobalScope.clearTimeout() - Web APIs
specifications specification status comment html living standardthe definition of 'windoworworkerglobalscope.cleartimeout()' in that specification. living standard method moved to the windoworworkerglobalscope mixin in the latest spec...
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
ls of ids. example the following example sets up two simple buttons in a web page and hooks them to the settimeout() and cleartimeout() routines. pressing the first button will set a timeout which calls an alert dialog after two seconds and stores the timeout id for use by cleartimeout(). you may optionally cancel this timeout by pressing on the second button. html <p>live example</p> <button
onclick="delayedalert();">show an alert box after two seconds</button> <p></p> <button
onclick="clearalert();">cancel alert before it happens</button> javascript var timeoutid; function delayedalert() { timeoutid = window.settimeout(window.alert, 2*1000, 'that was really slow!'); } function clearalert() { window.cleartimeout(timeoutid); } result see also cleartimeout() example. polyfill i...
msCapsLockWarningOff - Web APIs
document.mscapslockwarningoff = true; document.getelementbyid("caps").innerhtml = "warning off"; } else { document.mscapslockwarningoff = false; document.getelementbyid("caps").innerhtml = "warning on"; } } </script> </head> <body> <label>type a password: <input type="password" /></label><br /> <button id="caps"
onclick="capsoff();">warning off</button> </body> </html> ...
msthumbnailclick - Web APIs
ckhandler); 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('msthumbnailclick', onbutt
onclicked, 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 onbutt
onclicked(e) { switch (e.buttonid) { case btnplay: play(); break;} } see also microsoft api extensions ...
Using the aria-describedby attribute - Accessibility
the game schedule for the boston red sox. </p> <div role="grid"> ... </div> </div> example 2: a close button in the example below, a link that functions as a 'close' button on a dialog is described elsewhere in the document. the aria-describedby attribute is used to associate the description with the link. <button aria-label="close" aria-describedby="descriptionclose"
onclick="mydialog.close()">x</button> ... <div id="descriptionclose">closing this window will discard any information entered and return you back to the main page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it m...
Using the aria-label attribute - Accessibility
one of those opinions and therefore not normative. examples example 1: multiple labels in the example below, a button is styled to look like a typical "close" button, with an x in the middle. since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies. <button aria-label="close"
onclick="mydialog.close()">x</button> notes the most common accessibility api mapping for a label is the accessible name property. attributes, including aria-label declarations, are ignored by most automatic translation services. used by aria roles all elements of the base markup related aria techniques using the aria-labelledby attribute compatibility tbd: add support information for c...
ARIA: timer role - Accessibility
s, stop watches and countdowns, such as ticketing websites, e-commerce sites, and event countdowns (see https://countingdownto.com/). as an illustration of aria-atomic, consider a site with a simple clock, showing hours and minutes. the clock is updated each minute, with the new remaining time simply overwriting the current content. ...
ARIA: alert role - Accessibility
the element becomes visible.</p> while triggering an alert via css alone is possible, it is better to rely on javascript because it has more browser/screen reader support and is often more appropriate as part of a larger user interaction such as inside an event handler or form validation. with javascript, developers control the adding and removing of alerts as appropriate. ...
ARIA: listbox role - Accessibility
ct> element with descendant <option> elements handles all the needed interactions natively. examples example 1: a single select listbox that uses aria-activedescendant the snippet below shows how the listbox role is added directly into the html source code. ...
Keyboard-navigable JavaScript widgets - Accessibility
yling when users navigate using the arrow keys should also be used by mouse click handlers to produce the same changes. ensure that the keyboard can be used to activate element to ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. for example, to ensure that the enter key will activate an element, if you have an
onclick="dosomething()", you should bind dosomething() to the key down event as well: onkeydown="return event.keycode != 13 || dosomething();". always draw the focus for tabindex="-1" items and elements that receive focus programatically ie will not automatically draw the focus outline for items that programatically receive focus. choose between changing the background color via something like this.sty...
Keyboard - Accessibility
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
onclick event handler defined. you can make it focusable by adding a tabindex=0 attribute value to it. you can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events. see also tabindex global html attribute global event handlers: onkeydown global event handlers: onkeyup interactive ele...
Border-image generator - CSS: Cascading Style Sheets
'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.
onclick = this.toggle.bind(this); list.
onclick = this.updatevalue.bind(this); document.addeventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; ...
Linear-gradient Generator - CSS: Cascading Style Sheets
'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.
onclick = this.toggle.bind(this); list.
onclick = this.updatevalue.bind(this); document.addeventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; ...
Event reference
mouseevent dom l3 a pointing device is moved onto the element that has the listener attached or onto one of its children. mouseup mouseevent dom l3 a pointing device button is released over an element. nomatch speechrecognitionevent web speech api the speech recognition service returns a final result with no significant recognition. notificati
onclick notificationevent notifications apithe definition of 'onnotificati
onclick' in that specification. a system notification spawned by serviceworkerregistration.shownotification() has been clicked. offline event html5 offline the browser has lost access to the network. online event html5 offline the browser has gained access to the network (but particula...
Overview of events and handlers - Developer guides
this code relies on the agreement that there is a kind of event called 'click' which will call any listener (or 'handler') function with an event object argument (actually, in this case a derivative mouseevent object) and which will be fired by html button elements after user interaction. the code has no v...
<a>: The Anchor element - HTML: Hypertext Markup Language
f="/products">here</a>. </p> strong link text luckily, this is an easy fix, and it’s actually shorter than the inaccessible version! <p> learn more <a href="/products">about our products</a>. </p> assistive software have shortcuts to list all links on a page. however, strong link text benefits all users — the “list all links” shortcut emulates how sighted users quickly scan pages.
onclick events anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events . these bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when javascript is loading, errors, or is disabled. they also convey incorrect semant...
<command>: The HTML Command element - HTML: Hypertext Markup Language
indicates the kind of command. this can be one of three values. command or empty which is the default state and indicates that this is a normal command. checkbox indicates that the command can be toggled using a checkbox. radio indicates that the command can be toggled using a radio button. examples <command type="command" label="save" icon="icons/save.png"
onclick="save()"> specifications specification status comment html5the definition of '<command>' in that specification. recommendation ...
<input type="password"> - HTML: Hypertext Markup Language
" inputmode="numeric" minlength="4" maxlength="8" size="8"> selecting text as with other textual entry controls, you can use the select() method to select all the text in the password field. html <label for="userpassword">password: </label> <input id="userpassword" type="password" size="12"> <button id="selectall">select all</button> javascript document.getelementbyid("selectall").
onclick = function() { document.getelementbyid("userpassword").select(); } result you can also use selectionstart and selectionend to get (or set) what range of characters in the control are currently selected, and selectiondirection to know which direction selection occurred in (or will be extended in, depending on your platform; see its documentation for an explanation). however, given that the t...
<menuitem> - HTML: Hypertext Markup Language
ght-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>checkbox</menuitem> <hr> <menuitem type="command" label="this command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> commands don't render their contents. </menuitem> <menuitem type="command" label="this command has javascript"
onclick="alert('command clicked')"> commands don't render their contents. </menuitem> <hr> <menuitem type="radio" radiogroup="group1">radio button 1</menuitem> <menuitem type="radio" radiogroup="group1">radio button 2</menuitem> </menu> css content div { width: 300px; height: 80px; background-color: lightgreen; } result specifications specification status comment...
data-* - HTML: Hypertext Markup Language
* attributes, even ordinary html elements can become rather complex and powerful program-objects. for example, a space-ship "sprite" in a game could be a simple <img> element with a class attribute and several data-* attributes: <img class="spaceship cruiserx3" src="shipx3.png" data-ship-id="324" data-weapons="laseri laserii" data-shields="72%" data-x="414354" data-y="85160" data-z="31940"
onclick="spaceships[this.dataset.shipid].blasted()"> for a more in-depth tutorial about using html data attributes, see using data attributes. specifications specification status comment html living standardthe definition of 'data-*' in that specification. living standard no change from latest snapshot, html 5.1 html 5.1the definition of 'data-*' in that spe...
Global attributes - HTML: Hypertext Markup Language
tml global attributes, the following global attributes also exist: xml:lang and xml:base — these are inherited from the xhtml specifications and deprecated, but kept for compatibility purposes. the multiple aria-* attributes, used for improving accessibility. ...
CSP: script-src-attr - HTTP
csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the script-src directive, and if both of them are absent, fallback to default-src directive. ...
CSP: script-src-elem - HTTP
csp version 3 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the script-src directive, and if both of them are absent, fallback to default-src directive. ...
Index - HTTP
nting popups, preventing the execution of plugins and scripts, and enforcing a same-origin policy. 47 csp: script-src csp, directive, http, reference, security the http content-security-policy (csp) script-src directive specifies valid sources for javascript. this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers (
onclick) and xslt stylesheets which can trigger script execution. 48 csp: style-src csp, directive, http, reference, security the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets. 49 csp: upgrade-insecure-requests csp, directive, http, reference, security the http content-security-policy (csp) upgrade-insecure-request...
Closures - JavaScript
on() { document.body.style.fontsize = size + 'px'; }; } var size12 = makesizer(12); var size14 = makesizer(14); var size16 = makesizer(16); size12, size14, and size16 are now functions that resize the body text to 12, 14, and 16 pixels, respectively. you can attach them to buttons (in this case hyperlinks) as demonstrated in the following code example. document.getelementbyid('size-12').
onclick = size12; document.getelementbyid('size-14').
onclick = size14; document.getelementbyid('size-16').
onclick = size16; <a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a> <a href="#" id="size-16">16</a> run the code using jsfiddle. emulating private methods with closures languages such as java allow you to declare methods as private, meaning that they can be called only by other me...
Regular expressions - JavaScript
e digits \d{3}, followed by the remembered match of a dash, forward slash, or decimal point \1, followed by four digits \d{4}. the change event activated when the user presses enter sets the value of regexp.input. html <p> enter your phone number (with area code) and then click "check". <br> the expected format is like ###-###-####. ...
eval() - JavaScript
ions instead of evaluating snippets of code javascript has first-class functions, which means you can pass functions as arguments to other apis, store them in variables and objects' properties, and so on. many dom apis are designed with this in mind, so you can (and should) write: // instead of settimeout(" ... ", 1000) use: settimeout(function() { ... }, 1000); // instead of elt.setattribute("
onclick", "...") use: elt.addeventlistener('click', function() { ... } , false); closures are also helpful as a way to create parameterized functions without concatenating strings. parsing json (converting strings to javascript objects) if the string you're calling eval() on contains data (for example, an array: "[1, 2, 3]"), as opposed to code, you should consider switching to json, which allows the...
void operator - JavaScript
introduce a short-hand braceless syntax that returns an expression. this can cause unintended side effects by returning the result of a function call that previously returned nothing. to be safe, when the return value of a function is not intended to be used, it can be passed to the void operator to ensure that (for example) changing apis do not cause arrow functions' behaviors to change. button.
onclick = () => void dosomething(); this ensures the return value of dosomething changing from undefined to true will not change the behavior of this code. specifications specification ecmascript (ecma-262)the definition of 'the void operator' in that specification. ...
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
get" style="background:lime;"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing <b class="target">elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b> ut enim ad minim veniam. ...
requiredFeatures - SVG: Scalable Vector Graphics
<feimage>, <femerge>, <femergenode>, <feoffset>, <fetile>, <fefuncr>, <fefuncg>, <fefuncb> and <fefunca> elements http://www.w3.org/tr/svg11/feature#documenteventsattribute the browser supports the onunload, onabort, onerror, onresize, onscroll and onzoom attributes http://www.w3.org/tr/svg11/feature#graphicaleventsattribute the browser supports the onfocusin, onfocusout, onactivate,
onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout and onload attributes http://www.w3.org/tr/svg11/feature#animationeventsattribute the browser supports the onbegin, onend, onrepeat and onload attributes http://www.w3.org/tr/svg11/feature#cursor the browser supports the <cursor> element http://www.w3.org/tr/svg11/feature#hyperlinking the browser supports the <a> elem...
SVG Attribute reference - SVG: Scalable Vector Graphics
fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange,
onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, ...
SVG documentation index - SVG: Scalable Vector Graphics
tribute defines the blending mode on the <feblend> filter primitive. 143 name deprecated, svg, svg attribute the name attribute specifies either the name of a color profile or a font face. 144 numoctaves filters, svg, svg attribute the numoctaves attribute defines the number of octaves for the noise function of the <feturbulence> primitive. 145
onclick svg, svg attribute, events the
onclick attribute specifies some script to run when the element is clicked. 146 opacity svg, svg attribute the opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid. 147 operator filters, needscompattable, svg, svg at...
Linking - SVG: Scalable Vector Graphics
be fixed in firefox 2.0.) anyway, the resultant behavior in moz svg is that page2.html will be loaded into the frame where the svg button was (i.e. you would now have page2.html embedded inside a 100x50 pixel frame inside page1.html). 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
onclick="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. ...
SVG In HTML Introduction - SVG: Scalable Vector Graphics
entbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <legend>html form</legend> <p><label>enter something:</label> <input type="text"> <span id="err">incorrect value!</span></p> <p><input type="button" value="activate!"
onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </lineargradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> ...