Overlay a cursor on two divs

Question

Overlay a cursor on two divs

Navigation

#1 by (1 votes)

2

I call a function 2 times to create a div and a cursor with two lines (horizontal and vertical). I wanted these two lines to work on the two divs created dynamically. It's only working on a div.

var count = 1;

f(); //call function
f();

function f(){
    //************create div************
    var div = document.createElement("div");
    div.id="div"+count;
    div.style.width = "300px";
    div.style.height ="300px";
    div.style.border = "1px solid #000";
    div.style.background = "red";
    div.style.cssFloat="left";
    //div.style.padding="10px 10px";
    //div.style.position = "absolute";
    document.body.appendChild(div);
    
    //************create div mouse vertical ************
    var div_v = document.createElement("div");
    div_v.style.position = "absolute";
    div_v.style.borderLeft = " 1px solid black";
    div_v.style.height = "300px";
    div_v.className="cursor-v"+count;
    
    //************create div mousse horizontal ************
    var div_h = document.createElement("div");
    div_h.style.position = "absolute";
    div_h.style.borderTop = " 1px solid black";
    div_h.style.width = "300px";
    div_h.className="cursor-h"+count;
    
    document.getElementById("cursor").appendChild(div_h);
    
    document.getElementById("cursor").appendChild(div_v);
    
    var v = document.querySelector('.cursor-v'+count);
    var h = document.querySelector('.cursor-h'+count);
    var elBox = document.querySelector('.cursor').getBoundingClientRect();
    
    window.onmousemove = function(e) {
        var mouseX = e.clientX - elBox.left;
        var mouseY = e.clientY - elBox.top;
        
        h.style.top = mouseY + 'px';
        v.style.left = mouseX + 'px';
        v.style.visibility = "visible";
        h.style.visibility = "visible";
        
        //if(mouseX>300 || mouseY>300){
            //v.style.visibility = "hidden";
            //h.style.visibility = "hidden";
        //}
       
    };
count++;
}

<div id="cursor" class="cursor"></div>

Example jsfiddle: link

javascript

asked by anonymous 30.04.2015 / 00:22

1 answer

inner join display last status How to send information from a dynamic form?

score 1 · Answer 1

If you move the "cursor" div, you will see that only the first pair of cursors is moving, the second is stopped where it was created. This is because in the onmousemove function you use the variables h and v, which are reused when you create the second div.

The complete solution would be a bit complex because you need to create unique h and v variables for each internal div, identify which of the divs the mouse is on, and update the corresponding cursors depending on the case.

For the purpose you want, if I understand correctly, a simple solution would be to create the cursors separately from the creation of the internal divs (one function f called twice and another called c once, for example). Then just fix the size of the horizontal div:

div_h.style.width = "600px";

(Just modifying this line also produces the same effect, the difference is that there are not 2 'dead' cursors in the corner).

If this is just an example and you want to build a more complex page, I suggest you investigate some javascript libraries to make it easier to work, such as jQuery and D3.js.