Support » Plugin: AddToAny Share Buttons » AddToAny buttons not working if animated / displayed on click

  • Resolved frafor

    (@frafor)


    Hi,

    I’ve always used the AddToAny buttons with a little css & js that showed the buttons after clicking a ‘share’ icon.

    In the css below

    • a2a_wrap is a wrapper around a2a_kit
    • .hide is a class added via jQuery on document.ready
    • .show is a class added via jQuery on (‘.share_toggle’).click()
    .post-loop .hentry .a2a_wrap,
    .grid-loop .hentry .a2a_wrap {
    	position: absolute;
    	transition: 0.5s;
    	top: 45px;
    	left: 0;
    	z-index: 1;
    	width: 100%;
    }
    
    .post-loop .hentry .a2a_wrap.hide,
    .grid-loop .hentry .a2a_wrap.hide {
    	left: -100%;
    }
    
    .post-loop .hentry .a2a_wrap.show,
    .grid-loop .hentry .a2a_wrap.show {
    	left: 2%;
    }

    I’ve noticed that after the latest updates, the buttons stopped working: if you click them, they just open http://www.mysite.com/#socialnetworkiclicked in a new window.

    If I remove the js/css trick above, then they start to work again.

    I think this is a huge limitation for UX/UI Design.

    Is there any known workaround? Am i doind something wrong?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author micropat

    (@micropat)

    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.

    frafor

    (@frafor)

    Thanks for the quick reply

    I will investigate further in the problem.

    FF

    frafor

    (@frafor)

    @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

    frafor

    (@frafor)

    @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 5 months ago by  frafor.
    frafor

    (@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.

    frafor

    (@frafor)

    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 5 months ago by  frafor. Reason: found a solution
    • This reply was modified 5 months ago by  frafor.
Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.