FAQ Database Discussion Community


How do I avoid hover event to fire in iPhone and iPad?

javascript,ios,iphone,javascript-events,jquery-hover
I had added an effect on hoverEnter and hoverLeave on my Divs assuming that these events wont fire on iOS devices. But on iOS devices the hoverEnter and click event fire and the hoverEnter effect is maintained. I dont want these hover events to fire on mobile devices. What should...

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

Highcharts & jQuery: add a mark by clicking with Shift key pressed, then process on release

jquery,javascript-events,highcharts
I am working with Meteor (means jQuery ok) and Highcharts. For data analysis purposes, users need to be able to set markers between two initial markers by clicking on the chart. I want them to be able do that as long as shift key is hold down. Here the algo:...

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?

polymer on-click event inside content wont trigger?

javascript,javascript-events,polymer
I'm very new to Polymer so don't shoot me.. How do I use the 'core-icon-button' on-click event to trigger a method that is contained inside of its parent polymer-element aka 'my-component'. Below is an example of what I'm trying to achieve. You can see that there is an element called...

What WheelEvent.deltaZ refers to?

javascript,javascript-events,mousewheel
While I was working on JavaScript events, I found a troubling element on the wheel event: the deltaZ member. I understood what was deltaX as horizontal scroll (available with some devices like a touchpad) and deltaY as vertical scroll (that is what any standard wheel do) but for deltaZ, 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....

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

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

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(){...

What's the pattern for calling requestAnimationFrame multiple times per frame?

javascript,javascript-events,css-animations,requestanimationframe
I have a touch handler that may fire multiple times within a given 16ms time period. On each firing, I set a translate on the element based on the touch position, eg: at 2ms, translate 20px at 5ms, translate 40px at 10ms, translate 50px I understand that calls to rAF...

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

Publisher in Pub/Sub should be Synchronous or Asynchronous?

javascript,design-patterns,javascript-events,anti-patterns
My view on mechanism: Pattern wise publisher should just publish an event and should not care about listeners / subscribers for that topic / event. In case of JavaScript, lot of frameworks for Pub / Sub publishes event in Sync manner for example : framework just maintains map of event...

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

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

Backbone.js listening to events for Map control buttons

jquery,html,backbone.js,javascript-events
All, I am using Bing maps to display a map on my webpage which will be plotting geolocation data on it. I have added some UI controls directly in my HTML as a generic UI control panel (not all are relevant to MapView) <div id="navbar" class="navbar-collapse collapse"> <a id="reloadMap" title="Refresh...

How is Facebook able to autoplay videos on mobile browsers

facebook,jquery-mobile,javascript-events,facebook-javascript-sdk,html5-video
I realize that many questions have been asked about autoplay videos on mobile devices but before my question is marked as a duplicate, I must say that I looked through a lot of those questions and answers and I have not found a satisfactory answer. Mostly, all of the answers...

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

Send an event using $emit from directive to controller

javascript,angularjs,javascript-events
I'm trying to send an event when an item gets selected, from directive to controller using $emit. I've two update functions for organizations and another for people. My directive should specify which event should emit. Here is my update functions // For organization $scope.updateOrgs = function(selectedVal) { } // For...

Make function work synchroniously (wait local events to get fired)

javascript,javascript-events,synchronous
I'm having problems with JavaScript logic. When we have a function that needs data from event-handler to generate result, is it possible to get that data back to function? For example, if we call Image() object or FileReader() inside and wait for its load event to get fired in order...

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

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

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

Asp.NET: How to trigger OnCommandClick first than OnClientClick

c#,asp.net,visual-studio-2012,javascript-events
I am crating a session inside the OnCommandClick to save informations about a file that will be downloaded. If I click to download it, the OnClientClick works fine and I can download the file. But when I have a grid with more than one file, I think that the function...

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

jQuery event.preventDefault() don't work unless debugging

javascript,jquery,events,javascript-events,event-handling
I am trying to use this approach in order to convert GET parameters to POST. I also want the anchor to be properly handled even if the middle mouse button is clicked. This is how I did the the event handlers binding: $(document).ready(function () { $(".post").each(function(){ $(this).mousedown(function(evt){ switch(evt.which){ case 1:...

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

JQuery event propagation (return false)

javascript,jquery,javascript-events,event-handling
Why clicking on the male radio button does not work? <div id="m_wrapper"> <input id="m" type="radio" name="sex" value="male" />Male<br> </div> <input id="f" type="radio" name="sex" value="female" />Female <input id="o" type="radio" name="sex" value="other" />Other $("#m_wrapper").click(function(e){ $("#m").prop('checked', true); return false; }); I know that here -> return false is equivalent to call e.preventDefault() AND...

Extjs5 - right click context menu with Ext.form.field.HtmlEditor

javascript,extjs,javascript-events,event-handling
Problem description I have prepared this index.html, which creates a simple Ext.form.field.HtmlEditor. I want to have a right-click-context-menu, which is capable of doing something with words that were marked by the user: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script> <link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script...

AngularJS - Click event (in directive) triggers when anywhere in the parent is clicked

javascript,angularjs,javascript-events,angularjs-ng-transclude
I'm going to do my best to explain my issue - bear with me. This whole thing is a directive for file selection: The directive has an ng-transclude component that contains a few directives, contained in their own divs. Parent directive: <div class="extra-cells"> <div ng-transclude class="extra-cells-row"></div> </div> ng-transclude content: <div...

sublime-scroll plugin is not scrolling as expected (iframe event catching issue)

javascript,jquery,iframe,javascript-events
I want to read mouse position from an iframe. I am doing it with this implementation: $($("#sublime-scroll-iframe").contents()[0], window).find('body').bind("mousedown", function(e) { console.log("x:" + (e.pageX) + ", y:" + e.pageY); } ); My working example: http://jsfiddle.net/s37e1ro0/1/ but I can't make it to work with demux's sublime-scroll js script. Output is window coordinates...

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() *...

Javascript TypeError for declared function

javascript,javascript-events
HTML <input type="checkbox" class="test" id="chk" /><label for="chk">Click</label> <p id="demo"></p> JavaScript (function (){ var chk = document.querySelector('.test'); function ClickTest(elem){ this.elem = elem; }; ClickTest.prototype.addListener = function() { this.elem.addEventListener('change', this.showValue); }; ClickTest.prototype.showValue = function(){ console.log('Clicked'); var d = document.getElementById('demo'); d.innerHTML = "This works"; this.test(); }; ClickTest.prototype.test = function(){...

HTML 5 Drag & Drop Functionality - Remove Dropped Item

javascript,html5,javascript-events
I'm almost there. I'm creating drag and drop functionality and the last part i'm having issues with is finding a clean way to remove the item that has been dropped. The yellow div is draggable. The red div is droppable. When the yellow div is dragged on top of the...

Handling Alt + Enter key press in JavaScript

javascript,javascript-events,keypress,keyboard-events
I'm trying to get some pure JavaScript code to handle Alt + Enter key press event in a text area but am failing miserably. What is wrong? Html <textarea id="ta" style="width:100%;height:500px"> </textarea> JavaScript var ta = document.getElementById('ta'); ta.onkeypress = function(e) { if (e.charCode == 10 && e.altKey){ alert( "Key Pressed:...

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

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

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

Why is my Java script code not running? (Form Validation)

javascript,html,javascript-events
This is my HTML: <html> <head> <title>Article</title> <link rel="stylesheet" href="pop.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript" src="validator.js"></script> <div id="comment_form"> <form method="POST"> Name: <input type="text" name="name" id="name1" onblur="checkname()"> <br/> Email: <input type="text" name="email" id="email1"...

what does onclick='mycheck(“+i+”)' do?

javascript,javascript-events
Im fairly new to javascript and would appreciate your explaination on this code. i was provided with the below code as an example and needed to make some changes too it but im unsure what onclick='mycheck("+i+")' is meant to do. i know its calling the function mycheck() but not sure...

Accessing 'this' table cells value

javascript,dom,javascript-events
I have a form, after form has been filled and add button pressed - all the values from the form get to PouchDB and then into the table in the browser. I need to make an "edit" option. The idea is: <td ondblclick='updateVaucher()' style='cursor: pointer'>"+data[i].doc.vaucherID+ "</td> Now the question is:...

IndexedDB: Can you manually initiate a version change transaction?

javascript,html,javascript-events,google-chrome-extension,indexeddb
I am writing a chrome extension that utilizes IndexedDB to store some information client side in an IDBObjectStore within an IDBDatabase. The nature of the data is such that I need my users to be able to modify the object store at their whim. (add new objects modify existing ones...

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

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

Javascript Events Not Working

javascript,javascript-events
I am trying onfocus and onblur events. It's not working. When i click the email field the value does not disappears. Here's my code. Please tell me if there's anything wrong. <!DOCTYPE html> <html> <head> <title>More Events</title> </head> <body> <form> <input type="text" value="your email" name="email" id="email" /> </form> <script> var...

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

onended audio event firing without playing the audio

javascript,html5,audio,javascript-events
I have multiple audio files that i need to be played. and only when all audio has been played completely the next section is supposed to show. the code that i've written fires automatically without playing any audio. how should i do it? here's my code <!DOCTYPE html> <html> <body>...

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

does jquery .on() support for “load” or “ready” events?

javascript,jquery,javascript-events
For attaching click event handler to dynamically loaded html ,I could use : $(document).on("click", "Parent_SELECTOR_Available_In_Initial", function(e){ /// Do some stuff ... }); I dynamically load some html mark up and java script which contain methods need to be run on ready or load event . But $(document).on("ready", "Parent_SELECTOR_Available_In_Initial", function(e){ ///...

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!'); });...

Node.js EventEmitter events no longer triggered on node 12.1+

node.js,events,javascript-events,eventemitter
I have stripped the problem back to the following code: var EventEmitter = require("events").EventEmitter, util = require('util'); function Foo() { EventEmitter.call(this); } util.inherits(Foo, EventEmitter); Foo.prototype.on('hello', function() { console.log("World"); }); Foo.prototype.start = function() { console.log('Hello'); this.emit('hello'); } var foo = new Foo(); foo.start(); Using Node v0.10.36 this code outputs: Hello World...

jQuery Text Editor (jqte), using change event

javascript,jquery,javascript-events,jqte
I am trying to write some code for change() event using jQuery Text Editor (jqte), I have two functions which give jqte functionality to textarea's One for editors loaded with Javascript, when clicking some elements in a page function onLoadEditor(){ jQuery(".comment-editor").jqte({ // some jqte params, such as fsize: false,indent: false......

How to make multiple balls drop on click?

javascript,canvas,javascript-events,html5-canvas
I have a ball that drops from cursor location, and redrops when the cursor is moved to another location. I am trying get a new ball to drop every time I click the mouse. I tried: canvas.addEventListener('click', function(event) { ball.draw(); }); But it doesn't seem to do anything. Is there...

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

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

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 () {...

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

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 on(“change”…) method not working in Plunker

jquery,javascript-events,onchange,plunker,plunkr
I created this Plunk to demonstrate and discuss a shopping cart I'm developing that is in action here (while it lasts). In the "real" one, selecting a species fills the Variety drop-down. However, it's not working in the Plunk. In fact, $('#species-select').on('change', ... is never firing. Must be some peculiarity...

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

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

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

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

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