Bookmarklets are basically URLs that execute a JavaScript function.
Sometimes you want to rely on external JavaScript files (for instance jQuery), but Bookmarklets themselves cannot do that.
Bookmarklets can modify the current page though, and use those to load a script, wait until it is loaded, then continue executing.
Often that is OK as you want to operate the Bookmarklet on that page anyway, but be careful though that you do not mess up the page by loading an incompatible script: test, test, test!
Sometimes normal html tables are better suited than the more style friendly div tables, as they better suit the underlying data and are easier when you need column or row spans using the colspan and rowspan html attributes, explain semantics better, and … display as tables even without styling!
Converting from div tables to normal html tables is not as straightforward than from normal html tables to div tables.
So here are some links that helped me with both div tables and the conversion:
You could use JavaScript to create a table, loop through all the .row and .column elements in the div to popultate it, remove the div and append the table. Here’s something I threw together very quickly to get you started. (I commented out the line that removes the div so you can see both in the results).
Searching for the above, I ended up in some kind of YouTube vortex or time sink. This happens a lot when learning new stuff, so lets dump a bit more of what I learned along the way.
Watch your $
For checking for the availability of version of jQuery, lots of links I found use $(). or $. constructs which depend on the context of $ being the global alias for the jQuery. When mixing libraries, this global symbol (yes, unlike many languages $ and _ are valid and heavily symbols in JavaScript) can be used by any of these libraries and if you are not absolutely sure about your context, using them is a plain risk: [Wayback/Archive] Global Variables Are Bad.
Adding to the confusion, there are both the jQuery() and jQuery, which seem to be distinctly different. To add to the confusion, there is also jquery.
Since JavaScript is weakly typed, any typos are for you (in the sense of “you, the developer”) to figure out.
$ is just a shortcut for jQuery. The idea is that everything is done with the one global symbol (since the global namespaces is ridiculously crowded), jQuery, but you can use $ (because it’s shorter) if you like:
// These are the same barring your using noConflict (more below)
var divs = $("div"); // Find all divs
var divs = jQuery("div"); // Also find all divs, because
console.log($ === jQuery); // "true"
If you don’t want to use the alias, you don’t have to. And if you want $ to not be an alias for jQuery, you can use noConflict and the library will restore $ to whatever it was before jQuery took it over. (Useful if you also use Prototype or MooTools.)
Functions in JavaScript are objects. And like most objects in JavaScript, you can arbitrarily add properties to them. The $ function is just that, a function. So if you want to pop a property onto it and reference a jQuery collection, or reference, you can.
By adding the collection as a property on the $ function, it is one less variable in the current scope. You can examine the keys of the jQuery function before and after if you’d like to see how it affects the function’s topography and (enumerable) property list:
Calling the jQuery() method with no arguments returns an empty jQuery set (with a .length property of 0). Similarly, if an argument of null, undefined, an empty array ([]), or an empty string ("") is passed, the set contains no elements.
The .jquery property is assigned to the jQuery prototype, commonly referred to by its alias $.fn. It is a string containing the version number of jQuery, such as “1.5.0” or “1.4.4”.
Examples:
Determine if an object is a jQuery object
1
2
3
4
5
6
7
8
9
10
var a = { what: "A regular JS object" },
b = $( "body" );
if ( a.jquery ) { // Falsy, since it's undefined
alert( "a is a jQuery object!" );
}
if ( b.jquery ) { // Truthy, since it's a string
alert( "b is a jQuery object!" );
}
Get the current version of jQuery running on the page
1
alert( "You are running jQuery version: " + $.fn.jquery );
All objects have a prototype property. Whenever the interpreter looks for a property, it also checks in the object’s prototype if the property is not found on the object itself. jQuery uses the prototype extensively to add methods to jQuery instances. Internally, jQuery makes jQuery.fn an alias of jQuery.prototype so you can use either one (though plugin developers have standardized on fn).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var form = $("#myform");
console.log( form.clearForm ); // undefined
// jQuery.fn === jQuery.prototype
jQuery.fn.clearForm = function() {
return this.find( ":input" ).each(function() {
this.value = "";
}).end();
};
// works for all instances of jQuery objects, because
The jQuery.fn.extend() method extends the jQuery prototype ($.fn) object to provide new methods that can be chained to the jQuery() function.
This seems to be a construction that lots of people use to shoehorn truckloads of functionality into an almost global context. Doing that requires careful naming of each method, which the example does not make clear.
A really important jQuery documentation problem is the lack of a separate documentation entry stating jQuery.fn = jQuery.prototype which is in the source code (more recent versions have it on different lines):
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.
If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.
…
If necessary, you can free up the jQuery name as well by passing true as an argument to the method. This is rarely necessary, and if you must do this (for example, if you need to use multiple versions of the jQuery library on the same page), you need to consider that most plug-ins rely on the presence of the jQuery variable and may not operate correctly in this situation.
jQuery uses a format, $(selector).action() to assign an element(s) to an event. To explain it in detail, $(selector) will call jQuery to select selector element(s), and assign it to an event API called .action().
Before writing this post, I had no idea what jQuery was and why it had the word Query in the name (I wrongly associated it with a server-side JavaScript SQL library).
Prototypes are the mechanism by which JavaScript objects inherit features from one another.
…
Every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what’s called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.
…
Prototypes are a powerful and very flexible feature of JavaScript, making it possible to reuse code and combine objects.
In particular they support a version of inheritance. Inheritance is a feature of object-oriented programming languages that lets programmers express the idea that some objects in a system are more specialized versions of other objects.
Nearly all objects in JavaScript are instances of Object; a typical object inherits properties (including methods) from Object.prototype, although these properties may be shadowed (a.k.a. overridden). However, an Object may be deliberately created for which this is not true (e.g. by [Wayback/Archive] Object.create(null)), or it may be altered so that this is no longer true (e.g. with [Wayback/Archive] Object.setPrototypeOf).
Changes to the Object prototype object are seen by all objects through prototype chaining, unless the properties and methods subject to those changes are overridden further along the prototype chain. This provides a very powerful although potentially dangerous mechanism to override or extend object behavior.
The $ in the variable name is only part of the name, but the convention is to use it to start variable names when the variable represents a jQuery object.
var $myHeaderDiv = $('#header');
var myHeaderDiv = document.getElementById('header');
Now later in your code, you know the $myHeaderDiv is already a jQuery object, so you can call jQuery functions:
$myHeaderDiv.fade();
To get from the DOM-variable to the jQuery variable:
var $myHeaderDiv = jQuery(myHeaderDiv); //assign to another variable
jQuery(myHeaderDiv).fade(); //use directly
//or, as the $ is aliased to the jQuery object if you don't specify otherwise:
var $myHeaderDiv = jQuery(myHeaderDiv); //assign
$(myHeaderDiv).fade(); //use
To get from the jQuery variable to the DOM-variable.
There are 2 ways to check currently loaded jquery version: jQuery.fn.jquery and jQuery().jquery (shorthands: $.fn.jquery$().jquery). I wrote about it in details with links to jquery source code if you’d like to dig deeper
for the cases where your page is loading with other javascript libraries like mootools that are conflicting with the $ symbol, you can use jQuery instead.
For instance, jQuery.fn.jquery or jQuery().jquery would work just fine:
A while ago, I wanted to convert the dl delimited list htmlelement on a web page into a regular table so I could more easily reorder the data into cells.
So I ran the below bit of code in the Chrome Console after first putting the mentioned table with id here_table in the place where I wanted the table to be included:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
The content of the JQueryfibookmarklet is in the below gist:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
javascript:(function(){var el=document.createElement("div"),b=document.getElementsByTagName("body")[0],otherlib=!1,msg="";el.style.position="fixed",el.style.height="32px",el.style.width="220px",el.style.marginLeft="-110px",el.style.top="0",el.style.left="50%",el.style.padding="5px 10px",el.style.zIndex=1001,el.style.fontSize="12px",el.style.color="#222",el.style.backgroundColor="#f99";function showMsg(){var txt=document.createTextNode(msg);el.appendChild(txt),b.appendChild(el),window.setTimeout(function(){txt=null,typeof jQuery=="undefined"?b.removeChild(el):(jQuery(el).fadeOut("slow",function(){jQuery(this).remove()}),otherlib&&(window.$jq=jQuery.noConflict()))},2500)}if(typeof jQuery!="undefined")return msg="This page already using jQuery v"+jQuery.fn.jquery,showMsg();typeof $=="function"&&(otherlib=!0);function getScript(url,success){var script=document.createElement("script");script.src=url;var head=document.getElementsByTagName("head")[0],done=!1;script.onload=script.onreadystatechange=function(){!done&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")&&(done=!0,success(),script.onload=script.onreadystatechange=null,head.removeChild(script))},head.appendChild(script)}getScript("http://code.jquery.com/jquery.min.js",function(){return typeof jQuery=="undefined"?msg="Sorry, but jQuery was not able to load":(msg="This page is now jQuerified with v"+jQuery.fn.jquery,otherlib&&(msg+=" and noConflict(). Use $jq(), not $().")),showMsg()})})();
browsers can have length restrictions (some around 500 characters) forcing you to put the actual script on-line as externalised bookmarklet (which won’t work on body-less pages)
you will have to encode special characters (and URI decode them before beautifying existing JavaScript bookmarklets)
Bl.ocks (pronounced “Blocks”) is a simple viewer for sharing code examples hosted on GitHub Gist.
…
The main source for your example is in index.html. This file can contain relative links to other files in your Gist, such as images, scripts or stylesheets. And of course you can use absolute links, such as CDN-hosted D3, jQuery or Leaflet. To explain your example, add a README.md written in Markdown. (You can omit the index.html if you just want to write, too.)
tl;dr: Finding event handlers registered using jQuery can be tricky. findHandlersJS makes finding them easy, all you need is the event type and a jQuery selector for the elements where the events might originate.
Simply view any Markdown file on GitHub, then in your URL bar replace the github.com part of the URL with gitprint.com — your markdown file will be rendered to a beautiful, printable PDF.
Every once in a while I feel like I’ve been living under a stone for years. Today is such a day as gitprint has been around since 2014 and I only noticed it until now.
It’s cool as it prints any github page (including Markdown, RestructuredText, etc) as a PDF file.
I had a bit of trouble getting into CodeRage Mobile: somehow the confirmation email never reached the pluimers.com servers. After retrying today, @EmbarcaderoTech sent a GotoMeeting link that worked.
Later I will try to trace back about the mail issue (:
I’m in now, and since I usually loose the QA information, here is a dump of the QA for today so far.
Will try to find time for post editing and getting the URLs clickable.
The Wiert Corner - irregular stream of stuff 