I need help entering page jumps in the text and in the Notes below
-
Hi,
I am not sure exactly what I have to do in order to put page jumps into the text of a post (so that the reader can be taken to the note at the bottom, then jump back up to their place in the text (I have never used HTML). One of your support people stated thatThe links will look like this – Click me
Another said to enter the following:
1st note in body of text: [1]
1st note at bottom: 1.So:
1st note in body of text: [1]
2nd note in body of text: [2]
3rd note in body of text: [3]Footnotes at bottom:
1st note at bottom: 1.
2nd note at bottom: 2.
3rd note at bottom: 3.The WordPress documentation on page jumps:
The number for the footnote in the body of the text should be entered as: Click me
and it states ‘the anchor point where the above link goes to is written like this:
See?
Also the document states:
‘At the beginning of the post or page, add this before all of the other HTML:
topThe HTML for all three are slightly different.
So, my questions are:
– is it necessary to enter HTML at the very beginning of the post (as the WordPress documentation seems to state)?
– what exactly is the HTML I need to enter both in the body of the text, that will take the reader to the relevant note at the bottom and
– what exactly is the HTML I need to enter below the body of the text (in the Notes) that will take the reader back to their place in the text?With thanks,
Phil Stanfield
The blog I need help with is: (visible only to logged in users)
-
Hey Phil,
We have a pretty robust support page on entering page jumps here:
http://en.support.wordpress.com/splitting-content/page-jumps/
Have you looked at that page?
Specifically, here’s the HTML you’ll use to create the note:
http://en.support.wordpress.com/splitting-content/page-jumps/#create-a-page-jump
Here’s how to send readers back to the top of the page:
http://en.support.wordpress.com/splitting-content/page-jumps/#sending-readers-to-the-top
-
Hello Jeremey,
thanks for your reply. Yes, I have read the page and drew on it in my above request. My wish is to be able to do posts with academic style footnotes – so when a reader clicks on a number in the text ([1], [2], [3] etc.) they are taken to the relevant numbered note at the bottom (1., 2., 3. etc.), under the title ‘Notes’ and when they click on that number are taken back up to the point in the text at which that same number is situated. I don’t want to have the word ‘Click me’ appear, nor to have a link at the bottom which, when clicked, takes the reader back to the very top of the post.
One of your support staff gave me the HTML to do this, which although it appears correctly on this discussion page, I can’t reproduce this in a post for some reason. He suggested this may be because I first have to complete the post – I did this after our chat but again, the problem was not solved.
I can recognise patterns in the HTML (as I stated, I have no experience in using HTML) but can’t get round the problem.
I was told that the correct HTML for what I want to do (footnoting in the body of the post, which, when clicked on, should take the reader to the same number in the Notes at the bottom of the post) is:
1st note in body of text: [1]
2nd note in body of text: [2]
3rd note in body of text: [3] etc.and for the numbering of notes at the bottom, which when clicked on, should immediately take the reader back to the corresponding number in the body of the post:
1st note at bottom: 1.
2nd note at bottom: 2.
3rd note at bottom: 3. etc.But when I enter these in Text Edit they don’t work correctly.
What am I not doing right? Perhaps the problem has to do with the way in which I enter the HTML.
With thanks,
Phil Stanfield
-
Hey Phil,
The “Click me” and associated text is editable. So, for example, say you wanted to create a footnote. You would do the following:
Within the paragraph, you would enter this text:
<a href="#footnote1"><sup>1</sup></a>That would create a superscript “1” within the text of the post like this:
You would also want to enter the following:
<a id="top1"></a>So, the total code would be:
<a href="#footnote1"><sup>1</sup></a><a id="top1"></a>That goes where you want the “1” to appear.
At the bottom, you’ll want to put something like this:
<a id="footnote1"></a>1. This is the text I want in the actual footnote.<a href="#top1">↩</a>The first part (id=footnote1) tells the post “This is where I want the superscript 1 to go.” The second part (#top1) helps to create the “back to where you were reading” portion.
In the end, you would have something like this:
In short, you need two parts for a page jump to work:
1. An “href=#identifier” where you want the clickable link
2. An “id=identifier” where you want the link to go
The identifier is completely modifiable. However, the two parts must match for the page to know where to go. Does that make sense?
If you’re still having trouble, point me to the page where you’re creating page jumps so I can take a look.
-
Hello Jeremey,
thank you for the coding so I can put superscript footnotes in the body of a post and notes below – it works. You can see this in ‘This is another test post re- HTML for footnoting’ into which I put 3 notes.
After much reading up on this and assistance from other support staff at WordPress I am beginning to understand HOW it works!
A few more questions:
> when I click on either the footnote in the text or the blue tab at the end of a note I am taken to the line below where I want to go. Can this be fine-tuned (e.g. as in a Wikipedia article where the line I want – either in the text or the notes is always the first line on the page, thus minimising disruption in my reading)?> one article I read (not in WordPress) said not to shift between text and visual (Compose) because doing that will alter the HTML but I found that I can do that (in order to e.g. maintain justified text and, I presume, do other things like add photos as I build the post, so long as I make sure I correct the HTML when I go back into Text mode. Do you have any suggestions with regard to this?
> would it be possible to colour both the footnote and note numbering below to make referencing easier?
With thanks, Phil Stanfield
-
After much reading up on this and assistance from other support staff at WordPress I am beginning to understand HOW it works!
That’s awesome to hear!
when I click on either the footnote in the text or the blue tab at the end of a note I am taken to the line below where I want to go. Can this be fine-tuned (e.g. as in a Wikipedia article where the line I want – either in the text or the notes is always the first line on the page, thus minimising disruption in my reading)?
Could you point me to an example Wikipedia page where you’re seeing this? I’m not quite sure I understand what you mean here.
> one article I read (not in WordPress) said not to shift between text and visual (Compose) because doing that will alter the HTML but I found that I can do that (in order to e.g. maintain justified text and, I presume, do other things like add photos as I build the post, so long as I make sure I correct the HTML when I go back into Text mode. Do you have any suggestions with regard to this?
Switching back and forth shouldn’t be a problem at all. I do it frequently. The only issue occurs if you’re not careful and leave an HTML tag unclosed. For example:
<strong>This is bold textIf I didn’t put a closing strong tag, that could cause some problems. However, if you’re careful, you should be fine!
> would it be possible to colour both the footnote and note numbering below to make referencing easier?
Sure! You can change the color of the footnote text by using the Visual Editor button shown here:
-
Hi Jeremey,
re- clicking/moving between the superscript footnote in the body of the post and the note below, this would be in any Wikipedia article e.g. http://en.wikipedia.org/wiki/HTML#cite_ref-deprecated_1-0.
When you click on the footnote, shown as [1] etc., you are taken to the note for it which is always shown in the top line of text on the screen. To go back to your place in the post, when you then click on the ‘up’ arrow/circumflex at the start of the note you are taken back to your place in the text, which again shows in the top line of text for that point in the article – no scrolling is required to get to the exact point that you want.
You know that the point in the article that you want will always appear in the first line on the screen. There is therefore minimal disruption moving between note and footnote number.
Wikipedia also highlights both the footnote number and the entire note at the bottom of the article.
In my published post ‘This is another test post re-HTML for footnoting’, when I click either the footnote number or the tab at the end of the note below, I am both times taken to the line below that on which the start of the note or the footnote occurs, meaning that each time I have to scroll up one line to get to where I want – either the beginning of the note or my place in the post where the footnote occurs.
If it would be possible to do this (because it would minimise the disruption of jumping between footnote and note), I would be very appreciative – I use a lot of footnoting in my posts.
Thanks again for all your help,
Phil Stanfield
-
Hi Phil,
Thanks for clarifying! The scrolling is only necessary because the actual line of text is hidden by the admin bar. When you’re not logged in, you won’t see this line of text hidden. Here’s a screencast of me moving between the footnote and text on your page while logged out:
If you would like, you could move the return jump up above the actual line in the text. For example:
This is where I want people to end up.<a id="top1"></a> This is where the footnote appears<a href="#footnote1"><sup>1</sup></a>Effectively, you would be pasting the return code a line early. Does that make sense?
-
Hello Jeremey,
thank you for explaining why I have to scroll up a line to return to my place either in the body of the text or in the notes below (the link you gave me to demonstrate this was very useful) – because the Admin bar ‘obstructs’ that top line of text.
This also resolves the same problem I was having with another person’s blog on which he uses footnotes. When I logged out, his footnoting worked as you have demonstrated.
But this presents me with a dilemma. It appears that I now have to choose between using the further code you have sent me which will compensate for the Admin bars in the browsers of any readers who are logged into WordPress but which would take any readers not logged in above the desired line, in effect continuing the initial problem.
If this is the case, I will, for ease of use, simply use the initial code you sent me. Is my understanding of this dilemma correct?
Further, if I were to use the latest code you have sent me (I have been experimenting unsuccessfully with it) where, exactly, must I put it – by itself, somewhere in the line above both the footnote and related note, or as part of the code you previously sent me for the footnote and its related note?
With thanks,
Phil Stanfield
-
Hi Phil!
Is my understanding of this dilemma correct?
Yep – you have it correct. The only two options would be to A) leave it as is, which may affect logged-in users or B) change to the method described below.
where, exactly, must I put it – by itself, somewhere in the line above both the footnote and related note, or as part of the code you previously sent me for the footnote and its related note?
Here’s an example of how this would work:
When you click the back-to-top arrow in the footnote, it directs you back up to wherever you have instructed it within the text. We’re indicating this position using the id=’top1″ attribute. That basically tells the arrow, “Here is where I want you to drop the user back off so they can keep reading.”
We can trick the arrow a bit by placing that text a line above where we actually want users to be dropped off.
So, instead of having this all together, which is the typical format:
<a href="#footnote1"><sup>1</sup></a><a id="top1"></a>We would use something like this:
This is the line above where I want readers to end up.<a id="top1"></a> Here's the next line where the actual footnote is.<a href="#footnote1"><sup>1</sup></a>Does that clarify?
-
Hi Jeremey,
I have good news, I have bad news.
What you have shown me works on the return back up from the note at the bottom to the target footnote number in the body of the text, but I don’t know how to go from clicking on a footnote number in the body of the text to having the relevant note at the bottom display as the top line of text – I still have to scroll up a line to see the beginning of the note.
Shouldn’t I also do the same thing in the note at the bottom as you have shown me to do in the body of the text – i.e., have code above the first line of the note?
Also, is it sufficient to have that piece of code anywhere in the line above where I put the footnote number or should it be as close as possible above the footnote number as in your example – which was again, very helpful?
With thanks,
Phil Stanfield
-
Hey Phil!
Shouldn’t I also do the same thing in the note at the bottom as you have shown me to do in the body of the text – i.e., have code above the first line of the note?
Yep! You would need to do the same thing for the footnote like this:
This is the line where I want folks to end up.<a id="footnote1"></a> 1. This is the text I want in the actual footnote.<a href="#top1">↩</a>You’ll just want to leave off the “This is the line where I want folks to end up” text. You should just be able to put the following on a line by itself where you want readers to end up:
<a id="footnote1"></a>Also, is it sufficient to have that piece of code anywhere in the line above where I put the footnote number or should it be as close as possible above the footnote number as in your example – which was again, very helpful?
Anywhere on the line should work!
-
Hello Jeremey,
I can get it to work clicking between the footnote number and the note below, without logging out (I repeat, standing victoriously on a mountain top – ‘I can get it to work’!?) but…
I have the body of the text then below that the word ‘Notes’. My intention is to then put all the notes in that section, below the word ‘Notes’.
When I put the code you told me to put in the line above where I want the reader to be taken to, to compensate for the admin bar, and I click on the footnote number in the text I am again taken below the line that I want but if I put that code 2 lines above the actual note, above the word ‘Note’ then it works (should I put it before the final <p> – I presume meaning ‘paragraph’ or is it OK to put it after the <p>?).Perhaps the single word ‘Note’ has some bearing on this.
Would you mind having a look at this (‘Third test post for HTML footnoting’) and could you tell me why this is happening?
Another problem that occurred which took me ages to work out was that one of the double-quotation marks changed shape from little straight lines in the code you sent me to curved double-quotation marks.
It seems that if there is any error in how I paste the code, parts of the coding itself alters.
One has to be so careful, but I am determined to get on top of this, with your able assistance.
With thanks,
Phil
-
Howdy Phil!
I think it might be helpful to revisit the basics. Once we understand the basics of HTML footnotes, we’ll be able to move the jumps around anywhere we want. There are two important parts – the href and the id.
Let’s look at the actual footnote:
<a href="#footnote1"><sup>1</sup></a>This creates the actual footnote.
Now, we need to tell WordPress.com where we want that “1” to “jump” us to. So, we enter this:
<a id="footnote1"></a>1. This is the text I want in the actual footnote.The key component is that #footnote1 and id=”footnote1″ match. If we entered something like this:
<a id="footnote2"></a>1. This is the text I want in the actual footnote.That would not work because of the footnote1 vs. footnote 2 mismatch.
WordPress.com doesn’t know where the actual footnote exists. That’s why we can play a little “trick” on it and put the following text wherever we want:
<a id="footnote1"></a>Regardless of where we put the rest (1. This is the text…), WordPress.com will jump us to the spot where we’ve input the id= text. The “hack” in this case is that we’re putting the id text higher than the actual note to trick WordPress.com into jumping us a bit higher in the page.
For your example:
<p style="text-align:justify;">Notes<a id="footnote1"></a> 1. This is the text I want in the actual footnote.<a href="#top1">↩</a></p>Part of the issue here is that the entire thing is wrapped in “p” tags. We don’t want this. Can you replace that code with the following?
<a id="footnote1"></a> <p style="text-align:justify;">Notes</p><a id="footnote1"></a> 1. This is the text I want in the actual footnote.<a href="#top1">↩</a>Can you give that a try?
-
Hello Jeremey,
Although I am puzzled by the code you told me to use (because it seems to indicate 2 points for the reader to be taken to by the double entry of , I copied and pasted the 3 lines of code from your reply to beneath the 2 paragraphs of the post:
<p style=”text-align:justify;”>Notes</p>
1. This is the text I want in the actual footnote.↩A couple of times they worked as intended, moving between the footnote in the text and the note below and did not alter when I changed from Text> Visual> View Post, other times the code changed (as you can see in the post).
I have spent a lot of time on this trying different things and would very much like to get on top of it (particularly since my posts with the footnotes will be posted on WordPress where everyone will be logged in with their admin bar) but I am beginning to think that maybe I will have to accept the reader scrolling up a line each time to get to the note and footnote number.
While the code never changes for the footnote number in the text – i.e. I am having no problems with those 2 pieces of code, it keeps on changing at the bottom (I recall you stating that I should be able to go from Text> Visual>Text without a problem.
Am I supposed to click on any of the buttons above the Text field in order to enter code or after entering code (e.g. the ‘code’ button)?
If you would be willing to stick with this to get it sorted (since I can use the other, less accurate method without a problem), I would be very appreciative – it is up to you.
Regards,
Phil
-
Hi Jeremey,
I’ve done some more experimenting (fourth test post for HTML footnoting) and found that for footnote 1 it works every time as intended – so long as I don’t change between Text and View modes having entered code at the bottom in Text mode.
When I go from there to Visual (having entered code in Text mode) and back to Text mode, the code in the Notes changes – this strangely doesn’t happen with the code for the footnote number in the body of the text when I switch between the two modes – this code doesn’t change.
But with regard to the up and down for footnote 2, while the down takes me past the line, the up works as intended.
Regards,
Phil Stanfield
-
Hi Phil! Please see below:
I am beginning to think that maybe I will have to accept the reader scrolling up a line each time to get to the note and footnote number.
I really think this is the best way to go. At the moment, we’re trying to do some hacky maneuvers to address the admin bar issue, but I really think we should just go with the normal flow of page jumps instead of trying to predict the appearance of the admin bar.
While the code never changes for the footnote number in the text – i.e. I am having no problems with those 2 pieces of code, it keeps on changing at the bottom (I recall you stating that I should be able to go from Text> Visual>Text without a problem.
You should be able to flip back and forth from Text to Visual without a problem. However, the code that we’re using (HTML) can only be entered in the Text editor.
Am I supposed to click on any of the buttons above the Text field in order to enter code or after entering code (e.g. the ‘code’ button)?
Nope! No buttons are necessary. We’re inputting HTML straight into your post.
Regarding your new post (fourth test post for HTML..), it looks like you were able to get two page jumps up and running, which is awesome! However, the bottom of your post in the Text Editor looks like this:
<p style="text-align: justify;">Notes</p> <a id="footnote1"></a> <a id="footnote1"></a> 1. This is the text I want in the actual footnote.<a href="#top1">↩</a> <a id="footnote2"></a> 2. This is the text I want in the actual footnote.<a href="#top2">↩</a>Let’s change it to the following:
<p style="text-align: justify;">Notes</p> <a id="footnote1"></a>1. This is the text I want in the actual footnote.<a href="#top1">↩</a> <a id="footnote2"></a>2. This is the text I want in the actual footnote.<a href="#top2">↩</a>Can you give that a try? That’s the default format (not trying to predict the admin bar). I really think this is the way to go here!
-
Hello Jeremey,
When I chatted with Rachel last night about this, she got the links working exactly the way I wanted between the footnote number in the text and the note at the bottom (fourth test post for HTML footnoting) while I was logged in – by adding to the code:
<p style=”text-align:justify;”>Notes</p>
1. This is the text I want in the actual footnote.↩
2. This is the text I want in the actual footnote.↩(what does signify?) but I noticed afterward that the spacing between ‘Notes’ and the notes themselves had become too wide. Also I note in your reply, where you quoted what you had found, that the was not there.
This has been another problem – the code often altering at the bottom in different ways when moving between Text and Visual (when I moved between Text and Visual for this post, 1x the s appeared, the next time they didn’t.
There seemed to be a regular instability with the code (whatever it was) at the bottom, while the code in the body of the text remained constant when I went Text> Visual> Text.
I have (after hours at trying to resolve this – and with your assistance) done as you recommended and entered the default coding – would you mind having a look at the spacing between the lines (fifth test post for HTML footnoting) the line at the bottom beginning <p style etc. is up against the final line in the body of the text, as the 1st footnote is up against it, without a space between the lines, but there is then a space before the 2nd footnote (I presume, etc.). Is this correct?
While I and any reader will have to scroll up a line for both the note and footnote when moving between the 2 while logged in, there are 3 benefits to the default coding:
> it is the easiest to enter
> its stability enables me to move whenever I want to between Text and Visual, which is necessary for me because
> I can add images and video etc. while in Visual – in some of my posts I have had to manipulate the text and images such that while they don’t display ‘correctly’ in Visual, they do display correctly when published. So I need this Visual function.I use a lot of footnoting on my blog and I have put off addressing the issue of HTML for footnoting/page jumps for a long time – from the reading I had done previously, I thought there would be more to it than a simple entry of code – i.e. without having any understanding at all of it.
Now, with your assistance and that of others at WordPress I know and understand enough to be confident in doing HTML footnoting/page-jumps.
Thanks very much for your help in this matter,
Phil Stanfield
-
Would you mind having a look at the spacing between the lines (fifth test post for HTML footnoting) the line at the bottom beginning <p style etc. is up against the final line in the body of the text, as the 1st footnote is up against it, without a space between the lines, but there is then a space before the 2nd footnote (I presume, etc.). Is this correct?
Here’s what I’m currently seeing when I view the Text Editor of your post:
While there isn’t a line space between the end of the paragraph, Notes, and the first footnote, WordPress.com will create them for you as shown in the live version:
The reason this works is a bit tricky (it’s more about HTML formatting than anything to do with your post). See those “p” tags wrapping the paragraph and the Notes section? Those are different HTML elements. WordPress.com automatically puts some spacing between them.
If those tags weren’t there (like this: http://d.pr/i/x1xu), you wouldn’t have a space:
This is a bit advanced. I wouldn’t worry about it too much as it won’t affect how the footnotes work!
Now, with your assistance and that of others at WordPress I know and understand enough to be confident in doing HTML footnoting/page-jumps.
I’m really happy to hear that Phil! Keep toying around with it. If you ever have any questions pop up, you know where to find us!
- The topic ‘I need help entering page jumps in the text and in the Notes below’ is closed to new replies.
WordPress.com Forums 