Some of my favorite bookmarklets

_Bookmarklets_README.md

Bookmarklets! by Jeffrey A. Miller ( @xagronaut )

The following are some bookmarklets I've created:

• Add QR Code to page
• QR image hover
• QR link hover

Most of them were created with the assistance of the very helpful bookmarklet creator at mrcoles.com/bookmarklet.

Caveat about Mr. Coles' Bookmarklet Creator

The code it generates, if using the "include jQuery" option, points to jQuery version 1.7.1 from a CDN. It also includes a call to jQuery.noConflict(true). By calling the .noConflict() method with true as the first argument, it will supercede/replace any other instance of jQuery in the page. This can be bad and lead to page bugs after the bookmarklet is activated. You should edit the link offered by the generator and remove the true from the jQuery.noConflict() call.

Caveat about GitHub hyperlink stripping

Apparently, GitHub's Markdown processing strips javascript:-based hyperlinks for security reasons. That makes sense, but it also means that you'll need to download the Markdown(.md) files locally and open them in a previewing tool (e.g. VSCode) to enable the drag and drop functionality. As is, the instruction to "drag the following link to your browser bookmark toolbar" won't work on the Gist page itself.

addQrCodeBookmarklet.md

Bookmarklet: Add QR Code to page

var jQuery=$;($('#pageQrCode').length ? $('#pageQrCode') : $('<img id="pageQrCode" />').appendTo('body'))
  .attr('src', 'http://qrfree.kaywa.com/?l=1&s=8&d=' + encodeURIComponent(window.location))
  .css({position:'absolute',top:0,zoom:0.4,zIndex:100000,right:0})
  .each(function(){($(this) && $(this).length && $(this)[0].scrollIntoView && $(this)[0].scrollIntoView());})

The following bookmarklet was generated at mrcoles.com/bookmarklet.

Encoded, this looks like:

<a href="javascript:(function()%7Bfunction callback()%7B(function(%24)%7Bvar jQuery%3D%24%3B(%24('%23pageQrCode').length %3F %24('%23pageQrCode') %3A %24('<img id%3D%5C%22pageQrCode%5C%22 %2F>').appendTo('body')).attr('src'%2C 'http%3A%2F%2Fqrfree.kaywa.com%2F%3Fl%3D1%26s%3D8%26d%3D' %2B encodeURIComponent(window.location)).css(%7Bposition%3A'absolute'%2Ctop%3A0%2Czoom%3A0.4%2CzIndex%3A100000%2Cright%3A0%7D).each(function()%7B(%24(this) %26%26 %24(this).length %26%26 %24(this)%5B0%5D.scrollIntoView %26%26 %24(this)%5B0%5D.scrollIntoView())%3B%7D)%7D)(jQuery.noConflict())%7Dvar s%3Ddocument.createElement('script')%3Bs.src%3D'%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.7.1%2Fjquery.min.js'%3Bif(s.addEventListener)%7Bs.addEventListener(%22load%22%2Ccallback%2Cfalse)%7Delse if(s.readyState)%7Bs.onreadystatechange%3Dcallback%7Ddocument.body.appendChild(s)%3B%7D)()">Add QR Code to page</a>

Drag this link* to your browser bookmark toolbar:

Add QR Code to page

