Jump to content

removing summary title link with js troubleshoot

Recommended Posts

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:

alt text


<!-- 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.

screen-shot-2019-07-23-at-121123-pm.png.d4b592e944be9c118478a3714429ba21.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

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;
}


Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.