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

Filed under:
|
|
|
|

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

Related posts about dom

Related posts about overflow