Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Circular dock/menu in css or jquery

Tags:

html

jquery

css

Is it possible to have a circular menu or dock using css or jquery.?
I have a set of images as the dock items that need to be displayed as a circular dock... however the number of items in the dock are not constant and may vary.... so i cannot tend to use constant values for positioning each item in a pre-defined manner. Ajax loads some images into this particular div and i need to use css or jquery to style this so that they get displayed as circular dock items. Any idea on how this can be implemented..?
I would like a browser in-specific implementation, but i also welcome if some one has some solutions specific to few browsers...

UPDATE
I don't think i exactly want a pie menu... it easily gets messed up as the number of dock items increase. I am looking for a spiral dock. and by spiral i mean that the menu items must be in the following alignment.. alt text

like image 440
sasidhar Avatar asked Jan 11 '11 14:01

sasidhar


1 Answers

I got it I think! This is just a basic concept, so please tweak it yourself.

http://www.mathematische-basteleien.de/spiral.htm#Spirals%20by%20polar%20equations

See the following JSFiddle and the code below:

var items = 10;
var a = 20;
var b = 1; // updated an extra b, used for rate (see update section below)
var centerX = $('.content').innerWidth()/2; // and some adjustment of half its own size
var centerY = $('.content').innerHeight()/2;
for(var i = 0; i < items; i++)
{
    var yPos = a * i * Math.cos(b*i) + centerY;
    var xPos = a * i * Math.sin(b*i) + centerX;
    var item = '<div class="item" style="top:' + yPos   + 'px; left:' + xPos + 'px;" />';
    $('.content').append(item);
}

And some CSS for testing purposes:

.item
{
    width:10px;
    height:10px;
    position: absolute;
    background-color:red;
}

.content
{
    position:relative;
    height:300px;
    width:300px;
    background-color:green;
}

<div class="content">
</div>

Update: answer to the comment

The function for yPos and xPos are generating items to the outside, they start from the center point. By defining a different a and a an extra var b inside the Math.cos(b*i). It is possible to change the rate of the divs showing up and the spread of the total spiral. The spread of the spiral is defined by a, because it defines the amplitude. The rate that divs are showing up is defined by the new b.

So a smaller b means lower angles, means closer together on the spiral. A smaller a means lower amplitude, means closer together in x and y axes.

If the number of images is not predictable, it shouldn't matter, because of the spiral going out. Of course, this will give you problems when adding too much.

Another solution is just doing this in PHP, because it has nothing dynamic to do, so you can already do this in your backend. The could will be the same with the forloop and all, but then with printing statements in your PHP.

like image 72
Marnix Avatar answered Nov 01 '22 14:11

Marnix