Here's my problem, it's long, but actually very simple, please at least skim it if you will.
I take a div called 'app' and drag it around the page. Works fine. Except occasionally when i grab the div and drag instead of dragging the div only an image of the div drags(in firefox & webkit browsers, not ie) and the mouse cursor turns into a circle with a line through it. This greatly compromises the interactivity of the webpage and i don't think its so much a coding issue as a browser issue.
I'll show the code used to drag below but first you should probably know that in order to drag I use three sets of variables, X1 & Y1 is the pageX and pageY (clientX or clientY depending on the browser) and or recorded every time the mouse moves.
X2 & Y2 are set when the mouse is pressed on the div, and are the difference between the mouse position and the current top & left position of the div, they are used so that when the div is dragged the mouse position isn't equal to the top left corner.
And finally dX and dY (short for delta X and delta Y) are the equal X1 - X2 and Y1 - Y2, they too are set when the mouse moves and equal the change in X and the change in Y.
Sorry for the explanation but i figured it might help clear up any confusions with the following code, here is the dragging code.
app.onmousedown = function() {
X2 = app.offsetWidth - ((app.offsetWidth + app.offsetLeft) - X1);
Y2 = app.offsetHeight - ((app.offsetHeight + app.offsetTop) - Y1);
main.onmousemove = function() {
dX = X1 - X2;
dY = Y1 - Y2;
app.style.top = dY + 'px';
app.style.left = dX + 'px';
}
}
Note the main div is simply a container holding all elements of the page, and is used for convenience because it equals the size of the web page.
And that's my issue really, as i said before it only occurs sometimes other times it works perfectly fine, without any errors. Yet it occurs often enough to be a problem. I know it's possible to get this working because i've seen drag and drop demos that don't suffer form this problem. So if anyone knows or has any ideas it'd be very much appreciated if not thanks anyway for bothering to read this i know it was long sorry for that.
ps: please don't suggest javascript frameworks instead, i'm not a fan of them. It's mearly a preference of mine i don't hate them i just prefer javascript.
try adding the attribute ondragstart="return false;" to the img tags, this should disable the browser built-in drag and drop funcitonality. You usually also need to do this for a tags
Related
I'm working on a script that will move a layer, right, left, up, or down. This depends upon which edge of the layer is inside the canvas.
I've managed to get the layer moving left and right (x-axis) using bounds[0] and bounds[2].
But when I try to get it to move up or down, it still moves left/right. Is it the bounds number I've got wrong?
var Y1 = bounds[3].as('px');
var Height = app.activeDocument.height.as('px');
//move down
if (Y1 < Height) {
activeDocument.activeLayer.translate(Height-Y1);
}
The first thing you probably want to do in a situation like this is to check the documentation. For .translate() we can find the following:
so to move horizontally we would use deltaX and to move vertically deltaY, in your code you're giving to .translate() only deltaX, so as expected your layer is being moved horizontally. To fix this pass 0 as a first argument and your Height-Y1 as a second one:
activeDocument.activeLayer.translate(0, Height - Y1);
I'm learning how to make a script that creates a circle following the mouse cursor similar to the script below:
https://www.kirupa.com/canvas/follow_mouse_cursor.htm
This script will darken the whole website except for the part inside the circle, which will be visible at normal brightness.
However, using the author's canvas approach the user can not interact with the website underneath, as there is an overlay over the website.
Any input is appreciated.
Since HTML works in layers, there's really no way to have an element under the mouse and properly interact with the elements underneath.
Instead, what you may want to think about, instead of showing only whats under the mouse, hiding everything that isn't under the mouse.
The could be achieved by creating elements that stay a number of pixels away from the cursor, leaving a window into the site.
I made an example of this on JSFiddle, here is the important part using JQuery (although it could easily be done in plan JS as well).
var offset = 50; //the area around the cursor that is visible
$("body").mousemove(function(e){
var newPos = (e.pageX - offset);
$("#left").width(newPos);
$("#top,#bottom").css("left", newPos);
newPos = (window.innerWidth - (e.pageX + (offset + 17)));
$("#right").width(newPos);
newPos = (e.pageY - offset);
$("#top").height(newPos);
newPos = (window.innerHeight - (e.pageY + offset));
$("#bottom").height(newPos);
})
JSFiddle with full code. Note that the text can still be selected as usual.
I implemented a simple draggable world map for a game but the performance differs when using different browsers - which is kinda obvious. I used 256x256 pixle tiles and the script dynamically renders the number to fill the whole window plus borders.
Prototype: http://mt111102.students.fhstp.ac.at/draggable/game.html
Currently I'm doing it simply by setting the top and left style attributes on mousemove. Heres a snippet:
mouseDown : function(e) {
Map.myPreventDefault(e);
dx = map.offsetLeft - e.clientX;
dy = map.offsetTop - e.clientY;
map.addEventListener('mousemove', Map.divMove, false);
},
divMove : function(e) {
Map.myPreventDefault(e);
map.style.position = "absolute";
map.style.cursor = "move";
map.style.left = e.clientX + dx + "px";
map.style.top = e.clientY + dy + "px";
}
Later when dragging to the borders I'm gonna load new tiles with XHR and delete old ones on the other end to retain performance so that the wrapper doesn't get to big.
My question is: Would it be more performant by using CSS translate instead of just setting the top and left attributes? And do you guys have any tips how to make it smoother?
In Firefox the prototype works almost perfectly smooth but in Webkit browsers like Chrome it doesn't look very good - it lags a bit. I just wonder how Google Maps managed it to work in every modern browser with the same smoothness.
A CSS transform, especially with a Z value (which will load the transform into the GPU), will almost always be faster and smoother - especially on devices like iPads, but elsewhere as well.
For more details you can check out this tutorial on GPU acceleration:
http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/
I'm working in my new portfolio, and I want to do a effect like this, in the site:
http://nizoapp.com/
The effect of the iPhone and parts appearing from the sides when we scroll. It's a kind of parallax scrolling.
I tried to search how to do but I can't find. So I "stole" the code saving the page and adapting the code but seems to have many unnecessary things.
Someone know how can I do this?
Parallax: the apparent displacement of an observed object due to a change in the position of the observer.
Parallax is one particular scroll effect, simulating depth with relative scrolling, for example.
If you're interested in scroll effects more generally, then a simple search yields many plugins and round-ups.
The image here shows how the idea works, according to me. The basic idea is that all the elements that move have some distance from a central/non-motile element. As you scroll more, their distance from the this central element reduces - inverse proportion. In the image here, elements are marked with circles and a name given to them (only one moving element given for simplicity, others too can be added). The details follow.
The central element here is called 'A' and the moving one - 'C'. The variables used here:
D => distance of moving element from A
k => any constant > 1 (experiment for good results)
y => distance scrolled (document.body.scrollTop)
dy => vertical distance between A, C
dx => horizontal dist bet. A and C
theta => (predermined) angle between A, C
There's an angle between C and A which depends upon you - set it to any number (radians is the preferable unit). Now, as y increases, D decreases. So, D is given by the relation/formula shown in the figure. Every time you scroll down/up, D is recalculated. From that, dy, dx are calculated and are set as the top, left properties of css for C (which is absolutely positioned). In case you're wondering how to find dy, dx, here's how to do that.
dy = Math.sin(theta) * D
dx = Math.cos(theta) * D
I hope I've given the idea. I could've given the full code, but I wanted you to do something...If you want further help, ask that in comments...:)
basically it uses scroll event, and then on certain points it animates the boxes.
There doesn't seem to be a good way to base the <canvas> viewport on the location of the mouse pointer and being able to move around freely. Basically, like every other first-person game on the market.
There is no way to capture the mouse
inside a <canvas> element.
There is no way to set the position
of the mouse pointer.
It is not possible to go full screen
with <canvas>, and even if, once the edge has been reached, functionality will be broken.
For good reasons, too. Imagine what possible scenarios could (and definitely would) be employed by malicious persons.
Perhaps it's too early to be thinking of something that is almost only of any use in a 3D environment, something that there isn't yet a spec for.
What's your take or solution?
You can get the mouse position inside of a canvas.
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
var cell = new Cell(Math.floor(y/kPieceHeight),
Math.floor(x/kPieceWidth));
return cell;
}
From Dive Into HTML5: Let's Call it a Draw(ing Surface)
I don't think there is a good solution for this -- at least, not until we get mouse locking. No matter how elegant your solution, if you make a twitchy mouselook driven game, the user is going to twitch outside the canvas area at some point. Even if they don't accidentally click a link, their immersion will be broken when the view stops responding to their mouse.
For slower paced games, you could:
Use click and drag to turn. Once user starts dragging within the canvas, you use the mouse delta from the point where they started dragging to determine how far to turn. Because the user is holding down the button, they won't accidentally click things.
Hover cursor near the edges of the canvas to turn, similar to an RTS. This would turn more slowly, but is probably the most intuitive, and easiest for a user to accidentally discover.
Use the keyboard to look, like pre-mouse FPS games (such as Doom).
It's worth noting that there is an open feature request in Firefox for mouse locking. But, unfortunately, neither this, nor mouse hiding or fullscreen are part of the WebGL spec.
All of these features are supported by Unity, so that may be a path to look at if you really need FPS controls.