EE the way you want - with Bookmarklets

Note: Assumed Knowledge

To implement the bookmarklets you will need to have some basic HTML knowledge. However, if you can't work out an action you'd like to perform, post your request below or in a question on the EE site and I or another Expert will do their best to code the required bookmarklet for you.

It should also be noted that a caveat to this approach is that the JavaScript at some point will change as the site evolves so any bookmarkets mentioned in this article are subject to change :)
 

Bookmarklets

Bookmarklets are very useful and an under utilised function when it comes to browsing the web. A bookmarklet is a bookmark that runs JavaScript on the page you are reading, whereas a bookmark as you may know it takes you to a URL.

I recently saw this article by Joe Winograd that got me thinking about what it would mean to Experts and askers on the EE site. After talking with the EE Moderator eenookami who contacted me about expanding on this type of capability, I thought I would express here just what this kind can do for you when on the EE site.
 

JavaScript & jQuery

To begin with, the EE site utilises JavaScript to capture and perform actions throughout the site. When you click on a button, perform a search, post a comment etc JavaScript is executed. Essentially any action you perform on the site is controlled via JavaScript. EE utilises the framework jQuery. jQuery is just JavaScript wrapped up nice and neat to make actions easier to implement.  

For more on JavaScript frameworks, please refer to my article:  Javascript Frameworks what are they?
 

So what's the link between JavaScript (jQuery) and you?

As I briefly mentioned before, JavaScript is used on the page to control the actions on the site.  We all use the site differently and the web developers cannot cater to everyone so leveraging the actions to your advantage is what this article is about. In Joe's instance, he found it frustrating that he couldn't show all the messages in a group discussion thread without clicking the Expand button on each one. He's shown in his article how JavaScript can automate clicking each of the expand buttons (in one click!) by leveraging this bookmarklet. What I'd like to do is show you how to add your own bookmarklet based on the actions you'd like to be able to do more easily.
 

Working out the Element to control with JavaScript

Now comes the hard part, working out exactly what you want to do. In this example I'll work with the example of creating a bookmarklet that takes you right to the comment box and while we're at it, another one to get to the top of the page.

This is based on  scrolling the page to a point you're interested in. This is a good reference to start with all the possible properties of an HTML element that you can target and use. Manipulating HTML elements:  https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

In each example, I'll show you some basic techniques to getting the right elements. The examples are using the Chrome browser so the process of finding the element may be different depending on the browser you are using. In all the examples and to find out the actions and elements needed, you will need to utilise the  developer tools that already exist in all the standard browsers (Chrome, Firefox, Opera, IE). The dev tools can be accessed by right clicking anywhere on the webpage and selecting "Inspect Element" from the context menu. The advantage of this approach is it will take you to the element or near region in the HTML you want to control. You can also bring up the tools by pressing either F12, Ctrl+Shift+i or via the browser's menu:
 

Example: Going right to the comment box

First step is to identify the comment box in the HTML. Right click the "Post a Comment" heading above the comment box and select "Inspect Element" from the context menu.
You can see this has taken us to the general area of the comment section of the site. There may be some trial and error to get the element and the corresponding action you want, as you'll see in this case.

All the content of a webpage is stored in the body HTML element. When you scroll a webpage, you're scrolling the body element. What you see on the screen is only what your computer screen (or mobile device) is capable of so it varies. The idea here is to scroll the body element to the top of the comment box. The HTML DOM (Document Object Model) is the hierarchy of the tags within each other. In other words, the screenshot above is a child of the element.

This is important for our action as we are scrolling the body element so we are only interested in the first level of elements within this scope as the element's  offsetTop property's value is only relative to its parent. From the screenshot above we need to find the element that is in the first level of child elements of the body element. In this case, it is the element as indicated in the screenshot.


To get the top of the element or its location in the page, it's as easy as document.getElementById("caw").offsetTop. To use jQuery to scroll the page we use $("body").scrollTop([value goes here]). Combining the two, it's as simple as:

$("body").scrollTop(document.getElementById("caw").offsetTop)

That's the Javascript, so following the instructions in Joe's article, you create a bookmark with the following instead of the usual link:

javascript:void($("body").scrollTop(document.getElementById("caw").offsetTop));

And finally to return to the top of the page:

javascript:void($("body").scrollTop(0));
 

Example: Showing only solutions

Sometimes all you want to see is the solutions and not the other comments when a question has been PAQ'd. The following Javascript will toggle showing all the comments or just the solutions (including assisted when a solution has been split).

If you were to go through the same steps as the previous example, right clicking on any solution, you would see that the elements that contain the comments have the  assisted and  accepted class (as shown below).


We can utilise them to hide or show those elements using the toggle function from jQuery:

javascript:void($('.answer:not(.accepted,.assisted)').toggle())

Note: This can also been applied to Admin or Author comments.
 

Your Imagination

I'm curious and more than willing to help create new shortcuts (bookmarklets) and hear how the rest of you use the site. Hopefully I've shown how you can use your imagination when it comes to using the site and tailoring it to your own ways of working.