[sc1317rParticipant]

Hi,

I have an essential grid set up on http://www.sandchateau.com/things-to-do which currently opens post content in a lightbox using Ajax. This post content sometimes has hyperlinks, which I would like to open in a new tab. I followed the instructions in #760106 in this forum, however when I click the links after including the attached javascript code, I get multiple tabs opening. There is a sequence at play here, as in when I clear the cache and click the link, only one new tab opens (which is correct). The second time I click a link, whether in the same lightbox or not, two new tabs open. The third link I click opens three new tabs, etc. All new tabs open to the correct hyperlinked URL.

Please let me know if you can help.

Thanks.

[sc1317rParticipant]

I apologize, below is the essential information about the site.

Url: http://sandchateau.com
X theme Version 4.6.1
essential grid 2.1.0.1
wordpress 4.5.3

[LelyModerator]

Hi There,

When I tried to click the link from lightbox, it is not working at all. See this:http://screencast-o-matic.com/watch/cDjnisim4p
It is working for you? Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[sc1317rParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Thank you for the credentials. I can’t see any error on the console from your setup but it’s not really working when I check. Would you mind giving us the link you have followed on this forum? Then please do give us the FTP credentials too on a private reply.

[sc1317rParticipant]

This is the forum post I was referencing when trying to accomplish the hyperlinks in my essential grid lightbox: https://community.theme.co/forums/topic/essential-grid-lightboxpopup-links-wont-work/

[Nabeel AModerator]

Hi again,

Please replace the previous code with this one:

jQuery(document).ready(function($){
	$('.esgbox-wrap a').each(function(){
		$(this).attr('target', '_blank' );
	});
});

And then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.esgbox-wrap a {
    float: left;
}

Let us know how this goes!

[sc1317rParticipant]

All this did was move the links inside the lightbox to be aligned left. This has reorganized the text so now it does not make sense to read. When I click the links, nothing happens. However, when I press control and then click the links, I do get the website to open in a new tab. Please advise.

[LelyModerator]

Hello There,

I save this page:http://www.sandchateau.com/things-to-do/ as template. Then create a draft test page out of it:http://www.sandchateau.com/?page_id=756. I made some testing on that page. I updated the code to this:

jQuery(document).ready(function($){
	$('.eg-ajax-a-button').click(function(){
		$(document).ajaxSuccess(function() {
			$('.esgbox-opened a').click(function(){
				var URL = $(this).attr('href');
				  window.open(URL,"_blank");
			});
		});
	});
});

It’s working now on the draft page. Please check:http://screencast-o-matic.com/watch/cDjQhdiKYk

Hope this helps.

[sc1317rParticipant]

I am now getting the original issue here. When I click the links after including the revised javascript code, I get multiple tabs opening. There is a sequence at play here, as in when I clear the cache and click the link, only one new tab opens (which is correct). The second time I click a link, whether in the same lightbox or not, two new tabs open. The third link I click opens three new tabs, etc. All new tabs open to the correct hyperlinked URL.

Again, the links have been pulled out from the text and are aligned left, which very much harms the readibility of the post.

[sc1317rParticipant]

One clarification: The sequential duplication/replication of tabs occurs only when using Microsoft Edge as a browser. The code works find in Google Chrome.

[LelyModerator]

Hello There,

Please remove this CSS:

.esgbox-wrap a {
    float: left;
}

That caused it to aligned left.
Regarding the issue in Microsoft Edge, I can’t duplicate it. See this:http://screencast-o-matic.com/watch/cDj6npiKRo
It open just one tab. Please clarify or do give us video screencast too so we can see.

[sc1317rParticipant]

On the screencast you provided, you can see that there are pop-ups being blocked. If you allow pop-ups, you will most likely be able to duplicate my issue.

[RadModerator]

Hi there,

The window.open() from the javascript is considered a popup. Click event can be trigger multiple times depending on event delegation. Instead of opening it as a popup why not just link it? But the issue with that is, it will link on same page/window. Unfortunately, there is no other workaround, if there is any then other spammy ads that use windiw.open() would already pass through it.

jQuery(document).ready(function($){
	$('.eg-ajax-a-button').click(function(){
		$(document).ajaxSuccess(function() {
			$('.esgbox-opened a').click(function(){
				var URL = $(this).attr('href');
				window.location =  URL
			});
		});
	});
});

Thanks!

[Author]

Posts