Clickable Column JS Breaks Grid

[refreshingdigital]

Hi,

I’ve used the advice on this post:

Topic: How to make an entire column a hyperlink? | Themeco Community

Unfortunately, the column which I’m linking is shrinking in height, and ‘breaking’ the grid layout.

Is there a better bit of JavaScript I can use to achieve the same result without causing design issues?

Many thanks.

[friech]

Hi @refreshingdigital,

Thank you for writing in, the code provided on that thread is only a guide and it’s for the old version.

Does your column or grid cell have content inside it? If not, you can simply place a button element on that column / grid cell, set the Button element’s width and height to 100% and its backgrounds to transparent.

Hope it helps,
Cheers!

[refreshingdigital]

Hi Friech,

Unfortunately I have a text element in the bottom-left of each grid item, so this wouldn’t work. Is there another way around it using z-index or some different JS?

Thanks!

[rad]

Hi @refreshingdigital,

That’s possible with Javascript, I’ll provide a guide but I can’t provide the complete customization. First, please add a unique ID to your column. Example, link_to_one

Then you can simply add this javascript code

jQuery(document).on('click', '#link_to_one', function() {

window.location = "http://example.com/";

} );

This is just a sample, and you’ll have to repeat this on every column that you wish to be clickable. And the ID and URL is up to you

Thanks!

[refreshingdigital]

Rad, you’re a legend!

Problem solved.

Thanks, have a good weekend

[ruenel]

You’re most welcome @refreshingdigital !
We’re glad @Rad solution works out for you.