This is an adaptation of a presentation that I gave while at Mashup Camp Boston. We’re going to take an introductory look at the Firebug Firefox Extension and the jQuery JavaScript Library – combining the two to build a reusable bookmarklet that can manipulate Digg Posts and Comments.
Click video to begin (14:39 Minutes long, 59MB):
Download: Right-click this link and select Save As… in order to download a copy of your own. (59MB)
Bookmarklets:
In the presentation, I refer to a bookmarklet that you can use to introduce jQuery into a web page. Drag these bookmarklets to your Bookmark toolbar to use them.
- » jQuerify « – Introduce jQuery into any web page.
- » Fix Digg « – The final bookmarklet that we made to remove all buried comments from a Digg post.
Related Links:
- Firebug Firefox Extension
- jQuery JavaScript Library
- jQuery Selector Documentation
- Digg
- Learning jQuery: jQuerify Bookmarklet
If you enjoyed this screencast, don’t forget to Digg it up!
Update: If you wish to use Greasemonkey instead of a bookmarklet, then by all means, please do so. You can use the ability to quickly analyze and inspect a page that Firebug and jQuery affords you, using the results to build a Greasemonkey script, instead of a simple bookmarklet. I only really intended this to be a quick introduction to the subject, so please feel free to explore it more!
More Tips: Here are some more jQuery selectors that you can use on a Digg Post:
- $("li.c-bury > div").remove(); – Remove all buried comments, but none of the direct replies.
- $("div.c-body").show(); – Show all comments, even ones that’ve been buried.
Dao (January 26, 2007 at 8:22 pm)
Regarding the bookmarklets: The onload property should be set before inserting the script into the document. Safari needs this, as far as I remember.
John Resig (January 26, 2007 at 8:43 pm)
@Dao: Yeah, and it wouldn’t even work in IE. However, I was only expecting that people would use this directly in conjunction with Firebug (and in Firefox).
I’m tempted to try and make one that’s cross-browser, however I suspect that it’ll be non-trivial.
Dao (January 26, 2007 at 9:38 pm)
Yep, I forgot IE … you can use onreadystatechange there. In short, here’s my cross-browser approach: http://en.design-noir.de/webdev/JS/loadScript/
Dan Atkinson (January 27, 2007 at 4:11 am)
The problem with the bookmarklet is that, if the first post in a comment thread has been dugg down, all subsequent replies to that poster are also removed from sight.
Whilst this might be desirable to some, I like to read the witty retorts from a thousand people to the guy who says Macs are ‘just for graphics’.
Fred (January 27, 2007 at 6:46 am)
I wish you didn’t use MP4 – it doesn’t run too well on Windows. I mean I have quicktime, but Quicktime works far better in Apple then on a Windows machine (it’s tantamount to Windows Media Player). Anyways, removing all buried comments isn’t always good because sometimes some jealous users digg down really good info. The only thing that would be nice is if this open up all comments even buried comments.
db (January 27, 2007 at 9:20 am)
@fred: to play mp4 in wmp –
http://www.cole2k.net/?display=Codec-Pack-Standard
Brennan Stehling (January 27, 2007 at 7:05 pm)
Great video! I like the demo but also the background music. I am thinking this could be applied to other websites to remove pieces of content from other websites which get in the way of the content. Forum websites with flashing ads hanging all over place come to mind. Thanks!
I hope to see more examples of using Firebug and jQuery. I just added jQuery to LinkMindr.com today.
Ralph Whitbeck (January 27, 2007 at 9:14 pm)
@Dan: Macs are just for graphics :D
Hamish M (January 28, 2007 at 10:17 pm)
Great work John, I’ve really fallen in love with jQuery and Firebug lately.
Curlyfro (February 9, 2007 at 1:13 pm)
i love the video but the audio is hard to hear and makes appreciating the full tutorial difficult. the voice is low and a bit muffled, and the background music doesn’t help.
Kynn Jones (March 4, 2007 at 11:21 pm)
Very nice! Is it possible to extend the same idea to a page that uses frames? (I was not able to, but I’m very much of a jQuery noob.) Thanks!
WEB¥Ç¥¶¥¤¥ó¡¡BLOG (April 25, 2007 at 12:42 pm)
Firebug¤ò¤â¤Ã¤È»È¤¤¤ä¤¹¤¯¤¹¤ë¤¿¤á¤Î¥Ö¥Ã¥¯¥Þ¡¼¥¯¡ÊjQuery¥Ð¡¼¥¸¥ç¥ó¡Ë
firefox firebug¤ò¤â¤Ã¤È»È¤¤¤ä¤¹¤¯¤¹¤ë¤¿¤á¤Î¥Ö¥Ã¥¯¥Þ¡¼¥¯¤ò¾Ò²ð¤·¤Æ¤¤¤Þ¤¹¡£¤³¤Î¥Ö¥Ã¥¯¥Þ¡¼¥¯¤ò»È¤¦¤³¤È¤Ç¤¤¤í¤ó¤Ê¥µ¥¤¥È¤Ç¹¥¤¤Ê¥¹¥¯¥ê¥×¥È¤ò¤¹¤°¤µ¤Þ¼Â¹Ô¡¦³Îǧ¤¹¤ë¤³¤È¤¬¤Ç¤¤Þ¤¹¡£(jQuery)
Conrad (April 27, 2007 at 5:11 pm)
Hey John, just a couple of hours using your JQuery library, really awesome! Thank for this useful video, I think that every scrrencast should have a background music (and your voice!). Keep the good work
felicity (May 13, 2007 at 5:19 pm)
The elevator music is very irritating.
If I want entertainment I’ll play my own music.
Tamlyn Rhodes (May 30, 2007 at 1:33 pm)
Thanks for that John. I’m going to be running a live jQuery demo at work next week and that jQuerify button will no doubt be helpful.
I like the music, it reminds me of being in a scene in Sam & Max :D
Interestingly the video played without sound in VLC and played without picture in Winamp but by playing it twice in parallel I was able to sync them up and watch the screencast anyway!
Go2.0Top (July 30, 2007 at 11:32 pm)
Great video! i will use it
Jlake Ou (August 22, 2007 at 2:09 am)
I have use jQuery for this:
http://geelake.com/usCalendar/
jQuery is great!