How to defer loading of a Norton Secure Site Seal? - javascript

I am displaying a Norton Secure Site Seal in a website and I would like to improve the page speed deferring the loading of the seal script. All the tries I've done failed and I found only this page where this is mentioned (link). Has anyone ever found a good workaround for this?
The deferred code I'm using to run my other scripts looks like this:
<script type="text/javascript">(function(d, s) {
var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.src = url;
js.id = id;
fjs.parentNode.insertBefore(js, fjs);
};
load('/js/scriptone.js', 'one');
load('/js/scripttwo.js', 'two');
}(document, 'script'));
</script>
In case you want to have a look to the site seal initialization script:
(I'm using the flash animated seal)
<script type="text/javascript" src="https://trustseal.verisign.com/getseal?host_name=www.undisclosed.com&size=S&use_flash=YES&use_transparent=YES&lang=en"></script>
obviously this will only display correctly in my website and I opted to change the domain name for privacy. I really want to avoid using iframe and if you find relevant I am also loading jQuery

This is killing my business too. Seriously... +2 to +20 seconds per page load. AFYS?
We are switching to hosting the image locally but still linking to the original URL on Norton. Don't do this. Mark this answer down. It's wrong. It's illegal. But it's practical.
https://trustsealinfo.verisign.com/splash?form_file=fdf/splash.fdf&dn=WWW.EXAMPLE.COM&lang=en
UPDATE:
Real solution is to:
Call 877-438-8776, x2, x1
Tell them seal is slow and you have > 10,000 visits per day on your site
They give you media kit to install on your own site

If you look at the code, they are using document.write.
The way I handle this is the following
document.write = function(s) {
document.getElementById('seal-wrapper').innerHTML += s;
}
Of course this is a very simple hack which only works when there's a single script which uses document.write and you know where you want it to be written to.

I've tried to load seal into a iframe and then put it to where it's intended to be. It works for me. With the help of jQuery. Here it is:
Create .js file (I called it hackseal.js)
$(function () {
if (typeof(vs_hack) !== 'undefined') {
return;
}
vs_hack = true;
var iframe = document.createElement('iframe');
var html = '<script src="url_to_verysign" type="text/javascript"></script>';
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();
iframe.onload = function () {
var copy = ['dn', 'lang', 'tpt', 'vrsn_style', 'splash_url', 'seal_url', 'u1', 'u2', 'sopener', 'vrsn_splash', 'ver', 'v_ua', 're', 'v_old_ie', 'v_mact', 'v_mDown', 'v_resized'];
for (var copy_i in copy) {
window[copy[copy_i]] = iframe.contentWindow[copy[copy_i]];
}
$('script#seal-sign').replaceWith(iframe.contentWindow.document.body.innerHTML);
}
});
Change the original code from this
<script type="text/javascript" src="url_to_verysign"></script>
to this
<script id="seal-sign" type="text/javascript" src="url_to_hackseal.js"></script>

Related

Javascript and Responsive Design

I have this piece of javascript for my responsive site (See below).
In a nutshell, I don't want it to display (meaning I don't want this javascript to execute) when the screen size is below 480 (mobile phone). How would I do that? I tried using display:none for the div that it's in, but the script still executes and the Hello Bar still shows. Any ideas? Thanks.
<script type="text/javascript" src="//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"></script>
Here's the website: http://www.thesandiegocriminallawyer.com
Here's the HTML (near the bottom):
<div class="hello_bar">
<script src="//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js" type="text/javascript">
</div>
Measure the screen width and only attach the hellobar script if its wider than 480:
Replace:
<script type="text/javascript" src="//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"></script>
With:
<script type="text/javascript">
var swidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if (swidth > 480) {
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js";
document.getElementsByTagName('head')[0].appendChild(s);
}
</script>
http://jsfiddle.net/xusH3/
There are 2 solutions I can think of:
Load the script dynamically by checking the width of the screen first and then loading the file in an asynchronous way if needed.
Wrap the content of your script file in a condition that is based on the width of the screen/document (the file will be loaded anyway but won't run anything if screen is below 480)
The first way is better, while the second can solve headache if you need your code to be available immediately when the page loads
A sample for loading script in an async way is:
<script>
function loadScript(url){
var js, fjs = document.getElementsByTagName('script')[0];
js = document.createElement('script');
js.src = url;
fjs.parentNode.insertBefore(js, fjs);
};
if(window.innerWidth>480){ //here you should check for the width (this check is not necessarily cross browser)
loadScript("//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js");
}
</script>

Execute contents inside <script> after loading the page in browser

In my htmlpage there is an script tag
Something like this
<script id="loadmenu"></script>
The "src" attribute for the above script element depends on the enviornment in which the web application is hosted.
So I wrote something like this
$(document).ready(function(){
$("#loadmenu").attr("src",SRConfig.WESHost + "/webapp/" + SRConfig.WESApp+ "/servlet/WPSNav?mod=iwswps&idkey=displayhome");
});
The script is being loaded fine from the specified source. But the script is loaded only after the document is being parsed and loaded in the browser.
Since I am using $(document).ready().
As the document is finished parsing, the script is not getting executed after being loaded. Is there any way I can execute the specific <script> tag
after the
web page is being parsed and loaded in browser?
It seems you jquery selector is not correct. It should be
$("#loadmenu").attr("src",SRConfig.WESHost + "/webapp/" + SRConfig.WESApp+ "/servlet/WPSNav?mod=iwswps&idkey=displayhome");
Insert script tag instead:
$(document).ready(function(){
var scriptTag = $("<script/>");
scriptTag.attr("src",SRConfig.WESHost + "/webapp/" + SRConfig.WESApp+ "/servlet/WPSNav?mod=iwswps&idkey=displayhome");
$("head").append(scriptTag);
});
or use a similar code of facebook.
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "Your URL";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'loadmenu'));
Take a look at Detect if page has finished loading if it helps you.
Basically you can use .load function with window to see if it's fully loaded and trigger your script after that.
Documentation:
http://api.jquery.com/load-event/
Is there a reason you are modifying the src attribute in javascript ?
If the script path to load is determined by the hosted web application, I'm guessing you could simply do something like:
<script id="loadmenu" src="${SRConfig.WESHost}/webapp/${SRConfig.WESApp}/servlet/WPSNav?mod=iwswps&idkey=displayhome"></script>
The ${} being replaced in your html template by your server side app.
I'm not familiar with the technology behind theses SRConfig.* so I could be totally wrong.

