How can assign Interactions to non-buttons

I would like to be able to assign an interaction (specifically, to be able to ‘scroll to target’ on a given page) but instead of using a button or an image, I would like to use a ‘hover tilt’ or maybe a ‘card’. Unfortunately, I do not see this option available on the sidebar. Am I missing something? Can I assign an interaction to any element and I just don’t know how?

Things like cards usually contain elements that can be converted to a link - text, images, buttons etc. Therefore you should be able to add your link to any element contained within the card. You can then select the link object, and add the custom class .stretched-link. This will effectively stretch the link in the content to cover the whole element. You can also use the custom attributes section to assign an onclick event to your page element. Both of these options are discussed in THIS THREAD. I suggest you take a look to better understand how these linking options work.

Edit: The hover-tilt bric is a little more unpredictable because it is a custom bric that only provides for a hover effect. I never really understood the purpose of this particular bric because the hover tilt effect suggests to anyone using a mouse (cant be seen at all on a touch screen device) that something will happen if it is clicked. Unfortunately that isn’t the case because there is no interaction option nor a custom attributes option on this particular bric. That said, you can get it to work in a fashion by adding an onclick event to the column containing the bric. However, it seems to only work if you click on the text part of bric.

1 Like

I was about to point him to the same :stuck_out_tongue:

The thread you provided was really helpful; I like to assign the column with the custom attribute. Having never used custom attributes, I’m hoping you can shed some light - is there a way, instead of linking to a page, to instead have the location be set to scroll to a given bloc on the page?

Yes, give the bloc an ID (say ‘blocID’) then if it’s on the same page use the scroll to target and choose ‘#blocID’.
If its on another page, use the navigate to URL option and choose’ https://www.mysite.co.uk/page/#blocID or whatever your path is.

So for custom attributes, the ‘name’ would still be “onclick” but then how would I write the value, assuming it was on the same page?

Not sure how you make it work with your modal, but these are my settings for a scroll to Bloc.
image

Hi TrevReav - see that’s my whole problem. I do not have an Interaction option available for all elements on a page and it’s usually just reserved for buttons, which I don’t want to use since they’re limited from a graphical standpoint. I want to be able to use an image or a hover tilt or basically anything that’s not a button as a way to navigate.

Card Designer has the “Scroll to Target” feature. :wink:

You do have a scroll to target option on images - so no problem there. You can also create image buttons which will also have the scroll to target option available. The problem you have is that hover-tilt bric. That’s probably one of the few brics where you don’t have any interaction options. As I mentioned in a previous post, you would have to apply an onclick attribute to the column containing the bric. Unfortunately, I’m not too familiar with the attribute required for scrolling to a location, but I’m sure if it’s a standard feature in Blocs, there must be a way to set an onclick event that does this. Maybe someone like @PeteSharp will see this thread and offer up the information. He has a better handle on the workings of bootstrap than me.

Hi Whittfield, thanks for the reply. So, what am I missing? I select the card but the option to scroll to target isn’t available. All I see is “appearance”, “scroll FX”, “animation”, “custom attributes”, and “tooltips”. No “interaction” options are available.

Card Designer is Card Designer | Blocs Store

It’s not the card from the blocs core brics. it’s a custom bric.

Ah, a custom bric! That makes sense. I might have to take that for a spin!

Hey, I went and purchased it. Are you familiar with how to utilize it, or where a better tutorial than what’s on the page might be found? I put in a target (I’ve tried both the name of the bloc by itself and the name of the block with a “#” in front) and the it doesn’t function.

No need to include the selector (#) because it only accepts ID.

Can you provide screenshot?.
It’s really as simple as just adding the ID of the thing you want to scroll to.

I think I got it to work (for some reason it just wouldn’t before), but I’ll dig a little deeper as I develop the page. Many thanks.