deaton72 Posted June 1, 2020 Share Posted June 1, 2020 (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 June 1, 2020 by deaton72 EarvinChong 1 Link to comment
tuanphan Posted June 2, 2020 Share Posted June 2, 2020 What is access password? and which 10 items? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
deaton72 Posted June 2, 2020 Author Share Posted June 2, 2020 (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 June 2, 2020 by deaton72 Link to comment
tuanphan Posted June 2, 2020 Share Posted June 2, 2020 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; } EarvinChong 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
deaton72 Posted June 2, 2020 Author Share Posted June 2, 2020 (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. Edited June 2, 2020 by deaton72 EarvinChong 1 Link to comment
jpeter Posted June 3, 2020 Share Posted June 3, 2020 (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 June 3, 2020 by jpeter EarvinChong and tuanphan 2 Link to comment
deaton72 Posted June 3, 2020 Author Share Posted June 3, 2020 (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 June 3, 2020 by deaton72 EarvinChong 1 Link to comment
jpeter Posted June 3, 2020 Share Posted June 3, 2020 (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 June 3, 2020 by jpeter EarvinChong 1 Link to comment
deaton72 Posted June 3, 2020 Author Share Posted June 3, 2020 @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 🙂 EarvinChong 1 Link to comment
jpeter Posted June 3, 2020 Share Posted June 3, 2020 @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. EarvinChong 1 Link to comment
deaton72 Posted June 3, 2020 Author Share Posted June 3, 2020 (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 June 3, 2020 by deaton72 EarvinChong 1 Link to comment
jpeter Posted June 3, 2020 Share Posted June 3, 2020 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? cytpUk1eL3.mp4 Link to comment
jpeter Posted June 3, 2020 Share Posted June 3, 2020 @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; }; } } }); })(); EarvinChong 1 Link to comment
deaton72 Posted November 24, 2020 Author Share Posted November 24, 2020 @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 Link to comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 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? EarvinChong 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
deaton72 Posted December 3, 2020 Author Share Posted December 3, 2020 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. Link to comment
deaton72 Posted January 20, 2021 Author Share Posted January 20, 2021 @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 Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
amyleehayward Posted February 27, 2022 Share Posted February 27, 2022 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 Link to comment
tuanphan Posted March 3, 2022 Share Posted March 3, 2022 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; } EarvinChong 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted March 9 Share Posted March 9 @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 Link to comment
tuanphan Posted March 11 Share Posted March 11 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted March 13 Share Posted March 13 (edited) 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 Edited March 13 by Craigers Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment