I was wondering if its possible to provide an alternate link if the CDN cannot be reached. For instance for bootstrap provide the tags to download from the CDN and if that cannot be reached provide the locally stored bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- if cannot be downloaded -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
I would like to use this model because browsers cache CDN files so that speed could be improved by using this (also their download times are probably better than my servers). Though on the off chance that someone is connecting via the local network but not connected to the internet and does not have one of these cached versions I would like an alternative. Is this possible?
http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/
That link answers both parts of the question.
For your example, with fallback.js:
HTML:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
JS:
cfg({
"libs": {
'css$bootstrap': {
'exports': '.col-xs-12',
'urls': 'css/bootstrap.min.css'
},
'bootstrapjs': {
'urls': [
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js',
'js/bootstrap.min.js'
]
}
}
});
req(function(css$bootstrap, bootstrapjs){ //Everything is loaded });
It appears the article above is a bit outdated on the fallback.js API, so I've included the example based on current state. https://github.com/dolox/fallback/blob/master/README.md
I just used this for a site i've been building lately, let me know if this is what you had in mind:
<script type="text/javascript" async src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="/path/to/file"><\/script>')
</script>
Perhaps you can use something similar for your bootstrap loading, i'll look more into it in the men time, let me know if it helps.
Edit:
Also found this thread question someone else made, could be of use:
how to fallback twitter-bootstrap cdn to local copy
For the css part, see the answer here: How to implement a CDN failsafe for css files?
For the js part, see: Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
TL;DR:
<link rel="stylesheet" type="text/css" href="cdnurl/styles.css" onload="alert('loaded')" onerror="javascript:loadCSSBackup()" />
<script type="text/javascript>
function loadCSSBackup(){
var css = document.createElement("link")
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", 'backup/styles.css');
document.getElementsByTagName("head")[0].appendChild(css);
}
</script>
For loading a fallback JS, you can use (taken from the answer above):
<script type="text/javascript" async src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="/path/to/file"><\/script>')
</script>
Related
I was confused whether to use cdn or not , so i went through these links link1 and link2
And they told to use local scripts as a fallback from cdn
So i kept this code
<script src="https://secure.skypeassets.com/i/scom/js/skype-uri.js" async></script>
<script>
window.Skype || document.write('<script src="javascripts/skype-uri.js" async>\x3C/script>')
</script>
<!-- -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
window.angular || document.write('<script src="javascripts/angular.min.js">\x3C/script>')
</script>
<!-- -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
<script>
window['angular-animate'] || document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
</script>
<!-- -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>
<script>
window['angular-aria'] || document.write('<script src="javascripts/angular-aria.min.js">\x3C/script>')
</script>
<!-- -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
<script>
window['angular-material'] || document.write('<script src="javascripts/angular-material.min.js">\x3C/script>')
</script>
The issue is it gets local files and gets same file from cdn too.
When i hit the page and monitor through charles proxy (or any other network monitoring tool)
Kinda weird but am not able to figure out the issue here.
The fallback for script using window.angular || /* fallback code*/ looks fine and should work (works for me).
Keep in mind the test doesn't refer to the script name but checks if a known global variable that should be set if the script has been loaded in fact exists. So for other scripts you need to know what global variables they set (if any) or what methods/properties they add to existing objects and check for them.
BTW the async flag on your Skype script will break this kind of test because there's a good chanse the check for Skype will execute before the browser fetches and parses the external script.
As for the stylesheet fallback this works fine (even when the local copy also fails - browsers somehow handle this problem ;)):
<link rel="stylesheet" href="//cdnurl/style.css" onerror="this.href='localcopy.css'" />
Edit: to check for angular modules you can use angular.module('moduleName') in a try-catch block (inspired by this answer):
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
<script>
try {
angular.module('ngAnimate')
} catch(e){
document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
}
</script>
I'm having some issues with prettyPhoto on one of my clients website. Here is the link for reference: http://www.browardmicrofilm.com/pages/kodak-vizit-essential.html
I've used prettyPhoto on multiple other websites without issue. However for some reason, this website just doesn't want to perform the script properly. Instead of opening an image in the lightbox clone, it simply opens it in a new page. Perhaps it has something to do with the hosting but either way, wanted to see what professionals like you think!
I'm using Firefox 26 (Mac version) and I used Firebug to determine the error:
TypeError: $ is not a function
$(document).ready(function(){
I've tried numerous solutions, including one that made me change "$" to "window.jQuery and then for some reason the next line in the code creates the same error.
Here's the my code for those of you that wish to skip the entire page source code:
In my header:
<link href="../prettyPhoto.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
The final script just before the closing body tag:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_rounded',
});
});
</script>
I know my links are good, which is why I'm not including them.
Vanilla jquery needs to be declared before any library built on top of it
<!--first, jquery-->
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<!--then the rest-->
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Error below is saying that jQuery is not loaded.
TypeError: $ is not a function
$(document).ready(function(){
Check your resources, my guess is that your paths are case sensitive and libraries are not being properly loaded.
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
Check your resources.
Make sure that jQuery is loaded before the plugin is loaded.
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Ultimately I abandoned the prettyPhoto javascript and went with an alternative. Lightbox 2.0:
http://lokeshdhakar.com/projects/lightbox2/
It works just as I'd like and no problems.
I already have the following for the JS files:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">!window.jQuery && document.write(unescape("%3Cscript src='/app_shared/script/jquery-1.6.1.min.js' type='text/javascript'%3E%3C/script%3E"))</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">!window.jQuery.ui && document.write(unescape("%3Cscript src='/app_shared/script/jquery-ui.min.js' type='text/javascript'%3E%3C/script%3E"))</script>
How can I go for something similar for a theme?
I can download it from the cdn like this:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
But how can I detect if the file was downloaded, to reference a local copy on failure?
I know how to add the local copy programatically with jQuery, but I don't know how to check whether the CSS download succeded. Also, are <link> tag downloads blocking, or are they async? That'd be a problem, too.
You could do a style check where a font should be a particular family and then check against that family name. If the name is not what you expect then load the local copy.
You can also try something like Get a CSS value from external style sheet with Javascript/jQuery
<style>
p {color: blue}
</style>
$(document).ready(function() {
var $p = $("<p></p>").hide().appendTo("body");
alert($p.css("color"));
$p.remove();
});
I'm working on a modeling website for my girlfriend and she wants a large slideshow as background on the website. I used the JonDesign Gallery for that, which works nicely for this purpose and is relatively light-weight.
Now, for the contact form I'd like to use something Lightbox/Slimbox style. Slimbox works with Mootools, which is also used by JD Gallery. Unfortunately, Slimbox seems to conflict with JD Gallery and I can't figure out why. I checked the CSS for conflicts, but there are no elements ID'd or class'd twice. I looked at the code and couldn't immediately spot a conflict. I'm sure I missed something. I can't figure it out because I don't have much experience with JavaScript let alone Mootools or Slimbox.
Here's my (relevant) code.
Head
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/mootools.js"></script>
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.transitions.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/slimbox.js"></script>
Body
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false,
delay: 6000,
embedLinks: false,
showInfopane: false,
});
}
window.addEvent('domready', startGallery);
</script>
<div id="myGalleryBox">
Contact her
</p>
</div>
<div class="content" style="z-index:1;">
<div id="myGallery">
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<img src="images/pic1.jpg" class="full" />
</div>
</div>
</div>`
As far as I can tell, the conflict is between these lines:
<script type="text/javascript" src="scripts/mootools.js"></script>
and
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
in the head.
I'm using unmodified code from JD Gallery and SlimBox. Any help would be much appreciated!
The only problem I can see is an extra comma at the end of the gallery options:
var myGallery = new gallery($('myGallery'), {
...
showInfopane: false, <--- Right Here
});
At least Firefox and Chrome ignore the trailing comma, but it's a syntax error in Internet Explorer. After I fixed that, your code worked fine for me in Chrome, Firefox, and IE.
Like Anurag mentioned in the comments, you are including MooTools twice. It didn't cause any problems for me, but you can remove the scripts/mootools.js script, and it should still work.
In JQuery you can choose a new name for the JQuery function to avoid conflicts with other libraries, e.g. Prototype. Mootools might support something similar.
Alright, it's working now. Here's what's going on: I removed the extra comma as per Matthew Crumley's suggestion (+1). Per Anurag, I checked Chrome's developer tool (I completely forgot about that - working late = bad.) It didn't show any errors. Then I redownloaded the SlimBox files and tried the demo, which didn't work. Then I noticed that SlimBox had two folders with its SlimBox JS files: js and src. js is the correct folder with the correct library, src doesn't work for whatever reason. I changed the website to use the file from the js folder and it's now working.
Bottom line: No script conflict after all, SlimBox was just distributed in a weird way. Thank you everybody for your help!
I faced the same issue when I had to use two versions of jquery in the same page.
<script type='text/javascript'>
// This script prevent the conflict between older and newer versions of jquery
var $jq = jQuery.noConflict(true);
</script>
And then you can reference your different version of jquery by using something like this :
var $noborders = $jq('.noborders');
I hope something like this will solve your issue too.
I've noticed for quite a long time that strange domains such like jsev.com, cssxx.com appered in my firefox status bar from time to time, I always wonder why so many web pages contains resources from these strange domains. I googled it, but found nothing. I guess it's some kind of virus which infect the servers and insert the code. Here is a sample taken from page header of http://www.eflorenzano.com/threadexample/blog/:
<script language="javascript" src="http://i.jsev.com./base.2032621946.js"> </script>
<body onmousemove="return fz3824();">
<LINK REL="stylesheet" TYPE="text/css" HREF="http://i.cssxx.com./base2032621947.css">
<SCRIPT LANGUAGE="JAVASCRIPT" SRC="http://i.js.com./base2032621947.js"></SCRIPT>
<SCRIPT LANGUAGE="JAVASCRIPT">
function getuseragnt()
{ var agt = navigator.userAgent.toLowerCase();
agt = agt.replace(/ /g, "");
return agt;
}
document.write("<LINK REL='stylesheet' TYPE='text/css' HREF='http://i.css2js.com./base.css" + getuseragnt() + "_2032621947'>")
</SCRIPT>
edit: I am on a debian box, only on firefox I see this code, I just tried opera, this code doesn't appear in opera, really strange, never heard of firefox having such problems.
This happens if you are using one of Princeton university's CoDeeN project proxy servers. CoDeeN is an academic testbed content distribution network. When you browse a web page using CoDeeN proxy it injects some HTML code to the site's original HTML and redirects requests sent to pseudo adresses to the project's servers.
Some of the pseudo addresses are:
http://i.cssxx.com./base0877861956.css | i.cssxx.com.
http://i.jsev.com./base.0877861955.js | i.jsev.com./
http://i.html.com./base0877861956.html | i.html.com.
http://i.js.com./base0877861956.js | i.js.com./
http://i.css2js.com./base.css | i.css2js.com.
Some or all CoDeeN's proxy servers appear as anonymous proxy servers list.
CoDeeN project page: http://codeen.cs.princeton.edu/
It may be a browser worm installed on your machine. Should scan entire system.
I see nothing unusual about that page. Check your system. Here's the code I received:
<head><title>Tutorial 2</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://media.eflorenzano.com/css/example2.css">
<script type="text/javascript" src="http://media.eflorenzano.com/js/jquery-1.2.2.min.js"></script>
<script type="text/javascript" src="http://media.eflorenzano.com/js/jquery.form.js"></script>
<script type="text/javascript">
var _POSTER = '';
var _FORM = '<textarea id="id_comment" rows="10" cols="40" name="comment"></textarea>';
var _FORM_URL = '/threadexample/threadedcomments/comment/9/1/json/';
var _REGISTER_URL = '/threadexample/register';
var _CHECK_EXISTS_URL = '/threadexample/check_exists';
var _LOGIN_URL = '/threadexample/login';
var _IS_FOCUSED = null;
var _ARROW_IMG_BASE = 'http://media.eflorenzano.com/img/arrow_';
var _VOTE_BASE = '/threadexample/vote/';
</script>
<script type="text/javascript" src="http://media.eflorenzano.com/js/example2.js"></script>
</head>
DNS poisoning?
I agree with Mediashakers
That cause you're using CoDeeN project proxy servers
Try use no proxy, it will see the difference
That could very well be the case, as this does kinda look like some shady code. What if you use a different computer, does the source look the same?
Hm ... No solution here, but as a datapoint: It doesn't look at all like that for me (Firefox 3.0.3, in Gentoo Linux). I get the following interesting elements in the header:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://media.eflorenzano.com/css/example2.css">
<script type="text/javascript" src="http://media.eflorenzano.com/js/jquery-1.2.2.min.js">
<script type="text/javascript" src="http://media.eflorenzano.com/js/jquery.form.js">
[...]
<script type="text/javascript" src="http://media.eflorenzano.com/js/example2.js">
This looks fairly clean to me; four references to resources on the same server, plus one CSS from what looks like Yahoo!. Strange, I wonder why it looked so different for you. Hopefully some true web wizard can shed some light on that.
Also, I notice that all the weird-looking URI:s have domain names that end in a period, which I don't think is even legal. I Googled it, and found some old Digg thread, but was unable to locate the exact comment that mentioned the weird-looking URI:s. Strange.