Google Web Fonts loading after layout has rendered - javascript

I have a script on my page that rearranges a bunch of boxes into a pinterest like mosaic, using the excellent jQuery Masonry plugin. I call the box layout rendering method like this from the bottom of the page (just before ):
<script type="text/javascript">
$(function() {
wall.drawBoxes();
});
</script>
I also use google web fonts like this, just after the tag:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Montserrat::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
The problem is the boxes are rendered before the font has been loaded. And when the font has loaded, the boxes increase in size, making the rendered mosaic layout look like crap.
What can I do to prevent that?

You could add loading callback - it fires when all fonts have finished loading.
$(document).ready(function() {
WebFontConfig = {
google: { families: [ 'Montserrat::latin' ] },
loading: function() {wall.drawBoxes()}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
});

I added the fontactive callback which fires then a font has finished loading.
$(document).ready(function() {
WebFontConfig = {
google: { families: [ 'Montserrat::latin' ] },
fontactive: function(fontFamily, fontDescription) { wall.drawBoxes() }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
});

You can either move the web font call before the drawboxes call to load the fonts first.
I'd suggest moving your functions into a domready function. e.g.
You could also put the font call in the <head> to load the fonts before the DOM is loaded.
Could you just load the google stylesheet? <link href="http://fonts.googleapis.com/css?family=Lobster:regular" rel="stylesheet" type="text/css" >
$(document).ready(function() {
WebFontConfig = {
google: { families: [ 'Montserrat::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
$(function() {
wall.drawBoxes();
});
});

You could add the active callback - it fires when all fonts have rendered.
$(document).ready(function() {
WebFontConfig = {
google: { families: [ 'Montserrat::latin' ] },
active: function() {wall.drawBoxes()}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
});
For a reference on the events available, see the webfontloader readme.

It is simpler using css:
#import url(http://fonts.googleapis.com/css?family=....);

Related

Multiple google search results only not working

how to add multiple google search results only on one page:
my code is this code not working.. I want to view results only without search boxes depending on specific tags :
I'm trying on multiple codessome of them return one search result and ignore the second and some of them not return any thing
function gcseCallback() {
if (document.readyState != 'complete')
return google.setOnLoadCallback(gcseCallback, true);
google.search.cse.element.render({ gname: 'gsearch', div: 'results', tag: 'searchresults-only', attributes: { linkTarget: '' } });
var element = google.search.cse.element.getElement('gsearch');
element.execute('Specific tag');
};
window.__gcse = {
parsetags: 'explicit',
callback: gcseCallback
};
(function () {
var cx = '00999830932:uhtgng';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div id="results"></div>
function gcseCallback() {
if (document.readyState != 'complete')
return google.setOnLoadCallback(gcseCallback, true);
google.search.cse.element.render({ gname: 'gsearch', div: 'results22', tag: 'searchresults-only', attributes: { linkTarget: '' } });
var element = google.search.cse.element.getElement('gsearch');
element.execute('Other Tag');
};
window.__gcse = {
parsetags: 'explicit',
callback: gcseCallback
};
(function () {
var cx = '0099983093302884:uhti3ng';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div id="results22"></div>
I found the solution Put every search section in an separated then call the two iframes in your page

SyntaxError: function statement requires a name - jQuery error

What is wrong with my function name?
When I implement the following, I get a SyntaxError: function statement requires a name warning in my console. I have included jQuery earlier in the code, so it's not that.
function($) {
$(document).ready(function() {
$(':input').blur(function () {
if($(this).val().length > 0) {
_gaq.push(['_trackEvent', 'Modals', 'completed', $(this).attr('name')]);
}
else {
_gaq.push(['_trackEvent', 'Modals', 'skipped', $(this).attr('name')]);
}
});
});
})(jQuery);
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '*****']);
_gaq.push(['_setDomainName', '*****']);
_gaq.push(['_trackPageview'], ['_trackPageLoadTime']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
Can anyone help?
you are missing a bracket in line one, missing '('

Google Analytics: Uncaught ReferenceError: _gat is not defined

"_gat is not defined" error on page load
Tried suggestions from: Uncaught ReferenceError: _gaq is not defined (Google Analytics) but didn't help.
Here is my initial code snippet:
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
var pageTracker pageTracker = _gat._createTracker('UA-xxxxxxxx-1');
<button onclick="pageTracker._setCustomVar(1,'customvar1', 'value', 3);
pageTracker._trackPageview();">Fire</button>
Here's the solution (adding delay):
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
var pageTracker;
setTimeout(function(){
pageTracker = _gat._createTracker('UA-xxxxxxxx-1');
pageTracker._initData();
}, 1000);
<button onclick="pageTracker._setCustomVar(1,'customvar1', 'value', 3);
pageTracker._trackPageview();">Fire</button>
In my tests, I found that 1 second is a good delay period - anything less than 1 second yielded a much higher possibility of getting _gat undefined error.
Old question, I know, but I was able to fix my "_gat is not defined" error by including the first snippet inside the <head> tag. Then including the second snippet anywhere in the body on the page I want to track.
So this goes in the <head:
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
And this on any page you want to track:
pageTracker = _gat._createTracker('UA-xxxxxxxx-1');
pageTracker._trackPageview();

Custom events not being tracked in Google Analytics

Here is the script I'm using, copied directly from Google:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-CODE']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
function recordOutboundLink(link, category, action) {
try {
var myTracker=_gat._getTrackerByName();
_gaq.push(['myTracker._trackEvent', category , action ]);
setTimeout('document.location = "' + link.href + '"', 100);
}catch(err){}
}
</script>
And here is the link I'm trying to track:
Yet nothing has shown up in my events report for the last 3 days. Is there something wrong with my code?
There's problems with Google's Outbound links tracking example
Assuming you're only using one tracker (which it looks like in your code), the following will work:
function recordOutboundLink(link, category, action) {
try {
_gaq.push(['_trackEvent', category , action ]);
setTimeout('document.location = "' + link.href + '"', 100);
}catch(err){}
}

Google Analytics javascript

Here is a Google Analytics' code
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20366831-2']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
How my client side calls Google anonymous function?
It's called because the anonymous function ends with ()
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})(); // <--- The () calls the anonymous code
As you'll see, this code basically injects a script tag into the DOM, which gets run by the browser.
That snippet already call itself.
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
what it actually does is including the ga.js on your page, which is similar to this:
<script src="//google-analytics.com/ga.js" />
The rest is up to you to add event to the _gaq (google analytic queue). Then the event will automatically be processed.

Categories