jQuery() .hide works sporadically on sharing links added via javascript

Question

I use ShareThis/AddThis and want to hide share counts on my page when they are equal to zero.

The problem I'm having is that .hide() is not working reliably—it only works some of the time when the links appear once on a page. On page with multiple instances of the sharing links, it only works for the first set.

My guess is it's not working because of the long time it takes for the links to appear. The body of the page shows only This is the code I'm using:

<script type="text/javascript">
jQuery(function($) {

$('.stBubble').each(function(){         
    if($(this).text() == '0' || $(this).text() == 'New') {
        $(this).hide();
    }
});
});

It appears in my footer; the ShareThis code in the page template is this:

<li><span class='st_twitter_vcount' displayText='Tweet'"></span></li>
<li><span class='st_facebook_vcount' displayText='Facebook'"></span></li>
<li><span class='st_email_vcount' displayText='Email'"></span></li>
<li><span class='st_sharethis_vcount' displayText='Share'"></span></li>

What do I have to do to get this to work?

Answer 1

The preferred way to attack this load timing issue is to find a programmatic way to get notified when addThis is done inserting itself into the page. Since it's third party JS, you would have to either find a supported addThis API for that notification or you'd have to hack their library (e.g. replace one of their functions with one of your own that calls the original and then notifies you).

If you can't find a way to do the preferred way, then the only other way I know of is to poll your page until you find the addThis stuff in the page. You would probably use a fairly short interval timer that looks for some part of the addThis HTML that you know will always be present when it's done adding it's stuff. When that's found, you can then cancel the interval timer and call your function to hide the stuff you want to hide. Because the interval timer may not catch the new content immediately, you might get a flash of the content before your JS runs to hide the stuff you don't want to see. This can be worked around by adding a static CSS rule that hides all the addThis counters stuff by default and when your JS runs, it can override that to make the desired ones visible. The content you want hidden would never flash or be visible if you do it this way.

I should add that polling the page for content is the last resort and you have to make sure that your interval timers always get cancelled even if the content never appears. Otherwise, they may bog down the viewer's browser.

Answer 2

I would look around at the addthis api and see if you can find a callback function for the event that is happening. If so, name your function and then call that function every time the callback event happens. If its a latency issue, that should solve it.