I have a webapp project I am working with a graphical chart that I want to respond to the touchstart and the touchmove events. I have the events bound to an element that is overlaying the chart canvas element and for the most part everything is working as expected.
I am however, experiencing some behavior where the events eventually stop triggering. I am seeing this happen in at least two ways:
First case: It all appears to be a somewhat sporadic stopping (I can't narrow down exactly what it is that is going on right before they stop). Everything will work fine for a while but then eventually touch events just stop triggering.
Second case: When I update the app (which removes the bound element, reappends a new element to DOM, and then re-binds the new element with the same events). After this update I get exactly one single touchstar/touchmove to trigger. After that single firing no further touch events to trigger.
Here is the website I am working on: mortgagevista.com
I can't for the life of me figure out what is going on. I have spent hours reading up on forums and SO and still can't seem to figure out what the issue is. Unfortunately I am even out of ideas on how to troubleshoot the problem. I have been using the emulator in the chrome dev tools reproduce the problem.
Does this issue sound familiar to anybody? Any common issues or pitfalls with the touch events that I might be missing? Any ideas on how to best go about troubleshooting this? (Sorry, I know this is a really vague question but I am out of ideas on even how to narrow down what is happening).
Your events are not going to the right place. There is two possible reasons for this.
An incorrect element has focus.
An invisible overlay or something similar is not getting clicked as you expect.
Drill into these to issues and see if you can find the root cause.
Good luck.
Related
Please find attached screenshot showing violations that I am getting on using lightning chart line chart. I am not sure what is causing those violations. Is there a way to find what might be causing those violations.
Thanks
Two of those "violations" are coming from LightningChart JS.
Added non-passive event listener to a scroll-blocking 'wheel' event.
We need to do this as we use the mouse wheel for user interactions and there are cases where we will block the scroll event. We will block the wheel event when there is a user interaction that results in an action on the chart. In any other case we will let the event do the default action.
'requestAnimationFrame' handler took <N>ms
This is expected during the start up of our charts as there are some actions that will take longer than the ~16ms that is allocated for a single animation frame. This warning should only be triggered for a few frames during the start up. It can also be triggered when the hardware is no longer able to render new frames in that ~16ms time budjet. This mainly happens with large charts with a lot of data or on lower end devices.
There isn't anything that you can do to remove those two warnings. The other warnings look like are coming from either your framework or application.
I am trying to figure out how I can measure the rendering time of SVG.
When I make changes to the SVG elements (e.g Zoom In or Zoom Out), it takes a few seconds to take effect because SVG is huge.
And I need to measure the time it took to update for performance analysis purposes.
I have tried several DOM events like DOMContentLoaded DOMNodeInserted DOMNodeSubtreeModified but all these events are triggered before changed SVG is rendered on screen.
I have also tried PerformanceTimingAPI and PerformanceElementTimingAPI but no luck.
Thanks in advance!
There’s also MutationObserver but if you’re already experiencing trouble with JS events saying a change happened in the DOM, but you’re not seeing the browser engine re-render, then you might not be able to use JS to measure this and may need to use a more “manual” method.
Try using Chrome DevTools’ Performance recording feature. If you enable screenshots, you should be able to see when the rendering took effect. Combine this with performance.mark() and you should be able to see when you triggered the DOM mutation, and when the screenshot actually updated.
I'm using Chrome's desktopCapture in an extension and I have an issue that I'm attempting to work around. Any help would be greatly appreciated. I cannot post any source, but the chrome extension itself is commonly available and used on the web.
Issue
The issue is with resize / dimension changes that may occur while desktopCapture is capturing / streaming to the server. These changes can often occur seemingly too fast for my client to handle, causing the client application to crash.
Solution
I'd like to get some event or notification when the capturing end detects a resize of the area being captured; for instance a window which has been clicked and is being dragged to resize it.
An alternative would be if the event.data can be queried for width / height.
Research
I've google'd and searched the chrome / webrtc issues; I've come up empty thus far. There really isn't any good implementation information available from what I've found.
Going through the Chromium codebase is not an option for me; I am not a C/C++ developer.
What I would like from You
If you have experience with the desktopCapture offering, please share what you know. If you don't have any idea what I'm asking or have nothing constructive to add, please ignore this and move on.
Commentary
As of July 17th 2015, it would appear that there is a bug or missing support for resize events in Chromes desktopCapture extension. I will file an enhancement request with them and see where that goes. It probably won't help that "normal" WebRTC streams aren't "expected" to change dimensions during streaming and thus it is not handled.
Attach the captured stream to a video element and listen for the onresize (onsize?) event. Should also work for hidden elements if you don't want to display something at the capturing end.
I have dabbled with jQuery and javascript (I'm afraid in that order) before but allways very simple stuff, like sliding elements up, adding/removing classes etc.
I've not worked with events and objects before.
Now I have an allready working intranet "app" that is programmed exactly how I would do it. Namely lots of (if not all) global functions and variables to show / hide & generally control the page elements. all this is controlled without a mouse, only by keys.
Seeing this (and getting slightly scared in the process) I got myself a copy of "Object-Oriented JavaScript" By Stoyan Stefanov ...
My problem now is that I understand I'm going to need to work with objects, prototypes and events...
I -think I- understand the concepts by themselves but am totally at a loss at how to start.
Another problem I have is that the same keys should trigger different actions, depending on the visible or active elements. up/right/down/left should control the menus but when a content is loaded(end of menu is reached) the same keys have to trigger completely different things. I think I need to work with event-namespaces here, right?
Since it is not the mouse that is triggering the events I have to catch them at a very high level and determine what actions have to be made depending on the active and visible elements. Since I dont really get to know with event.target which element triggered the event
for example: if menu1 is visible and "right" was pressed
either open sub-menu or load content.
I have made a few attempts but was not able to get away from letting everything stay globally:
jQuery('body').on('ok.menu.rc right.menu.rc',function(e){
var cur = jQuery('nav.active a.active').removeClass('active').addClass('selected');
jQuery('nav.active a:not(.selected)').addClass('disabled').parent().removeClass('active');
//cur.parent().removeClass('active');
get_entry(cur.attr('data-name')+'-');
//jQuery('body').off('.menu'); // testing namespaces
jQuery('#menu1wrap nav').removeAttr('class').addClass('active');
});
And still nowhere near any kind of reuse-ability. It probably does not seem like it, but I have made several (and at least 2 different) attempts but grew frustrated pretty quickly.
Especially when trying out to put everything into objects. I wouldn't know how to link the html-elements with the instances of the javascript objects.
How would you take this beast on?
I am currently trying to code my own JS drag and drop script (out of sheer curiosity and boredom, I know it would be much easier with a framework). My aim is a fully working Firefox3 version , IE can wait for now.
I just got stuck on a weird bug. When I drag the div for the first time, it works ok. When I drag it for the second time, it does not stick after releasing the button and I have to click once more to get it down. Third and consequent drags work flawlessly again (!?!).
Please see [the original page][1] (as I said, FireFox only for now) for an idea of what happens. The whole thing is done as a div with two events (onmousedown and onmouseup) using document.captureEvents(Event.MOUSEMOVE) for the intermediate movement. The script can be found [here][2] (disregard the bottom ajax part, it is prepared for some additional tricks and the bug stays if I take it out).
Please let me know if you have encountered something similar in the past or if you see a mistake somewhere. I know there may be better ways to go around the whole thing but I am specifically looking for a way to make my approach work.
EDIT: Chrome and Safari work.
EDIT: Taking the links offline, working on new version.
Well first up this works for me in FF3 if that's what you're asking.
This isn't going to be what you want to hear, but I strongly recommend you pick up a DnD method from mootools or jquery or similar. Just from an efficiency standpoint, DnD is a horrible thing to code up (done it a few times myself) and if you're not capable (no offence meant here) of resolving the numerous bugs that come up it's just going to be a huge drain of your time compared to just going with a robust mature implementation off the shelf. It is a hard thing to do.
If you do what to continue with your own code (as an exercise or out of pride - I can appreciate that :) ) this kind of problem is typically the result of either an event not being captured where you think it is because some other event got in the way first, a flag not being set where you think it is, or (or because of) an error which breaks out of your code at an unexpected point. Try and trace logically what's happening by logging out the event triggers.
If you could define how it wasn't working in more detail I might be able to trace it further (since I seemingly can't replicate), but I do suggest you explore the benefits of a solid library.