Develop Reference

Calculating CSS positioning of small divs around another div?

This is more in the realm of "is this possible without a stupid amount of code?" and to get some ideas of how to go about it. If I had a css representation of a dinner table, and wanted to position 4-10 chairs around it, I might create the divs like this (inline to show what I'm doing compactly)
<div style="position:relative;width:200px;height:200px;">
<div id="table" style="position:absolute;width:100px;height:100px;"> </div>
<div id="chair1" style="position:absolute;width:10px;height:10px;"> </div>
<div id="chair2" style="position:absolute;width:10px;height:10px;"> </div>
<div id="chair3" style="position:absolute;width:10px;height:10px;"> </div>
<div id="chair4" style="position:absolute;width:10px;height:10px;"> </div>
</div>
Where there's a div to hold it all and a div to represent 4 chairs and a table. But what if my dynamically created code needed to create 6, 8, or 10 chairs? How would I go about spacing them dynamically off the table at an even rate around the table? Thoughts?

You need JavaScript in order to set the chairs. Something to get you started:
HTML:
<div id="room">
<div id="table"></div>
</div>
CSS:
#room {
position:relative;
width:200px;
height:200px;
}
#table {
background:blue;
position:absolute;
width:100%;
height:100%;
}
.chair {
background:red;
position:absolute;
width:10px;
height:10px;
}
JavaScript using jQuery:
var $chair = $('<div class="chair">');
var $room = $('#room');
var top = 0;
var left = 0;
var stepSize = 20;
var createChairs = function(amount) {
for (var i = 0; i < amount; i++) {
var newChair = $chair.clone();
newChair.css({top: top, left: left});
$room.append(newChair);
left = left + stepSize;
}
}
createChairs(10);
You create a function which you pass the amount of chairs you wish, then you go around the border and set as much chairs as wished. This example does not include the border handling yet i.e. it will just set chairs from the top left to the top right. But handling borders should be easy doable with a few conditions. You should have gotten the idea.
Fiddle: https://jsfiddle.net/s0oady2q/

I really don't know how you would be able to do this without at least a little bit of JavaScript. In fact, even if you tried to use some kind of calc() magic, you would still run into the issue that calc() doesn't support sin() or cos() calls.
Here is a small, pure JavaScript way to get what you want though:
/*jslint browser:true*/
(function(doc) {
"use strict";
var TABLE_RADIUS = 100;
function each(arr, cb) {
return Array.prototype.forEach.call(arr, cb);
}
function deg2rad(deg) {
return ((deg * Math.PI) / 180);
}
function pos(deg, r) {
return {
x: (r * (Math.cos(deg2rad(deg)))),
y: (r * (Math.sin(deg2rad(deg))))
};
}
function chairIterator(chair, chairIndex, chairArr) {
var circPos = pos(chairIndex / chairArr.length * 360, TABLE_RADIUS);
chair.style.top = circPos.y + "px";
chair.style.left = circPos.x + "px";
}
function tableIterator(table) {
var chairs = table.querySelectorAll(".chair");
each(chairs, chairIterator);
}
function main() {
var tables = document.querySelectorAll(".table");
each(tables, tableIterator);
}
doc.addEventListener("DOMContentLoaded", main);
}(document));
.table {
display: inline-block;
position: absolute;
width: 10px;
height: 10px;
top: 50%;
left: 50%;
background-color: red;
}
.table .chair {
position: absolute;
width: 10px;
height: 10px;
background-color: blue;
}
<div class="table">
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
<div class="chair"></div>
</div>

Align div correctly on viewport when scrolling

