remove click-thru on single summary image/title

Site URL: http://www.corn-apricot-zn88.squarespace.com/staff-blog-test

Hi. I am using the Universal Filter plug in to filter a blog summary block (with categories and tags) as our team page.

We have 80 employees. 10 will need click-thrus to their blog page, the other 70 will not. We want them all in the same summary to show us as a team! 

Is there a way to stop the click-thrus on the image and title of 70 of them? For example, I tried to use the section ID for the title and the image to stop the click-thru or pointer, but it didn't work. I know it will be a lot of work to find all 70 IDs but I am willing to do it if there is a code to stop the click thru. 

I MAY be using the wrong code. I don't see much about disabling links other than the toggle that disables the WHOLE summary. I can see the a href in the inspect, but don't know if there is a way to disable it. 

On the page the one I have been trying is the first image (Ellie).

Thank you!

What is access password? and which 10 items?

@tuanphan Password is BA47. The 12 people shown right now are the only ones we want to link to their blog, the rest we want the rollover, but not the link. I do not have the other 70 loaded yet. 

I tried....

//remove links in staff page
div#block-yui_3_17_2_1_1590076520498_4551 .summary-title-link {
    pointer-events: none;
}

then for each one I WANT to have a click-thru I do: 

#yui_3_17_2_1_1591127293731_910 .summary-title-link {pointer-events: auto!important;}

BUT the yui for the summary-title keeps changing each time I reload so I cannot figure out how to make it stay! Am I using the wrong number? 

2 hours ago, deaton72 said:

@tuanphan Password is BA47. The 12 people shown right now are the only ones we want to link to their blog, the rest we want the rollover, but not the link. I do not have the other 70 loaded yet. 

I tried....

//remove links in staff page
div#block-yui_3_17_2_1_1590076520498_4551 .summary-title-link {
    pointer-events: none;
}

then for each one I WANT to have a click-thru I do: 

#yui_3_17_2_1_1591127293731_910 .summary-title-link {pointer-events: auto!important;}

BUT the yui for the summary-title keeps changing each time I reload so I cannot figure out how to make it stay! Am I using the wrong number? 

 

Which 12 people? Can you take a screenshot?

If it has no id, you can target order

eg

/* people 2 */
div#block-yui_3_17_2_1_1590076520498_4551 .summary-item:nth-child(2) a {
    pointer-events: none;
}
/* people 3 */
div#block-yui_3_17_2_1_1590076520498_4551 .summary-item:nth-child(3) a {
    pointer-events: none;
}
/* People 4 */
div#block-yui_3_17_2_1_1590076520498_4551 .summary-item:nth-child(4) a {
    pointer-events: none;
}

These are the people that need click-thrus. 

There will be 70 more added later that do not need to link to their blog pages. 

I just tried the target order, but with the filter, the top 12 always link. So if I have more people (staff) and I filter them, then the top 12 will link. I am beginning to think there is not a way to do this. 

A JS solution could be to leverage the data-start-index attribute on the summary item. Looks like the value of that attribute remains the same when filtering. Update the LIMIT variable to whatever, default is 12: 
 

(function(){

  // Wait to execute code until DOM is fully loaded
  window.addEventListener('DOMContentLoaded', function() {
    
    var LIMIT = 12;
    
    // Add Element.closest polyfill for IE browsers
    closestPolyfill();

    // Use Event delegation for all of the links that are going to be clicked
    delegate(document, 'click', '.summary-item a', function(event) {
      var index = event.target.closest('.summary-item').getAttribute('data-start-index');
      if(index) {
        index = Number(index) + 1;
        if(index > LIMIT) {
          event.preventDefault();
        }
      }
    });

    function delegate (target, eventName, selector, handler) {
      target.addEventListener(eventName, function (event) {
        if (matches(event)) {
          handler(event);
        }
      });

      function matches(event) {
        const element = event.target.closest(selector);
        return element !== null;
      };
    }

    function closestPolyfill(){
      if (!Element.prototype.matches) {
        Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                    Element.prototype.webkitMatchesSelector;
      }
      
      if (!Element.prototype.closest) {
        Element.prototype.closest = function(s) {
          var el = this;
      
          do {
            if (Element.prototype.matches.call(el, s)) return el;
            el = el.parentElement || el.parentNode;
          } while (el !== null && el.nodeType === 1);
          return null;
        };
      }
    }
  });

})();

