AddToAny buttons not working if animated / displayed on click

AddToAny works perfectly with that convention (for example), so you’ll want to troubleshoot to find the root cause of your issue.

The usual cause of such an issue is another script hijacking click events.

Thanks for the quick reply

I will investigate further in the problem.

FF

@micropat

I’ve noticed that sometimes a2a scripts aren’t being loaded as when the sharing link point to mysite.com/social, I can read in console:

TypeError: a2a.getData is not a function[More] page.js:1:8430
TypeError: a2a.cbs is not a function[More] page.js:1:8625
TypeError: a2a.getData is not a function[More] page.js:1:8430
TypeError: a2a.getData is not a function

How is this possible? I’ve already tried to locally cache a2a in settings > advanced, nothing changed

@micropat

Same on Chrome & FF. This is the Chrome console.

https://ibb.co/cf7LD5

Moreover I disabled AdBlock Plus, checked script loading order and, for information purpose, the code below is the function that toggles the a2a_kit div

function socialToggle() {
		
		jQuery('.a2a_kit').addClass('hide');
		
		jQuery('.social-toggle').click(function(e){
			article = jQuery(this).closest('.hentry');
			a2a = article.find('.a2a_kit');
			a2a.toggleClass('show');
			a2a.toggleClass('hide');
		})
	}

• This reply was modified 7 years, 7 months ago by frafor.

More console.log errors:

https://ibb.co/bD4iY5

More details:

• I’m on an archive page. Each entry has the buttons displayed via PHP ADDTOANY_SHARE_SAVE_KIT()
• WordPress 4.7.4
• jQuery 1.12.4

I’ve made more test and if a single icon falls outside the .hentry container, then it stops working. for example:

.a2a_kit.hide { left: -15% }

https://ibb.co/ksfOY5

I can see the twitter icon and the ‘+’ icon: they work.
The facebook icon falls outside the container div: if i click the social-toggle, then it appears, but it doesn’t share anything.

.a2a_kit.hide { left: -5% }

https://ibb.co/dr4Ht5

I can see all the icons. The Facebook icon is hidden for 1/3. But i can click on it, and it shares correctly. All the icons work.

Apparently, the icons work only when they are visible at first. If you hide them, they stop.

I’ve tried even by animating opacity instead of position, from 0 to 1 and they behave the same way. I’m trying to replicate on codepen.

So, I’ve found that the problem is my socialToggle() function.

Codepens:

mine doesn’t work -> https://codepen.io/anon/pen/VbKobB
with your anon function, it works -> https://codepen.io/anon/pen/bWwXGJ

@micropat

I’m not that practical with jQuery, and maybe that’s the reason i couldn’t figure it out by myself. I would only like to know why my code doesn’t work, while your do. Thank in advance for the answer!

EDIT:

Apparently, all I was forgetting was to declare the ‘article’ and ‘a2a’ vars in my function: I forgot to prepend ‘var’ in front of them.

function socialToggle() {
		
		jQuery('.a2a_kit').addClass('hide');
		
		jQuery('.social-toggle').click(function(e){
			var article = jQuery(this).closest('.hentry');
			var a2a = article.find('.a2a_kit');
			a2a.toggleClass('show');
			a2a.toggleClass('hide');
		})
	}

Now it works…

FF

• This reply was modified 7 years, 7 months ago by frafor. Reason: found a solution
• This reply was modified 7 years, 7 months ago by frafor.