Horizontal navigation from next previous buttons for Overflow:Hidden div
- by brz dot net
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?
