Rudimentary hovering footnote for TLVP

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
In ciwa, TLVP was asking about hovering 'footnotes'



as a rough opening gambit on the road to doing it for real...
Have not looked at it in IE anything.


Re: Rudimentary hovering footnote for TLVP

On Thu, 17 Nov 2011 20:16:00 +1100, dorayme wrote:

Quoted text here. Click to load it

Thanks for this illustrative sample, dorayme.

A very quick and instinctive first reaction, if I may: I find myself
jumping back from the screen when I see the text

 ultricies quis, tellus. Vestibulum blandit nibh eget turpis. Quisque
 mollis, lacus consectetur eleifend convallis, diam augue blandit magna.
 Cras vel eros. Vivamus sed odio et orci

reflow around that right-floated sidenote-block that wasn't even there the
moment before I bethought myself perhaps to click on the footnote marker.

And I cringe even more at seeing it flow back once I move the cursor away.

Text should not flow and reflow like waves on a beach -- I fear I might
even cause sensitive readers to develop seasickness were I to adopt this
'hover-to-reveal-the-footnote' approach :-) .

But as a lesson in CSS usage, it's superb! And just at my level. Thank you.

Cheers, -- tlvp
Avant de repondre, jeter la poubelle, SVP.

Re: Rudimentary hovering footnote for TLVP

Quoted text here. Click to load it

Does not bother me, I like some things to be like beaches and
waves, perhaps I like the latter too much. Anyway, on my machine
here it happens very fast and I was assuming there was a
trade-off between this and feeling the giddiness of going up and
down in a city skyscraper lift using links to the bottom of a
long page and then coming up.

There are other techniques if you don't like this. Perhaps you
might prefer this sort of thing. Personally, especially on a
rainy day like this, I prefer the beaches and waves one.


I have not made provisions for IE6 (it is simple fix with a bit
of JS) but no doubt you can add it. And I have not bothered here
or yet to make provisions for if CSS is off like I did a bit with
the beaches and waves technique. Just a demo of part of a
possible way to go...


Re: Rudimentary hovering footnote for TLVP

On Fri, 18 Nov 2011 08:27:49 +1100, in
comp.infosystems.www.authoring.stylesheets you wrote:

Quoted text here. Click to load it

Right: that giddiness is way down on my list of things eagerly to look for,
too, whence my attempt to keep footnote matter near footnote mark.
Quoted text here. Click to load it

I had a quick look-see how that prints. Answer (at least with Safari's
Print Preview function): it prints the body text up through the footnoted
word "tellus.^[1]", then, inline with that, it prints the content of the
footnote itself, and then, in line with that, it prints the remainder of
the body text, beginning with "Vestibulum ...".

It does the same whether the page itself is (with cursor hovering on [1])
or is not (cursor elsewhere) displaying the footnote matter. And curiously
enough, once the print preview window is closed, Safari will *no longer*
display the page in its other state until I reload the page in the browser.

Anyway, apart from the change of language, there's no hint, in that print
preview view, where the footnote ends and body text resumes :-) .

All in all, I much prefer your little green sidenote boxes :-) .

Quoted text here. Click to load it

My own hope and sincere expectation is that, so long as it's simple HTML
and validates correctly, everything from IE 4.5 and Netscape Navigator 5
on up should render it as I'd wish (except, perhaps, for some of the more
recondite named or enumerated character entities). Am I much too naive?

Once again, though, I've learned a *lot* from the CSS section of the HEAD:
thank you very much for the neat little object lessons there and earlier.

And cheers, -- tlvp
Avant de repondre, jeter la poubelle, SVP.

Re: Rudimentary hovering footnote for TLVP

Quoted text here. Click to load it

Whoa there! I had intended it purely for screen viewing, hence

<style type="text/css" media="screen">

in the source.

As for printing, that is a different matter and needs a different
print stylesheet.

In fact, if you are looking for perfection so that it is all
things to everyone and his pet dog and printer, you will have to
give me some time. <g>

Quoted text here. Click to load it

