Very tricky CSS scroll issue

Question

I'm not sure how to achieve a certain effect in CSS. I have the following HTML:

<div id="container" name="container">
    <div id="scroll" name="scroll"></div>
 </div>

The scroller is loaded with one image inside the scroller, which has a width: 715px;

[[1]]

When the user clicks on this image, the second image is dynamically added to the first:

[[12]]

And, when a second is pressed, the same thing happens (and so on):

[[1] [2] [3]]

Now, this is where I need help. When the final visible image in the series is pressed, the previous images should scroll left to make room for a new one, putting the first view and placing the new image at the end as such:

[[2] [3] [4]]
<-------------->

- , DIV.

[[3] [4] [5]]
< -------------- >

CSS (, , ). :

1) , () 715px. , .

2) CSS "" , () - DIV, 715px () - DIV . FLIPPED ( , - RTL). text-align: left, , , .

? . .

#container
{
    width: 715px;
    height: 228px;
    overflow: hidden;
    position:relative;
    / * text-align:left; */
}

#scroll
{
    height: 228px;
    white-space: nowrap;
    direction: rtl;
    /* text-align:left; */

} 

Answer 1

. Firefox, Safari, Opera IE 8.

JS. :

document.getElementById('container').scrollLeft = last_img.offsetLeft;

Answer 2

, ( " " ). ( ):

unicode-bidi: bidi-override.

HTML ( script ):

<script type="text/javascript">
var interval = null;
var count = 10;

function addImage()
{
    var container = document.getElementById("imgContainer");
    var img = document.createElement("img");
    img.setAttribute("src", "flowers-100.png");
    container.appendChild(img);

    if (--count == 0) clearInterval(interval);
}

function main()
{
    interval = setInterval("addImage()", 2000);
}

window.onload = main;
        </script>
        <style type="text/css">
            div
            {
                white-space: nowrap;
                overflow: scroll;
                direction: rtl;
                border: 2px solid blue;
                width: 600px;
                height: 110px;
                text-align: left;
            }
            div span
            {
                direction: ltr;
                unicode-bidi: bidi-override;
            }
            img
            {
                margin-right: 10px;
            }
        </style>

:

http://www.tidraso.co.uk/misc/imgContainer/

Answer 3

div div ? , , .

Answer 4

, IE, Firefox:

#container
{
    width: 715px;
    height: 228px;
    border: solid 3px purple;
    overflow:auto;
}
#scroll
{
    height: 223px;
    white-space: nowrap;
    float:right;
    margin-left: -715px;
    border: solid 2px red;
}

CSS , ?

Answer 5

- :

#container{overflow:hidden;}
#scroll {float:right;min-width:715px;}

, , , sherpa

Answer 6

CSS IE, CSS, :

#scroll {
    height: 223px;
    white-space: nowrap;
    float:right;
    margin-left: -715px;
    border: solid 2px red; min-width:715px;
}
* html #scroll
{
    min-width: auto;
}

Answer 7

#scroll img {float:left}

Answer 8

direction:rtl.
javascript, , scrollLeft div :

scroll.scrollLeft = theNewImagePosition ;

Answer 9

, , .

[ [img1] [img2] [img3] ]

DIV- , ( ..).

css 'left' :

left: -100px;
overflow: hidden; /* up to you if you need this */

, , :

width_of_all_images_plus_margins - width_of_display_area

, , , ...