Google Searchbox not Validating as HTML5 - javascript

I have added the Google searchbox to my HTML5 site. When I go to the W3C validator I get an error: element gcse:search not allowed as child of element div in this context. I was instructed by Google to put the script in a div, and cannot get the searchbox to work without it. Can anyone help at all? I imagine it is a problem which must arise all the time. My code is below. Many thanks!
<div id="searchbox">
<script>
(function() {
var cx = '014531685129972083622:vk5kxnojpx0';
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>
<gcse:search> </gcse:search>
</div>

I imagine it is a problem which must arise all the time
Might that be the reason, perhaps, they covered this in their official documentation …?
https://developers.google.com/custom-search/docs/element#html5:
HTML5-valid div tags
You can use HTML5-valid div tags as long as you observe these guidelines:
The class attribute must be set to gcse-XXX
Any attributes must be prefixed with data-.
For example:
<div class="gcse-searchbox" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="search" >

Related

Stop Analytics Code from Blocking other Script Execution

I am using the recommended implementation of the tracking code.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_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);
})();
</script>
I often get this wait on load of my web pages as "waiting for www.google-analytics.com". Initially I thought it was my office firewall, but I guess it is common issue. search
My bigger concern is all the scripts on my page stop execution during this wait... which never goes away. How to fix this ?
I thought async means it will not interfere with other scripts on page.
The solution
Since you are using Jquery, wrap the google analytics code in a jQuery's window load handler:
$(window).load(function(){
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_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);
})();
});
The explanation
In a comment, you pointed out that you use http://supersimpleslider.com/ and that it would not work as long as google analytics was hanging. A look at the source of that library shows this at line 86:
$(window).load(function() {
I decided to test event firing by simulating a hanging resource.
ga.php
<?php
sleep(5);
exit('content.log("ga.php available")');
?>
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', function(){
console.log('window-load');
}, false);
window.addEventListener('DOMContentLoaded', function(){
console.log('window-DOMContentLoaded');
}, false);
</script>
<script type="text/javascript">
$(window).load(function() {
console.log('window-jquery-load');
});
$(window).ready(function() {
console.log('window-jquery-ready');
});
</script>
<script type="text/javascript">
document.addEventListener('load', function(){
console.log('document-load');
}, false);
document.addEventListener('DOMContentLoaded', function(){
console.log('document-DOMContentLoaded');
}, false);
</script>
<script type="text/javascript">
$(document).load(function() {
console.log('document-jquery-load');
});
$(document).ready(function() {
console.log('document-jquery-ready');
});
</script>
<script type="text/javascript">
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'ga.php';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Console output
16:21:19.123 window-jquery-ready
16:21:19.124 document-jquery-ready
16:21:19.125 document-DOMContentLoaded
16:21:19.126 window-DOMContentLoaded
16:21:24.092 ga.php available
16:21:24.095 window-load
16:21:24.096 window-jquery-load
Conclusion
native DOMContentLoaded is not affected by hanging resources.
jQuery's ready is not affected by hanging resources.
window load will wait for all resources to complete.
document load will never fire (could be browser dependent though)
Since supersimpleslider is waiting for a load event on window, a hanging ga.js will impact its execution. This might also be the case for other scripts.
By inserting google analytics only at window load, we put all the scripts on the same level.
Console output after window load wrapping:
16:47:27.035 window-jquery-ready
16:47:27.036 document-jquery-ready
16:47:27.036 document-DOMContentLoaded
16:47:27.037 window-DOMContentLoaded
16:47:27.043 window-load
16:47:27.044 window-jquery-load
16:47:32.052 ga.php available
there are two ways I know of for running non blocking js:
1- put your script tag before the closing tag of body
2- add 'async' attribute to the script, the end result will look like, note that this is for remote file inclusions:
<script src="script.js" async></script>
and the is the async you are finding in ga.aync=true, it prevents the blocking of the page rendering until the file is loaded, but it has no effect of what happens after the code is run, so, in other words, the created script tag (by running that code' allows the browser to do its job even while the file is being downloaded.
the code you provided, merely, creates a script tag to include ga.js before the first script tag in the page(which will be in the head normally).
so with that out of the way, the only option left is to run your script before the closing tag of the body, so that it runs after the page is parsed.
On another note, my advice to you is to learn about something called 'critical rendering path' of the browser, it explains why some stuff are blocking and best practices for using external files on your pages.
I hope this helped

canonical url for google+ is not working in repeat tag

I have multiple sub pages links in my page i am using canonical link to share my pages but for all sub pages it is showing same link
<link rel="canonical" data-href="http://www.website.com/{!object.name}" />
<div class="g-plusone" data-size="medium" ></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
I am using this code in apex:repeat tag but for all records the first value url is showing. how to do this?
found some code through google documents and its working fine for me.
instead of using link used
<div class="g-plusone" data-href="http://www.website/{object.name}" data-size="medium" ></div>

Need website help, Adding a shop. Shopify

I am inserting a shopify store into my website. They have a widget they use that pulls up a collection and you can add to cart and check out. The embedded code they gave me is below and should be inserted between .
<script type="text/javascript">
var ShopifyStoreConfig = {shop:"glow-station-shop.myshopify.com", collections:[14849869]};
(function() {
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
s.src = "//widgets.shopifyapps.com/assets/shopifystore.js";
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>
I then have to place the following code where I want them to click in my actual site.
<a href='#shopify-store'>View my Store</a>
My question is what do I need to change to that I can have multiple instances of this connecting to different products. An example would be a "view my store" and a "view my store2" button both connecting to different collections.
The "View my store2" code is the same as the 1st but the collections:[14849869] changes to a different number.
You could create a index.html with several iframes. Each iframe would have the code for its store and <base target="_parent" />

Google+ button broke tooltip

I have created my Portfolio and put there a Google+ button. The page is still unstyled and the broken tooltip is slowing me down. Where is the problem?
there is a conflicting style in your stylsheet css/style.css that is causing the problem.
If I get rid of that stylesheet ti works as it should.
I'm not sure where you go that code but you way want to replace it this : http://www.google.com/webmasters/+1/button/
<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Instead of:
<div class="g-plusone">
</div>
Try:
<g:plusone annotation="inline"></g:plusone>

Google +1 Button script not loading in local html file

I'm playing around with the new Google +1 button and I've attempted to set up a simple demo of it.
This is my code:
<html>
<head>
<title>Plus One</title>
</head>
<body>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone callback="plus_one_callback" href="http://www.testurl.com/"></g:plusone>
<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function plus_one_callback(){
alert('callback');
}
</script>
</body>
</html>
However it does not render the button and there is no error message in my console.
Here is a screengrab of my firebug net panel:
Anyone know why this happens?
It won't work because as of Firefox 3 you can't run external JS scripts locally. Or to be more exact, you'll run into problems when firefox sees "file://" in the url. This question was also answered here. It probably would work if you used another browser.
If you really need this kind of stuff to work locally, however, there is a solution. You can install WAMP or XAMPP to run a local server.

Categories