CSS to javascript - CSS events are too slow.

[mjpdatadev]

Hi,

I have tried to research this problem but can not find an answer so I
thought that I would post. I am hoping that there is a resolution but
I have not seen anything.

In a nutshell, I am trying to lock the first couple of columns on a
big table. My first answer was too use CSS but css expressions fire
(recalc) too often. With a large table, my web-app slows to a crawl
while CSS re-evaluates the values of the left-side (scrollLeft) of my
columns.

So I thought, Ok, I will write the CSS as a javascript function based
on the onscroll event. It works great except that the presentation is
very poor. If you scroll too quickly from left-to-right or vice versa
the frozen columns become herky-jerky and do not stay stationary
during scrolling.

Has anyone experienced this before and what did you do about it?

Thanks.

CODE:
=======
/*Here is the CSS code--*/
..cssTable td.locked, .cssTable th.locked{
background-color: #ffeaff;
font-weight: bold;
border-right: 1px solid silver;
left:
expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
z-index: 10;
}

//-- Here is sample of the javascript ----
var movGrid=document.getElementById("grdMyGrid");
for (rcntr=0; rcntr<scrDiv.firstChild.rows.length; rcntr++)
{

movGrid.rows[rcntr].cells[0].style.left=scrDiv.scrollLeft;
movGrid.rows[rcntr].cells[1].style.left=scrDiv.scrollLeft;
movGrid.rows[rcntr].cells[2].style.left=scrDiv.scrollLeft;
movGrid.rows[rcntr].cells[3].style.left=scrDiv.scrollLeft;
movGrid.rows[rcntr].cells[4].style.left=scrDiv.scrollLeft;

movGrid.rows[rcntr].cells[8].style.left=scrDiv.scrollLeft-50;
movGrid.rows[rcntr].cells[9].style.left=scrDiv.scrollLeft-50;
movGrid.rows[rcntr].cells[10].style.left=scrDiv.scrollLeft-50;
movGrid.rows[rcntr].cells[11].style.left=scrDiv.scrollLeft-50;
movGrid.rows[rcntr].cells[12].style.left=scrDiv.scrollLeft-50;
movGrid.rows[rcntr].cells[13].style.left=scrDiv.scrollLeft-50;
}

}


Has anyone experienced this before and what did you do about it?

Thanks,
Mark

 

[Peter Michaux]

Hi Mark,

In a nutshell, I am trying to lock the first couple of columns on a
big table.

What does locked mean? Are you trying to simulate "position:fixed"? If
so google "dean edwards ie position fixed"

My first answer was too use CSS but css expressions fire
(recalc) too often. With a large table, my web-app slows to a crawl
while CSS re-evaluates the values of the left-side (scrollLeft) of my
columns.

So I thought, Ok, I will write the CSS as a javascript function based
on the onscroll event. It works great except that the presentation is
very poor. If you scroll too quickly from left-to-right or vice versa
the frozen columns become herky-jerky and do not stay stationary
during scrolling.

Has anyone experienced this before and what did you do about it?

Thanks.

CODE:
=======
/*Here is the CSS code--*/
.cssTable td.locked, .cssTable th.locked{
background-color: #ffeaff;
font-weight: bold;
border-right: 1px solid silver;
left:
expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

What is expression()? Is that CSS? It isn't in my CSS 2 book.

Peter

 

[mjpdatadev]

*Locked* means that I am freezing the first few columns (just like you
can do in Excel).
And...
Yes, the CSS does use "position:fixed" but the whole Table is inside
of a <DIV> so you have to reposition the columns in real-time using
CSS expressions.

In order to get a better understanding of what I am attempting please
check out this link...
http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

*Expressions* have been supported by MS since IE5 so I am surprised
that it is not in your book. Basically, an expression is a line of
code that is evaluated while you are using the web page.
In my example---
left:
expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
------------------
the LEFT attribute/property of my CSS class is reassigned, and set
equal to, the left value of the parent of the parent of the parent of
the parent.

For more info, goggle 'CSS Expressions'

Thanks for trying to help.

Mark

 

[Peter Michaux]

*Locked* means that I am freezing the first few columns (just like you
can do in Excel).
And...
Yes, the CSS does use "position:fixed" but the whole Table is inside
of a <DIV> so you have to reposition the columns in real-time using
CSS expressions.

In order to get a better understanding of what I am attempting please
check out this link...http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

In Excel it makes sense to lock cells because they are otherwise
editable. In an HTML document table cells are not editable. So what
are you trying to accomplish? Do you just want to change the
background colour of some cells?

*Expressions* have been supported by MS since IE5 so I am surprised
that it is not in your book. Basically, an expression is a line of
code that is evaluated while you are using the web page.

My book is about CSS and expressions are not part of the CSS standard,
they are only a Microsoft extension.

Peter

 

[The Natural Philosopher]

In Excel it makes sense to lock cells because they are otherwise
editable. In an HTML document table cells are not editable. So what
are you trying to accomplish? Do you just want to change the
background colour of some cells?

Locked inn position, not locked for editing..its so you can see column
headers still when you scroll down the table.

To OP:

My first instinct was along the lines of 'put the headers in a separate
frame, and make that fixed, and let the rest of it have the natural
scrollbars vertically - lock the second frame horizontally for alignment.

Not javascript, but fast and clean..

 

[mjpdatadev]

Peter Michaux wrote,............

Sorry it took me so long to get back to everyone.

The issue is not whether this is attainable...it is and I am doing
it. Also, the table is editable through the addition of a javascript
that adds a textbox to the cell <TD> that has the focus. The real
trouble is the speed.

The more rows that I have then it causes CSS to slow to a crawl
because IE has to re-evaluate the position of so many objects. This
is why I tried to convert the CSS to an event-driven javascript. But,
as I said before, javascript does not recalc fast enough for the
graphic to move smoothly so it is jerky all over the table.

I am just trying to find out if there is a faster function to re-eval
the cell locations.

To answer the one other question, Yes, this is an internal app that is
behind a firewall so it is easy for me to standardize on IE.

Thanks again for all of the help.

Mark

 

[RobG]

Sorry it took me so long to get back to everyone.

The issue is not whether this is attainable...it is and I am doing
it. Also, the table is editable through the addition of a javascript
that adds a textbox to the cell <TD> that has the focus. The real
trouble is the speed.

The more rows that I have then it causes CSS to slow to a crawl
because IE has to re-evaluate the position of so many objects. This
is why I tried to convert the CSS to an event-driven javascript. But,
as I said before, javascript does not recalc fast enough for the
graphic to move smoothly so it is jerky all over the table.

I am just trying to find out if there is a faster function to re-eval
the cell locations.

To answer the one other question, Yes, this is an internal app that is
behind a firewall so it is easy for me to standardize on IE.

Thanks again for all of the help.

Have you considered asking your question in a CSS group? You can try:

comp.infosystems.www.authoring.stylesheets
<URL: http://groups.google.com.au/group/comp.infosystems.www.authoring.stylesheets?lnk=li&hl=en
You might get a few gnarly responses, but persevere and you may just
get a pure CSS answer that does exactly what you want. Make sure you
specify that it has to work in IE.

My suggestion would be to put the fixed columns in separate tables in
divs, set it all up with table-layout:fixed and allow the content to
scroll it its own div. Use javascript to establish the initial
alignment only (and perhaps to update when cells are edited).

Good luck!

 

[dhtmlkitchen]

Have you considered asking your question in a CSS group? You can try:

comp.infosystems.www.authoring.stylesheets
<URL:http://groups.google.com.au/group/comp.infosystems.www.authoring.styl...



You might get a few gnarly responses, but persevere and you may just
get a pure CSS answer that does exactly what you want. Make sure you
specify that it has to work in IE.

My suggestion would be to put the fixed columns in separate tables in
divs, set it all up with table-layout:fixed and allow the content to
scroll it its own div. Use javascript to establish the initial
alignment only (and perhaps to update when cells are edited).

Good luck!

What Rob said. Use table-layout:fixed. Use <col/> element and use a
style width for the col.