CODEWITHSUNDEEP
jquery
DannieCoderBoi
DannieCoderBoi

Reputation: 728

Rotating around circle set degrees and positions.

i've been working getting divs to rotate around a circle to a set point.

However, I seem to have hit the end of my skill level. I am only a junior in JS/JQuery so please be gentle.

If you look at the Fiddle you will see four links at the bottom. If you click the first one which is rotate the boxes one space to the left. It works great. However it only works once. I have used:

$("#box" + i).data('position', degreeRot);

to add the currently location to a data attribute but it doesn't seem to be working. I wouldnt even recommend pressing the right button.

so, I have a few questions, if you wouldn't mind helping me out.

Thank you in advance. I really would appreciate all help and advice :)

Upvotes: 4

Views: 437

Answers (1)

JLRishe
JLRishe

Reputation: 101690

Your code has a lot of bugs, but in particular, I think you're over-complicating it by using the left/right stuff. Just use a positive or negative numeric value to indicate the amount to rotate:

<p class="worldMenuPosition " data-spaces="-1" id="box1">Rotate one space left</p>
<p class="worldMenuPosition" data-spaces="1" id="box2">Rotate 1 space right</p>
<p class="worldMenuPosition " data-spaces="-2" id="box1">Rotate two spaces left</p>
<p class="worldMenuPosition" data-spaces="2" id="box2">Rotate 2 spaces right</p>

Once you switch to that approach, the code can be progressively refactored down to this:

$(document).ready(function () {
    var currentRotation = -35,
        rotationIncrement = 35;

    $(".worldMenuPosition").click(function () {
        var spaces = $(this).data("spaces");

        rotateToDirection(spaces * rotationIncrement);
    });

    function rotateToDirection(deg) {
        currentRotation += deg;

        positionBoxes();
    }

    function rotateTo(deg, box) {
        var bplate = ["translate(-50%,-50%) rotate(", deg,
                      "deg) translateY(-200px) rotate(", -5, "deg)"];

        $(box).css({
            "transform": bplate.join("")
        });
    }

    function positionBoxes() {
        $(".worldSection").each(function (index, element) {
            rotateTo(currentRotation + (index * rotationIncrement), element);
        });
    }

    // Initialize positions
    positionBoxes();
});

http://jsfiddle.net/TMuD5/9/

You asked for an explanation of the bugs, so here's a bit of an explanation.

Well, if we look just at the "left" branch of your code, it's changing the data-position of all 4 buttons every time you click the "One space left" button. The first time you click the "One space left" button, it rotates everything 35 degrees to the left, and updates the data-position attributes of all 4 buttons to go through these sequences of values as you click the "One space left" button:

box1 - -70, -35, 0, 35, 70, ...
box2 - 0, 70, 140, 210, 280, ...
box3 - -70, 35, 140, 245, 350, ...
box4 - 0, 140, 280, 420, 560, ...

So the next time you click "One space left", it rotates the bunch to the -35 degree position (which is one space to the right), then 0 degrees, then 35 degrees, etc. And so it goes that every click rotates the system 35 degrees to the right.

The "right" branch of your code suffers from a similar problem, but it's even worse since you are subtracting 35 on each iteration. This causes all the boxes to change position and rotate to the left.

Upvotes: 3

Related Questions