I run into an issue when I have to simulate a click on a range input element in HTML. I thought it would be easy thing to do, since the method itself works on every other element. However, range input does not seem to work.
The method will simulate click on the given coordinates
function simulateClick(x, y) {
let clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent('click', true, true);
let element = document.elementFromPoint(x, y);
element.dispatchEvent(clickEvent);
let marker = document.createElement('div');
marker.style.width = '4px';
marker.style.height = '4px';
marker.style.position = 'fixed';
marker.style.backgroundColor = 'black';
marker.style.pointerEvents = 'none';
marker.style.left = x + 'px';
marker.style.top = y + 'px';
document.body.appendChild(marker);
}
Please see this fiddle https://jsfiddle.net/3eqmzoLk/
After executing the code, the black dot simulates the click and the range handle should move to that desired position, however it does not work.
Related
I am building a drag and drop application purely in Javascript. I have coded the drag part where the element can be dragged and dropped randomly in the page. Now, I have built a drop zone that contains 9 boxes(divs) wherein 9 divs must be dropped. I can't think of an approach that will help me accomplish this task. I am thinking of making those divs 'absolute' and re-build them use top & left attributes. But how should I proceed further? How will the div that I drag i.e onmousedown will come to know that onmouseup it should drop at the specified location. Example: If I select a div numbered 1, it should drop at target numbered 1.
Here's the Javascript I am using for selecting and dragging:
window.onload = function() {
var el = document.getElementById('block1');
var mover = false, x, y, posx, posy, first = true;
el.onmousedown = function() {
mover = true;
};
el.onmouseup = function() {
mover = false;
first = true;
};
el.onmousemove = function(e) {
if (mover) {
if (first) {
x = e.offsetX;
y = e.offsetY;
first = false;
}
posx = e.pageX - x;
posy = e.pageY - y;
this.style.left = posx + 'px';
this.style.top = posy + 'px';
}
};
};
I would have the targets recognize a "onmouseenter" and set a Boolean to be true for that target, then set it to false "onmouseleave". then "onmouseup" check all of the booleans and if div1 has been dropped and target1 is true then div1 position = target position.
I know this is a pseudo code answer but its just my thought process on ho to solve the problem.
I would like to get the position of highlighted text but not the bounded yellow rect (using range.getBoundingClientRect()) here I'm talking about the red area in the picture meaning it have an indent. Basically I want to save selection area and be-able to replicate them. I could not use the technique to save and restore Range object.
Here is what I'm trying to do:
function addMarkerOnSelection(){
var range = window.getSelection().getRangeAt(0);
var rect = range.getBoundingClientRect();
var scrolltop = jQuery('body,html').scrollTop();
//var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
var marker = document.createElement('div');
marker.style.position = 'absolute';
marker.style.display='block';
marker.style.left = rect.left + 'px';
marker.style.top = scrolltop + rect.top + 'px';
marker.style.height = rect.bottom-rect.top + 'px';
marker.style.width = rect.right-rect.left + 'px';
marker.style.border='1px solid black';
marker.style.background='yellow';
marker.style.opacity = 0.5;
document.body.appendChild(marker);
}
You can try google docs, try no highlight multiple line of text and add an comment. They wrap the highlight area correctly.
I have another approach, using Range.surroundContents I am able to wrap content with an element and its work as expected. BUT how to save it without saving the whole text content?
function surround(){
var range = window.getSelection().getRangeAt(0);
var marker = document.createElement('span');
marker.style.border='1px solid black';
marker.style.background='yellow';
marker.style.opacity = 0.5;
range.surroundContents(marker);
};
I've tried for a couple of weeks to trouble shoot this problem and I've come to a dead end.
as a word of warning I'm very new to coding and I may not be able to understand much.
I'm trying to draw an image at the location of the mouse.
this is my script so far
$(function()
{
var canvas = $('#canvas')[0];
var context = canvas.getContext("2d");
var img = new Image();
img.src = 'cross.png';
function getTopLeft(elm)
{
var x, y = 0;
x = elm.offsetLeft;
y = elm.offsetTop;
elm = elm.offsetParent;
while(elm != null)
{
x = parseInt(x) + parseInt(elm.offsetLeft);
y = parseInt(y) + parseInt(elm.offsetTop);
elm = elm.offsetParent;
}
return {Top:y, Left: x};
}
canvas.style.cursor = "none";
canvas.addEventListener("mousemove", function (ev)
{
var mouseX = ev.pageX - getTopLeft(canvas).Left;
var mouseY = ev.pageX - getTopLeft(canvas).Top;
});
function animate()
{
context.onmousemove = function(evt)
{
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(img, Left, Top);
}
}
});
I think the problem lies in defining the x y value of the picture ive tried every variable used in the code but to no avail the script loads without error but doesnt draw the image at the mouse location.
I have just realised also that i need the image to be centred over the mouse position.
I am using the following sentence to get the element in some position, but he takes the first ...
$(this.cTaskItem[0]).mouseup(function(event){
var posX = event.clientX, posY = event.clientY;
var overElem = document.elementFromPoint(posX, posY);
overElem.style.border = "3px solid red";
});
I wonder how do I get the element at a given position and Z-Index.
Thank You
If the first element (the one that's selected by document.elementFromPoint(posX, posY)) is not supposed to be clickable you can set the css prepoerty pointer-events: none; to it and it will not be selected anymore
As #t.niese suggested above you could do this:
$(this.cTaskItem[0]).mouseup(function(event)
{
var posX = event.clientX, posY = event.clientY;
var elements = [];
var elm = document.elementFromPoint(posX, posY);
while(elm.tagName != "HTML")
{
elements.push(elm);
elm.style.display = "none";
elm = document.elementFromPoint(posX, posY);
}
});
Then all you would need to do is go through your elements array and select the one you need.
I'm trying to make an object to move in an area when clicking the area with the left pointer.
Is this possible in javascript/jquery?
Can you please give me some examples if possible?
I'm aiming to do this in javascript/html/css
Here's an example of an object following the mouse click
You can do it like this (Working Demo in jsFiddle):
$(document).ready(function(){
$('#canvas').click(function(e){
var offset = $(this).offset();
$('#object').css({
'top': e.pageY-offset.top,
'left': e.pageX-offset.left
})
})
})
Whenever the click event happens, it's pageX and pageY values are taken using which the exact location of the click in the canvas object is found. This coords are then used in jQuery animate function to change the location of the object div in it.
It is possible, but your answer could range from moving an object towards the click position by setting its position to absolute in CSS and modifying its left and top position until it reaches the click area with a setInterval timer to elaborate A* path finding.
var mousePosition;
var div;
div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "red";
document.body.appendChild(div);
document.addEventListener('click', function(event) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
div.style.left = (mousePosition.x-div.offsetWidth/2) + 'px';
div.style.top = (mousePosition.y-div.offsetHeight/2) + 'px';
}, true);