Correct code to open link on column hover

[wtdm]

Hi,

I had this working before but deleted the row and can’t remember the correct code for the open on hover effect.
Had assigned an id and JS before but whatever I’m doing is not working now ;(
This is to open the “90% of all companies fail…” column.

Can I apply this effect to the entire column as well as text link?

Thanks in advance for your help.

[ruenel]

Hello There,

Thanks for writing in! I have inspected your page and I see that you have this custom JS code:

jQuery(document).ready(function($){
	$('.popup-launcher').hover(function(){
		$(this).click();
	})
});

This code is valid and correct. This is not working simply because you did not inserted a popup-launcher class. To be able to accomplish what you want, please edit your page and insert the popup-launcher class in the column. You will also need to update the JS code and use this instead:

jQuery(document).ready(function($){
	$('.popup-launcher').hover(function(){
		$(this).find('.x-anchor').click();
	})
});

Please let us know if this works out for you.

[wtdm]

Actually, it is no longer to open a popup but rather another page.

[ruenel]

Hello There,

Since your column has a custom class, you can make use of this JS code:

jQuery(document).ready(function($){
	$('.custom-effect').hover(function(){
		$(this).find('.x-anchor').click();
	})
});

This code will trigger the button click when you hover over the column.

Hope this helps.

[wtdm]

Well, doesn’t seem to open the page on hover.
I must be missing something.

[christopher]

Hi Daniel,

It is not a good idea to set the hover of a mouse to open up a new page. It is a bad UX practice and usually, the spam websites do that. The browsers will prevent that as it will detect as pop up. You will need to explicitly change the browser to allow your website to open up the new page.

I changed the code on that page and you can now see the result.

  $('.custom-effect').hover(function(){
		var theHref = $(this).find('.x-anchor').attr('href');
    window.open(theHref, '_blank');
	});

Thank you.

[wtdm]

Thank for the tip and the code. Steep learning curve ahead of me

Then it may be better to just open that page normally on title click.
Originally it should have been a popup, but then the counters didn’t work.

[nabeel]

Hi again,

If you need it on click then you can adjust the above code like this:

 $('.custom-effect').click(function(){
		var theHref = $(this).find('.x-anchor').attr('href');
    window.open(theHref, '_blank');
	});

If you would like to learn jQuery , I am sharing few resources that you take a look to get started with jQyery and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with jQuery.

https://www.youtube.com/watch?v=hMxGhHNOkCU

Sometimes it can get a bit difficult to find out the right selector to be able to write the required snippets. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

[wtdm]

Will do. Thanks for the wonderful support as usual.

[nabeel]

Thank you for your kind words and we’re glad we could help.

Cheers!