Jump to content

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

Recommended Posts

  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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
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
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
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

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.