Jump to content

7.1 portfolio - how to disable clickthrus on hover, and format for mobile?

Recommended Posts

  • Replies 5
  • Views 795
  • Created
  • Last Reply

Top Posters In This Topic

Posted
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 (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

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

Posted
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Posted
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.