Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's one example that uses strictly CSS to horizontally auto-scroll as an area with a fixed width is populated. No scroll bars are used or rendered. A few things to note here:</p> <ul> <li><p>Your question is a bit ambiguous. When you say you want it to auto-scroll, do you mean that you want the content to scroll by as it's added to the div? Do you mean you want it to repeatedly scroll over the same text? Or perhaps something else? I'm assuming here that you're requesting the first option.</p></li> <li><p>The scrolling here uses no JavaScript, but of course some script is needed to populate the div that's being scrolled.</p></li> <li><p>I've only tested this in Firefox and Chrome.</p></li> </ul> <blockquote> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;style type="text/css"&gt; #scrollbox{ display: inline-block; width: 16em; overflow: hidden; border: 1px solid #F00; } #scrollcontent{ float:right; white-space: nowrap; } &lt;/style&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var idx = 0; $(document).ready(function(){ setInterval(function(){ idx++; $('#scrollcontent').append('foo_' + idx + " "); }, 200); }) &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;span id="scrollbox"&gt; &lt;span id="scrollcontent"&gt;&lt;/span&gt; &lt;/span&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </blockquote> <p>That works nicely as long as you're adding text to the div and only wish for it to scroll rightwards as the text is added. If you want it to automatically scroll left and right, then you'll need JavaScript to automatically zig-zag the position of "#scrollcontent". You would need an algorithm that gets the width of the parent span ("#scrollbox" in this case), subtracts that from the width of the child span ("#scrollcontent") and oscillates a number between zero and the result of that subtraction. The x position of the child span would be set to the negative of that number. Note that you would need to give "scrollcontent" an absolute position, and remove the float: right attribute. You would also need to specify the position attribute for "scrollbox", otherwise the absolute position of scrollcontent would be relative the next parent that does have the positioning explicitly defined, rather than scrollbox itself.</p>
    singulars
    1. This table or related slice is empty.
    1. POHow to auto scroll text within div depending on width of DIV
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USJacob Ewing
    1. USJacob Ewing
    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. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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