Horizontal navigation from next previous buttons for Overflow:Hidden div
Posted
by brz dot net
on Stack Overflow
See other posts from Stack Overflow
or by brz dot net
Published on 2010-04-08T12:58:44Z
Indexed on
2010/04/08
13:03 UTC
Read the original article
Hit count: 361
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?
© Stack Overflow or respective owner