Adding Pinterest image hover widget after Ajax load

I am using the pinterest image hover widget to add the ability for users to pin images off my website to their pinterest accounts.
Widget found here: http://business.pinterest.com/widget-builder/#do_pin_it_button
(Click the image hover radio button under button type to see the one I am using.)
I have the pinterest button working fine on other pages on the website where no ajax is used to load any content using the code provided by pinterest:
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.setAttribute('data-pin-hover', true);
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
However where I am encountering a problem is when I am loading some content in a popup window via ajax and I need to have a pinterest button load with that content. I have tried not loading the pinterest code until the ajax request is complete but am having no luck so far. Have tried this:
<script type="text/javascript">
jQuery(document).ajaxComplete(function() {
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.setAttribute('data-pin-hover', true);
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
});
</script>
I am not loading the pinterest code anywhere else on this page until using the above method to load after ajax has inserted the extra content into the DOM. I have also tried a few other method's I have found it other topics around the interent but none have helped. I have not been able to find any other solutions that work specifically with the image hover widget so if anyone has had any luck with using it with Ajax before any advice would be awesome.
Thanks :)
I was having the same problem only with the "Any Image" button-type. What helped was this post.
Though I did not use the refreshPinterestButton()-function. I simply loaded the script
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
with the first page load and on subsequent ajax-calls I executed this part:
//remove and add pinterest js
pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
pinJs.remove();
js = document.createElement('script');
js.src = pinJs.attr('src');
js.type = 'text/javascript';
document.body.appendChild(js);
Hope it helps.

Using jQuery to insert Javascript code into a DIV

