473,698 Members | 2,643 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

scroll a table

Hello,

I have put a table in a scrollable DIV so that only one part of the
table is visible.
Now, I want that, when I scroll, the table is scrolled item by item in
the table (as it is done when we scroll in a SELECT box).

How can I do that?
Can I change the scroll step of the DIV? (to set 1 scroll step =
line's height in the table)

Thanks,

Veronique
Jul 23 '05 #1
7 1903
Here is the solution I have found:

<body>
<div id="mydiv" style="width:10 0;overflow:auto ;background-color:#eeeeee;"
onscroll="scrol l(this)">
<table id="tblobjest1 " class="lst" cellspacing="0" cellpadding="0"

<tr id="row"><td>Ro w 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>
<tr><td>Row 5</td></tr>
<tr><td>Row 6</td></tr>
<tr><td>Row 7</td></tr>
<tr><td>Row 8</td></tr>
<tr><td>Row 9</td></tr>
<tr><td>Row 10</td></tr>
<tr><td>Row 11</td></tr>
<tr><td>Row 12</td></tr>
<tr><td>Row 13</td></tr>
<tr><td>Row 14</td></tr>
<tr><td>Row 15</td></tr>
<tr><td>Row 16</td></tr>
<tr><td>Row 17</td></tr>
<tr><td>Row 18</td></tr>
<tr><td>Row 19</td></tr>
<tr><td>Row 20</td></tr>
</table>
</div>

<script language='javas cript'>

var realLastScrollT op = 0;
var currentLastScro llTop = 0;
var nbLines = 4;

// init the "table" height
document.all['mydiv'].style.height = document.all['row'].clientHeight
* nbLines;

function scroll(o) {

var cellHeight = document.all['row'].clientHeight;

if (currentLastScr ollTop == o.scrollTop) {
// scroll action is stabilized
if (realLastScroll Top < o.scrollTop) {
o.scrollTop = (parseInt(o.scr ollTop/cellHeight)+1)* cellHeight;
}
else {
if (o.scrollTop > (nbLines -1 * cellHeight)) {
o.scrollTop = parseInt(o.scro llTop/cellHeight)*cel lHeight;
}
}
realLastScrollT op = o.scrollTop;
}
currentLastScro llTop=o.scrollT op;

}

</script>
Jul 23 '05 #2
In article <7a************ **************@ posting.google. com>,
vr****@ceitel.f r enlightened us with...
Here is the solution I have found:


Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.

--
--
~kaeli~
Why do people who know the least know it the loudest?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #3
kaeli <ti******@NOSPA M.comcast.net> wrote:
In article <7a************ **************@ posting.google. com>,
vr****@ceitel. fr enlightened us with...
Here is the solution I have found:


Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.


How much is IE only? He uses syntax like:

var cellHeight = document.all['row'].clientHeight;

which can be made browser-independent by changing it to:

var cellHeight = document.getEle mentById("row") .clientHeight;

After clearing up addressing issues like that, what's left? Is
"clientHeig ht" maybe an IE only property?

--
Tim Slattery
Sl********@bls. gov
Jul 23 '05 #4
Tim Slattery <Sl********@bls .gov> writes:
kaeli <ti******@NOSPA M.comcast.net> wrote:
In article <7a************ **************@ posting.google. com>,
vr****@ceitel .fr enlightened us with...
Here is the solution I have found:

Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.


How much is IE only?


Hard to say. Since Opera is getting better and better at emulating IE,
some of it might not be IE-only, but will still fail in Mozilla.
He uses syntax like:

var cellHeight = document.all['row'].clientHeight;

which can be made browser-independent by changing it to:
Nothing is browser independent - Netscape 1 is still a browser :) So,
you have to make some assumptions about the browsers on the receiving
end. The fewer the better, but there will always be some.
var cellHeight = document.getEle mentById("row") .clientHeight; After clearing up addressing issues like that, what's left? Is
"clientHeig ht" maybe an IE only property?


In Mozilla, "clientHeig ht" seems to always give 0 for a table row.
So, probably.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #5
In article <oc************ *************** *****@4ax.com>,
Sl********@bls. gov enlightened us with...

How much is IE only? He uses syntax like:

var cellHeight = document.all['row'].clientHeight;

which can be made browser-independent by changing it to:

var cellHeight = document.getEle mentById("row") .clientHeight;

After clearing up addressing issues like that, what's left? Is
"clientHeig ht" maybe an IE only property?


I am pretty sure clientHeight is IE only as well, but I was mostly
looking at the document.all stuff.

I am also not sure about the support for scrollTop.

AFAIK, both clientHeight and scrollTop are IE only, but someone correct
me if I'm wrong.

--
--
~kaeli~
Synonym: the word you use in place of a word you can't
spell.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #6
kaeli <ti******@NOSPA M.comcast.net> wrote:
In article <7a************ **************@ posting.google. com>,
vr****@ceitel. fr enlightened us with...
Here is the solution I have found:


Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.


A little research shows that this syntax works in Mozilla Firefox:

<table>
<thead>
<tr>
<!-- <td> elements for the table headers -->
</tr>
<tbody style="overflow :auto;height:20 0px">
<!-- <tr> elements and <td> elements defining a bunch of rows -->
</tbody>
<table>

