Archive for category Bookmarklets

Bookmarklet to turn off jQuery animations

Animations on websites are usually nice, but not always.

One example, where an animation gets annoying is github. They sport a slide animation when going back and forward while browsing the code.

I found this annoying in general, but it became unacceptable once I started using Safari on Lion OS when browsing github repos.

As you know Safari already has a sliding animation when going backward or forward in the browser using the two finger gesture on the trackpad.

With the added github animation, you see two sliding animations right after each other.

Turns out a simple bookmarklet can help.

Since github is using jQuery, turning off all jQuery animations does the trick.

Unfortunately WordPress keeps expanding bookmarklet urls to, so you’ll have to follow these steps in order to install it:

  • Copy the code snippet below
  • create a new bookmark, name it something like StopFx
  • edit the bookmark and paste the copied text into the URL/Address field.
javascript:(function(){jQuery.fx.off=true;})();

Once you arrive at a github repo invoke the bookmarklet and enjoy distraction free source code browsing.

Of course this will work  for any website with annoying jQuery animations,

In case you are interested in creating your own Bookmarklets, you can find more information here.

As a final note, in order to edit bookmarks in Safari, you have to select “Show All Bookmarks” from the “Bookmarks” folder. I am adding this, because that was not at all obvious to me.

Advertisements

Leave a comment

Having fun with JavaScript bookmarklets to determine loaded libraries

Lately I have been looking at ways to make writing JavaScript a little more fun .
Actually the first step was to write CoffeScript instead and letting it compile the JavaScript for me.

I’m also very interested in the libraries that make a lot of things like cross browser issues easier. So a lot of times when I see a site I like, I’m wondering, what libraries it is using under the hood. I wanted a faster way to determine this than ‘view page source’.
So this became my first little JavaScript task.

I went to jsFiddle to spike how it could be done (unfortunately I couldn’t use jQuery here, since then I would have needed to reference it and it would obviously have obscured the results).

After a few attempts I had my little JavaScript function ready. Since I couldn’t rely on any map function, it is using a lot of for loops and is not too pretty, but some people may find it useful:

 
 
 
 
~/dev/javascript/bookmarklets/libJs.js.html 
 
 
 
 
 
 
 
 
 1 (function showLoadedLibs() { 
 2  
 3     var names = ['jquery', 'mootools', 'backbone', 'prototype', 'yui', 'simpleyui', 'glow', 'dojo', 'modernizr', 'processing', 'ext-core', 'raphael', 'right'];
 4     var scripts = document.getElementsByTagName("script");
 5     var loadedScriptNames = "";
 6     for (var i = 0; i < scripts.length; i++) { 
 7         var src = scripts[i].src;
 8         for (var n = 0; n < names.length; n++) { 
 9             var lib = new RegExp(names[n] + '[^/]*[.]js').exec(src);
10             if (lib) { 
11                 loadedScriptNames += " " + lib + ",";
12             } 
13         } 
14     } 
15     alert("\nLoaded libraries: " + loadedScriptNames.substr(0, loadedScriptNames.length - 1) + "\n\nLooked for: " + names);
16  
17 }());

In order to use it as a bookmarklet, I went to the Bookmarklet Crunchinator to ‘ crunch’ the above code.

The result looks like this:

javascript:(function(){(function showLoadedLibs(){var names=['jquery','mootools','backbone','prototype','yui','simpleyui','glow','dojo','modernizr','processing','ext-core','raphael','right'];var scripts=document.getElementsByTagName("script");var loadedScriptNames="";for(var i=0;i<scripts.length;i++){src=scripts[i].src;for(var n=0;n<names.length;n++){var lib=new RegExp(names[n]+'[^/]*[.]js').exec(src);if(lib){loadedScriptNames+=" "+lib+",";}}}alert("\nLoaded libraries: "+loadedScriptNames.substr(0,loadedScriptNames.length-1)+"\n\nLooked for: "+names);}());})();

Finally, I added it to my bookmark bar – the above ‘crunched’ code becomes the Url of the bookmark.

All I have to do now is click this bookmark and am informed about known libraries that are loaded on the page I am currently on.

2 Comments

%d bloggers like this: