Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

jQuery Bookmarklet Template w/ Async Loading

View bookmarklet.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
// You create your bookmarklet by instantiating
// a new Bookmarklet function, then pass in the options like so.
// This example checks to see if the var is already defined, and makes
// sure not to overwrite it. This could happen if the user clicks on
// the bookmarklet more than once.
 
MyBookmarklet = MyBookmarklet || (MyBookmarklet = new Bookmarklet({
// debug: true, // use debug to bust the cache on your resources
css: ['/my/style.css'],
js: [],
// jqpath: '/my/jquery.js', // defaults to google cdn-hosted jquery
ready: function(base) { // use base to expose a public method
base.init = function(){
// doStuff();
}
base.init();
}
}));
 
 
/**
* jQuery Bookmarklet - version 2.0
* Author(s): Brett Barros, Paul Irish, Jon Jaques
*
* Original Source: http://latentmotion.com/how-to-create-a-jquery-bookmarklet/
* Modified Source: https://gist.github.com/2897748
*/
function Bookmarklet(options){
// Avoid confusion when setting
// public methods.
var self = this;
 
// Merges objects. B overwrites A.
function extend(a, b){
var c = {};
for (var key in a) { c[key] = a[key]; }
for (var key in b) { c[key] = b[key]; }
return c;
}
 
function loadCSS(sheets) {
// Synchronous loop for css files
$.each(sheets, function(i, sheet){
$('<link>').attr({
href: (sheet + cachebuster),
rel: 'stylesheet'
}).prependTo('body');
});
}
 
function loadJS(scripts){
// Check if we've processed all
// of the JS files (or if there are none).
if (scripts.length === 0) {
o.ready(self);
return;
}
 
// Load the first js file in the array.
$.getScript(scripts[0] + cachebuster, function(){
// asyncronous recursion, courtesy Paul Irish.
loadJS(scripts.slice(1));
});
}
 
function init(callback) {
if(!window.jQuery) {
// Create jQuery script element.
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = o.jqpath;
document.body.appendChild(script);
 
// exit on jQuery load.
script.onload = function(){ callback(); };
script.onreadystatechange = function() {
if (this.readyState == 'complete') callback();
}
} else {
callback();
}
}
 
var defaults = {
debug: false
, css: []
, js: []
, jqpath: "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
}
 
// If we don't pass options, use the defaults.
, o = extend(defaults, options)
 
, cachebuster = o.debug ?
('?v=' + (new Date()).getTime()) : '';
 
 
// Kick it off.
init(function(){
loadCSS(o.css);
loadJS(o.js);
});
};

In HTML pages without any

Owner

@granci, I updated the script to put css at the top of the body, but not necessarily in the head. I think this will resolve the problem you've pointed out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.