I'm doing a parallax website wherein when the user scrolls the sliders will slide from the left and align within the viewport. The issue is that I have scroll the mousewheel many times in order for the slide to align. Is there a way to make the slide align within the viewport with just one scroll.
Here is my work in progress. I'm using skrollr(http://prinzhorn.github.io/skrollr/) for my parallax designs
http://creativekidsstudio.com/ck/
HTML
<section class="slide slide_1">
<div class="slide_content" >
<h2>You see a blank canvas,<br/> we see potential</h2>
<img src="<?php bloginfo('template_url'); ?>/images/canvas.png" alt="Canvas" />
</div>
</section>
<section data-0="transform:translateX(100%); " data-1500="transform:translateX(0%) " class="slide slide_2">
<div class="slide_content" >
<h2>You see a brush,<br/> we see a dream</h2>
<img src="<?php bloginfo('template_url'); ?>/images/brush.png" alt="brush" />
</div>
</section>
<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)" class="slide slide_3">
<div class="slide_content" >
<h2>You see a ball of clay,<br/> we see a world of creativity</h2>
<img src="<?php bloginfo('template_url'); ?>/images/clay.png" alt="clay" />
</div>
</section>
<section data-2500="transform:translateX(100%); " data-3500="transform:translateX(0%)" class="slide slide_4">
<div class="slide_content">
<h1>Every child is a creative kid.</h1>
<img src="<?php bloginfo('template_url'); ?>/images/kid.png" alt="kid" />
</div>
</section>
CSS
.slide{width:100%; height:100%; position:fixed}
.slide_1{background-image:url('images/patternfinal1.jpg'); z-index:1}
.slide_2{background-image:url('images/patternfinal2.jpg'); z-index:2}
.slide_3{background-image:url('images/patternfinal3.jpg'); z-index:3}
.slide_4{background-image:url('images/patternfinal4.jpg'); z-index:4}
.creative_content{ z-index: 10; position: relative; background-color: white; padding:20px 0; top:5%}
.slide_content{
text-align:center;
height:100%;
position:absolute;
top:15%;
margin:0 auto;
left:0;
right:0;
z-index:1;
font-family: 'anarchisticno_leaders..', sans-serif;
font-size:70px;
color:#333
}
.slide_1 img,
.slide_2 ing,
.slide_3 img,
.slide_4 img{display:block; margin:0 auto}
Here is the javascript that i have implemented but the problem is it seems to stop midway when i scroll.
JAVASCRIPT
<script>
var tempScrollTop = 0;
var currentScrollTop = 0;
var scrollHeight = $(window).height();
var newHeight = 0;
function scrollIt() {
$(window).off('scroll', scrollIt);
currentScrollTop = $(window).scrollTop();
if (tempScrollTop < currentScrollTop) {
newHeight = newHeight + scrollHeight;
$('html').animate({scrollTop: newHeight}, 500, function(){
var setScroll = setTimeout(function(){
console.log('Animation Complete');
tempScrollTop = $(window).scrollTop();
$(window).on('scroll', scrollIt);
}, 10);
});
} else if (tempScrollTop > currentScrollTop){
newHeight = newHeight - scrollHeight;
$('html').animate({scrollTop: newHeight}, 500, function(){
var setScroll = setTimeout(function(){
console.log('Animation Complete');
tempScrollTop = $(window).scrollTop();
$(window).on('scroll', scrollIt);
}, 10);
});
}
}
$(window).on('scroll', scrollIt);
</script>

Im not sure if you mean you want them to transform faster, or if you want them to stay on screen while you scroll longer.
Option 1: transform faster:
Currently you have your data- attributes for skrollr set to scroll your slide from 100->0% over 1000px. Currently you have:
<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
If you'd like it to tansform faster, you just need to changes these numbers to accommodate the speed at which you'd like it to transform. Example:
<section data-1500="transform:translateX(100%); " data-1600="transform:translateX(0%)">
Option 2: stay on screen longer:
If you want them to stay on screen longer you just need to increase the distance between the finish of one slide's transform and the beginning of the next. Currently you have:
<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
</section>
<section data-2500="transform:translateX(100%); " data-3500="transform:translateX(0%)">
</section>
If you'd like them to stay on screen longer try something like this:
<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
</section>
<section data-3500="transform:translateX(100%); " data-4500="transform:translateX(0%)">
</section>
Hope this helps

