Make image clickable — Scroll to Result container header

[sapientdaisy10]

This plugin remains the best thing I have found to solve some complicated problems and create some really great user experiences. I have two details that I would really appreciate your help with:

1) The design specs for the project have custom Featured Images that have the page title. The client wants users to click the image and open the related page in a new window. In the settings, I have Make the whole result area clickable? Set to ON

This is a video showing the issues:
https://www.loom.com/share/fa924ced583f48639d5f6244839e9e24

2) The other has to do with Scroll to Results. I have Scroll the browser window to the result list, after the search is finished? set to ON and it works as designed but it would be much nicer if it actually scrolled to the Result container header. What would be the best way for me to achieve that result?

Thanks!

• This topic was modified 5 years, 9 months ago by sapientdaisy10.

[Ernest Marcinko]

Hi,

Thank you for the details.

1. I will have to check this out directly I’m afraid. Can you please send me a link to that page? Back-end and FTP details might be required as well, just in case. By default the whole area should be clickable. Is that layout customized via the results templating by any chance? It does look a bit weird to me.

2. This is more problematic. This is hard coded to the plugin code script files, to scroll to the results list element. This would have to be custom coded I’m afraid.

[sapientdaisy10]

You cannot access this content.

[Ernest Marcinko]

You cannot access this content.

[sapientdaisy10]

You cannot access this content.

[Ernest Marcinko]

Thank you, it is working perfectly.

I have found the underlying issue, it was not the custom CSS luckily. I had to enable this option, so that the overlay is area is displayed, but since you don’t want to actually show this hover-overlay, I also added this custom CSS to make it transparent:

/** Make overlay invisible **/
.asp_r_4 .asp_item_overlay {
    opacity: 0 !important;
}

It now acts as a transparent layer below the cursor, and should work as expected.

[sapientdaisy10]

Brilliant! Thank you so much!

[Ernest Marcinko]

You cannot access this content.

[sapientdaisy10]

Yes, please go ahead and close it. Thanks again!

[Author]

Posts