I have code for moving boxes but it have slider to control speed and tilt of boxes.
I want to remove these sliders without stopping auto move effect.
Can anybody convert this code to simplest?
Please help
Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Moving Boxes</title>
<style type="text/css" rel="stylesheet">
html, body {
padding: 0;
margin: 0;
background-color: #fff;
font: normal normal normal 1em/1.5 Georgia, serif;
color: #333;
}
h1 { text-align: center; font-weight: normal; font-style: italic; }
.holder { width: 450px; margin: 0 auto; position: relative; height: 16em; }
.moveable { height: 90px; width: 90px; cursor: pointer; }
div.box { background-color: #ffc; font-size: 2em; height: 60%; width: 1.8em; margin: 0 auto; text-align: center; border: 1px double #333; }
div.two { background-color: #f34; }
div.three { background-color: #7eb; }
div.four { background-color: #d82; }
div.five { background-color: #89f; }
div.caption { font-size: 1.4em; text-align: center; }
div.controls { text-align: center; }
div.controls a { margin-right: 1em; }
div#slider, div#slider2 { margin: 1em auto; width: 400px; }
</style>
<link href="http://fredhq.com/lib/css/jquery-ui/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://fredhq.com/lib/js/libraries/jquery.js"></script>
<script type="text/javascript" src="http://fredhq.com/lib/js/projects/roundabout/jquery.roundabout.js"></script>
<script type="text/javascript" src="http://fredhq.com/lib/js/projects/roundabout-shapes/jquery.roundabout-shapes.js"></script>
<script type="text/javascript" src="http://fredhq.com/lib/js/plugins/jquery.easing.js"></script>
<script type="text/javascript" src="http://fredhq.com/lib/js/libraries/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('#slider').slider({
value: 5
});
$('#slider2').slider({
step: 0.01,
value: 5
});
$('.holder').roundabout({
easing: 'swing',
minScale: 0.3,
maxScale: 1.0,
btnNext: '#next',
btnPrev: '#prev',
childSelector: '.moveable'
});
$('#to3').click(function(e) {
e.preventDefault();
$('.holder').roundabout_animateToChild(2);
return false;
});
$('#ease-type').change(function(e) {
$('.holder').data('roundabout').easing = $(this).val();
switch($(this).val()) {
case 'swing':
case 'easeOutExpo':
$('.holder').data('roundabout').duration = 500;
break;
case 'easeOutBounce':
$('.holder').data('roundabout').duration = 1200;
break;
case 'easeOutElastic':
$('.holder').data('roundabout').duration = 1000;
break;
case 'easeInOutBack':
$('.holder').data('roundabout').duration = 1400;
break;
}
});
$('#shape').change(function(e) {
$('.holder').data('roundabout').shape = $(this).val();
$('.holder').roundabout_updateChildPositions();
});
doSlider();
});
function doSlider() {
setInterval(function() {
var delta = $('#slider').slider('value') / 10;
var delta2 = $('#slider2').slider('value');
$('.holder').roundabout_adjustBearing(delta).roundabout_setTilt(delta2);
}, 50);
}
// ]]>
</script>
</head>
<body>
<div class="holder">
<div class="moveable"><div class="box one">:)</div></div>
<div class="moveable"><div class="box two"> :) </div></div>
<div class="moveable"><div class="box three"> :) </div></div>
<div class="moveable"><div class="box four"> :) </div></div>
<div class="moveable"><div class="box five"> :) </div></div>
</div>
<div class="controls">
<div id="slider"></div>
<div id="slider2"></div>
</div>
</body>
</html>