Turn off click through link portfolio page

Hi All, I’m working with the Novo template in 7.1 and trying to modify the portfolio page click through link for one of my sub-pages. The portfolio page automatically adds a hover effect on top of my preview image which I’d like to keep so I don’t want to build these using different page types. I’d like to just stop the link from being active. I saw that it might be possible with a pointer event tag but I’m not sure exactly how to execute that. Any help is much appreciated! Thanks!

Can you share link to portfolio page? Difficult to give pointer event code without checking url.

2 hours ago, tuanphan said:

Can you share link to portfolio page? Difficult to give pointer event code without checking url.

Thanks Tuonphan! I’m a little uneasy about sharing the link to my site while it’s under construction, but I’m hoping you can use the demo site im pasting below as reference for what I’d like to do. The first item in the portfolio is called “American portraiture” I would like to have the image and hover effect stay on screen but if you try to click on that item  it wouldn’t go anywhere. Sorry, I know it’s not my page but it’s exactly my layout and template so I hope that’s OK. 

37 minutes ago, Pablo2020 said:

Thanks Tuonphan! I’m a little uneasy about sharing the link to my site while it’s under construction, but I’m hoping you can use the demo site im pasting below as reference for what I’d like to do. The first item in the portfolio is called “American portraiture” I would like to have the image and hover effect stay on screen but if you try to click on that item  it wouldn’t go anywhere. Sorry, I know it’s not my page but it’s exactly my layout and template so I hope that’s OK. 

Where demo?

34 minutes ago, tuanphan said:

Where demo?

Sorry.... 

https://novo-demo.squarespace.com/

I found this code which should do what I want but it requires adding the css class and then modifying the html link for my portfolio item, but I don’t know where to do that part, or how to find the link in the html. I used the inspector and can find the container and graphic but no specifically named link. I didn’t think we were able to change the html associated with these sites. Only the css  I’m lost. Thanks for any suggestions.

.not-active {

  pointer-events: none;

  cursor: default;

  text-decoration: none;

  color: black;

}

<a href="link.html" class="not-active">Link</a>

26 minutes ago, Pablo2020 said:

I found this code which should do what I want but it requires adding the css class and then modifying the html link for my portfolio item, but I don’t know where to do that part, or how to find the link in the html. I used the inspector and can find the container and graphic but no specifically named link. I didn’t think we were able to change the html associated with these sites. Only the css  I’m lost. Thanks for any suggestions.

 

pointer event none will disable link & disable show title on hover

If you want to use, add to Design > Custom CSS

.grid-item {
    pointer-events: none;
}

or use this code

Add to Home > Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('.grid-item').off('click');
</script>

48 minutes ago, tuanphan said:

or use this code

Add to Home > Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('.grid-item').off('click');
</script>

 

You are amazing! Unfortunately I don’t have the business plan so I can’t modify the header code. I did put the pointer event code in css but it turned off all of the overlays and text for all of the items. Is there a way to isolate just a single item with that pointer event? Sorry, I really appreciate your help. 

57 minutes ago, tuanphan said:

or use this code

Add to Home > Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('.grid-item').off('click');
</script>

 

If I upgrade my account I can modify this header code but would this script code isolate a single item or affect all of the items in the grid? It might be worth it to upgrade. 

(I guess another CSS can solve. I will check carefully tomorrow) 😅

Script will affect all items with class .grid-item

you can add to Page Header, It will run on only that page.

I have not tried, but I guess we can exclude an item. Which item?

Hi @tuanphan I am trying to do the same thing, turn off the ability to be clickable but keep the hover. 

https://accordion-lizard-hng8.squarespace.com/portfolio-1

password: liv

On 12/22/2021 at 4:50 AM, danamichellecastro said:

Hi @tuanphan I am trying to do the same thing, turn off the ability to be clickable but keep the hover. 

https://accordion-lizard-hng8.squarespace.com/portfolio-1

password: liv

 

Hi. THe url doesn't exist. Can you check?

Hi! I'm having the same issue. https://www.alongsideworkshops.org/about

The words that I don't want to be active links are "Community," "Creativity," and "Curiosity." I triedtried both codes--one was supposed to go into the header and the other was for the CSS Styles section. Neither seemed to work for me, but I may have been doing something wrong. The password is nowornever.

I'm really grateful for any help! 

7 hours ago, jennyso said:

Hi! I'm having the same issue. https://www.alongsideworkshops.org/about

The words that I don't want to be active links are "Community," "Creativity," and "Curiosity." I triedtried both codes--one was supposed to go into the header and the other was for the CSS Styles section. Neither seemed to work for me, but I may have been doing something wrong. The password is nowornever.

I'm really grateful for any help! 

You can try adding to Home > Design > Custom Css

section[data-section-id="61dfe40a30b6d72ed3025980"] .portfolio-hover-item {
  pointer-events: none;
}

This code will disable the hover effect of the portfolio.

Another way you can implement is set in Home > Settings > Advanced > Code Injection, choose the footer

<script>
  (function(){
    window.addEventListener('DOMContentLoaded', () => {
      const disableBtns = document.querySelectorAll('section[data-section-id="61dfe40a30b6d72ed3025980"] .portfolio-hover-item');
      if(disableBtns.length) {
        disableBtns.forEach(btn => {
          btn.addEventListener('click', (e) => {
            e.preventDefault();
          })
        })
      }
    });
  })()
</script>

Let me know how it works

Support me by pressing 👍 if this useful for you

It worked! Thank you so, so much! 

Looking to do the same, keep the hover but disable the link on portfolio items. I've tried the above, and none work. It disabled both the hover and the click through. Need to keep the hover effect. 

thanks!

On 2/7/2023 at 3:25 AM, katmorgenroth said:

Looking to do the same, keep the hover but disable the link on portfolio items. I've tried the above, and none work. It disabled both the hover and the click through. Need to keep the hover effect. 

thanks!

Can you share link to your site? We can check easier

On 2/6/2023 at 8:25 PM, katmorgenroth said:

Looking to do the same, keep the hover but disable the link on portfolio items. I've tried the above, and none work. It disabled both the hover and the click through. Need to keep the hover effect. 

thanks!

Hi! Did you ever find a way to achieve this? 🙂