I'm development a blog using django and I have included the addthis tool for include the share buttons. I'm including the addthis buttons in the posts detail page. I need to get the facebook shares count for the current blog post deetail. I'm using these steps, but I'm gettin this error in the console: ReferenceError: addthis is not defined.
The addthis code is loaded remotely then, I think that my js is not running because it runs before the addthis script load is complete. How can I fix it?
{% block js %}
<script type="text/javascript"src="//s7.addthis.com/js/300/addthis_widget.js#pubid=fdfs" async="async"></script>
<script src="{% static 'js/blog/blog_list.js' %}"></script>
<script>
$(function () {
addthis.sharecounters.getShareCounts('facebook', function(obj) {
console.log(obj);
});
})
</script>
{% endblock %}
You can wrap your function around window.load like below
$(window).load(function() {
addthis.sharecounters.getShareCounts('facebook', function(obj) {
console.log(obj);
});
})
This will ensure that the code will get executed once entire window is loaded. For further reading read this.
Related
I am using a loading screen with a spinner that is displayed before all contents in the window have loaded. It works well on all pages and the window loads very fast on webpages with less content but on one of my pages, I am loading many iframes that embed youtube videos. $(window).on('load', function(){}); doesn't trigger until all contents have loaded, including iframes. That means that loading takes a long time and the loading screen with the spinner is shown long after the browser has finished loading the HTML, CSS, JS, and all images. I want to use skeleton loading for the iframes after the HTML, CSS, JS, and all images have loaded to cut down on perceived load time. Is there a way to tell that the rest of the window has fully loaded but the iframes are still loading? This is what I am currently doing to remove the loading screen with the spinner:
<html>
<head>
</head>
<div class="spinner-wrapper">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<body>
{% for video in range(videos|length) %}
<iframe class="yvideo" src="{{ "https://www.youtube.com/embed/%s" + videos[video]}.get("url") }}"></iframe>
{% endfor %}
<script type=module src="{{ url_for('static', filename='js/video.js') }}"></script>
</body>
</html>
videos.js:
$(window).on('load', function() {
preloaderFadeOutTime = 300;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
There can be multiple ways to solve this issue:
One simple approach can be to keep source of iframes empty initially and dynamically set source of iframes upon window.load.
Here sample code:
<script>
$(window).on('load', function() {
document.getElementById('myIframe').src = "your URL";
document.getElementById('myIframe2').src = "your URL";
preloaderFadeOutTime = 300;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
</script>
<iframe id="myIframe" src="" ></iframe>
<iframe id="myIframe2" src="" ></iframe>
EDIT:
If you cannot change the video.js file but can create your own js files which can interact with html on the page then do below in your custom js file:
//your external js
// first get collection of your iframes by class
var listOfIframes = document.getElementsByClassName("yvideo");
for (let item of listOfIframes) {
item.src = ""; // set them to empty.
}
window.addEventListener("load", function() {
//once page is loaded then populate the source with your json file.
for (let item of listOfIframes) {
item.src = "URLs from JSON";
}
});
Second approach:
Instead of calling hidePreloader() only at window.load. You can also check for the rest of the items in your page that if they are loaded or not. Once they are loaded, then you can use call hidePreloader()
I'm trying to get Slick Nav working and I'm currently testing it unsuccessfully on an empty page online. Locally it works perfectly, but it just doesn't want to run online - even if its the identical code. I have put the files from the "dist" folder from the slick nav download into a folder called "SlickNav" on my main folder on my FTP-Server (just like I did it locally). My test page contains the following:
<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="SlickNav/jquery.slicknav.min.js"></script>
// I already tried putting my URL before the link rel and the script src above but it didn't help
<script>
$(function(){
$('#menu').slicknav({
label: "MENU"
});
});
<ul id="menu">
<li><a class="scroll" href="#features">Features</a></li>
<li><a class="scroll" href="#usage">Usage Instructions</a></li>
<li><a class="scroll" href="#examples">Examples</a></li>
<li>View on Github</li>
</ul>
I'm trying this for over 3 hours now and I just don't see it anymore.. perhaps someone had similar problems or simply sees the (probably dumb) mistake, I would be eternally grateful..
Found the solution after inspecting the console: For the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
which I simply copy and pasted had to be changed to match the https of my site -> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
What is the appropriate way to include a Google AdSense banner in an Ember (Handlebars) template?
Say I have a template for a view that looks like this:
<script type="text/x-handlebars" data-template-name="myPageWithBanner">
<div id="mainContent">
Lorem ipsum main content
</div>
<div id="banner">
//Normally I would insert a script tag here, but that is not possible
</div>
</script>
Do I need to do this from code using pre-compiled templates, or is there a way I am not aware of?
I don't have a Google AdSense account, so I can't test this. But there are several major problems here:
You can't include a <script> tag inside a Handlebars template, not even if you use CDATA.
Google AdSense requires the AdSense JavaScript to appear verbatim in your page, or it's a TOS violation.
According to this StackOverflow answer, AdSense on AJAX sites is poorly supported at the moment.
The Google AdSense crawler won't be able to see any content on your page, so I doubt that ad-targeting is going to work. But see below for some things which might help crawlers.
But I'm going to assume, for the sake of simplicity, that you can discuss TOS issues directly with Google, and I'll just try to solve the technical problems. First, based on this StackOverflow answer, here's one possible solution that allows you to serve up Google's script verbatim:
<script type="text/x-handlebars">
<h1>Ember AdSense</h1>
{{outlet}}
<div id="ads"></div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<p>Hello, world!</p>
</script>
<div id="ads-load" style="display: none">
<!--
Apparently this needs to appear verbatim, exactly as Google gave it to
you, or it's a TOS violation.
-->
<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXX";
/* Test Ad */
google_ad_slot = "XXXXXX";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Then when our main template loads, we use jQuery to move the ads into our application template:
window.App = Ember.Application.create();
// Explicitly declare the view class for our application view.
App.ApplicationView = Ember.View.extend({
// Called once the view is rendered.
didInsertElement: function () {
$('#ads-load').appendTo("#ads").css("display", "block");
}
});
As for allowing the Google crawler to see you content, Google has official advice for AJAX applications, but I don't know whether that works with the AdSense crawler. Alternatively, if you're using pushState to update your displayed URLs, then you need to make sure that each of those URLs can be rendered by your server when requested by a crawler. (The Discourse forum software does exactly this.)
Please let me know if it gets you any closer.
I am just getting started with Backbone, and I have set up in a sample app the backbone dependencies (backbone, underscore, json2), and I started writing some backbone models, views, and such for my app.
My question is: suppose a user navigates to a page in my app. How does this page then initialize/call a backbone view? I was under the impression that I am supposed to include this kind of jQuery/js on the page that is loaded:
$(document).ready(function(){
window.app = new SampleApp.Views.Articles.ShowView();
new SampleApp.Routers.RootRouter();
Backbone.history.start();
});
And then I thought the Articles ShowView would run:
$(document).ready(function(){
SampleApp.Views.Articles || (SampleApp.Views.Articles = {});
window.SampleApp.Views.Articles.ShowView = Backbone.View.extend({
el: ".container",
events: {
'click .overlay': 'test'
},
initialize: function(){
//eg: this.model.bind('change', this.render, this)
},
render: function(){
$(".container").html('');
alert('got here');
},
test: function(){
alert('clicked a picture');
}
})
});
However, when I load the page, I don't get any of the functionality specified in my ShowView. (no alerts etc..). I realize that 'ShowView' is a misnomer, as it doesn't actually do anything yet. But if it is truly being called, then shouldn't these alerts run?
FYI I think I included all the files for backbone correctly:
<script src="{{ STATIC_URL }}js/underscore.js"></script>
<script src="{{ STATIC_URL }}js/json2.js"></script>
<script src="{{ STATIC_URL }}js/backbone.js"></script>
{# Models #}
<script src="{{STATIC_URL}}js/backbone/models/article.js"></script>
{# Views #}
<script src="{{STATIC_URL}}js/backbone/views/articles/show.js"></script>
{# Routers #}
<script src="{{STATIC_URL}}js/backbone/routers/root.js"></script>
In your example, you need something that invokes render on the ShowView instance. This can either be the responsibility of a route in your router, or you can just do it in the document ready handler that creates your view.
window.app = new SampleApp.Views.Articles.ShowView();
window.app.render();
I got the Facebook login/logout functionality to work, but had to do it with this un-elegant code like this:
<script type="javascript">
function loadfb() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/es_LA/all.js';
document.getElementById('fb-root').appendChild(e);
};
</script>
<body onload="loadfb()">
I plan on putting that Facebook login button on all the pages of the site, so I really don't want to have this function called onload of every page.
Is this function necessary? I don't completely understand what it is for. What is a better way to do this so I can take it out of my onload?
Thanks!
This code is for asynchronous loading of the Facebook JavaScript SDK. What it does is create the tag
<script async scr="https://connect.facebook.net/es_LA/all.js" ></script>
inside the <div id="fb-root"></div> element. While loading the SDK asynchronously is considered better practice, you can leave out this code and manually enter the script tag yourself - eg:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js"></script>
<script>
FB.init({
...
});
</script>