CODEWITHSUNDEEP
javascripthtmlcss
Ratatouille
Ratatouille

Reputation: 1492

Galaxy like Structure using CSS

I want to build a node connector application using JSPlumb.

Now the idea is that there would be central div element which can connect to all the

div element distributed along the circumference of the of central div at a specific radius enter image description here

Attaching the screenshot for the same is this possible to do with CSS plainly

Sorry if my question confusion anybody but I decide by explain it as efficiently as I could.I would highly appreciate it some one editing this for better understanding perspective

Regards

Upvotes: 0

Views: 701

Answers (3)

manish
manish

Reputation: 497

Mess around with this.

http://jsfiddle.net/A7pY2/2/

HTML:

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS:

#container {
     position: absolute;
    top: 300px;
    left: 300px;
}
#container div {
    position: absolute;
    background-color: #eee;
    width: 50px;
    height: 50px;
}

JavaScript:

startCar();

function startCar() {
    var items = document.getElementById("container").getElementsByTagName("div").length;
    var angles = new Array(items);
    var rx = 200;
    var ry = 100;

    initCar();



    function initCar() {
        var content = document.getElementById("container");
        var divs = content.getElementsByTagName("div");
        var xpos, ypos;
        for(var i = 0; i < items; i++) {
            angles[i] = ((Math.PI * 2) / items) * i;
            xpos = Math.cos(angles[i]) * rx;
            ypos = Math.sin(angles[i]) * ry;
            divs[i].style.left = xpos + 'px';
            divs[i].style.top = ypos + 'px';
            divs[i].style.zIndex = parseInt(ypos);
        }
    }

}

Upvotes: 2

Erik Reppen
Erik Reppen

Reputation: 4645

Well, I'm not going to learn JSPlumb, but I can tell you how I'd solve the HTML/CSS side of it with some pointers on how to use that layout to your advantage in the JS. I don't think there would be any practical non-convoluted/silly way to set coordinates with CSS-only since there is math required here but you might be able to do it with SVG which is what JSPlumb appears to be using on its demo page.

CSS:

#central_div { position:relative; overflow:visible; }
/* or absolute or fixed */

.orbit { overflow:visible; }
/* no position set for orbits so stars anchor to #central_div */

.star { position:absolute; width:20px; height:20px; }

HTML:

<div id="central_div">

    <div class="orbit" data-radius="50">
        <div class="star" data-radians="1.23"></div>
        <div class="star" data-radians="2.22"></div>
        <div class="star" data-radians="4.10"></div>
        <div class="star" data-radians="6.01"></div>
    </div>

    <div class="orbit" data-radius="100">
        <div class="star" data-radians="1.23"></div>
        <div class="star" data-radians="2.22"></div>
        <div class="star" data-radians="4.10"></div>
        <div class="star" data-radians="6.01"></div>
    </div>

</div>

Note: Keep in mind the orbit divs all sit in side the central div. They're just there to organize your stars and provide an easily adjusted orbit hook in the form of a data-radius attribute. There is no need to set any dimensions on them or move them around.

JS:

Now your JS can loop through the orbits, take the data-radius and apply that to the star radian or degree data (can convert to one or the other easily). I'll leave the geometry to you for now since this seems more like a markup/css question but let's assume a function called setStarCoordinates that takes <star dom element object>,<radius>, and <radians or degrees - your choice> for arguments.

Only the stars have height/width dimensions but they themselves are absolute so their containers can all be assumed to occupy a single x,y point. Aside from the geometry you have to set top and left coordinates of the stars as top + (.5 * height) and left as left + (.5 * width)

Link on radians: http://www.teacherschoice.com.au/maths_library/angles/angles.htm

And then a loop that's something like this:

var orbits = document.querySelectorAll('#central_div .orbit'),
i = orbits.length;

while(i--){
    var radius = orbits[i].getAttribute('data-radius'),
    stars = orbits.getElementsByClassName('star'),
    //or use querySelectorAll again if you're supporting IE8
    j = stars.length;

    while(j--){
        var thisStar = stars[j],
        radian == thisStar.getAttribute('data-radian');
        setStarCoords(thisStar, radius, radian);
    }
}

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

The simplest way to do this would be to have a DIV with a background image of the dotted lines.

Then have more DIVs, A tags or whatever absolutely positioned on top of this.

<div id="my-background-div">
    <a href="#">Node #1</a>
    <a href="#">Node #2</a>
    <a href="#">Node #3</a>
    <a href="#">Node #4</a>
</div>

...and so on.

Not a programmatic solution but I don't think that would be possible with just plain CSS so my solution above would be fine for a static page.

Upvotes: 0

Related Questions