Develop Reference

Custom trajectory (non linear)

I'm working on a little web animation project (moving div in a web page), and I want to use custom trajectory with jQuery or Javascript or any library.
I don't want to use Canvas (which may be more appropriated)
My purpose is maybe difficult : Use the mouse to draw a line and catch all positions and save to animate a div.
I know that jQuery allow to do some stuff but it is linear animation.
I can use the animate function to do this :
$(this).animate({left:+500}, 1500, function(){ //first move left
$(this).animate({right:500}, 1500); // then move right
//etc... but too many points, sorry for syntax errors
});
It is clearly too long to describe custom moves.
Any idea ?

You can store the values of the mouse movement in an array and use CSS animation or chain either jQuery .animate() or Element.animate() calls for each element of the array to achieve expected effect.

Element to point toward another element

I need to make four rectangles and an arrow at the center that points toward the rectange that is hovered. See https://jsfiddle.net/Lvmf67rm/1/
$(document).ready(function(){
$('.quarter:nth-child(1)').mouseenter(function(){
$('.pointer').css('transform','rotate(-45deg)');
});
$('.quarter:nth-child(2)').mouseenter(function(){
$('.pointer').css('transform','rotate(45deg)');
});
$('.quarter:nth-child(3)').mouseenter(function(){
$('.pointer').css('transform','rotate(-135deg)');
});
$('.quarter:nth-child(4)').mouseenter(function(){
$('.pointer').css('transform','rotate(135deg)');
});
});
There are two issues with what I've made:
If there would be an element before or somewhere in-between the rectangle divs - the arrow would point in the wrong direction (this is because "nth-child()" selects the children regardless of class)
When hovering between 3rd and the 4th rectangles the arrow doesn't go straight to the next block but goes through the first and second first (quite obvious why this happens).
But how to make it right? I'm quite a noob with javascript so this is the best I could do and I ask for your guidance.
P.S. Sorry if I didn't explain it very good, english is not my native.
P.P.S. Sorry, I forgot to mention I can't edit HTML.

Regarding adding elements before or somewhere in-between the rectangle divs, here are some possible solutions:
Best option: Just don't do it. Add other elements outside the container and use CSS positioning to position.
Use :nth-of-type instead of :nth-child
Instead of :nth-child use classes q1, q2...
Regarding arrow direction: See how using -225deg in q4 changes the behaviour:
$('.quarter:nth-child(4)').mouseenter(function(){
console.log($('.pointer').css('transform')); // get prev value
$('.pointer').css('transform','rotate(-225deg)'); // instead of 135deg
});
You can check the previous value to change the degrees dynamically, selecting the best option of the 2 candidates (where the absolute value of previous degrees - new degrees is minimal, adding or subtracting 360 degrees).

javascript to track and place multiple images on top of an image

I did a search here and couldn't find any questions with answers that were suitable to this.
I am writing a hockey scoring chance tracker and basically I want to show an image of the hockey ice and each time you click on the image it remembers where you clicked, puts a small red circle where you clicked with a number on top. That number is to be an auto incrementing number. Ultimately I want to track where all the mouse clicks are for storage into a database.
To the side of the image will be a form and each time the mouse is clicked it adds a new row to the table. This part is not too hard, I could easily do it with jquery.
The problem I am having is trying to find a quick easy way to keep laying the same image, multiple times, on top of another image, where the user clicks. I have been looking into HTML5/Canvas, as well as just plain javascript/jquery to do this.
I am here asking for suggestions on easy ways to do this.
Thanks

Here's a super simple jsfiddle with the beginnings of how I might go about doing it - let me know if you've any questions/concerns/need help making further improvements, and I'll be glad to update!
http://jsfiddle.net/jking/4dMJG/
(just prevent my divs are images, and the sidebar is a real form...)