JQuery image size calculation doesn't work in Chrome / Safari

IDEA
A page with a few div elements, some are visible, some must remain unseen until particular span element is clicked. One of those invisible elements is a container for several images with pop-up text, which should be placed randomly on page but with 20px margin from every edge of the page (page is set to overflow:hidden;).
HTML (including jQuery 1.8.3, jQuery UI 1.10.1 and jQuery UI touch-punch):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="pattern" style="background-image: url('m.png');"></div>
<div class="shadow pat-main-block">
<span class="mood-board">Show container</span>
</div>
<!-- Container div -->
<div id="mood-board">
<span class="hide-mood shadow">Hide container</span>
<div id="img1" class="drag mood-img">
<img id="mimg1" class="shadow" src="mood/brick-mood-1.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img2" class="drag mood-img">
<img id="mimg2" class="shadow" src="mood/brick-mood-4.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img3" class="drag mood-img">
<img id="mimg3" class="shadow" src="mood/brick-mood-3.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img4" class="drag mood-img">
<img id="mimg4" class="shadow" src="mood/brick-mood-2.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img5" class="drag mood-img">
<img id="mimg5" class="shadow" src="mood/brick-draw-4.png">
<span class="mood-name shadow">text</span>
</div>
</div>
<!-- End of the container div -->
</body>
This code is simplified — I removed the elements not affecting the case and left only 5 elements in container div (actually there are 13 elements). I want to make a kind of template so it could be used with different images and different amount of images (elements).
CSS:
html, body {
width:100vw;
height:100vh;
margin:0;
padding:0;
overflow:hidden;
}
.pattern {
width:100%;
height:100%;
margin:0;
padding:0;
position:absolute;
}
.pat-main-block {
position:fixed;
top:100px;
left: 100px;
background: #fff;
padding: 40px;
}
#mood-board {
position: absolute;
width:100%;
height:100%;
margin-top:-1000px;
left:0;
}
.mood-img {position:absolute;}
.mood-img:hover .mood-name {opacity:1;}
.mood-name {
position:absolute;
opacity:0;
background:#fff;
bottom:15px;
right:15px;
}
.hide-mood {
position:absolute;
top:40px;
left:40px;
padding:9px;
background:#1900DC;
color:#fff;
z-index:99;
cursor:pointer;
}
JS 1:
$(function(){
$(".mood-board").click(function(){
$("#mood-board").css("display", "block");
});
});
JS 2:
$(document).ready(function () {
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$("#img1").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg1').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg1').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
alert ( $('#mimg1').outerHeight() );
$("#img1").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img2").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg2').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg2').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img2").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img3").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg3').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg3').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img3").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img4").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg4').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg4').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img4").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img5").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg5').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg5').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img5").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#mood-board").css({
"display": "none",
"margin-top": "0"
});
});
The method I'm trying to use is to calculate page's width and height, width and height of the image, then to calculate minimum and maximum range for random positioning (margin-top and margin-left or just top and left), so that the margin between the edge of the image and the edge of the page won't be less the 20 pixels.
Container with images is positioned off the screen, then after images are loaded and calculated, container is made invisible and put to fit the screen. In Firefox it works fine, alerts show the correct calculation results, but in Chrome and Safari image sizes are seen as 0 and the final calculations are wrong making some images go behind the page's edges.
The other thing I would like to do is to make a js-code universal, so there would be no need to mention every #img and #mimg elements.
http://thelocalgenius.com/patterns/brickwork-classics/
The same code works fine in JSfiddle: http://jsfiddle.net/n3q92/1/ Although it's almost the same code that doesn't work on my page, and those parts that couldn't be included to JSfiddle don't seem to be the reason — I've tried to disable them all and it didn't affect how the page works.
UPDATE: Fiddle works in Chrome, but not in Safari.
UPDATE 2: I've found one more interesting thing — in Firefox if the page loads without cache, script can't get image's width and height the same way as in Chrome and Safari. I don't understand why because the images supposed to be loaded since they are in a div with display:block; option just positioned 1000px above the screen edge. Anybody has any ideas?