Be sure the code above is in between <script> tags e.g.
 

<script>
  // Code goes here
</script>

@jpeter I haven't worked with JS much. I added it to the header injection, between <script>.

I added a bunch of images to the blog to test beyond the no. 12. I can reorder them once I figure this out so data-start-index 1-12 are the right people. I have tried two things:

1) turn pointer events to "auto" in my CSS uding block ID, and keep the JS as-is: result is that the summary items still all link out.

2) turn pointer events to "none" and keep JS as-is: result is that the summary items all link out - regardless of their data-start-index.  For instance data-start-index="13" is clicking through. 

Am I missing something I should have changed in the JS code? Perhaps something in here?

  if(index) {
      index = Number(index) + 1;
      if(index > LIMIT) {
        event.preventDefault();
      }

Thank you so much for any help - I figured this was going to be a little tricky to do on Squarespace.  

@deaton72 You'll want to add the JS code to the footer, not header. It's always a good practice to add your JS to the footer unless you're specified to do so in the header. The script should work after doing that. 

@jpeter I am on 7.1 so my individual page doesn't have footer injection. If I add it to the global footer, will it only work for that one section or will it mess up my other blog summary block?  Thanks! 

PS. I am not used to 7.1 yet 🙂

@deaton72 Ok, I updated my code  above that should work even if you add it to the header. So try adding it to the header again. You can add it to your global footer as well if you wanted to, but I'm thinking it's better just to run the script on the page that it needs to be on. 

@jpeter  Still no luck. It pulls click-thrus for all the posts, even the ones numbered 13. I can give you PW for the site to see what is happening. 

I removed the global code I had that turned off all clickthrus for that block as it didn't seem to make a difference. 

I don't know JS well, but it seems like it should just be pulling click-thrus for 0-12. 

site is: https://corn-apricot-zn88.squarespace.com/staff-blog-test  PW BA47

conversely....is there a way to target  just specific data start index numbers? 

Quote

   

Hey @deaton72,

The code appears to be working, see video. Clicking on items 13, 14, and 15 prevented the click from taking me to the profile page. When I clicked on "Joe", who is number 12, it took me to the profile page for him. Is this the functionality you're needing?

@deaton72 If you want to pick and choose which indexes to click through to, I've updated the code a bit to use an array of values based on the data-start-index attribute. You'll update the CLICK_THROUGH_START_INDEXES variable with whatever numbers you want, make sure they're comma separated and within the brackets:

(function(){

  // Wait to execute code until DOM is fully loaded
  window.addEventListener('DOMContentLoaded', function() {
    
    // Values to target to click through to based on the "data-start-index" attribute.
    var CLICK_THROUGH_START_INDEXES = [0,1,2,3,4,5,6,7,8,9,10];
    
    // Add Element.closest polyfill for IE browsers
    closestPolyfill();

    // Use Event delegation for all of the links that are going to be clicked
    delegate(document, 'click', '.summary-item a', function(event) {
      var index = event.target.closest('.summary-item').getAttribute('data-start-index');
      if(index) {
        index = Number(index) + 1;
        if(!inArray(CLICK_THROUGH_START_INDEXES, index)) {
          event.preventDefault();
        }
      }
    });

    function inArray(arr, item) {
      return arr.indexOf(item) !== -1;
    }

    function delegate (target, eventName, selector, handler) {
      target.addEventListener(eventName, function (event) {
        if (matches(event)) {
          handler(event);
        }
      });

      function matches(event) {
        const element = event.target.closest(selector);
        return element !== null;
      };
    }

    function closestPolyfill(){
      if (!Element.prototype.matches) {
        Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                    Element.prototype.webkitMatchesSelector;
      }
      
      if (!Element.prototype.closest) {
        Element.prototype.closest = function(s) {
          var el = this;
      
          do {
            if (Element.prototype.matches.call(el, s)) return el;
            el = el.parentElement || el.parentNode;
          } while (el !== null && el.nodeType === 1);
          return null;
        };
      }
    }
  });

})();

@jpeter I never thanked you for the code! It works great. One question though. 

I have rollover titles on the images and they turn red on hover. I turned off the "'hand" icon so it doesn't look like they click thru, but my boss was wondering if there is any way to keep the hand or keep the red color change ONLY if they actually click through. 

I honestly don't know if there is any way to do that with your script as the CSS states they all have the rollover.  This is the line of CSS:  @sbg-6_clickthrough-option: auto;.

https://corn-apricot-zn88.squarespace.com/staff-blog-test

PW is BA47

On 11/25/2020 at 1:57 AM, deaton72 said:

@jpeter I never thanked you for the code! It works great. One question though. 

I have rollover titles on the images and they turn red on hover. I turned off the "'hand" icon so it doesn't look like they click thru, but my boss was wondering if there is any way to keep the hand or keep the red color change ONLY if they actually click through. 

I honestly don't know if there is any way to do that with your script as the CSS states they all have the rollover.  This is the line of CSS:  @sbg-6_clickthrough-option: auto;.

https://corn-apricot-zn88.squarespace.com/staff-blog-test

PW is BA47

Have you solved it yet?

I have not. I know how to make it turn off and on, but not how to show the hand only when the JQuery pulls a summary item that has a click through.

@jpeter It seems like the code you sent is no longer working. I have ONE start index in place right now [51] as a test, but it clicksthrough on everyone. I haven't touched the code - did SS change something?

I tried a total different approach by adding a pointer-event for the block of the text in 51 Lorne Mcconachie and turning off all other pointer events, but it doesn't work. 

https://corn-apricot-zn88.squarespace.com/staff-blog-test  no PW 

On 1/21/2021 at 5:57 AM, deaton72 said:

@jpeter It seems like the code you sent is no longer working. I have ONE start index in place right now [51] as a test, but it clicksthrough on everyone. I haven't touched the code - did SS change something?

 

I tried a total different approach by adding a pointer-event for the block of the text in 51 Lorne Mcconachie and turning off all other pointer events, but it doesn't work. 

 

https://corn-apricot-zn88.squarespace.com/staff-blog-test  no PW 

I see fine here. Do you still need help?

Could someone help me do this for my "learn" page summary.

I am trying to make the first 7 (ones in pink) clickable 

My website is www.mensch.club

On 2/27/2022 at 10:10 PM, amyleehayward said:

Could someone help me do this for my "learn" page summary.

I am trying to make the first 7 (ones in pink) clickable 

My website is www.mensch.club

I see you solved with this CSS?

#block-yui_3_17_2_1_1644237213676_8262 .summary-item:nth-child(n+8) {
    pointer-events: none;
}

@tuanphan

I'm using the code you posted on March 3. I'm using this code and it works but it removes all hover effects from the thumbnails without the click through

On 3/10/2023 at 1:21 AM, Craigers said:

@tuanphan

I'm using the code you posted on March 3. I'm using this code and it works but it removes all hover effects from the thumbnails without the click through

Can you share link to page where you need to disable click? We can check easier

Hi Tuanphan,

I was able to solve this issue with the code,

#block-e3df2559805a3be35ef2,
#block-4ff894146fac67d0e842,
#block-d4cbfcf1efb74d7240b5,
#block-2a519647ba12ef27e9af
{
a:active {
    pointer-events: none;
  }}

This allowed me to have these summary blocks not click through and still maintain the hover effect. Hope this helps someone in the future