Very Tricky CSS Scrolling Question

Question

Hi.

I am 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 loads with one image inside the scroller which has a width: 715px;

[ [1] ]

When the user clicks on that image, a second image is dynamically appended to the first:

[ [1] [2] ]

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

[ [1] [2] [3] ]

Now, here is where I need some help. When the final visible image in the series is clicked on, the preceding images should scroll to the left to make room for the new one, putting the first out of view and placing the new image at the end as such:

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

This goes on indefinitely - each time the final image is clicked the preceding ones should scroll to the left, placing the new image at the right-most view within the DIV.

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

I have played with the below CSS (what you see is the state of my most recent attempt). What I have been able to achieve is:

1) The images build consecutively and then overflow (to the right) when the fourth image exceeds the 715px mark. Not what I want.

2) The below CSS "Does" do what I want (sort of) - it starts on the left of the DIV and then works to the 715px mark and starts to push the images (backwards) to the left and out of view - always leaving the most recent image to the far right of the DIV and in view. THE PROBLEM with this is that the order is FLIPPED (I think, due to RTL). I have tried to trick it with text-align:left but that doesn't seem to do anything.

Any Ideas? Suggestions appreciated. Thanks.

#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

what about another div inside your scroll div with a float left? havent tried it, but i would imagine it works.

Answer 2

OK, I got it to work in IE, but not 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;
}

Any CSS gurus out there know how to make it work for both?

Answer 3

would something like this work:

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

Not sure how it would work in ie, but you could load code sherpa's solution in a conditional comment for that

Answer 4

Use specific CSS for IE like everything else in CSS, for example:

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

Answer 5

#scroll img {float:left}

Answer 6

You could try with your first attempt without direction:rtl.
Then in your javascript that adds the image, calculate the position of the new image and set scrollLeft on the scroll div:

scroll.scrollLeft = theNewImagePosition ;

Answer 7

I've made a demo page. It works well on Firefox, Safari, Opera, and IE 8.

It's actually JS solution. Magic goes here:

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

Answer 8

I have done this for a project, this is what I did.

[ [img1] [img2] [img3] ]

The outer DIV wrapping these images is given a width which is equal to the width of all the images (including margins etc).

Then the css property of 'left' is used to shift the row to the left:

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

The value that it is shifted to the left by, for my example is:

width_of_all_images_plus_margins - width_of_display_area

Hope that helps, let me know if I haven't explained it enough...

Answer 9

Thanks all, I finally got the answer (I have to credit "Ben C" for this). The trick (for me was):

unicode-bidi: bidi-override.

Here is the HTML (with a script for testing):

<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>

And here is a link to the implementation:

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