Okay, so I'm working on a responsive site and I'm trying to handle Adsense in the best way possible that doesn't get me banned! What I'd like to do is use jQuery to add in my Adsense code only if the browser width is less than 533px. This way, I can display a smaller ad that will fit the window properly and not break the layout. I'm having some trouble getting the Adsense javascript added though. This works:
(function($){
//detect the width on page load
$(document).ready(function(){
var current_width = $(window).width();
//do something with the width value here!
if(current_width < 533){
$('.ads').prepend("THIS IS WHERE I WANT THE ADSENSE CODE TO GO");
}
});
But when I include my Adsense code to replace THIS IS WHERE I WANT THE ADSENSE TO GO, it doesn't. This is the Adsense code:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1234567890";
/* Test Ad */
google_ad_slot = "1234567890";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
I've also tried to include the Adsense javascript code in a .html file and use jQuery.get and jQuery.getScript for a .html and .js file. I just can't get it to work.
I could do it with a simple PHP header detect, but I want the ads to display based on width, not device type.
Anybody know how this can be done?
(Reposted as no replies to previous question)
I'm not sure if this will work or not, but it's worth a shot:
/* these should be global */
google_ad_client = "ca-pub-1234567890";
/* Test Ad */
google_ad_slot = "1234567890";
google_ad_width = 250;
google_ad_height = 250;
$(function(){
//detect the width on page load
var current_width = $(window).width();
//do something with the width value here!
if(current_width < 533){
$.getScript('http://pagead2.googlesyndication.com/pagead/show_ads.js');
}
});
The problem you're facing is that Google doesn't really support AdSense ajax. The normal way of including adsense code uses the URL of the page where it lives in order to render the right content.
Now, suppose you could reduce the adsense code to a particular URL. You could do something like this:
// note, this url is just a suggestion, not something that will likely work
var url = 'http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-1234567890&ad_slot=1234567890&ad_width=250&ad_height=250';
var adsContainer = $('.ads'); // though, if there's only one, use id, not class
$.ajax({
type:'GET',
url:url,
async:true,
success:function(html) {
adsContainer.html(html);
return false;
},
error: function(html) {
adsContainer.html('SOME DEFAULT AD MESSAGE');
return false;
}
});
But I think this is almost assuredly the kind of thing that will get you in trouble with Google.
Google used to have an adsense ajax program:
https://developers.google.com/adsense-for-ajax/
But it is now "unavailable". The reason you can't put your code in an external .html or .php file and ajax on your own server is that the javascript doesn't get executed by an engine on the client side by the ajax call. You are injecting raw javascript into a page that has already been interpreted by the javascript engine.
Could you use node.js or some kind of server side javascript parser to serve your .html file? Maybe, but that's a lot to solve this problem.
My advice is this: include multiple, smaller ads that will look good if stacked on a big page, or tiled if crammed together on a small page.
Have you tried lading the external .js like this?
var script = document.createElement('script');
script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
script.type = 'text/javascript';
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);

Google Chrome/Windows/FB.Canvas.setAutoGrow issue

The issue is obvious here.
https://www.facebook.com/TabascoUK/app_202624839826809
Using Google Chrome on Windows XP, FB.Canvas.setAutoGrow miscalculates frame size by two pixels. I would report it as a bug, but (1) I didn't manage to reproduce the same behavior on all computers, even though they have the same setup. (2) I've looked at the all.js and it looks Okay – no obvious reason for the error.
I've tried reseting cache, updating browser, etc. But there still is 2px error.
What can be causing it?
I haven't had any issues long time ever since this was posted. But since Chuck Morris seems to be experiencing the same issue, I will share my experience.
First of, I had erroneous assumption that FB.Canvas.setAutoGrow can be called at any time in code. It made sense since it then starts interval, which should detect any DOM changes. Well, it isn't exactly that way.
Anyway, the trick is to load Facebook JS after the DOM is loaded. In my experience this helps to get around all glitches. If you are using jQuery, something like this will do.
$(function(){
window.fbAsyncInit = function()
{
FB.init({/*[..]*/});
FB.Canvas.setAutoGrow(91);
FB.Canvas.scrollTo(0,0);
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
});
Guy,
I really appreciate you following up on this, I was really hoping that your way was going to work in my setup, because it's a lot cleaner than my hack fix, but it's still miscalculating the iframe by 2pixels. Anyways, this is what I did just in-case if anyone runs into this.
window.fbAsyncInit = function() {
FB.init({/*[..]*/});
// Additional initialization code here
FB.Canvas.setAutoGrow(91);
FB.Canvas.scrollTo(0,0);
//FB.Canvas.setAutoGrow is miscalculating the height by 2 pixels in webkit browsers
//so we shorten the content by 2 pixels right away, and a second later if things were a little too slow
window.setTimeout(function() {
$("#footer").css("height", "74px");
}, 250);
window.setTimeout(function() {
$("#footer").css("height", "72px");
}, 1000);
};
I had the same issue and i found i was added
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
But in chrome you have to add by the following way
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
Different protocol not work in chrome always use https
or the best way could be
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>

Categories

Resources