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.
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.
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
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:
And finally to return to the top of the page:
Example: Showing only solutions
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
class (as shown below).
We can utilise them to hide or show those elements using the toggle
function from jQuery:
Note: This can also been applied to Admin or Author comments.
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.