Prevent click on certain project types in portfolio

  • Hi There.

    I’m creating a portfolio and I need certain projects to be unclickable. By this, I mean I need the portfolio page to lists all projects, but for certain project types remove? the hyperlink to their project page, prevent users from going to that page.

    The reason for this is, these projects types have nothing more than a featured image and a short description and I don’t want to direct users to a half empty page.

    Thank you very much in advance,
    K

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • @kyousefi

    You can use pointer-events

    Say you want to disable clicking functioanlity on the entire portfolio item, then you use 

    .portfolio-entry:nth-of-type(n) {
    pointer-events: none;
}

    Where (n) is the order number of the item you want to remove click functionality from.

    If you want to disable #2 and #5 for example, you would use it like so:

    .portfolio-entry:nth-of-type(2), .portfolio-entry:nth-of-type(5), {
    pointer-events: none;
}

    Let me know if you need more help

    Thread Starter kyousefi

    (@kyousefi)

    Thanks for the prompt response.
    My problem is, I’m using 3 tabs which in each of them I’m displaying a subset of the portfolio:

    https://www.kasra.com.au/emigre/folio/

    I need to disable clicks on all the projects of the 2nd tab.

    Can you help me find the class that I should target?

    Thank you very much in advance,
    K

    @kyousefi

    You have three different tabs. Each of those tabs has a specific id.

    We can use those ids to target items listed under each tab.

    The ids for your tabs are

    #multidisciplinary-59a6546b88de1
#brandmarks-59a6546ba4088
#advertisement-59a6546bd85dd

    If you want to target the second and fourth item in the brandmarks tab you can use

    #brandmarks-59a6546ba4088 .portfolio-entry:nth-of-type(2), 
#brandmarks-59a6546ba4088 .portfolio-entry:nth-of-type(4) {
    pointer-events: none;
}

    and if you want to target the fifth item under the advertisement tab you use

    #advertisement-59a6546bd85dd .portfolio-entry:nth-of-type(5) {
    pointer-events: none;
}

    If you want to disable all links under the second tab you use 

    #brandmarks-59a6546ba4088 .portfolio-entry:nth-of-type(n) {
    pointer-events: none;
}

    using (n) without specifying a number will select all items that match the selector

    I hope that’s clear.

    Let me know if you need more help.

    • This reply was modified 7 years, 6 months ago by j09.
    • This reply was modified 7 years, 6 months ago by j09.
    • This reply was modified 7 years, 6 months ago by j09.
    Thread Starter kyousefi

    (@kyousefi)

    Thank you very much. Apparently, each time the page refreshes, a new id is assigned to the tabs.

    For example in:
    “multidisciplinary-59a6546b88de1”
    the “multidisciplinary” part is constant, but the number changes every time.

    The widget responsible for this is “livemesh Site Origin Widgets”. Do you think I need to contact them or there’s a workaround?

    Thanks
    K

    @kyousefi

    You can use “broader” CSS selectors in that case.

    For example [id*="multidisciplinary"] would select any element with a partial match for the word multidisciplinary in its id.

    So, in your case you use 

    [id*="brandmarks"] .portfolio-entry:nth-of-type(n) {
    pointer-events: none;
}

    to apply the CSS to any item that has the class .portfolio-entry which falls under any item with which contains the word brandmarks in its id – even if partially.

    Let me know if you nee more help.

    Thread Starter kyousefi

    (@kyousefi)

    Solved! Thank you very much!

    @kyousefi

    No problem. Glad you got it sorted out.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Prevent click on certain project types in portfolio’ is closed to new replies.

Tags