The Twitter web interface polls for new tweets and displays a notification when any are found. Clicking on that notification will show all of the new tweets. I've found there is a point with a relatively small number of new tweets – between 30 and 200 – where I want to skim them all, but it's a hassle to return to the position where I left off reading.

New Tweets Notification

The visual indicator for the newest tweet is very subtle and virtually unnoticeable while scrolling fast.

Newest Tweet Indicator - A slightly darker line

Solution

It's a fairly simple problem to solve with a bookmarklet – a tiny bit of javascript that is manually executed by opening a bookmark.

Right-click and bookmark the following link, or drag it to your bookmarks toolbar or menu: First New Tweet

This may not work in a feed reader. If that's the case, manually add the bookmarklet or view the original post. Internet Explorer may prompt you about adding a Favorite that is not safe; ignore that, or get a better browser.

There is a known bug (#86643) affecting some versions of Chrome that results in a bookmark that does not contain a name. Right click and Edit the bookmark to fix that.

To use the bookmarklet, open it the way you would a normal bookmark. If there are new tweets, the browser will automatically scroll to the oldest new tweet – which will be right above the last tweet visible prior to loading the newest tweets.

Read more about bookmarklets at Wikipedia.

Source Code

Unminified code, complete with a modified version of Dustin Diaz's getElementsByClass to accommodate Internet Explorer. I briefly tested this on Google Chrome 13, Firefox 4 and IE 8. This isn't meant to be pretty.

javascript:(function(){
  if( document.getElementsByClassName ) {
    var t=document.getElementsByClassName("last-new-tweet")[0];
    if(t) {
      window.scrollTo(0, t.offsetTop + t.offsetParent.offsetTop );
    }
  } else {
    var els = document.getElementsByTagName("div"), elsLen = els.length, pattern = new RegExp("(^|\\s)last-new-tweet(\\s|$)");
    for (var i = 0; i < elsLen; i++) {
      if ( pattern.test(els[i].className) ) {
       window.scrollTo(0, els[i].offsetTop + els[i].offsetParent.offsetTop );
       break;
      }
    }
  }
})();

Minified code, in case you'd like to manually create your own bookmarklet.

javascript:(function(){if(document.getElementsByClassName){var t=document.getElementsByClassName("last-new-tweet")[0];if(t){window.scrollTo(0,t.offsetTop+t.offsetParent.offsetTop);}}else{var els=document.getElementsByTagName("div"),elsLen=els.length,pattern=new RegExp("(^|\\s)last-new-tweet(\\s|$)");for(var i=0;i<elsLen;i++){if(pattern.test(els[i].className)){window.scrollTo(0,els[i].offsetTop+els[i].offsetParent.offsetTop);break;}}}})();

Tags: bookmarklet, Code

Posted on Wednesday, July 20th, 2011 at 12:24 pm | Filed under Development, JavaScript, Technology
You can follow any responses to this entry through the Comments feed.
Post a Comment | Trackback URL | Permalink URL