Yes, I quite like floated boxes, no hovering involved, simple.
The tricky bit is to provide for when CSS is off, I took a few
fun steps in that direction if you look closely.

I am generally happy to have footnotes at the traditional foot
with links up and down and if I really thought the text needed
the notes to be up there, I would tend to put them in the main
body of the text as just more complete information. In fact, I
have heard (but I have special equipment) footers express
disorientation when not in their normal places, they get
depressed, like us all, if you look very very closely, they sag a
bit when anywhere else but their rightful place. There is the
question of their footer rights you know, perhaps they should be

To link to a footnote below, just ID a convenient element near
the marker in the main text, ID the note below, and link to each
(to go there and back) from each.

main body:

<p id="source1">... <a href="#note1">1</a> ...


<p>... <a id="source1" href="#note1">1</a> ...


<div id="note1">1. ... Footer text ... <a href="#source1">(main

Anyway, something like this is what I have done.


Re: Rudimentary hovering footnote for TLVP

On Fri, 18 Nov 2011 13:37:16 +1100, dorayme wrote:

Quoted text here. Click to load it

I was just curious to see what the default print behavior might be.
I saw ... and I shared what I saw, warts and all, with no hint of
blame about anything. If that can all be redesigned by suitable
'media="print"' css expostulations, so much the better :-) .
Quoted text here. Click to load it

That's what I like about you -- the merely difficult (for me) is routine
(for you) ... but true perfection may take a bit more time :-) .

Quoted text here. Click to load it

For when CSS is off, and so as not to have to bother learning too much
CSS in the first place, I'd probably try to find just a purely HTML-ish
way to achieve the desired effect. (Well, 'purely' it probably won't be;
a bit of inline 'style="feature:value; feature:value; ..."' attributes
on HTML tags might be called for, but that's not 'hard-core' css, by my
lights :-) .)
Quoted text here. Click to load it

In print, I quite agree with you. End-notes, on the other hand, I find
utterly abominable! For one thing, I can never remember where to find 'em:
does this author stick 'em all at the end of the current Section? of the
current Chapter? at the end of the current Part? at the end of the Volume?
or in the comprehensive collection of all volumes' endnotes somewhere
within the very last volume?

To have to search through all those choices before learning that this
particular footnote is simply explaining that Latin "i.e." is tantamount
to Polish "tzn" leaves me seething with frustration. I'd much rather
just glance down to the bottom of the page I'm already open to, discover
that it was hardly worth that minuscule effort, and return to my place.

I think that's also why the by-line holder likes the sidenote arrangement.

Quoted text here. Click to load it

Actually, the two instances of [1] in the sample page of Opow-130
are already so decorated as you suggest here, and the browser really
does hitch down to the footnote matter and back up to the footnoted
text position ... though no one will ever need to actually click on
either of those hot bits of link marker:
Quoted text here. Click to load it

Yup, in Opow-130.htm#4 likewise :-) .

Thanks dorayme (BTW, does anyone ever call you DoReMi instead?), it's been
most enlightening and informative for me to see such useful snippets of CSS
in a context where it is clear what they're achieving, and how -- syntax
and semantics *together* is the only way for me to learn new languages!

Cheers, -- tlvp
Avant de repondre, jeter la poubelle, SVP.

Re: Rudimentary hovering footnote for TLVP

Quoted text here. Click to load it

Well, CSS is CSS, no matter if it is inline or not, and if it is
off, it is off. As for a pure HTML way, OK, that is a challenge.
First what needs to be understood is that there are still styles
in what we normally think of as 'pure HTML' because there are the
default stylesheets lying behind the browsers.

Anyway... about footnotes and no author CSS, you *could* use a
table with a last right column reserved for notes on the text,
the column could span as few or as many rows as you find
convenient. You could even have rows of paragraphs | note(s) or a
bit less of a crime, the whole text in one cell and the notes in
the long cell next to it. Essay | Notes. Not recommending it, of
course. Just giving you wicked ideas. If you need a lawyer to
defend you, he or she could argue slyly that an essay is a
somewhat tabular affair, lists of said things... <g>


Site Timeline