Links to whole column with javascript

Support
#1

Hello, Im trying to add url on whole column using javascript. I find this in one topic here:

(function($){
$(’’).insertBefore(’.praha’);
$(’.praha’).prependTo( $(’#column-link’) );
})(jQuery);

Its perfectly working, but I want to setup this for rest columns in a row to (one column= 1 special url). When I just try to copy ctrl+c and ctrl+v parts of this code, It will make mess like this:

But I need to make it looks like this:

Can you please give me advice how to manage this - mean the code edit? Thanks for it!

Tereza NZ

#2

Hi Tereza,

Thank you for reaching out to us. You should follow one of these threads instead to make a column clickable:

Please note that the code provided in the above thread serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

#3

Hi,
thanks for you help but all options you have give to me are changing appearance of columns also. I can use it because I need to columns be visually same. I only want them to have link. Look what happend after I used you codes:

Thats not an option. Is there some easy way to only extend code I wrote in my question?

#4

Hey @nezzazvoni,

Yes. The methods Nabeel linked to will change the appearance because the column is wrapped with an anchor tag. Though that is perfectly valid in HTML5, I personally don’t recommend that because it might break the layout as what you have experienced.

Since you’re using Javascript, other scripts with errors could break it also and I believe it’s bad to apply to critical functions of your site such as a link.

Before I give you an alternative, please first consider the 2 best non-coding solutions.

1. Create your design in Photoshop, Canva or other image editing software. Then, insert the image using the Image element then just activate the Image Link option.

2. If you just have a few texts, you can fill the Column with a Button element. You can watch the setup from this video: https://youtu.be/LrGgBe-stcw

-----------------------------------------------------------------------------------

Here’s the alternative Javascript solution using the Javascript open() method. See https://www.w3schools.com/jsref/met_win_open.asp

1. Add the following sample code in your page’s Content JS. I believe you’ll get the pattern in the code if you have more columns. It’s just 1 function per column/link.

function greenColumn() {
  window.open("https://www.w3schools.com");
}
function redColumn() {
  window.open("https://www.google.com");
}

2. Add the onclick attribute and the function in the JS code as the value like in the following screenshot.

You can watch the whole process in the video below.

Disclaimer: Please just note that custom coding is beyond the scope of our support. We will not support issues that will arise from the use of the sample code. If you need extra features for the column or enhancement for the sample code, please have a developer continue custom coding for you.

Hope that helps and thank you for understanding.

Adding links to background image in Pro grid cells without breaking layout
#5

Hello,
ok thank you for your help. I was really helpfull :).

Tereza

#6

You’re welcome, Tereza.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.