I’ve modified @hammerhouse’ original prohack to include article/post titles. You can see the additional vars from his code.
Granted, if this were native feature of @webflow then we wouldn’t be doing this, but I figured I’d add on to an already wonderful solution.
Add an Heading (H2, H3, etc.) element inside the anchor, to be used as an element to be targeted by the script.
Add in these two new vars inside the script: var next_title = $('#post_list .w--current').parent().next().find('a').text(); var previous_title = $('#post_list .w--current').parent().prev().find('a').text();
Then, near the end of the code add in two bits to set the text of the links using our new vars: $('#next_title').text(next_title); $('#previous_title').text(previous_title);
Make sure you add those IDs to Webflow elements that you are using for the text, something like this: <a href="#" id="previous_button"><h4 id="previous_title">Loading</h4></a> <a href="#" id="next_button"><h4 id="next_title">Loading</h4></a>
Then you should be all set. Here’s hoping the wishlist makes this easier in the future.
Also, I have more than 2000 CMS articles on my site, so this works despite that.
You should visit the original post comment about this technique first and read through it again. It has the full directions for you.
It looks like you’re missing a collection list for this to work. Make sure it has the ID that it requires, too.
Thank you for your response. I’ve checkd through each step individually with all the correct dynamic lists and the buttons still do not appear in the published site - they appear for 1 second then disappear.
If they appear for one second and then disappear, it’s likely the Hidden styles in the script and the styles on your site are competing upon load.
In my Design view, I see all of the article titles, but when viewing the site live, they are hidden. Check that.
Yes that is correct! The previous guide mentions to add a dynamic list of all the elements in the collection as well as the two ‘next’ and ‘previous’ buttons allow with the appropriate ids.
The custom script supplied actively hides the dynamic list with all the collection items in the published view but seems to hide the buttons as well despite showing both in the design view (which is correct because the custom code wouldn’t be active in the design view).
Something in the custom code is causing the buttons to be display none.
Please try sharing a read only link for your site in order for someone to try and help you out.
I wrote this post to help people out trying to do the task I needed. Really, though, there is more info on the original post than I can provide.
I’m reading through the articles and comments again, and, until this becomes a native control, this is by far the best way to approach this, since it’s automatic, and requires no maintenance.
If you’d like a better write up describing this, since the example from the original is no longer published, let me know and I’ll do my best to create one for the forum.
Any luck getting this to work?
It’s not too complex, but it is very specific. If one step of the process is left out, it will not work.
I would try reviewing the initial instructions linked to above, then move on to the instructions I’ve added. Some of the steps don’t make sense until you continue further and then you realize why the steps are there. Unless you’re privy to the hidden machinations of , it’s confusing, for sure.
Additionally, it’s likely that the new Pagination controls would work for you.
EDIT: Also, i would consider this a ‘hack’ until it’s a function built in to Webflow. A good hack, but any time you add a hack, further down the line things could break as the code of Webflow moves forwards and surpasses the value of the hack, as it were. Use with caution, and don’t forget about it being there.
This solution is almost working except for one problem I have found. Collection lists have a limit of 100 items. I have over 200 posts so when I get to post 100 the Previous button disappears and all articles that are older than post 100 in my sort order do not have any buttons at all.
Hello, @allykat87. That’s a beautiful site!
In your page structure I clearly see the div that holds the arrow/symbol as well as the div that holds the ‘next article’ text. You can remove these as needed.
When I previewed your example an hour ago on my phone, I did see the symbol. But both desktop as well as phone views seem repaired.
I’m glad to help if something comes up again, Natalie.