firstly these are all just proof of concepts and only tested in firefox
the problem
how to implement a glossary that doesn’t overwhelm the user and that does not require server side code, and fails gracefully for those who don’t have javascript.
the html
the html is the same for all, i use and like DD/DT/DD for this, semantically it makes perfect sense, and i wish more people would use them.
back to top
the first test, was to put in a *back to top” link every x number of terms. with DOM this was very simple… basically i loop over the DTs and then insert a link every X number.
back to top + a navigation
so what good is going to the top, if you can’t get back down. so i cheated a little and added a placeholder to put the nav in. so i loop through all the DTs again, extracting new letters as i find them, insert an anchor, and to the nav HTML. once i am done looping i insert the nav HTML into the empty placeholder.. i used innerHTML and many purist will turn up their noses. but i am just playing here…
back to top + a navigation + collapsible terms
now how else to spruce it up. what if they were all collapsed to begin with, sure would make it nice and more digestible. so in addition to above as i loop through i add a class DD to hide by default, and inserted a javascript toggle link.
back to top + a navigation + search
still i thought there could be more. how about a search... so again as i loop over DTs i store the word in a glossary array. i then put a fixed search box (*this is prety sweet*) with an onkeyup handler (only does work after three characters). so as user types it finds the term that matches the letter sequence and with a little magic from squidfingers it smoothly scrolls. and if that wasn’t enough, it also puts in other terms in a drop down that also match those starting letters. awesome!!!
search + reveal
ok what more … what if it was all blank and only the word you wanted showed up… so just hide them all and when matches are found, reveal them.
again these are all proofs of concept and only tested in firefox, so you would probably have to do more testing and modifications to get this ready to run live.