Here is how I would do - simple, short way, I don't know how you want to extend it:
I would create an array, and bind event listener to the div you want your user to click on.
Every time the user clicks on this image, an event object is passed through, you can read out the X and Y coordinates of the mouse - .position() or .offset() depending on your layout.
Create a JSON object, which stores these values:
var hit = {
id: 1,
x: 250,
y: 365,
//add more attributes if you like/need
//for this particular 'hit'
}
And the you can store this object (-notation) in an array:
hitz.push(hit);
Now you should 'update' your UI based on this array.
Just loop through with a for...in loop and create your images:
var hockeyIceClone= $("div.hockey-ice").clone(true);
for (var i in hitz) {
var hit = hitz[i];
hockeyIceClone.append(
//assuming that your .hockey-ice div has position:relative at least
var image = $(new Image('image/path.png'));
//add more stuff for image if you like
$(image).css({
position: absolute,
left: hit.x,
top: hit.y
})
);
}
$("div.hockey-ice").replaceWith(hockeyIceClone);
The reason for cloning is because when you loop through an array and append elements to a 'container' placed out and visible on the UI, it might blink as it renders. So you better 'collect' it first, and place them out to the UI together.
Also you can use other methods than cloning, it's only an option.

jQuery animate - get future position of element

I'm having trouble getting the position of an element because my animation is long and $(this).position().top is calculated too early.
How can I get a future position value of an element before it animates to that position?

That's not what you want. You want to get the position of the element AFTER the animation has completed. You need to add a callback function to your animation, and call the position from inside that callback function. Here you go ->
$("whatever").animate({
//do stuff for animation
}, 'delay', function(){
//our animation has completed, this is our callback function.
//we can now successfully get our position.
$(this).position().top
});
Hope this helps!
Also
Please consider improving your accept rating, 20% either means that your questions are poorly formatted, or you aren't following the community guidelines. Please read the FAQ to understand interacting with Stackoverflow.com
https://stackoverflow.com/faq
Side note:
You will also get the badge 'Analytical' for reading the entire FAQ. I highly suggest it.

Trigger an event on a specific part of an image

I want to trigger an event handler when the user hovers on a particular part of the image, like the center of the image or the right side of the image (area would include, say, about a 100 pixels). I am not using any framework, so this is normal javascript that I am working with.
I am not sure if using image maps would work. Can anyone help?

Quirksmode about mouse position
Given the craziness involved here I would:
Use a framework (I just did something like this with Mootools)
Put absolutely positioned divs over the image and listen to events on them, instead of the image (did this too recently, a left 50% and a right 50%, way less cumbersome than tracking the mouse position).
Or go for it, quirksmode gives a decent function to get the mouse position, then you'll need to calculate the position of the image, then do the math to get the position of the mouse on the image, do the math in a mouseover event of the image, then continually check if the position meets your criteria, then do something about it when it does :)

You can use the MouseMove event to find out the location of the cursor, and then implement your own logic to calculate this position relative to the image.
See this page on getting the mouse coordinates.

i do not know how many areas you need and if they need to be especially shaped or something like that....
a straightforward solution would be placing (CSS) empty div elements "over" the image which will trigger the events
afaik it is not possible to trigger js events with an image map

An image map coupled with jquery is a great solution I've used before. I see that you're not using a framework, but it's worth a look.
Here's a little code snippet I used with an image map and mouseenter / mouseleave events.
$(".map-areas area")
.mouseenter(function() {
idx = $(".map-areas area").index(this);
showMapArea(idx);
})
.mouseleave(function() {
$(".map-hovers img").hide();
$(".map-titles img").hide();
});

I suggest putting an invisible div in the place where you want to check for mouse_over in the image. (In the case that the area you want is rectangular of course). And then trigger on mouse_over for this div.
If you want to check for non rectangular areas (that can't be a div), I would suggest that you put a div of the same size of the image on top of it. Check mouse position on that div, and use it to compare with a mask image.
Example:
MousePosOnGhostDiv_X = 76;
MousePosOnGhostDiv_Y = 145;
if(CheckColorOfMaskImage(MousePosOnGhostDiv_X,MousePosOnGhostDiv_Y)=="orange") do something.
By knowing which color it is on the mask image you can set multiple events.