Delay execution of addThis - javascript

I have a website that uses google maps plus my own javascript. I am using the addThis javascript for social buttons. The site isnt really usable until my javascript plus the google javascript loads and runs (on $(document).ready...) so I want to minimise delay in getting things going. So I was looking at postponing the AddThis module until everything else has finished as its not that important.
Other question on stackoverflow suggest placing the link to the javascript that I want to delay at the bottom of the page. But am i right in thinking this is not relevant to me as $(document).ready... will not fire until all linked javascript has loaded no matter where its placed?
If so, should I somehow load in the addThis javascript after on $(document).ready... ?
Though I'd really prefer not to run addThis until all google maps images etc are all loaded (I believe .ready() does not wait for this). Is there a recomended way to handle this kind of thing?
For reference, typical addThis usage...
<script type="text/javascript">
var addthis_config = {
"data_track_addressbar":false,
"ui_click":true,
"data_use_cookies": false
};
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#"></script>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact" title="Share"></a>
</div>

I came up with this (please let me know if there is a better way).
<script type="text/javascript">
var addthis_config = {
"data_track_addressbar":false,
"ui_click":true,
"data_use_cookies": false
};
$(window).on("load", function(){
$('head')
.append($('<script>')
.attr('type', 'text/javascript')
.attr('src', "http://s7.addthis.com/js/250/addthis_widget.js#"));
});
</script>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact" title="Share"></a>
</div>

