Develop Reference

Forward mouseevent to canvas under element - particles.js mouse detection

I want to use particle.js (https://vincentgarreau.com/particles.js/) on my website as a background. I configured it to detect the mouse on the canvas but if I start adding other html elements, the mouse detection stops working. I found a website (http://demo.diviwebdesign.com/fullwidth-header-extended-demo-1-json/) which apparently gets around this issue but I have no idea how they did it. Do you have a idea?
If I use detection on window level, as soon as I scroll or if the canvas does not fill the whole window, the detected mouse location is off so thats not a suitable solution either. I would need a way to forward the mouse through the obscuring element down to the canvas.

Three.js - mixing WebGL and CSS3D with iFrame

I prepared a working page that mixes WebGL and CSS3D (with a little help from SO here), and it works great. I throw in an iframe for good measure:
But it lacks the ability to interact with the iframe.
In mrdoobs pure CSS3D demo one can even scroll the pages and mark text etc:
As it seems, the combination of WebGL in front of the CSS3D renderer hinders the interaction. Is there a way around this?
Thanks,
Dirk

You can apply CSS pointer-events:none to the WebGL node, so that events go through it to reach the underlying CSS3D nodes and iframe.
You are currently attaching THREE.TrackballControls to the document itself, so no change is needed there.
Note that events over an iframe, are dispatched directly to the iframe. The parent frame cannot directly observe these, catch and forward them, or send synthetic ones. So you lose navigation control events while the pointer is over an iframe. Mousewheel events have been an exception to this in Google Chrome (forked WebKit), but perhaps not for much longer (2016-Feb). To maintain smooth navigation control, one approach is to cover the iframe with a (possibly gray) transparent div when it's "not in use". And remove this cover when you believe the user wishes to interact with the iframe, either because of a click, or based on the pointer's trajectory. A click event sequence can be split, with the parent catching the mousedown, and uncovering to leave the mouseup and click events for the iframe - but it's an imperfect illusion, depending on the the iframed site to not care about seeing the mousedown.

The issues is likely that the iframe is now covered by another element capturing mousewheel events (the whole canvas or css3d div with trackball controls).
SOLUTION 1
If that is the case you need to put an invisible plane in the webgl scene that matches the css3d object and listen for mousewheel events on the window. When a mousewheel event occurs, use a raycaster (see mr doob interactive objects examples) to see if you're hitting this invisible plane. And finally before adding the plane to the scene, you should add the element you want to control as a property of the webgl plane that gets hit by the ray. This way you can easily look it up from the intersect.
SOLUTION 2
Keep track of a point where your iframe is, and measure the distance to the iframe using THREE.Vector3().distanceTo(otherVector3). If it's close enough then scroll the iframe. You still need to listen on the window for mousewheel events.
NOTE: This does not make the iframe FULLY interactive, only for the events you capture and then trigger / pass on.
NOTE: You cannot scroll cross domain iframes...

Ok, I don't know if this will answer your question, but I just finished trying this out. The simplest solution for me was to make the WEB GL RENDER'S dom element style invisible.
As long as you have the Three.Vector2() set up you're good to go. I hope this helps.
http://adndevblog.typepad.com/cloud_and_mobile/2015/07/embedding-webpages-in-a-3d-threejs-scene.html

Drag/Touchmove Event with constant DOM Manipulation

I am looking to implement some Mobile Components using native Javascript and AngularJS.
While, I was working on creating a Pull To Refresh directive for AngularJS, I used touchmove event on a UL list. I was trying to pull a hidden div on top of a list with custom models to show status message.
I used touchmove event on the UL to create an effect of pulling by changing CSS3 translate property for the div. I was facing issue that the transition was happening after I finish touching the screen but not while I was dragging my touch.
Please help and throw in more details about the touchmove event.

Touch events
First of all, if you work on mobile devices and know a little about javascript you should write your own functions for the specific things that you need.So don't use libraries like angular, jquery or whatever ... it's only performance loss.
all you need is:
document.addEventListener('touchstart',ts,false);
document.addEventListener('touchmove',tm,false);
document.addEventListener('touchuend',te,false);
& to test:
document.addEventListener('mousedown',ts,false);//set mouseISDown to true
document.addEventListener('mousemove',tm,false);//check if mouse is down
document.addEventListener('mouseup',te,false);//set mouseISDown to false
css
Use translate3d() as it activates the gpu hardware acceleration. not just translate()
As your question is not very specific i can't add more info right now but...
Here are some examples using touch/mousemoves they may help you
Swipe & fastclick
http://jsfiddle.net/uRFcN/
https://stackoverflow.com/a/17567696/2450730
Radial Menu
http://jsfiddle.net/yX82S/
Slider
http://jsfiddle.net/LxX34/11/
Some UI elements
http://cocco.freehostia.com/scripts/SnapLightMT%20v0.2%20by%20cocco%20(1).html
try to swipe the main content or mousedown drag left right.
code.
http://cocco.freehostia.com/scripts/highlight.html
There is also a css trick that allows you to use the native scroll without the annoyng whole page move..So you don't have to use a library to scroll.
css
.scrollable{-webkit-overflow-scrolling:touch;}
.scrollable,.scrollable>div{width:100%;height:100%;overflow:auto;}
.scrollable>div>div{min-height:101%;}
html
<div class="scrollable"><div><div></div></div></div>

how do I recreate the sencha style gesture scroll for lists and content?

So... I am working on an interaction design project and I want to create a sencha-style gesture scroll for content areas. The way I've done it so far, is to attach touchmove/start/end events to the content area, and it translateY's the contents. It works in on desktop with mousemove/up/down events, but it jumps around like crazy with touch. I'm not sure whats wrong.. here is a link to a prototype.
**requires webkit.
http://apps.omorphos.com/gesture-scroll
I think it is an issue with the event response, but I tried and haven't been able to nail it down. Any help is greatly appreciated!

So, I figured this out.
What I was doing was attaching the touch event to the list tag itself.. and, that works fine on desktop with mouse events; however, with touch, the target changes and touchend doesn't fire properly.
So, what I did, and what I believe sencha does, ... and I had originally implemented but went in a different direction... is have an absolutely positioned element with a transparent background color floating above the element that will be manipulated. All of the touch events will be captured by that DIV and then the elements below can be manipulated without losing the event data.
In the new version I used HammerJs ... more info: http://eightmedia.github.io/hammer.js/
but i'm pretty sure you could just use standard events; but the good thing about hammer js, is that it will translate touch events to mouse events for testing in the browser, this also means making the coordinates for touch the same as mouse, so you can access mouse event coords via
e.gesture.touches[0].pageX
e.gesture.touches[0].pageY
which let's you write less code.
Part 2:
Additionally... part of the issue is... how do you click on the content/components(e.g. links) below the screen.
How you do this... is you take the coords from the event handler and pass them through this native Javascript function...
var a = document.elementFromPoint(x, y);
this will return the dom element. and all you have to do is trigger the click/tap event.
Which would be great, except it will pick the element with the highest z-index.. so that is your screen obj(the one that is capturing all of the touch events). So, what you need to do, is hide the screen after a tap is registered, and then execute this function 200ms later, and then bring back the screen to capture whatever events.
You can do this with this function...
$(theScreen).on('tap', function(e){
screen.hide();
var hit = document.elementFromPoint(e.gesture.touches[0].pageX, e.gesture.touches[0].pageY);
$(hit)[0].tagName !=="A" || $(hit).trigger('click');
setTimeout(function(){screen.show()},300);
});
And, that is how I solved it!
My code is not super annotated, but you can find it at the link below:
Updated example:
http://apps.omorphos.com/gesture-scroll/v2/

Unable to scroll with the mouse wheel in my flipview

I am developing a Windows 8 app with HTML5 and Javascript.
I decided to use a FlipView. My template for this consists of several div which contains the HTML.
Everything works except for one thing, my div containing the HTML I added the option overflow: scroll, the scrollbar appears, but my problem is that I can not scroll that pressing the ScrollBar. Unable to retrieve mousewheel event.
What is the solution to successfully scroll (horizontal scroll) also with the mouse wheel? (No worries for browsing with your finger).

I solved this problem by using the event to wheel up mousewheel.