SitePoint Sponsor

User Tag List

Page 3 of 5 FirstFirst 12345 LastLast
Results 51 to 75 of 102
  1. #51
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to make this also lock the first column in addition to the header? That would be amazing!

  2. #52
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi harty83, Welcome to SPF!

    Yes, but now I'm experimenting with something a little different. It is very much in the works but have a look.


  3. #53
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi harty83,

    Regarding your question sent via email - fixed header doesn't reposition correctly when scrolling horizontally - I think I have that problem fixed now.

    The demo for this thread

    A related demo

    Thanks for everyone's interest and feedback!

  4. #54
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Test results for the January 25, 2007, code

    Windows

    Firefox 1.5.0.9: works perfectly.
    Firefox 2: works perfectly.
    IE6Windows: works perfectly.
    IE7Windows: works perfectly.
    Mozilla 1.7.13: collapses the header cells (but this is an out-of-date browser).
    Opera 9.01: works perfectly.
    Opera 9.01 small screen mode: does no significant harm; the additional layers show up at the bottom of the page.
    MSNTV Viewer 2.8: does no harm.

    OS X Macintosh

    Opera 9.01: works perfectly, if sluggishly.
    Opera 9.01 small screen mode: does no significant harm; the additional layers show up at the bottom of the page.
    Firefox: works on letting up on the mouse button; acceptable.
    iCab (narrow browser windows): cuts off part of last column.
    iCab (wide browser windows): does no harm.

    Safari 2: Is still getting the column widths wrong, although it gets the table width approximately right.

    So for my implementation, I'd add sniffer code to exclude iCab, as I cannot allow any scripts that do harm.

    Beautiful job, Mike!
    Last edited by Charles Belov; Jan 29, 2007 at 19:52. Reason: correct Safari, sorry

  5. #55
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Charles, thank you very much!

    Great test results! Thanks for sharing that with us!

    I tried to find some advice on detecting iCab. You probably already know these things, but here's a few tips I found:

    quirksmode.org:
    The version detect script searches for the browser name in both navigator.userAgent and navigator.appVersion. The reason is iCab: this browser's navigator.userAgent may not contain the string "iCab", but navigator.appVersion always does.
    howtocreate.co.uk:
    iCab can spoof, but always provides the ScriptEngine method that returns a string containing 'InScript'.
    muchsoft.com:
    Code:
    isInScript = (window.ScriptEngine) ? (ScriptEngine().indexOf("InScript") != -1) : false;
    A man with a pencil shows one of iCab's 'spoofed' UA strings.

  6. #56
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was aware of the InScript identifier for iCab, but I'd rather learn of something I need twice than not at all. So, thanks.

    Perhaps a better description of the Opera 9.01 small screen, which is meant to emulate cell phone results, would be:

    does no harm, but may look a little silly; the additional layers show up at the bottom of the page; acceptable.

    It would be wonderful if this feature would work on cell phones and PDA's, as their owners would have the most to gain from this feature. Certainly, I don't expect Opera to emulate all cell phones, so hopefully it works on some of them and does no harm on others.
    Last edited by Charles Belov; Jan 30, 2007 at 11:41. Reason: re-paragraphing

  7. #57
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Charles Belov View Post
    It would be wonderful if this feature would work on cell phones and PDA's, as their owners would have the most to gain from this feature.
    You are right, Charles. Small-screen devices would be an excellent use of this object!

  8. #58
    SitePoint Member
    Join Date
    May 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant Charles. I have tried it on a page of my website (http://myweb.tiscali.co.uk/carbootsuk/anglesey.htm) and it works almost perfectly. I checked and found, of course, that if I printed the page while scrolled the fixed table headers printed on top of the other text at the top of the page. I added to a css (media="print") file: #idFixedHeaderContainer, clsFixedheaderContainer{display:none;} which solved the problem.

  9. #59
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent. Thanks, bunsen! I'll be adding that css to my demo

  10. #60
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bunsen View Post
    I checked and found, of course, that if I printed the page while scrolled the fixed table headers printed on top of the other text at the top of the page. I added to a css (media="print") file: #idFixedHeaderContainer, clsFixedheaderContainer{display:none;} which solved the problem.
    Wow! Good catch!

    I'd suggest using class instead of ID, so that each floating table header doesn't have to be listed individually in the style sheet. Although I guess it could be added dynamically using JavaScript.
    Last edited by Charles Belov; Feb 15, 2007 at 11:15. Reason: clarify

  11. #61
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Charles, how goes it?

    #idFixedHeaderContainer should be enough. It contains all the copied headers.

  12. #62
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I missed that. Thanks.

    Have been busy adding other features to our new website, so haven't really had time to work on this. I'm reluctant to add it until the Safari issue is solved; while it doesn't prevent use of the site, it looks woefully unprofessional.

    Additional Mac result: Works in Camino (off by 1 pixel, but I'm not going to worry about that).

    I've attached screen print excerpts demonstrating the Safari problem. It occurs in Safari 1 and 2.0.4 both.

    By the way, there's something odd about the copy of my test results that you posted at your example page. None of the text wraps, so if a result is wider than the enclosing box, it gets cut off. Specifically, "Opera 9.01 small screen mode: does no significant harm; the additional layers show up" and "Safari 2: Is still getting the column widths wrong, although it gets the table width appro" although I can copy and paste the full text. I'm using Firefox 1.5.0.9 at 800 x 600, with a minimum font size of 14 pixels Verdana.
    Attached Images Attached Images
    Last edited by Charles Belov; Feb 15, 2007 at 16:19. Reason: add comment on site rendering

  13. #63
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Charles Belov
    By the way, there's something odd about the copy of my test results that you posted at your example page. None of the text wraps,
    It's in a PRE element which has overflow:hidden. I usually only use those for displaying code so I never want them to wrap.

    Haven't had a chance to look at your screen-print but will soon.

    thanks

  14. #64
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bunsen View Post
    Brilliant Charles. I have tried it on a page of my website (http://myweb.tiscali.co.uk/carbootsuk/anglesey.htm) and it works almost perfectly. I checked and found, of course, that if I printed the page while scrolled the fixed table headers printed on top of the other text at the top of the page. I added to a css (media="print") file: #idFixedHeaderContainer, clsFixedheaderContainer{display:none;} which solved the problem.
    Thanks for adding to the knowledge set. Actually, Mike Foster is the genius who implemented it. I originated the idea/specs and have been doing the cross-platform testing. (I acknowledge that coming up with the idea requires some genius; it's just that it's usability genius and not coding genius.)

    Quote Originally Posted by MikeFoster View Post
    It's in a PRE element which has overflow:hidden. I usually only use those for displaying code so I never want them to wrap.
    May I respectfully suggest overflow:auto

  15. #65
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, you're absolutely correct. I should have been using overflow:auto

  16. #66
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the way, I just noticed your JavaScript Guru of the Year 2006 icon. Congratulations! After seeing your work on this project, I can certainly believe it.

  17. #67
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

  18. #68
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On Edit: Deleted; problem solved!
    Last edited by geosite; Feb 18, 2007 at 17:24.

  19. #69
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This solution worked well. My client, however, did not want to have any ".js" files loaded onto their server. Go figure.

    I came up with an alternative that seems to work well (see link below). I created 2 tables that line up on top of each other. One is the "floating header" and the other is the body. The "body" table is enclosed with a <div> set to make the table scroll.

    I used Javascript from the referring page to control the size of the target page with the tables so that 1) the only scroll bars are in the table and 2) the two tables always line up so that they appear to be one.

    Here is an example: http://www.iolite.net/scrolldemo.htm

    Follow the link to see the table. The scrollbars scroll the "body" table while the "floating header" table stays put.

  20. #70
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, there are quite a few CSS-only solutions out there if one is willing to have fixed-width tables and have a separate scroll bar for the table. At least one of these is linked to elsewhere in this thread. Your solution does fit that relatively well. I say "relatively" as there are differences in browsers, such as whether the browser will respect the column widths you set; the columns are a slight mismatch in my browser.

    The specific solution I am trying to find is:

    1) Works with liquid tables.
    2) Doesn't require a separate scroll bar for the table.

    It does require JavaScript, which will not meet your needs, but it does meet mine (and thus is the topic of this thread). And right now Mike Foster's code--which I find impressive--either works nicely or fails nicely in every browser but Safari (works sloppily) and iCab (fails sloppily). The iCab failure can be solved by sniffing iCab so we can exclude the JavaScript from it (fail nicely). So we are only looking for a way to make Safari behave better (work nicely).

    Hope that makes it clear.

  21. #71
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi MBKlaus, Welcome to SPF!

  22. #72
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, my mistake. Sorry about being off topic.

  23. #73
    SitePoint Zealot Deep13's Avatar
    Join Date
    Aug 2004
    Location
    India
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Thanks for the such a nice piece of code. I am facing one issue with it though. Your code makes first TH as blank and also adds up extra TH or space in the end of thead. but I do not want like that. How do it fix it up?

    I hope you got my point.

    Thanks
    Deep

  24. #74
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Deep13,

    Your code makes first TH as blank and also adds up extra TH or space in the end of thead.
    I'm sorry but I don't follow you. Give us a link to your test page.

  25. #75
    SitePoint Zealot Deep13's Avatar
    Join Date
    Aug 2004
    Location
    India
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here we go:


    The fist column in TH (blue BG) should be a checkbox but current code hides it for some reason. I have used my best skills in MS Paint to explain the stuff haha


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •