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
Related
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.
I am aware that in most browsers (newest generation), the mouse cursor gets hidden when you type in any key like 'A' or Space. This is to let the user see what he types in.
The cursor gets back visible as soon as you move the mouse for a pixel.
Now here comes the problem -- This happens everywhere in a browser, even when I've focused a non-input element like a div or the such. I do, however, not want the browser to hide my cursor after the user has pressed a key as I'm using keys as shortcuts.
So the question is -- is there any way or trick or anything to prevent this from happening and/or letting the cursor auto-appear again after key-up?
I've tried various "hacks" over the web like invisible divs etc. but everything without success.
EDIT: As questioned, I am experiencing this behavior on every Browser (Chrome latest, Firefox latest, Safari latest) on latest MAC-OS-X.
This is not browser behavior but operating system behavior, and specifically Mac behavior. The cursor will not only hide if you type in the browser, but in any application on your Mac.
This means that the browser has no knowledge or control over the cursor, because it's hidden from a higher level. You can change the cursor with CSS or JavaScript for example, but it still won't show until you move it. You can't actually move the cursor using JavaScript, but even if you could I still doubt it'd help because the operating system didn't receive a signal of the cursor moving.
Also refer to this question on apple.stackexchange.com:
How do I disable hiding of the mouse pointer while typing text?
I just thought of a possible solution to this, but it's going to be really hard to do this in a way that is not annoying the user:
Whenever the cursor moves, save it's position
When the document observes a keyup, show an image of a cursor at the exact coordinates of where the actual cursor was seen last (it's still there, but hidden)
When the actual cursor moves again, hide the image (actually, merge this function with 1.)
The problem here is going to be knowing what cursor image to show. You would first have to detect if the user is on a Mac (or another OS that hides the cursor), but also what cursor should be shown depending on what you're hovering. It means that for every element you're hovering you would also have to detect which cursor is being shown and show an image of the same cursor.
You can cover the basics/defaults by adding some css rules that cover hovering of links and inputs (pointer and text respectively), but what if the user uses custom cursors defined in his OS?
I haven't tried any code yet, this is just a concept that should work in theory so let me know if you need more help with it, but honestly I'd advise against trying to accomplish this. It's going to bring more trouble than it solves, imo.
-edit-
Here's a Proof of Concept: http://jsfiddle.net/4rKMx/2/
I'm making a browser game, it's based around a world which you can build on, essentially I have a little user window with a box in, where the world/map is.
Basicly this map is so big so you need to be able to pan it, like click and drag inside the box to move the "map". (The map is essentially a big image)
Now there's a problem with images and dragging. When I click and drag on an image it assumes I want to "copy" it or drag it somewhere.
I tried to replace it with a normal div and it works so the code is fine. And I don't want to place the image as a background image either.
So my question is, how do I "disable" the "drag picture somewhere" feature? Whenever I try to click and drag on a picture, on any website, my cursor changes to a "no" sign, it means that I can't drop it there and if I'd move it into lets say photoshop, it'll change to this "drop pic here" cursor.
EDIT
Sorry for me not researching, I found out that you can do;
[element].ondragstart = function() { return false; };
You could use
[element].ondragstart = function() { return false; };
as you suggested, or I also think you could solve this by absolutely positioning another div on top of the image, just as a "control layer". That way you could write js that responds to mouse interactions in that div without worrying about the image at all.
I am aware that in most browsers (newest generation), the mouse cursor gets hidden when you type in any key like 'A' or Space. This is to let the user see what he types in.
The cursor gets back visible as soon as you move the mouse for a pixel.
Now here comes the problem -- This happens everywhere in a browser, even when I've focused a non-input element like a div or the such. I do, however, not want the browser to hide my cursor after the user has pressed a key as I'm using keys as shortcuts.
So the question is -- is there any way or trick or anything to prevent this from happening and/or letting the cursor auto-appear again after key-up?
I've tried various "hacks" over the web like invisible divs etc. but everything without success.
EDIT: As questioned, I am experiencing this behavior on every Browser (Chrome latest, Firefox latest, Safari latest) on latest MAC-OS-X.
This is not browser behavior but operating system behavior, and specifically Mac behavior. The cursor will not only hide if you type in the browser, but in any application on your Mac.
This means that the browser has no knowledge or control over the cursor, because it's hidden from a higher level. You can change the cursor with CSS or JavaScript for example, but it still won't show until you move it. You can't actually move the cursor using JavaScript, but even if you could I still doubt it'd help because the operating system didn't receive a signal of the cursor moving.
Also refer to this question on apple.stackexchange.com:
How do I disable hiding of the mouse pointer while typing text?
I just thought of a possible solution to this, but it's going to be really hard to do this in a way that is not annoying the user:
Whenever the cursor moves, save it's position
When the document observes a keyup, show an image of a cursor at the exact coordinates of where the actual cursor was seen last (it's still there, but hidden)
When the actual cursor moves again, hide the image (actually, merge this function with 1.)
The problem here is going to be knowing what cursor image to show. You would first have to detect if the user is on a Mac (or another OS that hides the cursor), but also what cursor should be shown depending on what you're hovering. It means that for every element you're hovering you would also have to detect which cursor is being shown and show an image of the same cursor.
You can cover the basics/defaults by adding some css rules that cover hovering of links and inputs (pointer and text respectively), but what if the user uses custom cursors defined in his OS?
I haven't tried any code yet, this is just a concept that should work in theory so let me know if you need more help with it, but honestly I'd advise against trying to accomplish this. It's going to bring more trouble than it solves, imo.
-edit-
Here's a Proof of Concept: http://jsfiddle.net/4rKMx/2/
I have an image on a webpage and when the user hovers over it, another image appears. When then hovering over the appearing image, it flickers.
Anybody any idea why that is?
Tony
UPDATE: The first image does not dissapear when hovering, just another (smaller) image appears over the top in the left top corner. When now moving over that smaller image, then the flicker appears.
The image on the site is part of a gallery, so it's a php variable and gets loaded when a user selects from a list of images. So embedding one into the other is very hard.
Because the browser is fetching the new image. The best solution is to incorporate both images into one, and either purely use CSS to change the background-position on :hover, or ( for IE6 and non-anchor elements ) change the background position with JS.
In IE? IE is notorious for not caching images that are loaded dynamically (either with CSS :hover or due to Javascript events). You can use CSS sprites (basically, using one image file to display both images, and using positioning to show one or the other; tutorial, linked by Mike Robinson), or you can use image preloading:
var preloadImg = document.createElement('img');
preloadImg.src = 'path/to/image';
Edit: and other browsers will do the same on first load. IE just may continue to do it on every switch.
If I understand you right, you probably replace the src of your image every time the mouseover event is fired. So, even when your image is replaced, your event is fired and the image is replaced with itself, which may cause flickering.
I guess you're probably using IE. This is a bug with the way it implements caching in some versions. You fix it by either configuring your web server to send proper cache headers, or by using CSS sprites. I recommend the latter, as that means less HTTP requests, and the preloading works even without JS.