0

I want to create a jQuery slime menu. The basic concept is simple. I have some icons with fixed positions on the screen. Some of them are "switches", and if you click them, you need to click on another element to have some effect (imageine something like when you have a building in an RTS. It's not enough to just click on the building's icon, but you need to place it on the map after that action).

I want to display a CSS triangle element after you clicked the icon, and before you click on another "compatible" div. The problem is not here, but I'm not so familiar with CSS transformations.

Here's a fiddle about what I have so far. My problem is that the arrow element is not rotating to the cursor. I also need to change the size of it, so the triangle's bottom center must be at the pointer.

http://jsfiddle.net/PSYKLON/41Lcj653/

The HTML part is simple (the span element is used for debugging):

<div class="fixicon"></div>
<div class="arrow"></div>
<span></span>

The CSS:

span {
    float: right;
}
.fixicon {
    width: 30px;
    height: 30px;
    background: #111;
    border-radius: 15px;
    position: fixed;
    left: 10px;
    top: 10px;
}
.arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 200px 25px;
    border-color: transparent transparent #111 transparent;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 25px;
    transform-origin: 25px 0px;
    transform: rotate(0deg);
}
.arrow.show {
    opacity: 1;
}

And the JS:

$(function(){
    $('.fixicon').click(function(){
        $('.arrow').toggleClass('show');
    });
    $(window).mousemove(function(e){
        if(!$('.arrow').hasClass('show')) {
            return;
        }
        var dir = point_direction(25,25,e.pageX,e.pageY);
        $('.arrow').css('transform','rotate('+dir+'deg)');
        $('span').text(dir);
    });
});

function point_direction(x1,y1,x2,y2) {
    var dx,dy;
    dy = y2 - y1;
    dx = x2 - x1;
    return (Math.atan(dy/dx) * 360) % 360;
}

So basically, I need to achieve something like this, doesn't matter where the cursor on the screen are:

enter image description here

Thanks for anyone, who can help. :)

Balázs Varga
  • 1,797
  • 2
  • 16
  • 32
  • Can you please explain what is a **slime menu**? What is an RTS in your case? – Roko C. Buljan Mar 27 '15 at 16:38
  • Slime menu is just a name for the concept, where you click a div, and a "slime" (now just a triangle), appears from it. Basically I want to achieve that the rotation and the size always follow the cursor, like on this image: http://v57.imgup.net/img98f2.jpg . RTS means Real Time Strategy. – Balázs Varga Mar 27 '15 at 16:43
  • http://stackoverflow.com/questions/20163948/creating-radio-circular-rotating-button-css-and-jquery >> something I did a long time ago. Hope it helps, cause I'm sure it's exactly what you need. – Roko C. Buljan Mar 27 '15 at 16:45
  • Thanks, it's exactly what I'm looking for, but I can't find a good source on Google, or even on Stackoverflow. Now I can copy the basic maths from the fiddles in this topic. :) – Balázs Varga Mar 27 '15 at 16:48

0 Answers0