how to adjust
to horizontal in one line in mootools slider

Question

I have created two slider using mootools,

basically it is two <div>, i am sliding it in one by one, but the problem is i am not able to set the position of , it comes one below the other, and what i want is both should come in one line, and the slider2 should start from the point were slider1 ends

my code is as follows,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
h3.section {
  margin-top: 1em;
}

#test{
  background: #D0C8C8;
  color: #8A7575;
  padding: 10px;
  border: 5px solid #F3F1F1;
  font-weight: bold;
  width:66px;
  height:66px;
  float:left;
}
#testing{
  background: #D88888;
  color: #8A7575;
  padding: 10px;
  border: 5px solid #F3F1F1;
  font-weight: bold;
  width:66px;
  height:66px;
  float:left;
}


</style>
<script type="text/javascript" src="mootools-core-1.4-full.js"> </script>
<script type="text/javascript" src="mootools-more-1.4-full.js"> </script>

<script type="text/javascript">

window.addEvent('domready', function() {



  var one = new Fx.Slide('test', {mode: 'horizontal'});

  var two = new Fx.Slide('testing', {mode: 'horizontal'});


  one.hide();
  two.hide();
  one.slideIn();



   one.addEvent('complete', function() {
   two.slideIn();
  });



});
</script>

</head>

<body>



<div id="test">

</div>

<div id="testing">

</div>


</body>
</html>

can anyone help me please,

score 1 · Accepted Answer · answered Jan 09 '12 at 13:56

The problem is that each div processed by Fx.Slide will be wrapped by a div element. Therefore, to achieve what you want you could play a little with css, for example by adding a rule that will match test/testing wrapper divs

#container > div{
    float:left;
}

/* note that I wrapped the 2 divs test and testing inside #container div */

Demo: http://jsfiddle.net/steweb/hGSdN/

how to adjust to horizontal in one line in mootools slider

1 Answers1

how to adjust
to horizontal in one line in mootools slider