This causes the a 200 pixel tall block of the body of the table to be
shown, along with a vertical scrollbar on the right side! For some
reason, Firefox decided to show only 387 pixels (as shown by the DOM
inspector) horizontally, and gave me a horizontal scroll bar as well!
I assume that I could explicitly specify a width in the style
attribute to control this tendency.

Submitting the same page to IE showed a very bizarre result: IE made
EACH ROW in the body 200 pixels tall! And MS now says they will update
IE only for new operating system releases. AAAUUUGGGG!!!

--
Tim Slattery
Sl********@bls. gov
Jul 23 '05 #7
Tim Slattery <Sl********@bls .gov> wrote:
kaeli <ti******@NOSPA M.comcast.net> wrote:
In article <7a************ **************@ posting.google. com>,
vr****@ceitel .fr enlightened us with...
Here is the solution I have found:


Your solution is IE only.
That is fine for some people. I just thought I'd mention it for the
archives.


A little research shows that this syntax works in Mozilla Firefox:

<table>
<thead>
<tr>
<!-- <td> elements for the table headers -->
</tr>
<tbody style="overflow :auto;height:20 0px">
<!-- <tr> elements and <td> elements defining a bunch of rows -->
</tbody>
<table>

This causes the a 200 pixel tall block of the body of the table to be
shown, along with a vertical scrollbar on the right side! For some
reason, Firefox decided to show only 387 pixels (as shown by the DOM
inspector) horizontally, and gave me a horizontal scroll bar as well!
I assume that I could explicitly specify a width in the style
attribute to control this tendency.

Submitting the same page to IE showed a very bizarre result: IE made
EACH ROW in the body 200 pixels tall! And MS now says they will update
IE only for new operating system releases. AAAUUUGGGG!!!


A bit more: Firefox seems to add the horizontal bar to compensate for
the horizontal space lost to the vertical scroll bar. I'd call that a
bug. Interestingly, Netscape 7.02 displays this table perfectly.

--
Tim Slattery
Sl********@bls. gov
Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
11455
by: Emil Dotchevski | last post by:
I have a table that is at 100% width, which contains a <TD> that is 80% of that. In the <TD> I want to put pre-formatted text (the output from a C++ compiler, to be more precise) and I'd like the text to use scroll bars if it does not fit. I can't get this to work, no matter what combination of <PRE>, width, and style I try. Any help greatly appreciated. Thanks, Emil
4
5924
by: Bill Sonia | last post by:
It seems whenever I set a DataGrid.DataSource = DataTable (vb.net) to populate a datagrid, the scroll bars on the datagrid default to disabled. And the only way I can get them to enable is to manually resize a column width with the mouse (not very elegant). Anyone have any ideas how I could enable the datagrid scroll bars in my code? Thanks,
4
134388
by: justdummy | last post by:
Hi, I am struggling with a problem for sometimes. I need to display a table in a html and if the height of the table goes beyond 200 px then a vertical scrollbar should alone appear without any horizontal scroll bar. If the height of the table is less than 200 px then no scroll bars should appear. Here is the html below. I tried to wrap the table around a <div> tag but its doesn't work out as the scroll bar appear close to the scroll bar...
1
2115
by: Jeremy Chapman | last post by:
I've got a grid inside a div so that it's got scroll bars around it. What I want to do is have the header row fixed at the top, so that the vertical scroll bars scroll just the data rows of the grid while the horizontal scroll bar scrolls both the data and the header row. The only way I can think of doing it is putting the data portion as a seperate grid in a div and the header in a seperate div. I would force the header div not to have...
69
13453
by: RC | last post by:
I know how to do this in JavaScript by window.open("newFile.html", "newTarget", "scrollbars=no,resizable=0,width=200,height=200"); The browser will open a new window size 200x200, not allow resize and no auto horizontal, vertical scrolling bars. I am wonder can I do the similar inside a HTML file like
1
9103
by: amuven | last post by:
Hi All, I need to put a horizontal scroll bar for 4 cells alone where my first cell in table should not contain any horizontal scroll bar . In clear, let us say there are 5 columns in my table i want to put horizontal scroll bar only for 2nd,3rd,4th and 5th column alone where my 1st column should not horizontal scroll bar . so that I can scroll only last 4 columns . Please some one provide me sample code as early as possible in doing...
1
2304
by: crazy works | last post by:
hello guys, i have problem in the scroll bar on my css code , i am trying to use that css menu from that link http://www.cssplay.co.uk/menus/slide_fly.html it actually works very good but i want to use it on the right side from my site not in the left side so i edited the ccs code but the scroll bar didnt works really good ,it scroll so much on the left side , here is screen shot http://qbael.com/upload/mn/screen.JPG and here is my full...
3
2587
by: PrabodhanP | last post by:
I have CSS based mouseover scrolling for divContent embeded in my webpage.It works fine in IE,but not working in mozilla-FF. It is located at the location.. http://www.integrityads.net/fashions/collection.htm Also it is not resolution compatible,i.e. alignment totally messed up when i increased the resolution.Please suggest. Code is as follows:- <HTML><HEAD> <meta http-equiv="Content-Language" content="en-us"> <TITLE>Collections</TITLE>...
0
8683
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9170
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
8904
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7741
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
4372
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4624
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3052
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2341
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2007
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.