0

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>
2
Contributors
4
Replies
5
Views
6 Years
Discussion Span
Last Post by PriyalRao
0

I don't want to hide slider. I want to remove following slider and respected function without stopping auto move of boxes.

<div class="controls">			
   <div id="slider"></div>
   <div id="slider2"></div>	
</div>

I have tried this

style="display:none;"

but it only hides class controls.

Have you tried setting the display to style='display:"none";' ?

0

As an inline style:

<div id='slider' style='display: none;'>

Edited by Dani: Formatting fixed

0

Thanks for reply but I don't want to just hide slider control.
I want to make changes into function.

As an inline style:
<div id='slider' style='display: none;'>

Edited by Dani: Formatting fixed

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.