PDA

View Full Version : Set vertical sliding bar down in overflow

Kakao
10-12-2006, 11:28 PM
I would like to show an overflowed element with the vertical sliding bar already all the way down as in the second shot:

http://webpython.codepoint.net/files/images/overflow.png

Is it possible?

<html>
<body>
<pre style="overflow:auto; height:100px; width:400px;
border:1px solid black;padding:0.5em;">
[root@dkt /]# ll
total 154
drwxr-xr-x 2 root root 4096 Oct 11 04:56 bin
drwxr-xr-x 4 root root 1024 Sep 15 07:00 boot
drwxr-xr-x 12 root root 4480 Oct 11 19:15 dev
drwxr-xr-x 101 root root 12288 Oct 11 19:25 etc
drwxr-xr-x 3 root root 4096 May 20 13:34 home
drwxr-xr-x 11 root root 4096 Sep 29 04:41 lib
drwx------ 2 root root 16384 May 20 13:09 lost+found
drwxr-xr-x 2 root root 4096 Sep 9 21:06 media
drwxr-xr-x 2 root root 4096 Jun 23 02:42 misc
drwxr-xr-x 3 root root 4096 May 20 14:48 mnt
drwxr-xr-x 2 root root 0 Oct 11 19:15 net
drwxr-xr-x 3 root root 4096 May 21 09:23 opt
dr-xr-xr-x 152 root root 0 Oct 11 19:14 proc
drwxr-x--- 26 root root 4096 Oct 12 18:30 root
drwxr-xr-x 2 root root 12288 Sep 27 04:46 sbin
drwxr-xr-x 2 root root 4096 May 20 13:09 selinux
drwxr-xr-x 2 root root 4096 Feb 11 2006 srv
drwxr-xr-x 11 root root 0 Oct 11 19:14 sys
drwxrwxrwt 83 root root 4096 Oct 12 18:29 tmp
drwxr-xr-x 14 root root 4096 May 20 13:14 usr
drwxr-xr-x 23 root root 4096 May 20 13:27 var
</pre>
</body>
</html>
rmedek
10-13-2006, 09:26 PM
AFAIK, not with HTML/CSS… you'd have to set some behavior in Javascript. In what sort of situation is the div being displayed? Are you linking to it directly or is it embedded in the page?
Arbitrator
10-13-2006, 10:31 PM
You could do it if the content were to be embedded:

CSS:
div {
border: 1px solid black;
padding: 0.5em;
}
object {
width: 400px;
height: 100px;
overflow: auto;
}

HTML:
<div>
<object type="text/html" data="pre.html#last"></object>
</div>

Embedded HTML (pre.html):
<pre>[root@dkt /]# ll
total 154
drwxr-xr-x 2 root root 4096 Oct 11 04:56 bin
drwxr-xr-x 4 root root 1024 Sep 15 07:00 boot
drwxr-xr-x 12 root root 4480 Oct 11 19:15 dev
[…]
drwxrwxrwt 83 root root 4096 Oct 12 18:29 tmp
drwxr-xr-x 14 root root 4096 May 20 13:14 usr
<span id="last">drwxr-xr-x 23 root root 4096 May 20 13:27 var</span></pre>An iframe would also be a workable substitute should you be unable to use the object element.
Kakao
10-14-2006, 01:06 AM
<span id="last">drwxr-xr-x 23 root root 4096 May 20 13:27 var</span></pre>

You gave me a very simple idea. Just set the location.href to an #id on the onload event. And it works:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body onload="location.href='#last';">
<pre style="overflow:auto;height:100px; width:400px;
border:1px solid black;padding:0.5em;">
[root@dkt /]# ll
total 154
drwxr-xr-x 2 root root 4096 Oct 11 04:56 bin
drwxr-xr-x 4 root root 1024 Sep 15 07:00 boot
drwxr-xr-x 12 root root 4480 Oct 11 19:15 dev
drwxr-xr-x 101 root root 12288 Oct 11 19:25 etc
drwxr-xr-x 3 root root 4096 May 20 13:34 home
drwxr-xr-x 11 root root 4096 Sep 29 04:41 lib
drwx------ 2 root root 16384 May 20 13:09 lost+found
drwxr-xr-x 2 root root 4096 Sep 9 21:06 media
drwxr-xr-x 2 root root 4096 Jun 23 02:42 misc
drwxr-xr-x 3 root root 4096 May 20 14:48 mnt
drwxr-xr-x 2 root root 0 Oct 11 19:15 net
drwxr-xr-x 3 root root 4096 May 21 09:23 opt
dr-xr-xr-x 152 root root 0 Oct 11 19:14 proc
drwxr-x--- 26 root root 4096 Oct 12 18:30 root
drwxr-xr-x 2 root root 12288 Sep 27 04:46 sbin
drwxr-xr-x 2 root root 4096 May 20 13:09 selinux
drwxr-xr-x 2 root root 4096 Feb 11 2006 srv
drwxr-xr-x 11 root root 0 Oct 11 19:14 sys
drwxrwxrwt 83 root root 4096 Oct 12 18:29 tmp
drwxr-xr-x 14 root root 4096 May 20 13:14 usr
drwxr-xr-x 23 root root 4096 May 20 13:27 var
<span id="last"></span></pre>
</body>
</html>

Thanks! :thumbsup: