FAQ Database Discussion Community


Bind multiple events in javascript

javascript,html,javascript-events
I tried the following to change a span to red on mouseover and black on mouseout: <span onmouseover="this.style.color='red' onmouseout=this.style.color='black'">Mouse over me!</span> but it does not work! How can I bind more than one event to a single element using javascript?...

Uncaught SyntaxError: Unexpected token with mouseover event in D3 Treemap

javascript,d3.js,javascript-events,mouseover,treemap
I am working on putting together a zoomable treemap using D3. I'm starting with basic code at https://gist.github.com/vibster/3257874. I'm including the git for the whole code, but will include the relevant section below. To the cell variable, I am adding a mouse over function from this previous answer: Zoomable treemap...

Javascript override form onsubmit event not working

javascript,forms,javascript-events
I am overriding a form submit event like this: form.onsubmit = function(event) { event.preventDefault(); But when I call submit on the form like this in a separate function: form.submit(); The onsubmit function is not called and the and the form is posted as usual. Any thoughts? Edit: I am also...

Setting the onclick event to a custom function results in syntax error

javascript,javascript-events,onclick
Given the following example code I want to set the onclick event to a function which I declare in the same method (no function in global scope): <HTML> <HEAD> <Title>Title</Title> </HEAD> <body> <img id="img" class="std" src="http://www.free-animated-pictures.com/bug_crawls_on_screen.gif"/> <script type='text/javascript'> var i = document.getElementById("img"); var func = function(){ var i = document.getElementById("img");...

Invoke marshalled COM interface multiple times

javascript,javascript-events,com,event-handling,activex
I am writing a COM object for JavaScript consumption. JavaScript code is turn runs in an hosted WebBrowserControl. I need to fire some events from COM object to JavaScript, the excellent guide to which at Dr. Dobbs e.g. I have following in my *.idl IJSCallback { void Listen(IDispatch* pJSMethod); }...

Getting the target of the current bubbling phase when using event delegation

javascript,jquery,javascript-events,event-delegation
I have a div that contains some buttons and I want to attach an event listener to the div that listens for events that bubble up from the buttons inside of it. The problem I am running into is that the value of event.currentTarget does not appear to match what...

Why are two click events registered in this html/css/jquery

javascript,jquery,html,css,javascript-events
I am trying to style a checkbox list. I've added my styles and they appear correctly when rendered. I want to add a class when the label for the checkbox is clicked. This is my markup and here is the same in a jsfiddle. You can see from my fiddle...

WebApp doesn't recognize that an input field was changed when set with jQuery in PhantomJS

javascript,jquery,javascript-events,phantomjs,html-input
I open telegram with PhantomJS and try to fill phone number input with evaluate page like below: page.evaluate(function(){ $("input[name='phone_number']").val("123456789"); }); When PhantomJS clicks on next button with jQuery the alert massage says "tel input is empty" but when the page is rendered we can see numbers in the input field....

How is the “e” parameter assigned to the event?

javascript,javascript-events
I can see a few threads around the e parameter but there is one thing I can't fully understand, though I'm sure it's an obvious answer. When the e parameter is passed into a function that's called from addEventListener() the e looks to be assigned to the event object. What...

Jquery Click event dosen't fire on paranet div that has same size as descendent img?

jquery,javascript-events,event-handling
The HTML code is as below (the img fits to the div parent) : <div id='draggable_task' style='display: inline-block; position: relative; overflow: hidden'> <img src='../Content/BPMN Icons/Big Icons/BigTask.png' /> <p style='position: absolute; top: 20%; left:20%;'>Task name</p> </div> The JavaScript code is as below (DrawArea is the top container): $("#DrawArea").on("click", function (e) {...

Why am I getting an uncaught type error with the following code?

javascript,javascript-events
The purpose of this code is to have 3 divs that change color when clicked and when the two colors in divs on the left make up the one on the right the user receives a positive message either on the console or the DOM. I thought I had this...

Why isn't my Google Tag Manager event listener being installed?

javascript-events,google-analytics,google-tag-manager
I have a very simple Google Tag Manager trigger that looks like this: I also have a corresponding tag that uses this trigger. I have published my container, and the tag shows up when previewing/debugging the container: I also see my link's id in the response from GTM. However, I...

Keydown and keypress events gives different keyCode

javascript,javascript-events,keypress,keydown,keycode
I've read through related answers and articles on SO, but still doesn't get it : On chrome console if I add two listeners to output keyCode on keypress and keydown events I get different keycode when the key is lowercase. When uppercase however, the keyCode appears to be the same...

On condition fire all events, else fire none

javascript,jquery,javascript-events
I am working on top of existing javascript (that I can not alter) and need to check something on submit. If my condition is true, no other submit handlers should be applied. If my condition is false, all other submit handlers shall be applied. What I have tried so far:...

How to prevent my jQuery textarea Focus event from firing repeatedly for ulimted times in a row

javascript,jquery,javascript-events
I have something like the basic JavaScript jQuery code below that is only called once in my project code however it alerts 100+ times when my textarea attached to the event is focused by clicking my mouse cursor into it! projectTaskModal.cache.$cmtTextarea.on('focus', function() { alert('ON FOCUS EVENT'); }); My goal is...

Why is 'event' available globally in Chrome but not FF?

javascript,jquery,javascript-events,event-handling,global
While working on an answer for another question, a strange bug came up related to the event object being available in an anonymous function without being passed in. In Chrome the below works fine, but FF throws an error. $(document).ready(function() { $("#uspsSideboxTrackingClose").click(function() { event.preventDefault(); console.log(event); }); }); Chrome: FireFox: ReferenceError:...

How can get custom attribute value in meteor?

javascript,checkbox,meteor,javascript-events
How can get the value of "key" attribute which is checked??? Html Code: <input type="checkbox" class="each-tab-1" key="some1" value="456"> <input type="checkbox" class="each-tab-1" key="some1" value="789"> <input type="checkbox" class="each-tab-1" key="some2" value="890"> <input type="checkbox" class="each-tab-1" key="some2" value="901"> <input type="checkbox" class="each-tab-1" key="some1" value="012"> JS code: 'click .action' : function(event, template){ $("input[class^=each]:checked").each(function(){...

ext.net button click direct events

asp.net,extjs,javascript-events,ext.net,gridpanel
I have a big form with many fieldsets and gridpanels and I need to submit all data with one confirm button. Actually I'm using this: <ext:Button runat="server" Text="Finalizar" Width="150" ID="Button1" Disabled="true"> <DirectEvents> <Click OnEvent="SalvarDados" After="#{StoreVerifLimpeza}.sync();"> <Confirmation ConfirmRequest="true" Title="Confirmação" Message="Confirm?" /> <EventMask ShowMask="true" Msg="Salvando..." /> </Click> </DirectEvents> </ext:Button> But apparently the...

Loading google maps marker on button click using geolocation

javascript,html,google-maps,button,javascript-events
My code should define the geolocation of the user and assign it the value pos. I then want to use this value of pos to create a marker upon a button click. However, I do not get a point being plotted. Both position and map are global variables that have...

tinymce - update plugin property after editor initialization

javascript,javascript-events,tinymce,tinymce-4
I need to update the colors list after init (or even on init), the plugins is textcolor. I'm using tinyMCE 4.1.9. How can I do that?

JavaScript events and bubbling

javascript,javascript-events,event-bubbling
I have the following (simplified) markup code: <div id="container"> <div data-value="1"> <span>Click me 1</span> </div> <div data-value="2"> <span>Click me 2</span> </div> </div> <div id="messages"></div> I want to take advantage of bubbling by attaching an event listener only on the #container, and get the clicked children's data-value. document.getElementById('container').addEventListener('click', function(e){ document.getElementById('messages').innerHTML =...

Javascript onpaste event of everytext box value should be split and paste in corresponding textbox

javascript,javascript-events
Strictly no jquery please I have text 1234ABC984IK4H2J and I have four text box onpaste i need text to split and copied in remaining text box Purely in javascript no jquery as my application doesn't support jquery and IE>8 functions so no function supports like querySelectorAll and addEventlistener HTML <td><input...

jQuery selector precedence when using pattern matching

javascript,jquery,javascript-events,jquery-selectors,event-handling
I am creating a form that implements a bunch of similar elements. They are custom select boxes, created out of <ul>s. Some of these elements are slightly different in the way I want the mousedown event to be handled though. The way I have it set up currently is that,...

Conditionally include script for browsers

javascript,jquery,javascript-events,reference,conditional-statements
I have such kind of script code setTimeout(function () { $('.grayscale .inactive img').each(function () { $(this).wrap('<div style="display:inline-block;width:' + this.width + 'px;height:' + this.height + 'px;">').clone().addClass('gotcolors').css({ 'position': 'absolute', 'opacity': 0 }).insertBefore(this); this.src = grayscale(this.src); }).animate({opacity: 1}, 500); $(".grayscale li").hover(function () { $(this).find('.gotcolors').stop().animate({opacity: 1}, 200); }, function () {...

Onclick event triggering onload for button

javascript,jquery,html,javascript-events
I have a div, and I want to append a button created with JS to it, with JS defining the ID, onclick, as well as the text. Everything works fine, except for the onclick event triggers on page load instead of when clicked. When inspected, there isn't even a onclick...

Is there an event for onclick end?

javascript,jquery,html5,javascript-events,onclick
I have a code in which should only be executed after an onclick event. On mobile devices its fine because I use touchstart and touchend. Is there an event similar to touchend for use on a computer? My code currently looks similar to.. document.getElementById('trigger-box').addEventListener(function(e) { // the event will be...

jQuery event for HTML5 datalist when item is selected or typed input match with item in the list

javascript,jquery,html5,javascript-events
I have datalist like below - <input id="name" list="allNames" /> <datalist id="allNames"> <option value="Adnan1"/> <option value="Faizan2"/> </datalist> What I want is, when an item is typed in completely(for example say in input box when user completely type "Adnan1") or selected from list, then I want an event. I tried couple...

Add payload to vanilla JavaScript Event

javascript,jquery,javascript-events
Is there a way to add payload to vanilla JavaScript event like you can do in jQuery? // jQuery $(document).trigger('event', payload); // Vanilla JS window.dispatchEvent(new Event('event', ??? I guess I have to use my own Event Bus of some kind?...

Move a button created dynamically JavaScript

javascript,javascript-events
I am a very beginner! I've dynamically created a random number of buttons. After creation, I want them to automatically start moving. From some reason or another, my code creates the buttons, but doesn't make them move. Thanks a lot! javascript.js function myFunction() { for (i = 1; i<=Math.random() *...

How to run a Javascript function everytime f5 is used to refresh the page

javascript,jquery,javascript-events,onload-event
The following code works for the first time that the page is loaded but when the page is refreshed using F5, it does not work on firefox. In chrome it works fine. $(document).ready(function() { $("iframe").each(function() { // Using closures to capture each one var iframe = $(this); iframe.on("load", function() {...

Basic Calculator - event binding using pure javascript

javascript,javascript-events
I am completely new to the Javascript .When I am looking to get the value to the button its get failed.I already given the setEvent.Like getEle(); And also bind the click function, Now i want to get the input values and perform mathematical calculations. <!DOCTYPE html> <html> <head> <title>Simple Calculator</title>...

Create a custom event for a Polymer Custom-Element

javascript,javascript-events,polymer
I've been trying to create an event to be triggered given certain conditional (more general case), but I have not found a way, at least not in the official documentation of Polymer for handling events https://www.polymer-project.org/0.5/articles/communication.html The custom element listen to another event, so he expects a condition is met...

Constantly check the length of an element and perform an action if it is ever 1

javascript,jquery,events,javascript-events,google-chrome-extension
I have an element on a page that I am constantly monitoring. If at any time that length is equal to 1, it means it exists on the page (the user has logged out) and I want to prompt them with a popup to login. So at the moment I...

When should I use multiple event names vs different event emitters?

javascript,node.js,javascript-events
Which is the better way to use events? A) var doorBell = new events.EventEmitter() var light = new events.EventEmitter() doorBell.emit('open') light.emit('on') doorBell.on('open', function(){ console.log('The door is open!'); }); light.on('on', function(){ console.log('The lights are on'); }); B) var house = new events.EventEmitter() house.emit('doorOpen') house.emit('lightOn') house.on('doorOpen', function(){ console.log('The door is open!'); });...

In iframe how to “unwrap” span tags

javascript,jquery,jquery-ui,javascript-events
how to unwrap span tags within Iframe. <span id="trans001" class="newtext">Directional</span> i tried to remove using this $('iframe').contents().find(".newtext").unwrap(); If remove() means it works but content also removed. i want to retain text. Thanks in advance....

Fire event when images in generated content are loaded

javascript,html,javascript-events,dom-events
I've got a problem with some Javascript-generated content : I use the onload() event of my html page to load HTML code from a server and inject it in the page. Since it already is html I use the innerHtml property of the nodes I want to fill with content....

using jQuery's delegated event on() within every turbolinks page:load

jquery,ruby-on-rails,ruby-on-rails-4,javascript-events,turbolinks
I had this code in my rails app: $(document).ready( function() { myCustomFunction("#link-selector"); } function myCustomFunction(linkCssSelector){ // some stuff... $(document).on('click', linkCssSelector, function(){ // ...some other stuff... }); } The click event handling is already delegated to the document, but now I have to add Turbolinks to my app. Then, I would...

Can a conditional-And operator(&&) contain more than 2 operands?

javascript,html,events,javascript-events
I asked a question in regards to this code earlier and it works to a degree after I changed it to reflect the answer but there is a bug that only really you to match red with red or blue with blue or green with green. I know that the...

Using javascript or jquery to auto populate the current time

javascript,jquery,html5,javascript-events
I am trying to use javascript and/or jquery to auto populate the time in an type time field; not the date. It auto populates fine. However, i am trying to have it auto populate the current time rather than a specified time. (e.g."17:40:11") How do I get the current time...

How to handle “click” event even if element is moved from beneath the cursor between mousedown and mouseup?

javascript,jquery,html,javascript-events
I have an <input> and a <button>. The input has an onblur event handler that (sometimes) results in the <button> being moved; if, with focus on the <input>, the user goes to click on the <button> (and it is thereby moved from beneath the pointer before the click completes) they...

How to reset the complete document after opening it?

javascript,pdf,javascript-events,reset,acrobat
i want to reset the complete form after opening it. I have tried this: page.open = this.resetForm(); But it doesn't work. Im using Acrobat Pro DC....

EventTarget.addEventListener()'s useCapture argument use?

javascript,javascript-events
I am studying the vanilla JavaScript and I have some trouble understanding what is the use of this useCapture argument in the EventTarget.addEventListener() function. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener useCapture Optional If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched...

Why is my node event callback showing up in the event as undefined?

javascript,node.js,url,javascript-events
I am trying to pass back a url string as "data" into my eventhandler. My request to the server is "https://172.20.10.6/index.html". The console.log below prints out "/index.html" as I expect. switch(req.method) { case 'GET': console.log("logged from plugin-https.js: url: " + req.url); ee.emit("dataIn", req.url); break; Below is the eventHandler code. The...

Can't Add Up Radio Button Values with jQuery

javascript,jquery,html5,jquery-mobile,javascript-events
I'm trying to add up all the values of the radio buttons selected on Submit button press. It sometimes changes the 0 to a 200, but it isn't adding correctly. I'm not quite sure what is going on with this one, since the total amount sometimes changes, but isn't accurate....

Using values from a Datalist to populate a input field

javascript,javascript-events
I am trying to populate an input field based off of a datalist selection. So if a person chooses the name jimmy.johns, the input field should populate with 5555555555. Here's my code. <html> <head> <title>Countdown</title> <input name="customer" list="customer" /> <datalist id="customer"> </datalist> <br> <br> <input id = "phone" name ="phone"...

Javascript function called with button onclick, fails with onload

javascript,html,javascript-events
I am trying to use an external javascript function in the body tag : <!DOCTYPE html> <script type="text/javascript" src="js/Long.min.js"></script> <script type="text/javascript" src="js/ByteBufferAB.min.js"></script> <script type="text/javascript" src="js/ProtoBuf.min.js"></script> <script type="text/javascript" src="js/fs.js"></script> <script type="text/javascript" src="js/bundle.js"></script> <script type="text/javascript"...

Track Links Using Events - Race Conditions

javascript,angularjs,javascript-events,google-analytics,adobe-analytics
I am building AngularJS applications which have common header with links to each of the application: <a href="https://app1.company.com">App1</a> <a href="https://app2.company.com">App2</a> Each application is running on its own subdomain and when user clicks a link on the header - page redirects to that application. I have to track user actions with...

dynamically added event handler disables the previous one in Javascript

javascript,javascript-events,event-handling
I am creating buttons dynamically in Javascript. Also adding dynamically an eventhandler to each button. For the last button it works but the previous ones simply are not working any longer. Here's my small piece of code. What do I do wrong? <html> <head> <script> var id = 0; function...

Identify select option change (change, onchange, click) event through JavaScript or jQuery

javascript,jquery,javascript-events,jquery-events
Is there any way to know when the select option is changed through event other than onchange in the select? For example, through jQuery. $('select').val('2'); $('#someButton').click(function() { $('select').val('2');}); Meaning that if I change the select value by click on the button, I may be prompted a message. But when I...

How can fetch the text from html tag in meteor template event?

jquery,templates,javascript-events,meteor,meteor-helper
How can I get "option 1" from below code: <template name="MyTemplate"> <div class="dropdown"> <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#" aria-expanded="false"> <button type="button" class="btn btn-sm btn-primary">Add</button> </a> <div class="dropdown-menu dropdown-alerts"> <form method="post" id="some-form" data-remote="true" accept-charset="UTF-8"> <div class="form-group"> <label>Select Option</label> <div class="input-group">...

Why does the form submit event fire when I have stopped propagation at the submit button level?

javascript,jquery,forms,events,javascript-events
HTML <form> <input type='text'> <button type='submit'>Submit</button> </form> JavaScript $('form').on('submit', function(e) { alert('submit'); e.preventDefault(); }); $('button').on('click', function(e) { e.stopPropagation(); alert('clicked'); }); Fiddle After watching the great video here, I understand that when I click the submit button, the event bubbles up to the form, and the form's submit event is then...

jquery fire page load event from loaded page

jquery,javascript-events,jquery-load
I'm loading a php page in a div with $("#div").load("page.php?id-blah") The page gets loaded correctly and jquery is functioning properly. In the page.php I am using the $(document).ready(function() { ...perform things.. }) call but its not fired. What event do I have to use to make `perform things run? ...

Prevent checkbox from checking itself

javascript,javascript-events,stoppropagation
I have some <li> which is styled as a button. <li class="button"> <input type="checkbox" class="checkbox" /> <span>Text</span> </li> As you can see, there is a checkbox inside the li element. I use angular to set checked property of this checkbox as we click li area. It works fine, but I...

Change the functionality of a button

javascript,jquery,html,javascript-events
Currently I have a display where I have a button START, on click of this button the timer starts and it gets replaced by 2 buttons. these 2 buttons are submit and walkaway. on the submit of each of these buttons a script is run. on the click of submit...

How do I know, via key event code, if the character just entered in a