aframe embeded scene with cursor mouse ray-origin - javascript

There seems to be a bug with the embedded scene and the option of mouse cursor (cursor='rayOrigin: mouse'),
i've put an mouseenter and mouseleave event on a box to change it's size. It works fine as long as the page is contained in the browser, but when the page is "scrollable" the events get messed up ( like showed in the gif, link bellow). I don't know if I messed up somewhere but it seems that it comes from Aframe. There's a link bellow for the github issue ( more details on it).
GIF :
Github Issue :
https://github.com/aframevr/aframe/issues/3410

The mouse-cursor component uses the whole window to calculate the position, so You'd have to rewrite it, to utilize the <canvas> for raycasting.
There is a workaround, you can make a fullscreen scene and put it in an <i-frame>, where the window is the iframe's body.
Example here.

Related

How can I use aframe to create a 360 video effect?

CONTEXT
We want to create an effect similar to what has been implemented here. I am however looking to make the 360 video act as the hero element of a longer page.
PROBLEM
The best solution I've found so far for the 360 video is to use Mozilla's aframe, as is done here. However, the problem I come against is that adding an <a-scene></a-scene> to my longer page essentially breaks the rest of the page, making me unable to see elements underneath (thought they are in DOM). One solution I found was to put the a-scene on a separate page and then display it in an iframe on my page. this works fine when I scroll next to the iframe, but scrolling does not work within the iframe.
Typical solutions for this scroll problem say to you use overflow: hidden, but this did not work so I thought maybe there is a different approach I can take, which makes mouse movements over the 360 video control the camera, whereas scroll controls the parent page.
https://aframe.io/docs/0.4.0/components/embedded.html
Use the embedded component then style the scene element.
<a-scene embedded>

How to pull the exact animation mentioned in the Hammer.js homepage

I want to know how exactly to get this output. Mentioned in the Hammer.js homepage itself. I tried to do it by copying the same code and while emulating, I get the event notifications as 'spanleft' or 'panright'. But my div does not move or animate like shown there. What am I missing? Any HTML5 animation?
EDIT : I'm adding a fiddle here. When I debug it in my phone using phonegap method, it does identifies my multi-touch pinch and rotate actions and appends the value to a preset
<p id="text"></p>
However image stays static. It doesn't change position or size.

Div follow mouse and avoid browser boundaries

I've figured how to get a div to follow a mouse, but how can I get it to reposition when the div comes close to the edge of the browser window?
For example, on Youtube, if you hover over the video makers name the div will always stay in the browser and never go off screen.
Click here, hover over Lindsey Stirling and resize your browser a few times for a live example.
Does anyone know how to do this?
Use the "title" property. This example should work fine. http://jsfiddle.net/8vj3k7zo/
<div title="no, I am 100% serious, please look at me! Oh, and try resizing the browser window.">This is some test text look at me!!!"</div>
Of course, you can't style the title tooltip, as it's part of the native browser implementation. If you'd like to get a styled div to peek over the edge of the browser, you can't do that.
On the other hand, if you would like to make sure that the entirety of the custom CSS tooltip is always inside the browser when the mouse is close to the edge (and not partially outside the bounds of the window), check out this excellent library: https://github.com/HubSpot/tooltip

image map area unable to fire click event.afer maximize the widow or restore the window click event firing

I am working with image map i am taken two buttons in my image. in button click one popup(div)displaying .in that div i am taken image one map with areas . i am trying to click (close button and on and off button)) but not responding .after maximize the browser window it is working . could any one solve this problem.and i want make all images responsive i used JQuery Image Map it is working but . when i given div position is absolute.
it is not working. can any one provide solution for this problem
(press tab key for identify image map area's)
Although your question is hard to understand, i will try my best for 50 reps (I am young and needed the money ;)
You are using a JQuery Library from here:
https://raw.github.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js
The readme of it prints in large letters:
"Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize"
So, your close handler doesnt trigger, because the area coords were only calculated by that "rwd" once you resize your browser window, and the readme tells us, that it is designed to do so.
Btw to make your code work:
add $('img[usemap]').rwdImageMaps(); below line 20 in your javascript code.

HTML document - can't prevent object dragging

I'm working on a web app that's available for testing on:
"http://83.150.87.220/dropbox/HelsinkiViSeZip/Jatkasaari"
It is used (mainly) to zoom in on an image and pan that same image.
Once the document loads and the central image becomes visible, you can mousedown + drag to either zoom in/out on that image or pan it.
When pressing the mouse button down, you'll notice that the image turns blurry and that an indicator (png image) appears just under the cursor. That indicator shows you how to move the cursor in order to select an action (zoom/pan).
Everything works just fine in Chrome, but in FF, once you mousedown for the second time on the image and start dragging the cursor, it seems that the indicator (the png image I mentioned earlier) drags along and messes everything up. This seems to be pretty much the default behavior for clicking-dragging images in any browser. But it's very weird, since on the first mousedown+cursor drag combination, everything works just fine. And not to mention that I made sure to prevent the default action for images:
$(document).on('mousedown dragstart', 'img, a.icon', function(event) {
event.preventDefault();
});
I'm all dried up in terms of ideas on how to find the problem, so I'm going out of my mind...Can anyone help?
Thanks in advance!
You could try setting it as a background image inside of a div container or something similar and just show/hide that instead of using an img element. That way you won't be able to actually "select" the image with the cursor but everything should still work if it's driven by javascript.
I was facing a similar problem and it seems that it need to also return false; to prevent the browser default behavior.
Here is the fiddle

Categories