Streaming live at 10am (PST)

Dynamic IDs in dynamic list items for inpage anchoring

#1

Hello, I would like to assign IDs to dynamic list items in order to use them as anchors.
I found another thread about this but I don’t understand how to do this.

Here is the preview of my project.
https://preview.webflow.com/preview/artpress?preview=1b6cb9cf7c432dcdcbe9a3e27a424bcd

Go the the page “referenzen” to see the example.
At the beginning of a page there are some links. The titles of the links come from a dynamic list. Scrolling down you can see some full screen sections. Those also come from the same dynamic list.
I would like to anchor the links at the beginning of the page to full screen sections.

Any help would be highly appreciated!

Thanks,
Dario.

1 Like

Table of Contents?
#2
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  // Set dynamic list IDs based on h1 tag content
  $('.full-screen-block').each(function(i) { 
    $(this).attr('id', $(this).find('h1').first().text().toLowerCase().replace(/[^a-z]+/g, '-'));
  });
});
</script>

Also, feel free to contact me for further code help and/or customization of third-party plugins

0 Likes

#3

Hi Samliew, thank you for this code. Sorry for the ignorance, but how should I use it?

0 Likes

#4

Paste in Page Settings > Footer Code. Publish site.

0 Likes

#5

Hi Samliew, thank you for your help.
I did that already actually, but I don’t see it working.
54

I tried to give the h1 elements inside the dynamic list an ID and then anchoring them to the links above the fold but without success. I tried in different ways but nada.

The confusion comes from the fact that the custom code becomes active only after publishing the website. So I can’t see the option of anchoring the links in the Designer.

Could you explain me a little bit how this code should work?

Thanks!

0 Likes

#6

Custom code only works in the published site…

Your IDs are there…

0 Likes

#7

OMG, I had it working!
I added a field in the collection called “anchor link” and I populated it with the in-page links such as “http://artpress.webflow.io/referenzen#biennale-di-venezia
00

then I connected the links to this field.
25

Thanks so much Samliew!

0 Likes

#8

Can someone explain what the code actually does so I can understand how this works. It sets the ID for each H1 heading to match the name?

0 Likes

#9

Hi There,

Thanks so much for this advice. However, in my site it doesn’t change the ID’s for some reason. All else seems to be incorporated but the elements do not receive an ID to anchor to, could you help me with this? the site is http://Notre-dame.webflow.io/informatie-voor-leerlingen Thanks a lot!

0 Likes

#10

IDs can be set in the settings tab of the selected element.

0 Likes

#11

please show me what you field added to the collection, I can not understand how you did it? Tell me how to bind the ids to H1 in a dynamic block ?

0 Likes

ToC on a blog post?
#12

Please tell me where to find the Settings tab of the selected item to configure the ids?

0 Likes

#14
0 Likes

#15

Hi, thanks. I know for it, how to attach it to a dynamic block in a CMS?

0 Likes

#16

This topic is about:

The solution has been provided. Please help me understand what you’re having an issue with.

0 Likes