hayleysb13 Posted August 22, 2022 Share Posted August 22, 2022 Site URL: https://www.theproductiveco.com/portfolio-services Hello! I am trying to disable the clickthru link on our website's portfolio while maintaining the hover effect. I want the portfolio to be presentational, not directing to any page in particular. Also, I'd like to reformat the portfolio for mobile so it shows two boxes per row. Can these be accomplished using Custom CSS? Link to comment
Beyondspace Posted August 22, 2022 Share Posted August 22, 2022 2 hours ago, hayleysb13 said: Site URL: https://www.theproductiveco.com/portfolio-services Hello! I am trying to disable the clickthru link on our website's portfolio while maintaining the hover effect. I want the portfolio to be presentational, not directing to any page in particular. Also, I'd like to reformat the portfolio for mobile so it shows two boxes per row. Can these be accomplished using Custom CSS? There is one Css style that removes the event fire from link. It is pointer-events, but with this style, the hover effect is also removed too. So I suggest using the javascript to prevent the defaul action of clicking on the link <script> const portItems = document.querySelectorAll('section[data-section-id="62fe84a32655a00e2cddb8f1"] .grid-item'); if(portItems.length) { portItems.forEach(item => { item.addEventListener('click', (e) => { e.preventDefault(); }) }) } </script> Hope it can help BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
hayleysb13 Posted August 24, 2022 Author Share Posted August 24, 2022 On 8/22/2022 at 11:47 AM, bangank36 said: There is one Css style that removes the event fire from link. It is pointer-events, but with this style, the hover effect is also removed too. So I suggest using the javascript to prevent the defaul action of clicking on the link <script> const portItems = document.querySelectorAll('section[data-section-id="62fe84a32655a00e2cddb8f1"] .grid-item'); if(portItems.length) { portItems.forEach(item => { item.addEventListener('click', (e) => { e.preventDefault(); }) }) } </script> Hope it can help Hi! I inserted this code above on the page, but nothing seemed to change. Is there something I'm missing? Link to comment
tuanphan Posted August 26, 2022 Share Posted August 26, 2022 On 8/22/2022 at 8:41 PM, hayleysb13 said: Site URL: https://www.theproductiveco.com/portfolio-services Hello! I am trying to disable the clickthru link on our website's portfolio while maintaining the hover effect. I want the portfolio to be presentational, not directing to any page in particular. Also, I'd like to reformat the portfolio for mobile so it shows two boxes per row. Can these be accomplished using Custom CSS? The url doesn't work. Can you check it again? Also, you need to add above code to Home > Settings > Advanced > Code Injection > Footer, not Custom CSS 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
hayleysb13 Posted August 26, 2022 Author Share Posted August 26, 2022 7 hours ago, tuanphan said: The url doesn't work. Can you check it again? Also, you need to add above code to Home > Settings > Advanced > Code Injection > Footer, not Custom CSS Yes! See this URL: https://www.theproductiveco.com/strategy I have inserted the following code (which I found from another thread) into the Page Header Code Injection for this page: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('a.grid-item').removeAttr('href'); }); </script> That worked to disable the clickthroughs, but now the hover is gone on mobile. How do I get the hover back in mobile view? Link to comment
tuanphan Posted August 28, 2022 Share Posted August 28, 2022 On 8/26/2022 at 11:34 PM, hayleysb13 said: Yes! See this URL: https://www.theproductiveco.com/strategy I have inserted the following code (which I found from another thread) into the Page Header Code Injection for this page: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('a.grid-item').removeAttr('href'); }); </script> That worked to disable the clickthroughs, but now the hover is gone on mobile. How do I get the hover back in mobile view? Try adding to Design > Custom CSS @media screen and (max-width:767px) { a.grid-item:hover .portfolio-overlay { opacity: 0 !important; } } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment