DLS Tutorial: using jQuery selectors in gleeBox to make cool "ESP Visions" (for beginners!)

Okay, creating a what in what with what? Come again? Let me explain. gleeBox is an add-on for Firefox/Chrome that enables advanced keyboard navigation.

At its simplest form, when you fire up gleeBox it sits there and does nothing. Start typing a part of a link's text, and gleeBox automatically highlights links containing such text. You can then switch between these links quickly using the TAB key; once you get to the one you want, hit ENTER and off you go.

When you run gleeBox while viewing a Google search result page, it somehow knows to automatically highlight the links to search results right when you start it, no typing required; other links, such as to "Cached" or "Similar", are left alone. This is nice, because it saves you a lot of typing and tabbing and makes the page easier to read.

This is accomplished through functionality gleeBox creators dubbed "Visions". It's a fancy name for a neat feature: If a "vision" is configured for a specific page, jQuery runs it immediately when you open it. The vision uses something called a "jQuery selector" to let gleeBox highlight just the parts you want to highlight.

In this tutorial I will show you how to create such a vision. I will be using onelook.com as an example.

You can continue reading the tutorial after the fold. Don't be afraid, there's a screenshot for every step!

Okay, so this is what the Onelook results looks like by default, when you search for nerdy.

Now we invoke gleeBox (by pressing "g") and type "n". Wow, look at how many links that highlights. Not only does it highlight all links for the definition, but also any link containing the letter "n" anywhere in it, such as "info". That's way too much. Even if we were to continue typing "nerdy", we would still get a highlight for all of the dictionaries. That would make it impractical to tab through to our favorite dictionary; who wants to hit TAB 15 times just to get to one link?

Okay, so let's try to figure this out. gleeBox has a special command to help start us off - it's called !inspect. So we type !inspect nerdy. Now it lets us tab through all instances of the word nerdy and hit ENTER when we get to one we wish to "inspect". But what does inspecting do?

We hit ENTER, and find out: We got three HTML entities ("tags", but not really) separated by "greater than" symbols. This is actually a very simple jQuery selector; in English, it means "give me a link (a) which is within a list item (li), which belongs to an unordered list (ul)".

gleeBox helpfully adds that we can now execute this selector by prepending it with an asterisk. Let's try just that. I put an asterisk in front of this selector, and hit ENTER:

A whole bunch of links was selected, but note that they are all within the main results page. The "Also see nerd" link, at the top right, was not selected. This is good; it means I'm getting somewhere. But still, I want only some of those dictionaries, not all of them. And I want only the entry word, not the "home" and "info" links. So how can I narrow down my selector?

For this, I decide to go to the jQuery selector documentation. Let's see what these selectors can do, and maybe we can find something that would help us zoom in on just what we want. As I scroll down the list, I notice the :contains() selector.

Let's try to use this selector within our expression. I want only list items which contain the word "Oxford", so that only results from Oxford dictionaries would be preselected. So we change our jQuery selector to say something like "give me a link which is within a list item - which contains the word "Oxford" - which belongs to an unordered list". So we put an asterisk at the beginning of the line and enter the selector ol>li:contains("Oxford")>a and hit ENTER.

Pretty cool! That seems to have worked. But I still have those pesky "home" and "info" links highlighted. How do I get rid of those?

For that, another stroll through the jQuery selector documentation reveals the :first-child selector. I notice that the link I want is indeed the first child link of the list item. So I modify the expression accordingly:

Nice! Now only the entry word of Oxford dictionary is selected! The complete expression now reads ol>li:contains("Oxford")>a:first-child. I hope you're following so far.

But it still isn't very useful. After all, if I just wanted results from Oxford, I might as well search Oxford directly. It's now time to select several of my favorite dictionaries and create a longer expression which highlights all of them together:

What I did is simply copy the expression we created, put a comma after it, and paste it again, this time specifying "Cambridge" for the li:contains() selector. So all list items containing "Cambridge" are also included. I can now continue like this, adding commas and re-pasting my expression, until all of the dictionaries I like are included. This step is best done using a text editor.

By the way, if there are any jQuery wizards in the audience who wish to propose a more elegant solution, do tell. I'm afraid the OR operator simply did not work right for me -- maybe I didn't use it correctly, or perhaps it's a gleeBox thing. Just be sure to test your suggestion in gleeBox before you make it.

At any rate, I now have a complete expression which I want to use as my "Vision". So I fire up gleeBox again and type !options to go into its options dialog:

I go to the Advanced tab, click Add Vision, enter onelook.com in the "part of URL" field, and paste in my jQuery selector in the other field. From now on, every time I search Onelook, I can load gleeBox and instantly tab through all of my favorite dictionaries. Hurrah!

Share

Tags: beginners, gleebox, jquery, tutorial