make a project index unclickable

[susan39]

i have several project-index on my webseite e, but i want to make some of them unclickable. is that possible?

thank you and very best,
susan

[Richard]

Dear Susan

@susan39

By nature the project index is for accessing Project's but this is possible with CSS.

https://laytheme.com/documentation/custom-css-styling.html

https://css-tricks.com/almanac/properties/p/pointer-events/

https://css-tricks.com/how-to-disable-links/

---

Best

Richard

[Stjopa]

@susan39 Hey did you found a solution?

[susan39]

@Stjopa hi Stjopa, not really. i have not had time yet to take a look how it works with CSS but in the meantime i have just rebuilt the the project-index-layout, its easy.

[arminunruh]

you can give the projectindex a class of "noclick"

then in lay options -> custom css:

.noclick{
pointer-events: none!important;
}

[vthevoz]

Hey @arminunruh

EDIT: sorry, I saw that you proposed a solution in another thread, my bad!

do we have any updates about this feature?

The .noclick CSS class tricks works, but prevents from having the image hover feature on projects.

Having a huge list of projects that we don't necessarily want to have corresponding pages to, we'd love to have the options of just listing elements with the image hover function.

Is there any new way of implementing this or can it possibly be done in the future?

Thank you!

[arminunruh]

hey! yea i think i should add a feature for this one day

[shmoo]

@vthevoz +1 a feature of switching off the //refs to work only aesthetically with the imagehover plugin would be very useful!

[susan39]

@arminunruh

Hi Armin,
Your solution only works for the entire Project Index. My question was whether it is possible to make individual projects unclickable.
Thank you :)

[arminunruh]

<script>
    var ids_to_ignore = [2817, 2829];
    ids_to_ignore.forEach(function(id){
        jQuery(document).off("click", 'a.projectindex-project-link[data-id="'+id+'"]');
    })
</script>

this will make single projects in a projectindex unclickable. but it will still have the imagehover addon working. "ids_to_ignore" is a list of project ids you want to have not clickable.

[brumistudio]

Hi @arminunruh, i cant make it work on my project index.
this is what i type in:
script>

 var ids_to_ignore: [177, 70];

 ids_to_ignore.forEach(function(id){

 jQuery(document).off("click", 'a.projectindex-project-link[data-id="'+id+'"]');

 }
but it always gives me an error: expected IDENT at line 2, col 21. can,t find a solution for it..
i have a list of projects but just want to show some of them, and the rest of them keeping them in my index only
hope you can help me with this one. thanks!

[arminunruh]

well why did you write script>
has to be <script>
where is </script>, its missing

its easier for me to check if u post ur link

[rospax]

Hey @arminunruh I am also trying to achieve this and the can't get the script working...

Here is my index, hope you can help?
(It's the first project in the index that I'm testing with the ID) https://primaryworks.com.au/index/

[arminunruh]

<script>
    var ids_to_ignore = [1671];
    ids_to_ignore.forEach(function(id){
        jQuery(document).off("click", 'a.projectindex-project-link[data-id="'+id+'"]');
    })
</script>

you need to put this in "HTML at bottom" in lay options -> custom css & html

does it work?

[rospax]

Thanks for your help @arminunruh , unfortunately it doesn't seem to be working, the link still behaves as per the others...

Any ideas?

[arminunruh]

i tested it. this should work:

<script>
    var ids_to_ignore = [3179];
    // if you have more project ids that you want to ignore: 
    // var ids_to_ignore = [3179, 3832, 334];

    window.laytheme.on('newpageshown', function(){
       ids_to_ignore.forEach(function(id){
            jQuery('a.projectindex-project-link[data-id="'+id+'"]').on("click", function(e){
                e.stopPropagation();
                e.preventDefault();
            });
        })
    });
</script>

[rospax]

Thanks @arminunruh - it works!

One more thing with this, I've realised that I need to hide the "hand" link cursor so it doesn't look clickable - either keep the arrow or change to another symbol.

How would you recommend doing this?

[arminunruh]

css

a.projectindex-project-link[data-id="3179"]{
cursor: default!important;
}

[rospax]

Thanks @arminunruh, that worked a treat :)