You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Online

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

#110849 Index with Anchors

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by okynnor on Thursday, 09 June 2022 21:06 BST

Friday, 15 April 2022 02:37 BST

okynnor
Hi,

I would like to create a right-sided, narrow box located with an index containing all the major headers such that users can, at a glance, view all the topics available. Using anchors, they click and jump to the topic that they are interested in.

So, it would be the body of the Joomla article on the left and the said narrow box box with anchor links to the right. Is that possible? If so, would you please tell me how?

Here's a sample of an article to show you how it is today and how I would like it based on the description in here.'

https://www.forteinnovations.com/insights/crypto/dealing-with-crypto-accounting-and-taxes.html

Wednesday, 20 April 2022 10:13 BST

Ryan
I've create a simple Table of Contents plugin, which may do what you want - https://github.com/widgetfactory/jce-editor-toc

In the video below, I've used Columns to create to position the Table of Contents to the right of the content, eg:

  1. Select all the content using CTRL + A, then click the Columns button.
  2. Set the number of Columns to 1, then click Insert.
  3. Click anywhere in the content, and click the Add Column button to create a new column to the right.
  4. Click in the new column and click the Columns button, then select a Layout value of 3-1 or 2-1, and click Update.
  5. Click at the beginning of the new column and click the Table of Contents button.


If you change any of the headings, click the Table of Contents button again to update.

https://cdn.joomlacontenteditor.net/tmp/table-of-contents-example.gif

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Edited by Ryan on 2022-04-20 10:14 BST

Tuesday, 31 May 2022 00:15 BST

okynnor
I followed all your steps. For some reason the button is there but it's greyed out and not clickable.
I thought that the plugin needs to be enabled. I couldn't find it in the plugins section either.
So I then created a brand new test article. I followed your steps over there. It worked. I wonder why on an existing article, it didn't work? That is, the TOC button is greyed out.

I've attached a screenshot. It's at step 3 of your reply body section. As you can see, it has lots of square dotted lines.

Another way that I found it worked was to use the newly created articleID as per how I described above. Then, I copy and pasted each major section adjusting for the title headers. I clicked on the TOC icon to update the Table of Contents. It worked.


Next, I decided to copy and paste, adjust the headers to the test article. The text is from an existing article. After a few adjustments, the TOC moved from being vertically to the right of the body, to the bottom. I published the article to see if it was true. Indeed, the ToC has moved to be at the bottom.
See attached screenshot. Why?

But I would prefer to update existing articles. It is easier. I preserve the number of article hits. What would you suggest?

Attachments

Screen Shot 2022-05-30 at 4.19.52 PM.png
Edited by okynnor on 2022-05-31 00:38 BST

Tuesday, 31 May 2022 00:39 BST

okynnor
I followed all your steps. For some reason the button is there but it's greyed out and not clickable.
I thought that the plugin needs to be enabled. I couldn't find it in the plugins section either.
So I then created a brand new test article. I followed your steps over there. It worked. I wonder why on an existing article, it didn't work? That is, the TOC button is greyed out.

I've attached a screenshot. It's at step 3 of your reply body section. As you can see, it has lots of square dotted lines.


Another way that I found it worked was to use the newly created articleID as per how I described above. Then, I copy and pasted each major section adjusting for the title headers. I clicked on the TOC icon to update the Table of Contents. It worked.

Next, I decided to copy and paste, adjust the headers to the test article. The text is from an existing article. After a few adjustments, the TOC moved from being vertically to the right of the body, to the bottom. I published the article to see if it was true. Indeed, the ToC has moved to be at the bottom.
See attached screenshot. Why?




But I would prefer to update existing articles. It is easier. I preserve the number of article hits. What would you suggest?

Attachments

Screen Shot 2022-05-30 at 4.36.10 PM.png

Tuesday, 31 May 2022 14:48 BST

Ryan
I followed all your steps. For some reason the button is there but it's greyed out and not clickable.
I thought that the plugin needs to be enabled. I couldn't find it in the plugins section either.
So I then created a brand new test article. I followed your steps over there. It worked. I wonder why on an existing article, it didn't work? That is, the TOC button is greyed out.


The button is only enabled if the editor content contains Headings, eg: h1, h2, h3 tags.

Next, I decided to copy and paste, adjust the headers to the test article. The text is from an existing article. After a few adjustments, the TOC moved from being vertically to the right of the body, to the bottom. I published the article to see if it was true. Indeed, the ToC has moved to be at the bottom.


The responsive columns are wrapping, based on the settings.

Please post a link to an example on your site.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 31 May 2022 18:59 BST

okynnor
Sorry, my site is a live site. So I am not comfortable publishing test article and messed up articles.

In the meantime, here are two videos of two articles. It should describe clearly the issues.

test2 article

crypto tracker articlecrypto tracker article

I'm open to sharing logins if you have a private place to share it. You can test for yourself.

THanks,

Thursday, 02 June 2022 14:40 BST

Ryan
I'm open to sharing logins if you have a private place to share it. You can test for yourself.


Please send me a login using this form -> https://www.joomlacontenteditor.net/contact/site-login

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Friday, 03 June 2022 10:44 BST

Ryan
Looking at the "test" article on your site, I don't see any issue with the Table Of Contents layout or positioning. Please be aware that the columns will wrap or "stack" depending on the Stack Width option you have selected for the Columns, which you can edit in the Columns dialog, and the width of the area that the content is displayed in.

To prevent stacking, set the Stack Width to Large or Extra Large, and be sure to preview the article on the front-end to determine how it will actually look, as this layout may be a different size to the editor width.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Friday, 03 June 2022 19:36 BST

okynnor
Thanks for taking a look at the test article. It's a solid reassurance. Now, what about the actual article in which I would like to add the TOC?

Would you take look at the article titled: Crypto Tax Canada: Filing Income Tax Guide

It would be great if you do a TOC located to the right. the TOC should fixed and non-moving. I'll then be able to learn by reviewing what you did in your reply.

It's kinda of complex to see so many dashed boxes.

Tuesday, 07 June 2022 10:43 BST

Ryan
I've had to tweak the Columns tool a bit to get this to work, and I have uploaded the updated version to your site. So you can attempt to create the columns and TOC as explained above, eg:
  1. Select all the content using CTRL + A, then click the Columns button.
  2. Set the number of Columns to 1, then click Insert.
  3. Click anywhere in the content, and click the Add Column button to create a new column to the right.
  4. Click in the new column and click the Columns button, then select a Layout value of 3-1 or 2-1, and click Update.
  5. Set the Stack Width option to Small
  6. Click at the beginning of the new column and click the Table of Contents button.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Edited by Ryan on 2022-06-07 10:43 BST

Wednesday, 08 June 2022 21:47 BST

okynnor
Thanks for the work.
I still have problems. See attached screenshots.

This has to do with the presentation of the article in the blog. I added a "Read More" break under the first paragraph. This caused the layout to be ruined.
by removing it, the article presentation went back to normal but, as expected, the entire article was displayed here.

You cannot see the article published because it is set to unpublished. You need to go into the backend to test and to see for yourself.

Perhaps there are more tricks to JCE's ToC that I need to learn with your help. Let me know.

Attachments

Screen Shot 2022-06-08 at 1.42.20 PM.png
Edited by okynnor on 2022-06-08 21:48 BST

Thursday, 09 June 2022 11:53 BST

Ryan
This has to do with the presentation of the article in the blog. I added a "Read More" break under the first paragraph. This caused the layout to be ruined.
by removing it, the article presentation went back to normal but, as expected, the entire article was displayed here.


You need to add the readmore break before the content that is to be included in TOC, as when Joomla renders the content in the front-end, the readmore will break the layout.

It looks like you've got it right here - https://www.forteinnovations.com/insights/crypto/debunking-the-crypto-myths-that-frustrate-most-people.html

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Thursday, 09 June 2022 21:06 BST

okynnor
Yes, thanks for confirming that I got it right, Ryan!