Not able to make background image clickable

[frazbob]

Hi am using custom JS code to try and make it work. Got it to work for first column but not when I added more columns. Here is code:
(function($){
// column 1
$(’’).insertBefore(’#linked-column-1’);
$(’#linked-column-1’).prependTo( $(’#link1’) );

// column 2
$(’’).insertBefore(’#linked-column-2’);
$(’#linked-column-2’).prependTo( $(’#link2’) );

//… and more…
})(jQuery);

[rad]

Hi there,

Thanks for posting in.

What the code supposed to do? Would you mind providing your site’s URL that has this code? I can’t promise any solution since this is custom code, but if it just needs a small correction, then maybe I could provide some recommendation.

Thanks!

[frazbob]

Hi,
So the code is supposed to make the background image for the column be a link. I have four marginless columns on the homepage that I want customers to be able to click on and go to another page. The url is: theint.staging.wpengine.com. The four boxes are Eat, Play, Sleep and Love.
Thanks!

[nabeel]

Hi again,

Please replace your code with the following code:

jQuery(document).ready(function($){
	$("#linked-column-1 > div").wrap('<a href="http://google.com/"></a>');
	$("#linked-column-2 > div").wrap('<a href="http://google.com/"></a>');
	$("#linked-column-3 > div").wrap('<a href="http://google.com/"></a>');
	$("#linked-column-4 > div").wrap('<a href="http://google.com/"></a>');
});

Don’t forget to clear your browser’s cache after adding the code and make sure to change the links in the above code. Let us know how this goes!