Javascript and Responsive Design - javascript

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>

Related

Load External JavaScript on Desktop Only

I have went through a ton of answers, and I can not get anything to work for me. Please be patient and specific as I am a newbie when it comes to using JavaScript.
I am attempting to get an external JavaScript file to load on Desktop only. Below is the code I am currently using, but it is not working. Can someone please help me achieve this.
<script>
(function() {
if( window.innerWidth > 600 ) {
var theScript = document.createElement('script');
theScript.type = 'text/javascript';
theScript.src = 'www.siteminds.net/m/1.6/mind_loader.php?pid=y2w6z8B3N31&cast_id=v1532315&autoplay=1&avname=jackie&wc=1&avnum=15&band_type=av';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(theScript, s);
}
})();
</script>
I am placing this code in the head section, however, the script is not running.
The website is responsive using respond.js. I also added enquire.js in an attempt to use that method (which I also couldn't get to work)
Probably, the main issue is that you must include the protocol on the URL so:
'www.siteminds.net/m/1.6/mind_loader.php?pid=y2w6z8B3N31&cast_id=v1532315&autoplay=1&avname=jackie&wc=1&avnum=15&band_type=av'
needs to be:
'http://www.siteminds.net/m/1.6/mind_loader.php?pid=y2w6z8B3N31&cast_id=v1532315&autoplay=1&avname=jackie&wc=1&avnum=15&band_type=av'
Your code could also fail if there were not already some script tags. This version is not vulnerable to that:
<script>
(function() {
if( window.innerWidth > 600 ) {
var theScript = document.createElement('script');
theScript.type = 'text/javascript';
theScript.src = 'http://www.siteminds.net/m/1.6/mind_loader.php?pid=y2w6z8B3N31&cast_id=v1532315&autoplay=1&avname=jackie&wc=1&avnum=15&band_type=av';
var head = document.getElementsByTagName('head')[0];
head.appendChild(theScript);
}
})();
</script>
Note: a test for innerWidth > 600 is not even close to a fail-proof way to detect a desktop installation as even a tablet in landscape mode will pass that test.
This is what ended up working for me.
<script>
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
if ( width > 600) {
document.write('<script src="//www.siteminds.net/m/1.6/mind_loader.php?pid=y2w6z8B3N31&cast_id=v1532315&autoplay=1&avname=jackie&wc=1&avnum=15&band_type=av" async><\/script>');
}
</script>

php if - screen width - load js

I'm new to php. I have a doubt, don't know if this can be done, or if it should be done in another way or what.
I want to load a JS only if the screen size is higher than x size.
I wrote this but the JS is not being loaded (in fact I want to load a couple of JS):
<script language="javascript">
if (screen.width > 549) {
<script src='js/jquery-1.8.1.min.js' type='text/javascript'></script>
}
best regards!
php cannot detect a clients screen width/height, that all would have to be done client side.
function addScript(src){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
document.head.appendChild(script);
}
if(screen.width > 549){
addScript("js/jquery-1.8.1.min.js");
addScript("js/someOtherScript.js");
}
It's cleaner to detect the screen width in JavaScript. Also remember the screensize can change in a session. For example when a user resizes his screen.
Use this in your JavaScript file:
var width = document.body.clientWidth;
if(width > 549) {
} else if(width < 300) {
} else {
}
You cannot determine a clients' browser window size before a client has received a page with PHP.
Technically you could load a page, get javascript to send back the window size and then store it in the session for that user, but I don't really see the point. You're better off either always including the javascript file, or using a javascript library to conditionally add other scripts to the DOM.

How to defer loading of a Norton Secure Site Seal?

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>

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);

Problems with dynamically loading external js files on a onload event

I'm trying to get lightbox2 working with my site,
http://www.therussianfrostfarmers.com/
, however i seem to be having a problem with conflicting external js files. I'm not entirely sure i know where the problem is with this code, but i believe its got todo with how the onload events are called. the blog content on the homepage is loaded into iframe, the iframe is dynamically resized to fit the content using the onload event, but when i import the files required for lightbox2 (as per normal)....
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
....it cancels my updateSize() being called on the iframe. lightbox2 does still work.
I've narrowed the problematic js file to the prototype.js.
I've tried handling the sequence of events with the function dhtmlLoadScript().
Using the following code, the page loads properly, the iframe resizes properly, but then the page turns white and firefox loading icon just keeps spinning.
<script type='text/javascript'>
// function to resize iframe
function updateSize()
{
// get width
frame_x = $('#content').width() -5;
// apply width
$('#iframed').css('width', frame_x);
//get height
var the_height = document.getElementById('iframed').contentWindow.document.body.scrollHeight +120;
//apply height
document.getElementById('iframed').height = the_height;
}
// function to load external js files
function dhtmlLoadScript(url)
{
var e = document.createElement("script");
e.src = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}
// function to handle each event on onload callback
function callbackHandler()
{
updateSize();
dhtmlLoadScript("http://www.therussianfrostfarmers.com/ndxz-studio/site/js/prototype.js");
dhtmlLoadScript("http://www.therussianfrostfarmers.com/ndxz-studio/site/js/scriptaculous.js?load=effects,builder");
dhtmlLoadScript("http://www.therussianfrostfarmers.com/ndxz-studio/site/js/lightbox.js");
}
</script>
<iframe src='$url' frameborder='0' id='iframed' onload="callbackHandler()"></iframe>
Sorry if anything is unclear.
Thanks
Cam
something quick to check, see if the function name updateSize() is not getting remapped in prototype

Categories

Resources