Moving Elements In And Out Of A Viewable Div Area On Onmouseover (having Problems With Javascript Arrays)

I have a

that has a bunch more images then can fit into the view so i've used the overflow: hidden; css attribute to hide the rest. Now I have a button that i would lik

Solution 1:

This is one method of doing it:

Html:

<divstyle="height:100px;width:250px;overflow:hidden;border:1px solid black;"><divid="inner"style="left:0;height:100px;width:500px;position:relative;"><divstyle="width:100px;height:100px;float:left;border:1px solid red">image1</div><divstyle="width:100px;height:100px;float:left;border:1px solid red">image2</div><divstyle="width:100px;height:100px;float:left;border:1px solid red">image3</div><divstyle="width:100px;height:100px;float:left;border:1px solid red">image4</div></div></div><ahref="javascript:;"onclick="doMove(200)">move left</a><ahref="javascript:;"onclick="doMove(-200)">move right</a>

javascript:

functiondoMove(pix){
    var inner = document.getElementById("inner");
    var currentLeft = parseInt(inner.style.left);
    var newLeft = currentLeft+pix;
    inner.style.left = newLeft+"px";
}

jsfiddle : jsfiddle

explanation:

1. top div has overflow hidden
2. inner div contains image with position relative
3. javascript will change style.left of inner div and it will give an impression of scrolling page horizontally

Share