Classic Card Hyperlink from Anywhere...?

Support
#1

Hello, I am looking for some help on my personal site. I use Cornerstone’s Classic Cards on my homepage (http://aaronthomasdesigns.com) and I would like it to work where clicking anywhere on the card will link to a new page.

Any help would be awesome and greatly appreciated!

#2

Hi @awadethomas,

Thank you for reaching out to us. To do this, please add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('div[data-x-element="card"]').each(function(){
		var btn_link = $(this).find('.x-face-button').attr('href');
		$(this).wrapInner('<a href="'+ btn_link +'"></a>');
	});
});

Please note that the code provided above 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.

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#3

This has been a godsend - thank you!

#4

You’re welcome.

#5

This is great. But on mobile it doesn’t flip the card. Any way to make it flip the card and then when someone clicks anywhere it goes to the URL?

#6

Hey Kevin,

Thank you for reaching out to us. To make sure it flips first in mobile devices, you can use this code instead:

jQuery(document).ready(function($){
	$('div[data-x-element="card"]').each(function(){
		var btn_link = $(this).find('.x-face-button').attr('href');
		$(this).find('.x-face-outer.back').wrap('<a href="'+ btn_link +'"></a>');
	});
});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

1 Like
#7

Hey, one more question here. On only one of the cards, I want the hyperlink to open a new tab. For the rest of the cards, I want to make sure the hyperlinks open in the same tab. Is there a way to do this?

#8

Awesome! Thank you!

#9

Hi @awadethomas,

To open a specific card link in new tab, just assign a unique class to that card element e.g custom-card and then replace your previous code with the following code:

jQuery(document).ready(function($){
	$('div[data-x-element="card"]').each(function(){
		var btn_link = $(this).find('.x-face-button').attr('href');
		if ( $(this).hasClass('custom-card') ) {
			$(this).wrapInner('<a href="'+ btn_link +'" target="_blank"></a>');
		}
		else {
			$(this).wrapInner('<a href="'+ btn_link +'"></a>');
		}
		
	});
});

Don’t forget to clear all caches including your browser’s cache after adding the code.

@Kev We’re glad we could help.

Cheers!

1 Like
#10

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