make-believe.org

Topographic page layout

I coded up a little tool for web designers. It's a bookmarklet/favelet that provides you with a "height map view" of the page you're looking at—that is, more deeply nested elements are given a lighter background.

It's a hassle to explain, but if you click the link below you'll see what I mean.

Link: Topographic view

Refresh the page to restore it.

If you want to use it with other pages, just drag the link to your browser's Links bar. Then click it while viewing a page to see it in all its skeletal splendour.

Notes:

Here is an alternate bookmarklet which maintains background images (uglier; arguably more useful): Topo view with backgrounds
Unlike border-based solutions, this preserves the layout of the page to the pixel.
Beyond ten sixteen layers of nesting, every deeper element will be shaded pink. This is pretty rare for well-coded XHTML Strict pages, but is more common with table-based layouts.
It is dark, but this gives you more layers to view.
Tested in Firefox 0.8, Opera 7 and IE 6.0. (And Safari—thanks Chris!)
If you make any improvements, I'd love to see 'em.

Update:

After a suggestion from Peter in the comments, I've updated the bookmarklets on this page to shade the first 16 layers of nesting. (It was 10 in the original.)

Further update, mid-May:

Jesse Ruderman wrote a faster version which supports the major browsers with the exception of Safari. You can find that at squarefree.com.

Joseph | | Comments(42)

Comments

pixelkitty

This is great. Makes it very easy to see the level of elements. Nice.

andrei

This is really awsome, thank you for the bookmarklet. This is trally, really, cool, seriously.

Chris Vincent

Seems to work in Safari 1.2. Great work!

Timen

I never knew I was always looking for this. Good work.

Cheah Chu Yeow

Damn this is awesome. Thanks for sharing this. Very useful for checking unclosed divs, I can foresee.

Mike Owens

Very very cool. Now if someone can impart a 3-D aspect to it so that higher elements are crisper, and further elements fuzzier…

Patrick Hall

awesome, well & truly.

Luke Melia

very cool

tommy

Very useful extension for Mozilla browser you can find here:

http://chrispederick.myacen.com/work/firefox/webdeveloper/

tommy

Very useful extension for Mozilla browser you can find here:

http://chrispederick.myacen.com/work/firefox/webdeveloper/

Seairth Jacobs

In case one uses this on a table-happy page with Mozilla 1.6, Mozilla will implicitly add such elements as TBODY into the DOM even if you do not have them in the source. I am guessing this is true of other browsers as well. So the script isn’t broken when you see all of that pink, it’s just the extra implicit elements you weren’t expecting…

Joseph

Yes that’s true Seairth. And different browsers do produce different maps for this reason—Opera’s seem to be slightly girthier than IE’s and Gecko’s, for instance. But it’s all relative, of course.

Thanks to everyone for the feedback. :)

Carina

it’s great! thanks a lot! :)

Lucian

Amazing work. It’d be cool if you could add snow textures for top level, earth textures and sea for the deeply nested stuff. Oh, and if we could rotate it in 3D…

Ruben

Nice job.

visitor

cool

Fabian

Nice. Thanks :)

Mozinet

Trackback :

French Blog : Topographie des pages Web

http://blogzinet.free.fr/index.php?2004/04/11/135-TopographieDesPagesWeb

Voici un nouveau bookmarklets pour développeur Web…

Thanks ! That works on Mozilla 1.7b.

Jesse Ruderman

Mike Owens: Change

e.style.backgroundColor=c; e.style.borderColor=c;

e.style.backgroundColor=c; e.style.border=”1px outset ” + c;

and it gains a 3D look. You’re right — the 3D look helps.

Paul Anthony

Aw lovin’ it- Bookmarklets are a great way to make life easier for the developer.

peter

this is the second time I come in touch with a bookmarklet (the 1st make me wonder, but I didn´t understand what it was) and it´s kinda breakthrough. This is a must have for any webdesigner — great !

I´ll go into bookmarklets now, thanks!

peter

Change:

you can use toString() with a parameter:

with r.toString(16) you get the number as a hex-string.

That means you can change

if(r>9) to if(r>16)

that gives you a depth of 16 instead of 9

also if you add a line

c=c.substring(0,7);

you can then remove the “if(r>9) …” part and get even more depth (although colors may look ugly)

JP Honeywell

Jesse Ruderman (et al): Regarding your change

Be very careful about just doing a copy/paste because the quotation marks in ”1px outset ” are not what you get from the keyboard. Took me a couple minutes to get that but once I replaced them it worked.

You old pros probably already knew that though.

julik

Brilliant!

Andy

I love this!

Tacho

it´s really cool! THX

p2

nice thingie! but why doesn´t it work on k10k.net?

Joseph

