Vulpeculox home page Miscellany menu
Head-holder demonstration and download
Try it nowScroll down to the see what happens to the table headings.
Head-holder is a tiny jQuery plugin (easily adaptable for other Javascript methods) that holds the title of a table at the top of a screen while a long table scrolls. This means the titles are always visible no matter how long the body of the table is. When the bottom of the table is reached the holding is automatically lost. Download now Updated 18 August 2013

This is table 1
TopicFooBar Bar Bar Bar
Twelve Rs
ReadingStuffThings
wRitingStuffThings
aRithmeticStuffThings
RelationshipsStuffThings
ReviewingStuffThings
ResponsibilityStuffThings
ReflectingStuffThings
ResearchingStuffThings
ReportingStuffThings
ReasoningStuffThings
RememberingStuffThings
ResolveStuffThings
Twelve maturities
AmbitionStuffThings
Sociable personalityStuffThings
Fitness and good health StuffThings
Curiosity, enthusiasm for learning and knowledgeStuffThings
ConfidenceStuffThings
Stand up for principlesStuffThings
Develop and defend own opinions.StuffThings
Artistic appreciation and accomplishmentStuffThings
EmpathyStuffThings
Excellence of RsStuffThings
Imagination and abstract thought StuffThings
Temptation : Awareness and resistance. Self discipline StuffThings
Carousel
The animated carousel makes me watch it going round
With tots and mums who are not sure won over by the waltzer sound
Teens show off their raw bravado. Serious children hold on tight
Adults have seen it all before though they too are thrilled tonight
Wild and friendly are the horses so they hug their surging charger
Polished paint and rounded carving make the riders grip much harder
Mirrors flash with blurry snapshots in this oasis of warm light
As bright bare bulbs draw shooting stars against the darkness of the night
Galloping forwards all the time thinks each rider on their journey
Their mates are careering up and down, remaining all in company
They can not stay upon this ride. Too soon the slowing-down will come
The humming of the drive reduced until their journey will be done.
Others will soon take their places. They’ll look back on those to come.
And now I think our parents knew: Doing their best to give us fun.
The organ’s breath brings back my youth. This evening has a special sound
From my chair it’s good to watch the generations coming round.

This is table 3
TopicFooBar
Twelve Rs
ReadingGreen eggsand ham
wRitingGreen eggsand ham
aRithmeticGreen eggsand ham
RelationshipsGreen eggsand ham
ReviewingGreen eggsand ham
ResponsibilityGreen eggsand ham
ReflectingGreen eggsand ham
ResearchingGreen eggsand ham
ReportingGreen eggsand ham
ReasoningGreen eggsand ham
RememberingGreen eggsand ham
ResolveGreen eggsand ham
HTML
  • In <head> <script type="text/javascript"
    src="somePath/holdHeadings.js"></script>
  • <TABLE> must have <THEAD> and <TBODY> sections.
    Multi-row headingsMake sure the last TR in THEAD has the same number of columns as the TBODY
CSS Optional THEAD.hh_held for adapting style of heading when held
Script $(document).ready(function(){ $(selector).holdHeadings(optional options); });
Options Here are the default options.
{zIndex:10, hovers on layer 10 by default boxShadow : "0px 7px 10px #fff", a white shadow fading the table under the heading borderBottom : "2px dotted #555", alert to more scrolled above jumpToTop : true} do we implement click on head to jump to top?
Feature By default clicking on a held heading scrolls to the top of the table. This can be switched-off in the options.
Issue You've no idea how hard I've tried to stop tables that exceed the screen width resizing. If you have the magic formula please let me know!
Contact
This is table 2
TopicFoo Foo Foo FooBar
Twelve Rs
ReadingDangerExcitement
wRitingDangerExcitement
aRithmeticDangerExcitement
RelationshipsDangerExcitement
ReviewingDangerExcitement
ResponsibilityDangerExcitement
ReflectingDangerExcitement
ResearchingDangerExcitement
ReportingDangerExcitement
ReasoningDangerExcitement
RememberingDangerExcitement
ResolveDangerExcitement
Twelve maturities
AmbitionDangerExcitement
Sociable personalityDangerExcitement
Fitness and good health DangerExcitement
Curiosity, enthusiasm for learning and knowledgeDangerExcitement
ConfidenceDangerExcitement
Stand up for principlesDangerExcitement
Develop and defend own opinions.DangerExcitement
Artistic appreciation and accomplishmentDangerExcitement
EmpathyDangerExcitement
Excellence of RsDangerExcitement
Imagination and abstract thought DangerExcitement
Temptation : Awareness and resistance. Self discipline DangerExcitement
Imperfection!This table demonstrates that sometimes browsers insist on resizing. This is being worked on but at this minute there's a magic ingredient missing.
Table 4. Issues when overflowing the page
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
This is wide table that will need horizontal scrolling
Once
1		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
2		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
3		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
4		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
5		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
6		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
7		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
8		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
9		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
10		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
11		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
12		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
13		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
14		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
15		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
16		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
17		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
Once
18		upona time in theland ofNod, therelived a giant red dormousecalledNorman.Hewas a happy little creaturewithlongwhitewhiskers.
 
Blank space to allow more scrolling
V
 V
  V
   V 
    V
     V
      V
       V
V
 V
  V
   V 
    V
     V
      V
       V
V
 V
  V
   V 
    V
     V
      V
       V
V
 V
  V
   V 
    V
     V
      V
       V
V
 V
  V
   V 
    V
     V
      V
       V
V
 V
  V
   V 
    V
     V
      V
       V