I am trying to build a confetti where elements would be dropping (animated to translateY) in a random fashion. I have a button around which i would like to avoid elements falling on top of in such a way that if any of the dropping confetti is near this block, it should be deviated from its path. Javascript does provide this function called document.elementFromPoint(x,y) but this gives me only an exact position. I rather am looking for elements within this complete range.
I have tried looking for elements at certain point using document.elementFromPoint(x,y) but that just gives me element at that exact position. I wish to avoid putting a handle on all the falling(animated) elements.
var elementMouseIsOver = document.elementFromPoint(x, y - 30);
if (elementMouseIsOver.className.indexOf('confetti') >= 0){
//change confetti left position here.
}
I expect this should not check for exact one position but the entire range nearby.
Related
browser.actions().dragAndDrop(elem, target).perform();
I can clearly understand the above code but I cannot get how to specify this element and target.
Take this example
browser.actions().dragAndDrop(slider,{x:100, y:0}).perform();
In the website in which I'm working on, I cannot find any x, y or anything I can match with that and develop.
So it will be helpful if someone explains with some example for x and y so that I can relate to it and make I work.
The dragAndDrop() has two ways to work.
One starts with the element to drag. Here elem works as normal ElementFinder, so something like dragAndDrop(element(by.css('div.my-class')), target).perform();.
Now the target works in two ways: Either as another ElementFinder like in elem or as coordinates to move, starting from the position of elem, moving x pixels horizontally and y pixels vertically (plus to the right or top, minus to the left or bottom). So {x:100, y:0} will move your slider 100 pixels to the right from the starting position.
dragAndDrop(element(by.css('div.my-class')), {x:100, y:0}).perform(); will therefore move the element(by.css('div.my-class')) 100 pixels to the right.
I'm making a drawing application which involves clicking in a div box and reading co-ordinate values. The problem with it so far is that the coordinate values aren't correct relative to the box.
Here's my setup.. the drawing application starts off by loading simple HTML and then a DIV exclusively for drawing. Then I use a click handler to detect a click and return co-ordinates.
The width and height return fine because I defined them for the DIV, but the top and left positions return NaN in javascript.
I know I can easily do this with using css property position="absolute" for the DIV and specifying left and top that way, but that would wreck the rest of the HTML document because then the whole thing would look out of place.
Is there a way I can get a top and left value of DIV without explicitly specifying the two values for the DIV?
I want to achieve this with simple javascript. No jquery.
jsBin demo
function getXY( ev ){
var gbc = this.getBoundingClientRect(),
X = ev.clientX - gbc.left,
Y = ev.clientY - gbc.top;
alert( X +' '+ Y);
}
document.getElementById('board').onclick = getXY;
https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/event.clientX
https://developer.mozilla.org/en-US/docs/Web/API/event.clientY
I get mouse coordinates on some web page and save them.
$("div#container").mousemove( function(e) {
client_x = e.pageX;
client_y = e.pageY;
// save x,y
});
Now other person load that same page and i want to show them the same coordinates (x,x position).
How can I get the same point if I have to take in consideration that the div#container is not at same position as it was in my browser (considering screen resolution and scroll)?
I would use $.offset().top and $.offset().left of the parent div container, and calculate the difference from that to the current X and Y coordinates of the mouse cursor.
.offset() always refers to the document and not to the parent of the element.
For example:
$('#element').mousemove(function(e){
var client_x = e.pageX;
var client_y = e.pageY;
var elementOffset = $(this).offset();
client_x -= elementOffset.left;
client_y -= elementOffset.top;
// save x, y.
});
Then, on the other users display, show the coordinates after adding them to his offsets.
This doesn't seem possible because of the variables you mentioned in the question. Screen resolution is the main reason, but, also, it depends on how big their window is. At first, you might think that you could compute the mouse's position relative to fixed points, like divs shown (take Stack Overflow, for example, where the main container of the site doesn't resize with the browser window). But if their window is smaller than the container, you would be making some false assumptions about what they see.
That being said, you can always just compute the mouse position relative to fixed elements you know will be on the screenusing $.offset() and just assume they have their screen showing everything (or check $(window) size) and are using "normal" viewing conditions.
You can use the values returned by offset(), in your example:
$("div#container").offset().left
and
$("div#container").offset().top
to substract them to e.pageXand e.pageY.
offset() function gives you the matched element's position relative to the document (see the docs), so there's no problem if the users scroll down.
Example: http://jsfiddle.net/3jMRS/
How can I draw a line between every h2 element on my HTML page so that I can receive the effect in the picture below? Initially, I would presume you would go about this by working out the size of the line required in-between the divs (divs are separated by the 1px horizontal line) + the distance between each of the h2s, but i'm not entirely sure how one could work out this distance.
You can try something like:
a) find the position w.r.t document (i.e. by calling $(element).offset()) of the 2 elements you want to connect, call the positions p1 and p2
b) Append an absolutely positioned canvas to the body with a z-index to ensure it is displayed on top of everything else.
c) Draw a line between p1 and p2 on the canvas
This is assuming the elements can be anywhere on screen. If the line you need to draw is assured to be always horizontal or vertical, it can probably be done in a simpler manner.
Just use offset() method. You can easily find the distance between elements using it.
I'm working on a script to do several things. In a nutshell, here's what it needs to do:
Read the coordinates from a page and be able to pop up a box within a specific region.
The pop up box needs to be able to follow the mouse around.
I need to be able to modify the box to look however I want (I was thinking a div container that is set to display:hidden, and then the JS sets the display to block when your mouse is in the specified region).
I need to be able to modify it easily (aka, add and subtract objects and coordinate sets)
I was originally using HTML maps (), and that worked great, until I resized my browser, and the div that I had following the mouse no longer lined up correctly. Something about the offset not working correctly, and I couldn't get it to work correctly, so I switched to an HTML canvas.
And now I've got the coordinates in the canvas correctly, I just can't figure out how to get something to pop up when the mouse is inside of a certain section. Here's my current code:
function drawLines(numbers, color){
//poly [x,y, x,y, x,y.....];
var poly=numbers;
context.fillStyle = color;
context.beginPath();
context.moveTo(poly[0], poly[1]);
for( item=2 ; item < poly.length-1 ; item+=2 )
{context.lineTo( poly[item] , poly[item+1] )};
context.closePath();
context.fill();
}
I've got each region inside of an array, which I then pass to the function one by one. The color was a test, and I can easily get each region to show up as a specified color, but that doesn't solve my problem. Any ideas? Thanks!
Seems strange to jump to canvas over a style issue, but ignoring that...
You could bind mousemove events on the canvas element and then do hit tests on your region to see if the mouse is inside the region.
Doing the hit test efficiently might be tricky depending on the number of regions your testing, but it's definitely doable.
The canvas is just like any other block level element, so the same events apply and are bound in the same way.
Here's one example of mouse events interacting with canvas. In this example, the events are bound to the document, but similar ideas apply.
http://dev.opera.com/articles/view/blob-sallad-canvas-tag-and-javascrip/