Take a look at loading AddThis asynchronously:
http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performance#.UZFNACtAR7Q
At the very least, this will minimize load times (but luckily AddThis is already cached on most computers, so there's really very little load time).

Just in case somebody is still looking for solution. AddThis has already released that many people are annoyed by page delays and they now offer several options which you can control in your script to load when you (dom) are ready:
Although you can also use dynamic loading or appending #async=1 to load asynchronously, I think the other good option is just put in this way - which will not run until dom is ready:
<script type="text/javascript">
/*
//if you have a pub_id, add it here and uncomment these two lines
var addthis_config = addthis_config||{};
addthis_config.pubid = 'YOUR PUBID';
*/
var addthisScript = document.createElement('script');
addthisScript.setAttribute('src', 'http://s7.addthis.com/js/300/addthis_widget.js#domready=1')
document.body.appendChild(addthisScript)
</script>
You can read more here

Related

How to remove AddThis fragment identifiers (hash) from Facebook button? (Twitter's worked)

I'm trying to use Twitter and Facebook AddThis buttons in my Web app, and don't like to use those redundant fragment identifiers. However, for some reasons when I disable its tracking functionality in my app, it works only on Twitter button and not on Facebook button. I don't see any differences between the two buttons code...
Anyway, here's my code snippet:
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_2 btn-addthis" addthis:url="path/to/my/url"></a>
<a class="addthis_button_preferred_1 btn-addthis" addthis:url="path/to/my/url/same/with/the/above"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.data_track_addressbar = false;
addthis_config.data_track_clickback = false;
</script>
I implemented the second <script> in order to disable the fragment identifiers. However, when I tapped the Twitter button, the hash was successfully removed completely and just the url was there. However, the Facebook button didn't work, and the hash remained to be there for some reasons.
Why does this occur? I tried to move the second <script> tag before the first <script> but it didn't change at all (by the way which <script> should I write the first?)
And also, the reason I swapped the button with .addthis_button_preferred_1 with the one with .addthis_button_preferred_2 is that I want to display the twitter button before the Facebook button, but for some reasons, it's not swapped properly at times (about 15 ~ 20 % of the time) and the Facebook button is displayed first for some reasons... Maybe the whole AddThis functionality doesn't work...?
You should not use preferred if you want facebook and twitter only. Because if you use preferred it will set the share buttons to that users preferred social community. addthis_button_facebook for facebook and addthis_button_twitter for twitter.
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook" addthis:url="path/to/my/url"></a>
<a class="addthis_button_twitter" addthis:url="path/to/my/url/same/with/the/above"></a>
</div>
I don't think you need the script, but if you do try instead to remove the class addthis_toolbox.

Ember.js + AddThis error "Uncaught TypeError: Cannot read property 'call' of undefined "

I am attempting to add the AddThis widget to an ember.js app. I am using basic code taken directly from addthis.com:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_pinterest_share"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-51ddaec37ede7c28"></script>
<!-- AddThis Button END -->
...and getting this error: "Uncaught TypeError: Cannot read property 'call' of undefined" from http://ct1.addthis.com/static/r07/core085.js on line 2.
I have asked support but have had no luck yet. Any ideas as to what is causing this would be helpful! Thanks in advance!
Edit: I currently have the code above in a template in the app.
I had a deeper look at the addthis widget and IMHO the code loaded from the script does some nasty things like creating a script tag nor an iframe etc. and being inside a handlebars template the DOM manipulations that the widget script does won't work in tandem with ember.js, unless the team behind addthis does something to make there widget more integration friendly.
So I had a look at some alternative sharing widgets, and sharethis does basically the same as addthis but with one big difference - I got easily working with ember.js
Basically what I've done was to create a view for the widget, and inside the didInsertElement the widget initialization is called:
App.WidgetView = Ember.View.extend({
templateName: 'widget',
didInsertElement: function() {
stLight.options({publisher: "ur-733dae74-7b06-4fef-3f54-f60dce5ce03e", doNotHash: false, doNotCopy: false, hashAddressBar: false});
}
});
Then in another template the widget can be easily used by simply doing:
{{view App.WidgetView}}
The widget template looks like this:
<script type="text/x-handlebars" data-template-name="widget">
<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_email_large' displayText='Email'></span>
</script>
Have a look here for a working demo.
Disclaimer: Although my answer does not fix directly your problem, but maybe it helps you take a different approach by using a different sharing widget, because I guess you won't abandon ember.js only because some obscure programmed widget does not work correctly.
Hope it helps.

jquerymobile popup function is not working in the onClick

I have:
<div data-role="page" class="type-interior">
<div data-role="content" class="ui-body">
<a href="#transitionExample" data-role="button" data-rel="popup">
Pop Up
</a>
<div data-role="popup" id="transitionExample">This is a POP UP.</div>
<a href=# onClick="$('transitionExample').popup('open')"
data-rel="popup">OpenPopUp</a>
</div>
</div>
If I click on Button It Works, but if I use Javascript method .popup('open'), nothing happens. Popup is not showed.
What is happening?
I use, JqueryMobile 1.2.0 and JQuery 1.8.2.
$('transitionExample').popup('open')
should be
$('#transitionExample').popup('open')
for more info see: http://api.jquery.com/id-selector/
then you better bind your link in the .ready(), you should try to avoid Javascript code in the DOM for better maintainability.
OpenPopUp
and between your <script></script> tags
$(function () {
$("#myButton").click(function () {
$('#transitionExample').popup('open');
});
});
I ran into this thread whilst trying to find the reason for precisely the same behavior - clicking on a data-rel='popup' link was working but the popup() method was not showing anything. After much frustration I eventually discovered that the issue was down to the fact that I had coded
$('#popupid').popup(open)
NO QUOTES! No one complained - Chrome did not throw up an error but the popup call did nothing.
Hopefully, this will help someone else one day.

window.location not work properly

Hi all I am navigating from one html page to another as:
window.location = "test.html";
In test.html I have header as:
<script type="application/javascript">
function redirect()
{
alert("inside redirect:");
//window.location = url;
//history.back();
history.go(-1);
return false;
}
</script>
<div data-role="navbar">
<ul>
<li> Go Back</li>
<li> <a onclick="redirect()" data-icon="back" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Back1</a></li>
</ul>
</div>
But here both back buttons (Go Back and Back1) are not working. If I use $.mobile.changePage('test.html') to navigate between pages then both Back buttons work. Why they are not with windows.location?
I want to develop this application for B-Grade browser which are not support ajax. Therefore I cant use $.mobile.changePage('test.html').
Any help will be appreciated. Thanks.
This Blackberry OS 5 browser has lots of issue. Initially i also tried to do what you are doing right now. But later i think so you will have to think of some other approach which is better. Here is how i solved it
First of all add these lines before loading the jquery-mobile script like this
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>
Then i used the Single Html concept. In this concept i had to load my script just once and i could make use of jquery-mobile's changePage. When i had many html pages then i has to wait for some seconds as loading and unloading of scripts took place. Avoid that, Its unnecessarry.
Have all the pages with in the same Html like this
<div data-role="page" id="page1">
<div data-role="page" id="page2">
.
.
.
Then after that you can easily do a changePage like this
$.mobile.changePage("#page1", {
transition : "slide"
});
I hope you take the right approach.
Why not use window.location.replace("test.html");
try:
window.location.href = "test.html";
OR:
window.location.assign("test.html");
SEE REFERENCE
In jQuery mobile you can turn of ajax by setting some initiation variables. You need to load this script before you load jQuery mobile
$(document).bind("mobileinit", function(){
//apply overrides here
$.mobile.ajaxEnabled = false;
});
With ajax turned off you can now still use your $.mobile.changePage().
Now to create a back button all you have to do is give the link an attribute of data-rel="back"
<li>Go Back</li>

AddThis in AJAX

I'm trying to get Addthis to work in a div tag that's being loaded with AJAX I read on their site I had to render the toolbox with javascript http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
I'm using the code below but it doesn't seem to be working, any help with the function is appreciated. Thanks.
<div id="toolbox"></div>
<script type="text/javascript">
addthis.method('#toolbox', [configurationObject], [sharingObject]);
</script>
Since I don't know that much about your particular problem, I'd start start by looking into addthis.toolbox('.yourClass');
If you have a typical toolbox like this...
<div id="myToolbox" class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
Once your ajax content has finished loading into the dom you could do the following...
addthis.toolbox('#myToolbox');
However, watch out for this!
Don't put your like button inside your toolbox because when you call the addthis.toolbox method it will create a duplicate like button iframe for some reason. It must be a bug but it took a couple years off my life. Instead you should put it in its own toolbox containing div and call the method on it as well.
In the case of multiple toolboxes
you should probably use a class instead. See the following code for the final example.
html
<div class="toolbox">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:userid="myCompany"></a>
</div>
<div class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
javascript:
//on complete of ajax load
addthis.toolbox('.toolbox');
var addthis_config =
{
ui_hover_direction: -1
, ui_offset_left: offsetLeft
, ui_offset_top: -45
, ui_delay: 300
, ui_click: false
};
var addthis_share =
{
url: 'http://www.example.com',
title: 'example title'
}
addthis.method("#Button2", addthis_config, addthis_share);
Visit http://www.addthis.com/forum/viewtopic.php?f=5&t=14137 this may help you.
method is not a valid function of the addthis object. It's a placeholder in the example for you to use a real method name.
You are never really calling anything as you aren't waiting for the DOM to ready:
<script type="text/javascript">
$().ready(function () {
addthis.method('#toolbox', [configurationObject], [sharingObject]);
});
</script>

Categories