CODEWITHSUNDEEP
javascriptcss
Darlyn
Darlyn

Reputation: 4938

Deg. in rotation

I am building time picker where you can set time on "real" clocks. Im finding the position of mouse and degrees + rotating div using this script

var g;
        var h;
        if (e.target.id == "rotationSliderContainer") {

            g = e.offsetX;
            h = e.offsetY;
        } else {
            g = e.target.offsetLeft + e.offsetX;
            h = e.target.offsetTop + e.offsetY;
        }
        var atan = Math.atan2(g - radius, h - radius);
        deg = -atan / (Math.PI / 180) + 180;

        var presne = Math.abs(deg - (Math.round(deg / 30) * 30));

        if (presne <= 2) deg = Math.round(deg / 30) * 30;

        if(deg == 360)
                deg = 0;
        two.style.transform = "rotate(" + deg + "deg)";

it works fine but it has little bug , whenever i want to move div , between 12 and 1,2,3 its flipping between 12 and one of those values.

Here is a live demo http://jsfiddle.net/Trolstover/afo7ky03/1/ Is there any shortcut how to prevent this unwanted behavior or did i simply made a mistake somewhere?

Upvotes: 1

Views: 49

Answers (1)

domitall
domitall

Reputation: 655

This if/else condition is switching between events in the rotationSliderContainer and other DOM elements (such as the rotationSlider and the body). That else condition is your culprit.

if (e.target.id == "rotationSliderContainer") {

        g = e.offsetX;
        h = e.offsetY;
    } else {
        g = e.target.offsetLeft + e.offsetX;
        h = e.target.offsetTop + e.offsetY;
    }

remove those two lines and it should be fine.

    if (e.target.id == "rotationSliderContainer") {

        g = e.offsetX;
        h = e.offsetY;
    }

Cool clock ^_^

Upvotes: 1

Related Questions