CSS to javascript - CSS events are too slow.
mjpda...@yahoo.com
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
On Jul 6, 10:29 am, mjpdata...@yahoo.com wrote:
>
> 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
mjpda...@yahoo.com
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
Good Man
@g13g2000hsf.googlegroups.com:
> *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
funny, it doesn't work at all in Firefox, or Opera. can you guarantee that
people will be viewing your website in IE only?
> *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.
again, an "Internet Explorer Only" type of thing. I've been coding dynamic
sites with javascript/css for many years now, and I've never used anything
of the sort.
I see what you're after (only after bringing up your URL in IE), but you
might as well try to formulate a standards-based, all-browser solution
rather than heading down the (dreaded) IE-only path that you're on now.
The Natural Philosopher
> On Jul 6, 1:13 pm, mjpdata...@yahoo.com wrote:
>> *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?
>
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..
mjpda...@yahoo.com
> 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
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!
--
Rob
dhtmlk...@gmail.com
> On Jul 9, 9:36 pm, mjpdata...@yahoo.com wrote:
>
>
>
>
>
> > On Jul 6, 6:28 pm, The Natural Philosopher <a...@b.c> wrote:
>
> > > 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.
>
> Have you considered asking your question in a CSS group? You can try:
>
> comp.infosystems.www.authoring.stylesheets
>
>
>
> 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!
>
> --
>
> - Show quoted text -
What Rob said. Use table-layout:fixed. Use <col/> element and use a
style width for the col.