I’d appreciate any suggestion/help regarding the following:
I’m trying to create a dynamic content menu within each cms collection item (blog post). Meaning, dynamically connect sections withing the post to the anchors/links in the content menu.
I’ve tried to use F’in sweet guide for anchors but with inserting html embed into separate rich text field within the collection item (blog post collection item) to achieve this.
But, of course, it doesn’t work. Because I don’t know what I’m doing with the code.
I wonder if there’s a better or more efficient way to achieve this?
Not sure if it works for blog posts too but you can copy the elements used for this progress bar - the progress bar has anchor links for on-page cms items.
It’s just that I need the anchor’s names in the menu to be dynamically updated depending on the section-name INSIDE the cms item that I’ve assigned using separate text fields.
Not sure if that make sense. I’m almost at the point of giving up on this for now.
@Finsweet has a great tool that may work out for you—just keep in mind it will require a light amount of custom code but they walk you through everything to get it setup:
I might misunderstand your concern, but definitely here to help out any way! Could you please share your read only link so I can see what you’ve made so far, and take it from there.
So far, I’ve tried to mimic F’insweet dynamic anchoring guidelines but implemented within individual cms item.
CMS collection (blog posts). I’ve created separate rich text fields for this collection (to divide the blog post in sections). I’ve inserted html embed into each rich text field with the code that mimics F’insweet code for each section.
That’s exactly what I was using before realizing that it doesn’t work for individual cms item. Meaning, I don’t know how to create dynamic anchors for sections within each cms item.
I’ve tried to create rich text fields with html embed for each cms item to create sections with id’s that I manually apply. But it doesn’t work.
I managed to get it working in your current project using F’in Sweet technique. You were only a few steps away from it!
Here’s what I did
Copy F’in sweet CMS library for Webflow and paste it before tag of the CMS page
<script>
// immediately/self invoked function. This function executes right away
(function() {
// create a new Library instance and store it in a variable called "fsAnchor"
var fsAnchor= new FsLibrary('.anchor-data-feed') // Class of your CMS collection list
// run anchor on our instance
fsAnchor.anchor({
anchorButton: ".anchor-link-button", // class of the button that will be put in buttonsTarget
anchorId: ".anchor-url-and-section-id", // class of the href #section this anchor button will scroll to
buttonsTarget: ".anchor-put-links-in-here", // class of the div to place the anchorButton
activeClass: "active-link" // class of the active state added to anchorButton
})
})();
</script>
Copy the structure with same class name (unless you like to change them - don’t forget to change it within the body code as well)
Hi @egenix
Wow! I appreciate your efforts very much!
The problem was/is that I’d like the content menu (anchor links) to update dynamically their text depending on the particular cms item (blog post) ‘chapters’.
Meaning, I would manually name ‘chapters’ inside cms item and the code would pull out the ‘chapter-name’ and would create an anchor link to the ‘chapter’. For that, I thought, I need to divide blog post into many parts and give each of them an ‘id’ and ‘name’ for the code to create a dynamic anchor links (content menu).
I’ve attached screenshots from cms for the reference.
I really hope I’ve managed to explain myself this time thank you again for the help!
Now I understand what you were trying! Unfortunately I’m not sure if it will work that way.
Yet you can still try to give your class inside of the html embed, a selector ID. And make sure the menu link(s) on the blog page are named the same after it’s ID in the embed so it has a reference.
The secret is to use an HTML Embed element to create the dynamic links, since Webflow does support embedding dynamic fields into these elements. Here’s how it works:
1. Create anchor links in your CONTENT Collection List:
Basically, instead of grabbing an off the shelf link element, we’ll use an HTML embed element and build our own link.
Notice the list of fields in the top right of the code editor window.
2. Create navigation links in your TABLE OF CONTENTS Collection List:
Now, we’ll repeat the process for the nav links, but instead of using dynamic fields to create a link ID, we’ll use them to set the HREF attribute of the link: