The Daily Biff - 2007 12 22

Currently playing on my computer (tune in: pls, asx)

Sat, 22 Dec 2007

Learning Ajax
A couple of days ago, I inserted "Now Playing" information on my blog. As I noted, it's not extremely useful (you cannot "listen in") - it's just geeky. I added a bit of pizazz to the feature by adding a pop-up "tooltip" that displays a list of detailed information about the track currently playing. The information includes the track title, the artist, the album, track number, track length, and a jpeg image of the cover art as well. Again... not extremely useful, just geeky. Go ahead and move your mouse over the "Now Playing" graphic in the upper right corner of this blog - then wait for half a second for the information to display.

The information in the pop-up window is populated via an asynchronous javascript call to a CGI script that just dumps the contents of a text file. There is nothing really novel about the system (it was extremely easy to accomplish), but this is my first experience using Ajax programming. Learning Ajax is one of those items on my long "To Do" list of stuff I should learn to keep my technical skills "fresh" (just in case I never need to start "fresh" at a new company). So I'm very pleased I got off to a successful start after only a couple of hours reading some on-line tutorials.

If interested in the code that accomplishes the effect, then you can view source... here are the relevant parts of the HTML:


<div id="nowplayingtooltip"></div>

<div class="nowplaying">What I'm listening to:<br/>

<a onMouseOver="getNewContent(); ddrivetip('loading... please wait')" 

  onMouseOut="hideddrivetip()" onClick="openWindow(this.href, 420, 180); return false" 

  href="http://rus.berrett.org/now_playing/"><img id="nowplayingimg" border="0" 

  src="http://rus.berrett.org/now_playing/nowplaying.png"></a>

</div>

My blog's javascript code is here. The relevant section is labeled "ajax stuff".

Note: the pop-up includes a jpeg image of the cover art. But for whatever reason the image is not displayed in MS Internet Explorer (5, 6, or 7). Not sure why. It works great in Firefox though. *shrug*

(Update Fri Dec 28 10:05:32 PST 2007 // my -> by)

:: Posted by rus on Sat, 22 Dec 2007 11:02 pm
:: Filed under /tech

[0 comments] [permanent link]

About
The Daily Biff
Rus Berrett's weblog

Contact Me
Email: rus at berrett dot org
AIM: biffordtdavis

Proclamations
Exaggerated opinions of my own importance. Proceed with caution.

Why I Blog

Buy Me Stuff
My wish list is my gift to you (yes, shameless, I know).

My Wish List

Subscribe
Subscribe to a syndicated feed of my weblog, brought to you by the wonders of RSS.

Categories
You can isolate posts by category using the following links.

about (1)

announcements (3)

annoyances (4)

contrib (15)

·babynames (2)

·blosxom (12)

·x10 (1)

daily_journal (974)

·2005 (184)

·2006 (280)

·2007 (263)

·2008 (242)

·2009 (5)

links (32)

·blogroll (3)

·bookmarks (3)

·gadgets (2)

·games (1)

·misc (2)

·news (4)

·rootbeer (2)

·tech (2)

·trivia (1)

·tv_programs (2)

·video (10)

media (118)

·galleries (104)

·2005 (23)

·2006 (18)

·2007 (17)

·2008 (27)

·archives (17)

·taiwan (2)

·music (5)

·portraits (9)

·berkeley (3)

·eliana (2)

·family (3)

·kids (1)

newsletters (4)

·christmas (4)

opinion (2)

photography (1)

politics (26)

·antiwar (2)

·domestic_affairs (2)

·editorials (1)

·election2008 (3)

·energy_policy (2)

·foreign_policy (9)

·opinion (2)

·religion (1)

·social_policy (4)

·same_sex_marriage (4)

pro_tips (2)

proclamations (1)

projects (280)

·around_the_house (3)

·attic_conversion (128)

·back_patio_deck (42)

·exterior_painting (11)

·garage_storage (4)

·maintenance (1)

·new_garage_doors (4)

·vault_removal (86)

recipes (61)

·basics (5)

·jam_and_jelly (2)

·sauces (3)

·breads (2)

·breakfast (5)

·desserts (14)

·cakes (1)

·candy (1)

·cookies (2)

·fruit (1)

·ice_cream (5)

·pastries (1)

·sauces (3)

·drinks (2)

·first_courses (5)

·appetizers (3)

·salads (2)

·main_courses (23)

·meat (14)

·pasta (3)

·poultry (2)

·seafood (4)

·side_dishes (4)

·snacks (1)

religion (3)

reviews (321)

·beverages (33)

·chocolate_milk (1)

·cola (2)

·dry_soda (2)

·egg_nog (5)

·ginger_ale (8)

·jones_soda (3)

·juice (3)

·milk (2)

·root_beer (6)

·sparkling (1)

·board_games (13)

·books (8)

·camping_gear (7)

·cold_cereal (3)

·concerts (2)

·food (20)

·breakfast (2)

·candy (1)

·cookies (1)

·desserts (1)

·fruit (1)

·jams_jellies (1)

·meat (1)

·salad_dressing (1)

·sauces (1)

·snacks (8)

·yogurt (2)

·movies (122)

·music (3)

·products (20)

·restaurants (62)

·service (1)

·software (2)

·symphony (14)

·theater (7)

·tv_programs (1)

·video_games (3)

shameless (6)

tags (10)

·christmas (5)

·sourdough (5)

tech (21)

traditions (15)

·cousin_preschool (3)

·class_pictures (3)

·fathers_and_sons (3)

·friendship_festival (2)

·hoa_barbeque (3)

·santa (4)

vacations (85)

·2005 (32)

·park_city (12)

·slc_summer (14)

·slc_winter (6)

·2006 (13)

·california (1)

·salt_lake_city (6)

·vancouver (6)

·2007 (17)

·cayman_islands (9)

·cedaredge (5)

·utah_winter (3)

·2008 (23)

·arizona (8)

·chula_vista (4)

·hawaii (6)

·utah (5)

Archives
Past entries are available for review.

Blogroll
These are a few blogs run by my esteemed friends and colleagues. My personal comments about the blog (and its author) can be accessed by clicking on the "wtf?" graphic to the immediate right of each entry (wtf = "What the flip?" as in "What the flip is grandma doing at the sand dunes?").

Family

Friends