Scrolling Behavior 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: 700px;

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

What is currently happening is that each image starts at the left
and, once the images exceed the 700px mark, the next in the series
creates a new row (I need it to scroll back).

Suggestions appreciated. Thanks.

#container
{
width: 715px;
height: 228px;
overflow: auto;
padding: 3px 0 3px 0;

}
#scroll
{
width: 700px;
height: 210px;
overflow: auto;
display:block;
}

On Sep 24, 9:51*am, pbd22 <dush... (AT) gmail (DOT) com> wrote:

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

[...]

What is currently happening is that each image starts at the left
and, once the images exceed the 700px mark, the next in the series
creates a new row (I need it to scroll back).

Suggestions appreciated. Thanks.

* * * * #container
* * * * {
* * * * * * width: 715px;
* * * * * * height: 228px;
* * * * * * overflow: auto;
* * * * * * padding: 3px 0 3px 0;

* * * * }
* * * * #scroll
* * * * {
* * * * * * width: 700px;
* * * * * * height: 210px;
* * * * * * overflow: auto;
* * * * * * display:block;
* * * * }

Forget the overflow on the inner <div> (with the #scroll id); it seems
superfluous. If you want the images on the same line, then add the
following declaration to the inner <div>:

white-space: nowrap;

I'm not sure why you're using nested <div>s; if you don't need them
for some other reason, just get rid of the <div id="scroll"
name="scroll"></div> and put the content directly into the
#container, with the "white-space: nowrap;" added to its properties.

Nick

--
Nick Theodorakis
nick_theodorakis (AT) hotmail (DOT) com
contact form:
http://theodorakis.net/contact.html

Thanks Nick.

That fixed my "new row" problem.
The outstanding item is the behavior I (crudely) described here:

all images in fixed length div:

[ [1] [2] [3] ]

another images is added, pushing everything to the left:

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

and so on:

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

How do I get the series to start at the left and then, when the number
of images exceeds the width, the left-most images is pushed left (and
out of sight) and the right-most image is always at the very end (and
never out of sight).

Thanks again.

On Sep 24, 12:35*pm, pbd22 <dush... (AT) gmail (DOT) com> wrote:
....

How do I get the series to start at the left and then, when the number
of images exceeds the width, the left-most images is pushed left (and
out of sight) and the right-most image is always at the very end (and
never out of sight).

Thanks again.

I'm not seeing an html/css solution, but perhaps I'm not thinking hard
enough. Perhaps javascript or flash will do it, but those are out of
my expertise and off-topic for the ng.

Nick

--
Nick Theodorakis
nick_theodorakis (AT) hotmail (DOT) com
contact form:
http://theodorakis.net/contact.html

On Sep 24, 11:48*am, Nick Theodorakis <nick.theodora... (AT) gmail (DOT) com>
wrote:

On Sep 24, 12:35*pm, pbd22 <dush... (AT) gmail (DOT) com> wrote:
...



How do I get the series to start at the left and then, when the number
of images exceeds the width, the left-most images is pushed left (and
out of sight) and the right-most image is always at the very end (and
never out of sight).

Thanks again.

I'm not seeing an html/css solution, but perhaps I'm not thinking hard
enough. Perhaps javascript or flash will do it, but those are out of
my expertise and off-topic for the ng.

Nick

--
Nick Theodorakis
nick_theodora... (AT) hotmail (DOT) com
contact form:http://theodorakis.net/contact.html

Thanks again.

I sort of have the right behavior, but flipped. I added the container
back as I think I
need it but maybe you have a better way?

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

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

}

This does what I want - starts at the left of the box. Adds images
until the series
has filled the width. Then, when the next image is added, the left-
most is pushed out of view and the right-most is positioned at the end
of the series, in view.

The problem is, it is backwards. I know that this is because of RTL. I
was hoping I could flip the effect of RTL with text-align but this
doesn't seem to do much / anything.

On Sep 24, 11:48*am, Nick Theodorakis <nick.theodora... (AT) gmail (DOT) com>
wrote:

On Sep 24, 12:35*pm, pbd22 <dush... (AT) gmail (DOT) com> wrote:
...



How do I get the series to start at the left and then, when the number
of images exceeds the width, the left-most images is pushed left (and
out of sight) and the right-most image is always at the very end (and
never out of sight).

Thanks again.

I'm not seeing an html/css solution, but perhaps I'm not thinking hard
enough. Perhaps javascript or flash will do it, but those are out of
my expertise and off-topic for the ng.

Nick

--
Nick Theodorakis
nick_theodora... (AT) hotmail (DOT) com
contact form:http://theodorakis.net/contact.html

Thanks again.

I sort of have the right behavior, but flipped. I added the container
back as I think I
need it but maybe you have a better way?

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

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

}

This does what I want - starts at the left of the box. Adds images
until the series
has filled the width. Then, when the next image is added, the left-
most is pushed out of view and the right-most is positioned at the end
of the series, in view.

The problem is, it is backwards. I know that this is because of RTL. I
was hoping I could flip the effect of RTL with text-align but this
doesn't seem to do much / anything.

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.

In article
<0ba355a7-1517-45b4-b1b1-0cba9cb9d065 (AT) d21g2000vbm (DOT) googlegroups.com>,
pbd22 <dushkin (AT) gmail (DOT) com> wrote:

OK, I got *it* to work in IE, but not Firefox:

Any chance of a URL to anchor that pronoun above?

--
dorayme

On 2009-09-24, pbd22 <dushkin (AT) gmail (DOT) com> wrote:

Thanks Nick.

That fixed my "new row" problem.
The outstanding item is the behavior I (crudely) described here:

all images in fixed length div:

[ [1] [2] [3] ]

another images is added, pushing everything to the left:

[ [2] [3] [4] ]
--------------

and so on:

[ [3] [4] [5] ]
--------------

How do I get the series to start at the left and then, when the number
of images exceeds the width, the left-most images is pushed left (and
out of sight) and the right-most image is always at the very end (and
never out of sight).

Set direction: rtl on the div.

On 2009-09-24, pbd22 <dushkin (AT) gmail (DOT) com> wrote:

On Sep 24, 11:48*am, Nick Theodorakis <nick.theodora... (AT) gmail (DOT) com
wrote:
On Sep 24, 12:35*pm, pbd22 <dush... (AT) gmail (DOT) com> wrote:
...



How do I get the series to start at the left and then, when the number
of images exceeds the width, the left-most images is pushed left (and
out of sight) and the right-most image is always at the very end (and
never out of sight).

Thanks again.

I'm not seeing an html/css solution, but perhaps I'm not thinking hard
enough. Perhaps javascript or flash will do it, but those are out of
my expertise and off-topic for the ng.

Nick

--
Nick Theodorakis
nick_theodora... (AT) hotmail (DOT) com
contact form:http://theodorakis.net/contact.html

Thanks again.

I sort of have the right behavior, but flipped. I added the container
back as I think I
need it but maybe you have a better way?

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

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

}

This does what I want - starts at the left of the box. Adds images
until the series
has filled the width. Then, when the next image is added, the left-
most is pushed out of view and the right-most is positioned at the end
of the series, in view.

The problem is, it is backwards. I know that this is because of RTL. I
was hoping I could flip the effect of RTL with text-align but this
doesn't seem to do much / anything.

Alignment doesn't change direction. You want the images to flow left to
right, but the container to overflow to the left (which is a side-effect
of direction).

Put a span around the images, and set it to direction: ltr and
unicode-bidi: bidi-override. Leave the container as direction: rtl.