Overlay a cursor on two Ivs

Question

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 dynamically created div. 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: http://jsfiddle.net/5dnr0era/9/

Answer 1

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

The complete solution would be a bit complex, as it needs to create unique h and v variables for each internal div, identify in which div the mouse is on top, 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 div (a function f called twice and another c called 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 2 dead arrows in the corner).

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