Jump to content

Turn off click through link portfolio page

Recommended Posts

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!

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

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

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

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>

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

 

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

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>

 

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
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. 

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

Link to comment

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

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
  • 1 year later...
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?

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
  • 1 month later...

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! 

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

Edited by bangank36

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

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.