▼
Streaming live at 10am (PST)

In-page linking with dynamic lists

Design help CMS
#1

Hello there,

I’m trying to create links that take you to a section on the page within a dynamic list. Usually I would simply give it an ID and link it up (eg: /brandandproductfilms#collier).

However, as it’s in a dynamic list, I can’t label each item separately, so it doesn’t work.

Does anyone know how I could achieve clicking on the links at the top, and the page scrolls to the sections within the dynamic list?

Here’s my read-only link:
https://preview.webflow.com/preview/higham-and-company?preview=534a1a00c42affcc3e5ce1548b07ffd7

The page is Brand and Product Films
And to be clear, I would like to be able to click on the links “Collier’s Cheese”, “Tricker’s Shoes” and “Dualit”, and for them to take me to the relevant section within the dynamic list.

Many thanks,
L

Screen Shot 2016-04-05 at 15.21.24.png1512×1199 471 KB

Dynamic IDs in dynamic list items for inpage anchoring
In-page link for a collection item in a collection list
Dynamic id for in page linking
#2

I don’t see a way using the structure you have used here, which is the correct structure to use.

But if for any reason you don’t want to list more than 3 or 4 films by category, you could have 3 static sections with IDs “one” “two” and “three”, use one dynamic list in each, limited to 1 result, respectively starting at slot 1 2 and 3, and then use the IDs to link to sections.

Note: don’t use digits to start an ID name or you will lose the smooth scroll, it will jump straight to the section.

#3

Many thanks for your reply @vincent,

I did consider this too, however does this create a limitation when the client needs to upload more films? I guess I’d need to create empty spaces for more films to slot into.

One thought I had was to bodge it by creating a sneaky hidden div with blocks in with the IDs over the list – it actually kind of worked but I came to the same devastating realisation that this wouldn’t work with the CMS either.

Do have any further ideas? The client is adamant that the structure should be like this. Is there something in the CMS itself you think I could use? I’m fairly new to using the Webflow CMS and this is my most ambitious site yet, so I’m really hoping there’s something out there I’ve missed!

Thank you,
L

#4

Yes, it’s using the CMS in a very silly way, putting manual where there’s automation. I was kind of ashamed suggesting this. Definitely don’t do it for a client.

Yes. You could have a 1px column with transparent divs for targets, providing your items are always the same height.

Well, there is ALWAYS Javascript. You can add whatever hidden or shown infos to your posts so Javascript could navigate to them, even do a barrel roll on the way. You can either look online for a ready made code you can modify or ask for a JS developer to make it. Shouldn’t be expensive (1hr work, 60-90 dollars). What you can’t do is asking me because I know nothing at JS :smiley:

#5

You can test this on a copy of your project, or revert a backup if you don’t prefer this.

  1. Remove linky-block

  2. Paste this in the Page Settings > Custom Code > Footer Code

     <script>
 var Webflow = Webflow || [];
 Webflow.push(function() {
   // Set dynamic list IDs based on links in the intro paragraph
   var links = $('.para a').map(function() { return $(this).attr('href').slice(1); });
   $('.w-dyn-item').each(function(i) { $(this).attr('id', links.get(i)); });
 });
 </script>

  3. Make sure the paragraph has the same number of links for each dynamic items. You can name the #id links whatever you want, just make them unique, like #1, #2, #3.

First link will now link to first dynamic item, second link to second item, etc.

1 Like
#6

Hi @samliew, thanks so much for your reply,

Am I missing what it is I should paste?

Thanks!
L

#7

Hi @lizziekevan, I think there was a problem with pasting the code, here you go:

<script>
    var Webflow = Webflow || [];
    Webflow.push(function() {
      // Set dynamic list IDs based on links in the intro paragraph
      var links = $('.para a').map(function() { return $(this).attr('href').slice(1); });
      $('.w-dyn-item').each(function(i) { $(this).attr('id', links.get(i)); });
    });
    </script>
#8

Thanks, @cyberdave @samliew, it works brilliantly.

L

#9

Thanks very much for your help – really appreciated.

I have one quick question:
When the client adds a new film, how can they use the CMS to link to the next film in the list using this solution?

Thank you!
L

#10

You have to add a url field and manually link to the previous item in the collection. If you delete one, you have to remember to re-link the item that links to it.

#11

Hi @samliew @cyberdave @vincent!

Hope you’re well and thanks for your help on this issue earlier in the month.

I am hoping you can help again (help!!!) – I just went into the pages where I’m using the solution you kindly gave me, just to make some amends – and, where I have edited the links, they are no longer working!

I have no idea at all what I’ve done, and I’m on a desperately tight deadline – plus adding to the general tension of the whole situation, for some reason I can no longer edit the page “Brand and Product Films”, but I’m hoping this is just a temporary, unrelated glitch that will sort itself out…

Any thoughts would be hugely, massively appreciated.

Read-only link:
https://preview.webflow.com/preview/higham-and-company?preview=9150e12564b99b4ceff9c8391fcbbc00

Screen shot of page where the links have stopped working:

Thank you so much,
L

#12

I don’t see your custom code anywhere. Also, can you publish your site?

#13

Hello, thank you for your reply.

My custom code is on each page/site settings and the site is published.
http://higham.co/

Many thanks!
L

#14

The first link doesn’t have a href. Name it #castle

#15

6 posts were split to a new topic: Need help with applying MixitUp plugin to dynamic collection

#16