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; */

}
  • Why do you need direction:rtl on #scroll? Divya Manian about 7 years ago
  • I don't. It was there when I posted this (sorry - sloppy) but I have since taken it out. For what it is worth, RTL - 'does' product the effect I want, just backwards. It adds a new image up to the 715px margin then, as more are added scrolling happens to the left. But, my image order is backwards (the first image leads). Pls. help - completely beaten on this. Code Sherpa about 7 years ago

2 answers

danwellman 5600
0
points

have you tried floating the images to the left? not sure how this would work with the rtl rule but I think it's worth trying :)

Answered about 7 years ago by danwellman
  • Hi. It isn't clear to me how float left would help to scroll images to the left and out of view when the right margin is reached. Maybe you could provide the CSS? Code Sherpa about 7 years ago
0
points

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?

Thanks.

PS - By the way, what "isn't" working in FF is that when the page loads, the first image is all the way to the right. In IE, it is at the left of the scroll div and the images overflow left when the right margin is reached.

Answered about 7 years ago by Code Sherpa
  • Can anybody out there help? Code Sherpa about 7 years ago