npfosi Posted July 23, 2019 Share Posted July 23, 2019 Hi all, I am working on a site about a film festival and am trying to troubleshoot some Javascript I am writing. I pulled the code from this guide: https://css-tricks.com/how-to-disable-links/ This is an example of the page in question: https://naturethroughhereyes.com/program-list/discussion-a-feminine-perspective-in-pictures-salon-rose As you can see, I have used a summary block to display the thumbnail and title from a gallery that is an "unlinked page". The gallery holds information on all the panelists for all the events at the film festival. Each panelist has an image, a title (their name) and an excerpt text with their bio and what panels they are sitting on. What I like is that when the user clicks the thumbnail image a lightbox comes up that shows the panelists displayed on this page with their excerpts (bios) displayed. As the user clicks thru these thumbnails, they are constrained to only the thumbnails on the page. Makes sense. The problem is if the user chooses to navigate via the title link. This link brings the user to the gallery page which is ugly and has ALL the panelists, not just the filtered panelists for this event which is confusing and a weird user experience. My attempt at a solution is to simply make the summary-title-link no longer hyperlink to this gallery page. I looked up how to disable a link and found the css-tricks guide referenced above. I am attempting to implement the "Surefire way" on that guide. This is what I have in the footer code injector: <!-- script disabling .summary-title-link links for summary blocks on event pages (to prevent the user from going to the unsightly and useless gallery page for the speaker information) --> <script> /* * Use your preferred method of targeting a link * * document.getElementById('MyLink'); * document.querySelector('.link-class'); * document.querySelector('[href="https://unfetteredthoughts.net"]'); */ document.querySelector('.summary-title-link'); // "Disable" link by removing the href property link.href = ''; </script> As you can test on the published page, the links very much still work. I am almost certain I haven't implemented this correctly but am a little bit out of my depth here. Can someone help me translate this solution to my use case - it feels like a syntax problem. Link to comment
paul2009 Posted July 23, 2019 Share Posted July 23, 2019 If you simply want to disable the links under the images, you can do it with some Custom CSS: .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title { pointer-events: none; } Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
npfosi Posted July 23, 2019 Author Share Posted July 23, 2019 This worked! Thank you! Much simpler! Link to comment
npfosi Posted July 23, 2019 Author Share Posted July 23, 2019 This worked! Thank you! Much simpler! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.