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

remove click-thru on single summary image/title


deaton72

Question

Posted (edited)

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!

 

 

 

 

 

 

 

Edited by deaton72
Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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, de

Posted Images

12 answers to this question

Recommended Posts

  • 0
Posted (edited)

@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? 

 

Edited by deaton72
Link to post
  • 0
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
Posted (edited)

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. 

personnel.JPG

Edited by deaton72
Link to post
  • 0
Posted (edited)

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>

 

Edited by jpeter
Link to post
  • 0
Posted (edited)

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

Edited by deaton72
Link to post
  • 0
Posted (edited)

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

Edited by jpeter
Link to post
  • 0

@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 🙂

 

Link to post
  • 0

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

Link to post
  • 0
Posted (edited)

@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

   

 

Edited by deaton72
Link to post
  • 0

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?

Link to post
  • 0

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

})();

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...