2

The idea I want to realize is that :

search bars around one

those are searchbars made like this (not necessary)

<form action="/index" class="form-wrapper cf">
    <input type="text" placeholder="Search here..."  name="searchbox" >
      <button class="searchbutton" type="submit">Search</button>
</form>

So i want to dispose them in a circle

the result would be similar to what you see here by clicking inside the "share" button.

I've found also this questions , but I cannot make them work

for example Stack question1

but I want only to put my form around and nothing more, like the 1st image

someone could help me, maybe just modifying a bit the answer code of the question I linked, that is:

var radius = 200; // radius of the circle
var fields = $('.field'),
    container = $('#container'),
    width = container.width(),
    height = container.height(),
    angle = 0,
    step = (2*Math.PI) / fields.length;
fields.each(function() {
    var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2),
        y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
    $(this).css({
        left: x + 'px',
        top: y + 'px'
    });
    angle += step;
});

Also just some tips would be very usefull, I have all day to dispose them, so i will be here trying and maybe something good will be created, then I will post my results for everyone who need.

Thank you in advance, if something not clear just comment, a question up would be helpful

This could help a bit too: another similar stack overflow question

Community
  • 1
  • 1
Trink
  • 584
  • 3
  • 14

1 Answers1

1

That's something you could start from

JAVASCRIPT

function drawEllipse(selector, x, y, a, b, angle)
{
        var steps = $(selector).length;

        var i = 0;
        var beta = -angle * (Math.PI / 180);    
        var sinbeta = Math.sin(beta);
        var cosbeta = Math.cos(beta);

        $(selector).each(function(index)
        {
        i+= (360/steps);
        var alpha = i * (Math.PI / 180) ;
        var sinalpha = Math.sin(alpha);
        var cosalpha = Math.cos(alpha);
        var X = x + (a * cosalpha * cosbeta - b * sinalpha * sinbeta);
        var Y = y + (a * cosalpha * sinbeta + b * sinalpha * cosbeta);




            X = Math.floor(X);
            Y = Math.floor(Y);

            $(this).css('margin-top', X + 'px');
            $(this).css('margin-left', Y + 'px');

            });



    }


        $(

document).ready(function()
      {

      drawEllipse(".box", 230,300, 200, 350, 360);


         });

CSS

.container { width:800px; margin:0 auto; }

.box {

position:absolute;
background-repeat:no-repeat;
float:left;
height:120px;
position:absolute;
width:120px;

}



.logo{

  width:280px;
  height:105px;
  background-repeat:no-repeat;
  margin:0 auto;
  margin-top:240px;
  margin-left:260px;
  position:absolute;

}

HTML

<head>
<title>circleworld</title>

<!--css-->
<link rel="Stylesheet" type="text/css" href="circleworld.css" />
<!--Scripts-->
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="circleworld.js"></script>

</head>


<body>

<div class="container">
<form action="/index" class="box">
    <input type="text" placeholder="Search here..."  name="searchbox" >
      <button class="searchbutton" type="submit">Search</button>
</form>
<form action="/index" class="box">
    <input type="text" placeholder="Search here..."  name="searchbox" >
      <button class="searchbutton" type="submit">Search</button>
</form>
<form action="/index" class="box">
    <input type="text" placeholder="Search here..."  name="searchbox" >
      <button class="searchbutton" type="submit">Search</button>
</form>
<form action="/index" class="box">
    <input type="text" placeholder="Search here..."  name="searchbox" >
      <button class="searchbutton" type="submit">Search</button>
</form>
<form action="/index" class="box">
    <input type="text" placeholder="Search here..."  name="searchbox" >
      <button class="searchbutton" type="submit">Search</button>
</form>
<form action="/index" class="box">
    <input type="text" placeholder="Search here..."  name="searchbox" >
      <button class="searchbutton" type="submit">Search</button>
</form>
<form action="/index" class="box">
    <input type="text" placeholder="Search here..."  name="searchbox" >
      <button class="searchbutton" type="submit">Search</button>
</form>
<form action="/index" class="box">
    <input type="text" placeholder="Search here..."  name="searchbox" >
      <button class="searchbutton" type="submit">Search</button>
</form>


<form action="/index" class="logo">
    <input type="text" placeholder="Search here..."  name="searchbox" >
      <button class="searchbutton" type="submit">Search</button>
</form>

</div>



</body>
</html>

and here is a preview of what you'll get! ;)

preview

Mattew Trincanati
  • 191
  • 1
  • 1
  • 9