Databases
StackOverflow2013
Postsdbo
POVery Tricky CSS Scrolling Question
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POVery Tricky CSS Scrolling Question
    primarykey
    data
    text
    <p>I am not sure how to achieve a certain effect in CSS. I have the following HTML:</p> <pre><code>&lt;div id="container" name="container"&gt; &lt;div id="scroll" name="scroll"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The scroller loads with one image inside the scroller which has a width: 715px;</p> <p>[ [1] ]</p> <p>When the user clicks on that image, a second image is dynamically appended to the first:</p> <p>[ [1] [2] ]</p> <p>And, when the second is clicked, the same thing happens (and so on):</p> <p>[ [1] [2] [3] ]</p> <p>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:</p> <p>[ [2] [3] [4] ] <br> &lt;--------------></p> <p>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.</p> <p>[ [3] [4] [5] ] <br> &lt;--------------></p> <p>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:</p> <p>1) The images build consecutively and then overflow (to the right) when the fourth image exceeds the 715px mark. Not what I want. </p> <p>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. </p> <p>Any Ideas? Suggestions appreciated. Thanks.</p> <pre><code>#container { width: 715px; height: 228px; overflow: hidden; position:relative; / * text-align:left; */ } #scroll { height: 228px; white-space: nowrap; direction: rtl; /* text-align:left; */ } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBoltClock
    1. USPeter
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POVery Tricky CSS Scrolling Question
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POVery Tricky CSS Scrolling Question
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POVery Tricky CSS Scrolling Question
      1. USBryanH
      1. VTFavorite
    1. COmay be on http://doctype.com/ you will get better help
      singulars
      1. POVery Tricky CSS Scrolling Question
      1. USAmr Elgarhy
    2. COthanks. I created an account and posted my question there too. But, if anybody here knows the answer... please help!
      singulars
      1. POVery Tricky CSS Scrolling Question
      1. USPeter
    3. COHow are you adding the dynamic behavior? With pseudo-classes or js?
      singulars
      1. POVery Tricky CSS Scrolling Question
      1. USAnthony
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload