Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

removing summary title link with js troubleshoot


npfosi
Go to solution Solved by paul2009,

Question

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

Edited by npfosi
Initial Revision
Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

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

Posted Images

3 answers to this question

Recommended Posts

  • 1

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


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...