Jump to content

divs displayed around a circle?


woop

Recommended Posts

At the moment i can retrieve information from a DB and display it nicely in a vertical line of boxes (some boxes with extra information as needed).

 

I basically need a version of this with exactly the same information, but instead of a top-down list of divs (boxes), I need them to be displayed going around a circle (starting top centre, going clockwise).

 

Does anyone know if this is possible?

And how easy would it be? Any scripts?

 

It's already taken me ages to get the list pulling the appropriate info and displaying in a straight line.

 

Thanks for any help/direction.

 

 

Added: The number of divs displayed will be variable depending on what's in the DB. So I can't count on their being a certain number. Therefore the 'circle' would need to re-size in some way?!

Link to comment
https://forums.phpfreaks.com/topic/209939-divs-displayed-around-a-circle/
Share on other sites

could you position the div's, using $x for top and $y for left,

 

something like

 


<?php

$x=0;
$y=0;

for($i=0; $i<=3; $i++)
{
echo '<div style="position:relative; border:solid 1px #000; top:'.$x.'; left:'.$y.';">some text</div>';
$x=$x+90;
$y=$y+90;
}

?>

 

you will need to play around with the values but you might get it looking kind of circular

 

Well, after taking a look at it for a while, I figured out the formula. All you need is a couple of trig functions. I wrote up a working sample to get you started. You'll have to adjust the scaling conditionally, depending on how big/how many items you have, but I'll leave that up to you  ;)

 

<?php
print <<< HTMLSTUFF
<html>
<head>
<style type="text/css">

body { text-align:center; }
#redbox {

background-color:red;
width:4px;
height:4px;
position:absolute;
}

</style>
</head>
<body>
HTMLSTUFF;

$items = 5;                  // Number of items around the circle
$scale = 50;                 // A scale to adjust pixels
$abcissa = 0;                // Start the trig functions at x = 0
$inc = (2 * pi()) / $items;  // Increment x by this much for each div

for ($i = 0; $i < $items; $i++) {
$x = 400 + $scale*sin($abcissa);  // I made the inital x-coord 400px from top
$y = 400 + $scale*cos($abcissa);  // Same with y-coord, you can change these
echo "<div id='redbox' style='left:{$x}px;top:{$y}px;'></div>";
$abcissa += $inc;
}

print <<< HTMLSTUFF
</body>
</html>
HTMLSTUFF;
?>

 

You can change the number of items to whatever integer you like. Hope this is what you're looking for.

-jm

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.