We Keep Coding

How to handle mouse scroll and key press events on Cytoscape.js canvas with tpology diagram

I have some problems with handling events like scrolling using the mouse wheel or key press. I' ve tried something like this but it won't work:
this.cy.on('wheel', event => {
//somecodehere
});
I didn't find wanted events on Cytoscape.js documentation page: http://js.cytoscape.org/#events. But I thought a thing like this should work fine - unfortunately I was wrong. I try to figure out how to handle this event on my canvas.
What do I want to do with this? I want to make tooltip disappear when the user wants to scroll the page. I've already disabled zoom on scrolling - I want to enable zooming only while "CTRL" key is pressed and in this case, I also didn't find wanted event to handle this. Any solutions? Thanks.

Use DOM API.
document.getElementById("cy").addEventListener("wheel", function(){
console.log("Wheeeellll");
});

event for touchscreen on slightest touch

I have an element hidden by default and show when a user hovers over this element with the mouse. On touchscreens, this event is only fired when the element is tapped. What Im looking for is a way to make this show as soon as the user's finger touches that element, I can't seem to find an event like that.
I have tried the following code:
//OnTouch event for about text
$('#about thumbnail').on('touchstart', function(){
$(this).find('.mask').addClass('touch');
}).on('touchend', function(){
$(this).find('.mask').removeClass('touch');
});
with no success either, I have the default Wordpress jQuery included, do I need an additional library to make my code work? I can't find out how to do this.
thanks guys!

As long as you are not developing for the latest Apple iPhone which has 3D touch you cannot detect slight and hard touches. Every touch input is considered as click. but you can try reducing the response time delay though.
use this library http://hammerjs.github.io/ it has the ability to overcome the 500ms lock in phone browsers.
If you reduce the response time it can somewhat emulate the slight touch you are asking for.
UPDATE: Here is this another library which provides more events like
tap, Single-tap, Double-tap, Hold, 2x Fingers Tap, 2x Double-tap, Swipe Drag, Rotate, Pinch, Pinch Out, Fingers
http://quojs.tapquo.com

I forgot to get back here but found a solution to achieve a hover effect on touch devices.
What you can do:
1-> achieve hover effect by touching the object on a touchdevice, this hover effect stays active until you activate another hover effect. You can do this by binding 'touchstart' to any object like so:
$('body .archive-item').bind('touchstart', function() {});
I did not find a way to stop the hover as soon as your finger gets of the touchscreen with the above function.
2-> You can bind touchstart and touchend to the above selector and have them addClass on touchstart and removeClass on touchend
$('body .archive-item').bind('touchstart', function() {
$(this).addClass('hover');
});
$('body .archive-item').bind('touchend', function() {
$(this).removeClass('hover');
});
now you can style the .archive-item.hover with css to achieve a hover effect.
To avoid duplicating css to achieve the hover effect on :hover and the touchstart you can just do this:
.archive-item:hover,
.archive-item.hover {
text-decoration: underline;
color: red;
}
I couldn't find anything on the web so this is what I figured out by combining some code from various snippets, what do you guys think about this?

HTML5 Drag and Drop with insertBefore

I am working on a drag and drop project.
How: I am using the HTML5 drag events.
Code: See fiddle here
Problem: It only works sometimes, and I checked the code a million times
Idea:
- Get element and drag it over a div with id: LayerN (N=number)
- Create a new layer before LayerN when dropping
- AppendChild to new Layer.
- Remove empty layers if there are any.
Is there anything I am doing wrong or too complex? I don't want to use a JQuery framework, i want to understand what I am doing. Thanks a lot for reading, any help will be highly appreciated.

I can't get your fiddle to work so I'm giving general comments rather than a full 'answer' so hope it helps!
For D&D I find what works best is attach a mousedown event to the document on page load (or the containing element of the draggable objects if that's more appropriate).
Don't attach any events to the draggable elements themselves at this stage.
On mousedown, check the classname/id of the target and if it's draggable:
If you want to show it dragging, clone the element and append to a position:fixed or :absolute DIV - you can move this on mousemove relative to the cursor. Keeping this element offset to the cursor means you can still detect what's under the cursor.
Hide the element you're dragging. You can put some sort of image showing where it came from at this stage if you wish using insertBefore.
I hide the element rather than move it because if you cancel the drag it's very easy to restore it.
Attach mousemove and mouseup events to the window or document. The function you call on mousemove can, based upon the event.target/event.srcElement, decide whether the dragged object can be dropped or not (again, I generally look for a className here).
This way you've only got a maximum of two event listeners running everything rather than multiple events on every single element. I suspect your event listeners may be tripping over each other.
I don't know if that gets you any further, but good luck!

Binding Multiple dragenter/ dragleave Events in HTML5 Drag 'n Drop?

Here's a basic example of what I have going on here:
http://jsfiddle.net/kgqkM/2/
What I'm trying to do is dedicate the area outside of this list to be a "delete" area where I can set up the appropriate logic to remove the dragged element from the page. I'm attempting to show when the user drags the element off the list it would color the outside red/ semi-transparent. When I set events on the outer-wrapper, they seem to take over all the dragenter/ dragleave events.
Guessing my issue has to do something with setting the event on the parent div? I'm starting to try and perhaps have one master event on top and deciding what to do based on the e.target and .parents('.switch'), but insofar it's resulting in buggy behavior.

It would seem that I had to do some (correct) logic on the event target. I have to refactor my code a bit, but it's working out.

What mouse/touch events should I use to cause a div to change color when cursor is dragged over it?

I'd like to know what mouse events I need to use for the task below.
When a cursor is dragged over a div, the div changes color.
By dragged I mean that the mouse button has been clicked once (and not released) somewhere outside the div and then the cursor has been moved over the div (the mouse button has not been released at any time during this process).
The div shouldn't respond to onmouseover. The mouse button needs to have been depressed and then dragged over the div to activate the change in the div.
I'm also wondering if there are any equivalent events for touch devices?

If i understand this right you can do the following:
set a global variable "mousedown" to false
use the "onmousedown" event to set "mousedown" to true
use the "onmouseover" event of your div to fire a function where you first check if mousedown is true and if so make the div visible
use the "onmouseup" event on your page to set "mousedown" to false again
For anything javascript related to touch event you should have a look at Sencha Touch
EDIT: If you want to avoid such frameworks. You should have a look at The HTML5 Specification. There are a couple of new events related to touch devices.
Here is a nice article about it:
http://www.html5rocks.com/en/mobile/touch.html

I'd recommend JQueryUI for this - it has several drag-specific events built-in. The drag event for touch devices is called touchmove