Quantcast
Viewing all articles
Browse latest Browse all 29

Visual Event Bookmarklet

I've been using Visual Event bookmarklet to help quickly visualize which events are attached to a page while troubleshooting problems.

I do have one problem with the script. It adds too many layers so you can't get to the lower layers. Here is a screen shot of how the last post I made looks with Visual Event (on the left) and the second screen shot is how it looks after the script is applied (on the right):

I made a github gist and a jsFiddle demo of this script. To use it, just add the following script into the Firebug console to enable the script:
var veColors = [ 'black', 'orange', 'purple', 'green', 'blue', 'yellow', 'red' ],
veColorLength= veColors.length - 1,
veLayerIndex = 0;

function showVeLayer(nxt){
veLayerIndex += (nxt) ? 1 : -1;
if (veLayerIndex > veColorLength) { veLayerIndex = 0; }
if (veLayerIndex < 0) { veLayerIndex = veColorLength; }

var veLayer = $('.Event_bg_' + veColors[veLayerIndex]);
if (veLayer.length === 0 ) { showVeLayer(nxt); return; }

$('.Event_bg_' + veColors.join(', .Event_bg_')).hide();
veLayer.show();
};

$(document).keyup(function(e){
switch(e.which){
case 39: case 40: // right/down
showVeLayer(true);
break;
case 37: case 38: // left/up
showVeLayer();
break;
}
});

Viewing all articles
Browse latest Browse all 29

Trending Articles