*(Sorry, GitHub strips out Javascript in hyperlinks, so you'll have to download the .md file and open it in another tool.)

qrImageHoverBookmarklet.md

Bookmarklet: QR image hover

$('img[src]')
    .hover(function(event){
        var $target=$(this);
        setTimeout(function(){
            if($target.is(':hover')) {
                var qr;
                (
                    ((qr = $('img#jmHoverQr')) && qr.length && qr)
                    ||
                    (qr = $('<img id="jmHoverQr"/>')
                    .css({
                        'position': 'fixed', 'top': 0, left: '48%', width: 100, height: 100, 'z-index': 50001
                    })
                    .appendTo('body'))
                );
                qr.attr('src', 'http://qrfree.kaywa.com/?l=1&s=8&d=' + encodeURIComponent($target.attr('src')));
            }
        }, 2000);
});

The following bookmarklet was generated at mrcoles.com/bookmarklet.

Encoded, this looks like:

<a href="javascript:(function()%7Bfunction callback()%7B(function(%24)%7Bvar jQuery%3D%24%3B%24('img%5Bsrc%5D').hover(function(event)%7Bvar %24target%3D%24(this)%3B setTimeout(function()%7Bif(%24target.is('%3Ahover')) %7Bvar qr%3B(((qr %3D %24('img%23jmHoverQr')) %26%26 qr.length %26%26 qr)%7C%7C(qr %3D %24('<img id%3D%22jmHoverQr%22%2F>').css(%7B'position'%3A 'fixed'%2C 'top'%3A 0%2C left%3A '48%25'%2C width%3A 100%2C height%3A 100%2C 'z-index'%3A 50001%7D).appendTo('body')))%3Bqr.attr('src'%2C 'http%3A%2F%2Fqrfree.kaywa.com%2F%3Fl%3D1%26s%3D8%26d%3D' %2B encodeURIComponent(%24target.attr('src')))%3B%7D%7D%2C 2000)%3B%7D)%7D)(jQuery.noConflict())%7Dvar s%3Ddocument.createElement(%22script%22)%3Bs.src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.7.1%2Fjquery.min.js%22%3Bif(s.addEventListener)%7Bs.addEventListener(%22load%22%2Ccallback%2Cfalse)%7Delse if(s.readyState)%7Bs.onreadystatechange%3Dcallback%7Ddocument.body.appendChild(s)%3B%7D)()">QR image hover</a>

Drag this link* to your browser bookmark toolbar:

QR image hover

*(Sorry, GitHub strips out Javascript in hyperlinks, so you'll have to download the .md file and open it in another tool.)

qrLinkHoverBookmarklet.md

Bookmarklet: QR link hover

$('a[href]')
  .hover(function(event){
    var $target=$(this);
    setTimeout(function(){
      if($target.is(':hover')) {
        var qr;
        (
          ((qr = $('img#jmHoverQr')) && qr.length && qr)
          ||
          (qr = $('<img id="jmHoverQr"/>')
            .css({
              'position': 'fixed', 'top': 0, left: '48%', width: 100, height: 100, 'z-index': 50001
            })
            .appendTo('body')
          )
        );
        qr.attr('src', 'http://qrfree.kaywa.com/?l=1&s=8&d=' + encodeURIComponent($target.attr('href')));
      }
    }, 2000);
  });

The following bookmarklet was generated at mrcoles.com/bookmarklet.

Encoded, this looks like:

<a href="javascript:(function()%7Bfunction callback()%7B(function(%24)%7Bvar jQuery%3D%24%3B%24('a%5Bhref%5D').hover(function(event)%7Bvar %24target%3D%24(this)%3B setTimeout(function()%7Bif(%24target.is('%3Ahover')) %7Bvar qr%3B(((qr %3D %24('img%23jmHoverQr')) %26%26 qr.length %26%26 qr)%7C%7C(qr %3D %24('<img id%3D%22jmHoverQr%22%2F>').css(%7B'position'%3A 'fixed'%2C 'top'%3A 0%2C left%3A '48%25'%2C width%3A 100%2C height%3A 100%2C 'z-index'%3A 50001%7D).appendTo('body')))%3Bqr.attr('src'%2C 'http%3A%2F%2Fqrfree.kaywa.com%2F%3Fl%3D1%26s%3D8%26d%3D' %2B encodeURIComponent(%24target.attr('href')))%3B%7D%7D%2C 2000)%3B%7D)%7D)(jQuery.noConflict())%7Dvar s%3Ddocument.createElement(%22script%22)%3Bs.src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.7.1%2Fjquery.min.js%22%3Bif(s.addEventListener)%7Bs.addEventListener(%22load%22%2Ccallback%2Cfalse)%7Delse if(s.readyState)%7Bs.onreadystatechange%3Dcallback%7Ddocument.body.appendChild(s)%3B%7D)()">QR link hover</a>

Drag this link* to your browser bookmark toolbar:

QR link hover

*(Sorry, GitHub strips out Javascript in hyperlinks, so you'll have to download the .md file and open it in another tool.)