Automatic Footnote Numbering

HTML & CSS
1

Hi

Apologies if this has already been discussed, but can anyone tell me how to create an Automatic Footnote Numbering style in CSS to go with:

<a href="#footnote1" name="footnote1"><sup>1</sup></a>

and then below:

<a name="footnote1">1. </a> [reference here]. <a href="#footnote-1"><font size="1">[Back to the text]</font></a>

I want to be able to insert a footnote between, say, footnote 2 and 3 on a page without having to manually alter all footnote html after number 3.

I hope that’s clear.

Thanks very much

Alan

EDIT
This post has been reformatted by enclosing the inline code with backticks
`
before and after the code.

2

You’ll need to use some Javascript for that because as far as I know there is no way to do it with just CSS

This guy seems to have done some testing although he does says that his markup may not be the best

http://www.cssnewbie.com/generating-automatic-website-footnotes-with-jquery/#.VKOw0jJ5OSo

1 Like
3

Thank you very much for the quick and helpful response. I will take a look. I am very much an amateur and don’t know Javascript. Was hoping it might be simple. But obviously not. Thanks again.
Alan

4

I’m afraid this is not simple at all. That’s why other websites don’t take advantage of it.

Also, it is a matter of browsing itself. If the visitor has to scroll up and down all the time, it can get annoyed and leave

1 Like
5

There is possibly a problem with automatic footnote numbering: it’s not unusual for multiple places in a document to reference the same footnote now and then.

I realised this when trying to make accessible working-everywhere footnotes. I still also had to use Javascript to get the keyboarding right: someone reading may want to jump to a footnote, and then jump back to where they were, with the focus.

6

Hi,

You could use CSS counters to number the footnote links and then as long as you have the same number of actual footnotes as you do links (which should always be the case) then css counters could count and display them too.

You would still need javascript to automatically add the href and the ids into place but as far as the numbering goes then css could do this.

I put up a rough demo here (modern browsers only - and probably not very accessible).

Of course that would not work if as as Stomme_poes said above:

In the case of the above then I guess you would need to do it manually.

7

php and get template? with the template just having the footnotes?
that way it would be more compartmentalized.
call in the footnotes as needed.

8

Thank you very much for this demo. It looks very good. I am hoping to try and set footnotes up in a month or so (I mentioned I am an amateur). Is it OK if I get back to you then for more advice?

9

No. We don’t give advince more than once to the same member. That’s how nice we are :stuck_out_tongue:

In case that it wasn’t obvious, I was just kidding :wink:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.