Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / [xTableHeaderFixed] Zoom feature in browser throws off column headers

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

  • Index
  •  » X Library
  •  » [xTableHeaderFixed] Zoom feature in browser throws off column headers

#1 January 15, 2010 12:35:56 pm

theseeker
Member
Registered: December 11, 2009
Posts: 24

[xTableHeaderFixed] Zoom feature in browser throws off column headers

I've noticed that the fixed column headers no longer line up with the body table when the zoom feature is used in all browsers that I've tested.

IE7 (125% zoom):

http://www.dmi.illinois.edu/temp/thead_zoom_125_ie7.jpg

IE8 (125% zoom):

http://www.dmi.illinois.edu/temp/thead_zoom_125_ie8.jpg

Firefox (Zoom in +1):

http://www.dmi.illinois.edu/temp/thead_ … irefox.jpg

Chrome (Zoom in +1):

http://www.dmi.illinois.edu/temp/thead_ … chrome.jpg

If you want to try this in real time, here's the live site:

http://www.dmi.illinois.edu/cpdev_redesign/

In case it's useful to Mike (or others), I have written javascript that correctly calculates the fixed headers, even when zoom is taken into consideration. I have used this in a production environment with success, but I am transitioning over to Mike's library for other reasons. This same code also might help solve the border-collapse problem that ben brought up earlier. Anyway, here it is:

http://www.dmi.illinois.edu/temp/getBodyColWidths.js

Offline

 

#2 January 20, 2010 10:26:28 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Zoom feature in browser throws off column headers

I haven't been ignoring this - even tho I haven't replied. I've been looking at your code and seeing what I could learn from it. This is an issue I still plan to tackle but I've been concentrating on resolving some other issues first. Thanks very much for sharing your code with us - and for helping me test. tup

Offline

 

#3 October 29, 2010 12:39:32 pm

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] Zoom feature in browser throws off column headers

Hi Mike,

Sorry to open up such an old thread again, but I was wondering if you ever had a chance to check into this. It's not a pressing issue, but it would be nice to resolve eventually if possible.

I thought it might be useful to provide a brief explanation of what's going on in my javascript code that accommodates zooming (http://www.dmi.illinois.edu/temp/getBodyColWidths.js).

The first thing I do is get a reference to each column within the document using document.getElementById. After that, I check to see if the browser supports window.getComputedStyle or not. Using getComputedStyle rather than offsetWidth and clientWidth seems to solve any Firefox width computation issues.

After that, I find the values for the widths of the columns and the column headers.

If the browser supports getComputedStyle (basically everything but IE), then I use that to find the widths of the columns and the column headers. I also grab some values for border-right-width and padding-width by using the getPropertyValue method of getComputedStyle to assist me in calculating widths for colspan'd columns. I then replace "px" with blank for each column width to allow me to do math on the values (the "px" messes up the math otherwise).

(Quick note: I guess window.getComputedStyle is document.defaultView.getComputedStyle() in Safari/Chrome. That syntax is also supported in Firefox, so it might make sense to use that syntax instead).

If the browser doesn't support getComputedStyle (IE), then I grab width from clientWidth and also populate variable borderwidth with currentStyle.borderRightWidth and variable paddingwidth with currentStyle.paddingRight. I use parseFloat to convert the string to a number, and then I use toFixed to convert the number to integer rather than float.

For IE version < 8, I get the widths of the columns and column headers by simply using clientWidth. For IE 8, that doesn't seem to work, and I have to do a calculation involving clientwidth and my variable paddingwidth (currentStyle.paddingRight) as follows:

var colwidth = col.clientWidth - paddingwidth * 2;

Finally, for all browsers, I check whether the offsetWidth of the header column is greater than the offsetWidth of the corresponding non-header column. If the header is larger, I set the width of the non-header column to the width of the header column. Otherwise, I set the width of the header column to the width of the (larger) non-header column. Basically, I'm just setting the width to the largest of the header or non-header column.

One additional note here is that I almost always use em's rather than px's in my CSS, and this code is designed to handle that.

I hope that is useful, and I'm happy to answer any questions about it or test things out for you.

Offline

 

#4 November 5, 2010 9:21:06 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] Zoom feature in browser throws off column headers

I've implemented some of these code ideas in rev 11. Thanks! I'll post a more complete follow-up in the other thread we have going.

Offline

 
  • Index
  •  » X Library
  •  » [xTableHeaderFixed] Zoom feature in browser throws off column headers

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load