See following
Code
<div>
<a id="west" href="javascript:void(0);" onclick="scrollBlockWest();"><<West</a>
<a id="east" href="javascript:void(0);" onclick="scrollBlockEast();">East >></a>
</div>
<div id="myScrollContainer" style="overflow:hidden; width:900px; height:700px">
<table id="myScrollContent"><tr><td>
<div id="block0" style="display:block;height:300px; width:300px; background-color:Lime">Content 0</div> </td><td>
<div id="block1" style="display:block;height:300px; width:300px; background-color:Aqua">Content 1</div> </td><td>
<div id="block2" style="display:block;height:300px; width:300px; background-color:Blue">Content 2</div> </td><td>
<div id="block3" style="display:block;height:300px; width:300px; background-color:Gray">Content 3</div> </td><td>
<div id="block4" style="display:block;height:300px; width:300px; background-color:Gray">Content 4</div> </td>
</tr></table>
</div>
This is my script:
<script type="text/javascript" >
var totalBlock = 4;
var currentBlock = 0;
function scrollBlockEast()
{
var blk = document.getElementById('
block'+currentBlock);
//alert('
block'+blockid);
blk.style.display='none';
currentBlock++;
//document.getElementById('myScrollContent').style.left = -100;
if(currentBlock<totalBlock)
{
document.getElementById('west').style.display='
inline';
}
//alert(totlaBlock-1);
if(currentBlock==totalBlock)
{
document.getElementById('east').style.display='none';
}
}
function scrollBlockWest()
{
currentBlock--;
document.getElementById('
block'+currentBlock).style.display='
inline';
if(currentBlock<1)
{
document.getElementById('west').style.display='none';
}
else
{
document.getElementById('east').style.display='
inline';
}
}
</script>
Now My object is to slide
block on << and click. By default, 3 blocks(Content 0,Content 1,Content 2) are coming. When is clicked then (Content 1,Content 2,Content 3) will come. For this, I hide content 0
block. But layout will disturb on << click.
I know this is wrong way. I should set left position instead of hiding content but it is empty I tried to set left position but no luck. Let me know How the
block can be moved one by one using javascript and what is the best approach to do this?
