New favelet – Show all the id attributes used on a page
I was trying to write a little favelet that loops through a bunch of HTML elements on any page and finds all the id values. Once it’s done, it inserts it into the start of the page for info. Why am I doing this? I wanted to get some stats about what ids we use on our own sites (ie, do we always call the main nav ‘nav’, ‘mainnav’, ‘nav_main’ or something else?) and a favelet seemed like the way to do it. The test page is here:
Thanks to Simon who sorted out a bug for me (it req’d an anonymous function that I’d ommitted). It now works a treat in Firefox. I can’t be arsed to make it work for anything else, but you’re more than welcome to have a go :-D Also, any other comments to make it work better are appreciated.
Posted: September 27th, 2006 under Scripting, Tech.
Comments
Comment from Lloydi
Time September 27, 2006 at 7:49 am
I’ve made a slight change:
- Made sure that it sits on top of anything else (abs position)
- Created a hover effect – hover over the ids and a red border will outline the element.
It’s kinda the reverse of the Display Element Information thing in we developer toolbar. Whaddya think?
Comment from steve
Time June 30, 2007 at 7:28 pm
Thanks!
I’m new to CSS and this helped me to do my work.
Keep it going!
Comment from tyrner
Time April 15, 2008 at 2:37 pm
Very helpful for debugging!
But it wont work under Safari 3 =(
But no problems with FF3 and IE 7.
Thanks a lot!
Comment from AlastairC
Time September 27, 2006 at 6:56 am
Cool, I like. It might be worth giving the added section it’s own (list) styles. For some sites it’s fine, for others the text may not be very readable (mine for example).