The solution was to use $(window).load() instead of $(document).ready(). The interesting thing is that the same javascript code worked on JSfiddle in Chrome.

Creating boxes in javascript

I am trying to create multiple boxes along the top of the page using javascript. I have one box but cannot figure out how to get multiple along the top of the page. This is what I have so far:
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<link rel="stylesheet" type="text/css" href="boxes.css">
<script language="JavaScript">
el=document.getElementById("box1");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.left=width*Math.random();
el.style.top=height*Math.random();
el=document.getElementById("box2");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.right=width*Math.random();
el.style.top=height*Math.random();
el=document.getElementById("box3");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.middle=width*Math.random();
el.style.top=height*Math.random();
</script>
</head>
<body>
<div id="box1">
First box
</div>
<div id="box2">
Second box
</div>
<div id="box3">
Third box
</div>
</body>
</html>
Here is the CSS that I have:
#box1{
background-color:orange;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
#box2{
background-color:blue;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
#box3{
background-color:green;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}

You need to either move the <script> element to the end or wrap your code in a DOM ready or onload handler, because otherwise getElementById() won't find any elements because they won't have been parsed yet.
Then you need to include a unit (e.g., "px") in the left and top style properties.
Also there's no need to recalculate the width and height for each box since you're doing the same calculation for each. (And you should declare your variables with var, but although good practice that isn't essential to make it work.)
Here's a working version:
var el=document.getElementById("box1");
var width=window.innerWidth-50;
var height=window.innerHeight-50;
el.style.left=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box2");
el.style.right=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box3");
el.style.middle=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
Demo: http://jsfiddle.net/m3Gg3/
Also the left and top properties in your CSS should use : not =.

It is difficult to understand what you want, maybe this?.
<script>
window.onload = function() {
var titles = ["First box", "Second box", "Third box"]
var width=window.innerWidth-50
var height=window.innerHeight-50-120
for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left= (width / titles.length) * i
el.style.top=0
el.style.width = width / titles.length
el.style.height = "120px"
document.body.appendChild(el);
}
for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left=0
el.style.top=(height / titles.length) * i + 120
el.style.width = "120px"
el.style.height = height / titles.length
document.body.appendChild(el);
}
}
</script>

<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
position:absolute;
left:100px;
top:100px;
}
#box1, #box2, #box3, #box10, #box11, #box12 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
}
#box1, #box4, #box7, #box10{
background-color:orange;
}
#box2, #box5, #box8, #box11 {
background-color:blue;
}
#box3, #box6, #box9, #box12{
background-color:green;
}
#box4, #box7 {
font-family: Arial;
}
#box5, #box8 {
font-family: Courier;
}
#box6, #box9 {
font-family: Tahoma;
}
#textbook {
padding: 5px;
background-color:red;
}
</style>
<script language="JavaScript">
width=window.innerWidth;
height=window.innerHeight;
function boxes() {
document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
document.getElementById("box_group3").style.left=width-100-document.getElementById("box_group3").offsetWidth;
document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
document.getElementById("box_group4").style.top=height-100-document.getElementById("box_group4").offsetHeight;
document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
}
function colorChange(field,group) {
switch (group) {
case 1:
document.getElementById("box2").style.backgroundColor = field.innerText;
break;
case 4:
document.getElementById("box11").style.backgroundColor = field.innerText;
break;
}
}
function fontChange(field,group) {
switch (group) {
case 2:
document.getElementById("box5").style.fontFamily = field.innerText;
break;
case 3:
document.getElementById("box8").style.fontFamily = field.innerText;
break;
}
}
</script>
</head>
<body onload="boxes()">
<div id="box_group1">
<div id="box1" onclick="colorChange(this,1)">
Orange
</div>
<div id="box2" onclick="colorChange(this,1)">
Blue
</div>
<div id="box3" onclick="colorChange(this,1)">
Green
</div>
</div>
<div id="box_group2">
<div id="box4" onclick="fontChange(this,2)">
Arial
</div>
<div id="box5" onclick="fontChange(this,2)">
Courier
</div>
<div id="box6" onclick="fontChange(this,2)">
Tahoma
</div>
</div>
<div id="box_group3">
<div id="box7" onclick="fontChange(this,3)">
Arial
</div>
<div id="box8" onclick="fontChange(this,3)">
Courier
</div>
<div id="box9" onclick="fontChange(this,3)">
Tahoma
</div>
</div>
<div id="box_group4">
<div id="box10" onclick="colorChange(this,4)">
Orange
</div>
<div id="box11" onclick="colorChange(this,4)">
Blue
</div>
<div id="box12" onclick="colorChange(this,4)">
Green
</div>
</div>
<div id="textbook">Textbook</div>
</body>
</html>

Try this using jQuery :
Here the boxes should be created dynamically and without naming the id's hardcoded it also should be done in a better way with your code. It's easier now as you are creating 4 boxes, what about 100 or more. So it's wise to always take the better way to maintain scalability of our work.
HTML :
<div id="mainDiv">
</div>
CSS :
// general css for all divs inside mainDiv
#mainDiv div{
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
float : left;
}
jQuery :
$(document).ready(function(){
// taking a color array
var colorArray = new Array("red", "green", "gray", "blue");
// loop through as many boxes you want to create
for(var i = 1; i <= colorArray.length; i++){
$("#mainDiv").append("<div id=Box" + i + "></div>");
//changing the background-color
$("#Box"+ i).css("background-color", colorArray[i-1]);
}
});
Demo
Here's Another thread explaining similar Case,
And It's Solution

How to create circular animation with different objects using jQuery?

How to create circular animation with different objects using jQuery. I have tried myself but the issue is that my scrip is not running smoothly.
I want this animate but in smooth way:
Efforts :
http://jsfiddle.net/eT7SD/
Html Code
<div id="apDiv1"><p><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-1"/></p></div>
<div id="apDiv2"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZv4hqGcyV6OqP0hI3uAiQVwHHgPuqcTl2NppFRyvbxXLVokbs" width="200" height="115" id="img-2"/></p></div>
<div id="apDiv3"><p><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQaplzZIaF-uTQKnvfK9N9i-Rg27F6aHtSchQZaGR-DITgO1bDwzA" width="200" height="115" id="img-3"/></p></div>
<div id="apDiv4"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjTbe5WfEnT840gIChKfbzlVnoPPoZsyrT4zjMReym9YpsRdOFvA" width="200" height="115" id="img-4"/></p></div>
<div id="apDiv5"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRWtiMAcxGe-RQw2gRwUUiyB5aRTMeVMG5LSCPF0Qpzes-USpgyTw" width="200" height="115" id="img-5"/></p></div>
<div id="apDiv6"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXDhOygDcNsNVsv0eIXLYdBx4C-tmedIRhFfxGlCoCfNy04YU_" width="200" height="115" id="img-6"/></p></div>
<div id="apCenterDiv"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR42cgsKsYMWey79jT0XsTkMOyxc9oej9fVt-udxQvnVFOadpPQ" width="200" height="115" /></div>
Css Code
<style type="text/css">
#apCenterDiv {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 571px;
top: 209px;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 570px;
top: 4px;
}
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left: 821px;
top: 134px;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:4;
left: 822px;
top: 328px;
}
#apDiv4 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 572px;
top: 385px;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:6;
left: 319px;
top: 329px;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:7;
left: 319px;
top: 135px;
}
</style>
Script
<script>
$(document).ready(function(e) {
setInterval(function() {
var imgfirstSrc = $("#img-1").attr("src");
var imgSecSrc = $("#img-2").attr("src");
var imgthirdSrc = $("#img-3").attr("src");
var imgfourthSrc = $("#img-4").attr("src");
var imgfifthSrc = $("#img-5").attr("src");
var imgsixthSrc = $("#img-6").attr("src");
$("#img-2").attr("src",imgfirstSrc);
$("#img-3").attr("src",imgSecSrc);
$("#img-4").attr("src",imgthirdSrc);
$("#img-5").attr("src",imgfourthSrc);
$("#img-6").attr("src",imgfifthSrc);
$("#img-1").attr("src",imgsixthSrc);
},1000);
});
</script>
EDIT
I have to add more animation with click/stop events. When user click the red image place of 270 they have to replace the place of 90 and animation will be stop; for more clarification you have to see the image below. I have tried #Cristi Pufu code but I want more modification
Efforts
http://jsfiddle.net/SaNtf/

Using jQuery Animation: http://jsfiddle.net/eT7SD/6/
Using mathand jQuery : http://jsfiddle.net/eT7SD/7/
Using CSS3 Rotation (just for fun): http://jsfiddle.net/dMnKX/
Just add a class 'box' to your animating divs like in the fiddle and use this js:
$(document).ready(function(e) {
var animate = function(){
var boxes = $('.box');
$.each(boxes, function(idx, val){
var coords = $(boxes[idx+1]).position() || $(boxes[0]).position();
$(val).animate({
"left" : coords.left,
"top" : coords.top
}, 1500, function(){})
});
}
animate();
var timer = setInterval(animate, 2000);
});
EDIT:
$(document).ready(function(e) {
var angles = [90, 45, 315, 270, 225, 135];
var unit = 215;
var animate = function(){
$.each($('.box'), function(idx, val){
var rad = angles[idx] * (Math.PI / 180);
$(val).css({
left: 550 + Math.cos(rad) * unit + 'px',
top: unit * (1 - Math.sin(rad)) + 'px'
});
angles[idx]--;
});
}
var timer = setInterval(animate, 10);
});
You have to change the left, top, width, height properties of boxes, standardize them, set the correct unit (circle radius) and initial angles. But for a preview, i think this is what you want (just needs a little more work).
Example: http://jsfiddle.net/eT7SD/7/
Visual understanding of angles:

Just use CSS3 to rotate the image:
html
<div id='container'>
... (all your images here)
</div>
javascript:
<script type='text/javascript'>
window.myRotation=0;
$(document).ready(function(e) {
setInterval(function() {
$("#container").css("transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-ms-transform","rotate(" + window.myRotation + "deg)");
$("#container").css("-webkit-transform","rotate(" + window.myRotation + "deg)");
window.myRotation +=20;
},50);
});
</script>

Well I tried out something, I think it could work
NOTE: this is not the complete code and only an example of how it could work
FIDDLE: http://jsfiddle.net/Spokey/eT7SD/2/
NEW FIDDLE http://jsfiddle.net/Spokey/eT7SD/3/ (6 images)
I used .position() from jQuery to get the positions of div1 - div6.
Then moved the image there using .animate().
http://api.jquery.com/position/
http://api.jquery.com/animate/
HTML
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-1"/>
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="200" height="115" id="img-2"/>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apCenterDiv"></div>
JavaScript
$(document).ready(function(e) {
var i = 1;
var j = 2;
setInterval(function() {
if(i===7){i=1;}
if(j===7){j=1;}
var divd = $("#apDiv"+i).position();
var divds = $("#apDiv"+j).position();
$("#img-1").stop().animate({left:(divd.left), top:(divd.top)});
$("#img-2").stop().animate({left:(divds.left), top:(divds.top)});
i++;j++;
},1000);
});