Tagged: DOM Toggle Comment Threads | Keyboard Shortcuts

  • Joe 15:38 on July 27, 2006 Permalink
    Tags: , DOM, ,   

    Keeping up with change 

    Greasemonkey is a great tool for changing a web page, just after it has been loaded. But this does not work for all those Ajaxified web 2.0 pages, where content is loaded on the fly.

    There is a solution, though: just listen for DOM events which modify the page’s content. Keep up with the DOM changes so to say!

    Background

    In the days before Flickr was acquired by Yahoo, I made a Greasemonkey user script: Flickr – Link Original Image that inserts direct links to the original uploaded photos on top of thumbnails. This worked fine, by parsing the DOM just after page load and looking for every occurrence of photo thumbnails.

    Now, after the recent relaunch of Flickr with dynamic Ajax loading, this script fails for those dynamically inserted thumbnails. Simply because they do not exist in the DOM when the page completes loading.

    Solution

    DOM level 2 specifies a couple of Mutation events. Now I register an event handler for the relevant events and take action whenever an image gets inserted, removed or moved around.

    (More …)

     
  • Joe 10:54 on July 21, 2006 Permalink
    Tags: DOM, Greasemonkey Building, , user interface solution,   

    Create Microsummaries with Greasemonkey 

    Building your own Microsummaries Generator in XML for the new Firefox 2.0 (beta 1) can be a daunting task.

    Figuring out the whole XPath string can be an annoying experience, especially counting the number of nested divs, table rows and such. To alleviate this, Greasemonkey comes to the rescue with my Microsummary Generator user script.

    The general idea is that you start the script on your target page. Then you all individually discernible elements on the page will be highlighted when you move the mouse over the (just like for instance DOM Inspector). When you click the desired element, the script generates the proper Microsummaries Generator XML document for this element.

    Determining the XPath for the Microsummary headline is currently done with these simple rules in mind:

    Calculate the full XPath location path, down to the document root element (html). This results in a full nesting of named elements, indexed by their position if not the first of the same kind. Example:

        /html/body/div/div[2]/table/tr[3]/td[2]/a

    If an element has an ID attribute, take this as the starting point. Example:

        //div[@id='stats']/span[2]

    The general idea is that an “id’ed div” bears more semantic meaning, as intended by the website architect, and as such is much more likely to survive (minor) design and markup changes.
    This, however, fails whenever an ID is generated for some other reason, like the title elements of this weblog (id=”post-31″). I have no solution for this yet, but I’m considering some user interface solution like this:

        /html/body/div/div[2]/table/tr[3]/td[2]/a
        |          |   |      |     |
        |          |   |      |     +- ( ) id='id2e7f2ab'
        |          |   |      +------- (*) id='statstab'
        |          |   +-------------- ( ) id='stats'
        |          +------------------ ( ) id='main'
        +----------------------------- ( ) use root element

    Description: every element, which has an ID attribute, can be selected as the root of the XPath expression. 

    So the current version of the script has a few rough edges and there are still many manual steps needed in order to get the resulting XML Generator properly installed into Firefox. Be sure to share your thoughts for improvement!

     
    • Johan Sundström 18:42 on July 21, 2006 Permalink

      id=”post-31″ might not have been the ideal example of a nonsemantic id IMO, but I see your point. The sketched-out UI for picking a preferred XPath reference hook looks great; it’s just the kind of tool I’d want to have in the XPath extension, or better still in FireBug.

      A GM script to do that kind of thing would be a great start, though.

c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel

Twitter links powered by Tweet This v1.8.3, a WordPress plugin for Twitter.