It appears not to like the frames on k10k.net. If you open any of the frames in a new window (right-click on a frame in Firefox), and then apply the bookmarklet, it works.

I’ll get around to investigating this when I have some time.

balloonhead

Extremely useful. it helped me tracking down some errors in my tables and layers. Will fix them soon. What a pity it does NOT support IE as a bookmark. But who cares when Opera has no problems with the link.

Joseph

Hmm, works for me in IE6. Can you give me any more info?

colin gilchrist

Whoa, very VERY useful insight into table structures without adding distorting borders. Definitely one of my favorite favorites! Now how to work out ho to undo it without refreshing…

horses rule!

horse!!!!!!!!!!!!!!!!!!!!!!( i am random)

anonymous

I don’t get it. I tried dragging the link to the brower’s link bar, which is impossible. I saved your page in favorites, loaded another page and returned to your page and refreshed. What am I doing wrong?

Joseph

Right-click on the link, and from the context menu that appears, select “Add to Favorites…”

anonymous

Very cool!

This is absolutely great. I hope you will add these instructions above so all cant take advantage of this marvelous gadget you have invented here.

This work is licensed under a Creative Commons License.

Topographic page layout

Update:

Further update, mid-May:

Comments

UserDate("2", "3", "2004", "1", "0 "); pixelkitty

UserDate("3", "3", "2004", "2", "27 "); andrei

UserDate("5", "3", "2004", "20", "20 "); Chris Vincent

UserDate("5", "3", "2004", "22", "52 "); Timen

UserDate("6", "3", "2004", "16", "39 "); Cheah Chu Yeow

UserDate("6", "3", "2004", "18", "25 "); Mike Owens

UserDate("6", "3", "2004", "19", "57 "); Patrick Hall

UserDate("6", "3", "2004", "23", "1 "); Luke Melia

UserDate("6", "3", "2004", "23", "9 "); tommy

UserDate("6", "3", "2004", "23", "10 "); tommy

UserDate("7", "3", "2004", "1", "15 "); Seairth Jacobs

UserDate("7", "3", "2004", "2", "14 "); Joseph

UserDate("7", "3", "2004", "18", "24 "); Carina

UserDate("8", "3", "2004", "2", "40 "); Lucian

UserDate("8", "3", "2004", "19", "26 "); Ruben

UserDate("9", "3", "2004", "19", "30 "); visitor

UserDate("10", "3", "2004", "17", "13 "); Fabian

UserDate("11", "3", "2004", "16", "39 "); Mozinet

UserDate("12", "3", "2004", "12", "10 "); Jesse Ruderman

UserDate("13", "3", "2004", "11", "59 "); Paul Anthony

UserDate("14", "3", "2004", "7", "56 "); peter

UserDate("14", "3", "2004", "9", "53 "); peter

UserDate("14", "3", "2004", "14", "7 "); JP Honeywell

UserDate("16", "3", "2004", "11", "53 "); julik

UserDate("27", "3", "2004", "0", "59 "); Andy

UserDate("29", "3", "2004", "7", "52 "); Tacho

UserDate("29", "3", "2004", "9", "15 "); p2

UserDate("29", "3", "2004", "12", "15 "); Joseph

UserDate("29", "3", "2004", "12", "52 "); balloonhead

UserDate("29", "3", "2004", "13", "16 "); Joseph

UserDate("16", "6", "2004", "8", "59 "); colin gilchrist

UserDate("11", "10", "2004", "20", "27"); horses rule!

UserDate("10", "1", "2005", "18", "49"); anonymous

UserDate("10", "1", "2005", "21", "27"); Joseph

UserDate("11", "1", "2005", "14", "6"); anonymous

UserDate("14", "1", "2005", "16", "27"); Marco

UserDate("1", "4", "2005", "20", "30"); not tellin

UserDate("24", "6", "2005", "19", "40"); Tom

UserDate("10", "9", "2005", "19", "26"); rachelle

UserDate("27", "10", "2005", "0", "16"); Haare

UserDate("10", "11", "2005", "16", "17"); Web

UserDate("22", "11", "2005", "13", "11"); Arzt

pixelkitty

andrei

Chris Vincent

Timen

Cheah Chu Yeow

Mike Owens

Patrick Hall

Luke Melia

tommy

tommy

Seairth Jacobs

Joseph

Carina

Lucian

Ruben

visitor

Fabian

Mozinet

Jesse Ruderman

Paul Anthony

peter

peter

JP Honeywell

julik

Andy

Tacho

p2

Joseph

balloonhead

Joseph

colin gilchrist

horses rule!

anonymous

Joseph

anonymous

Marco

not tellin

Tom

rachelle

Haare

Web

Arzt