Home Pictures Projects The name "Anders" Store

Blog Quote

Blog Quote is a stock ticker lookup tool for use on websites. When a user rolls the mouse pointer over a company name managed by Blog Quote, the system looks up some quick summary stock information and presents it in a small "tooltip" window below. As the user rolls away from the company name, the window disappears. For example, you could mention Microsoft on your website and readers could see how the company is doing right now regardless of when you wrote the underlying page just by mouseing over the company name. (try it!)

How this came about:
Om Malik mentioned that it would be nice to be able to get stock quote information inside a blog story. This got me thinking about writing an AJAX application that could do this with a simple tagging convention that could be included in blogging software without much effort, so I coded up a proof of concept. After some hacking around with it, I have come up with a better version that contains a little history chart and colored "up / down" tick directional indicators.

AJAX (JavaScript, CSS and XMLHTTP) is used to retrieve the current stock price for a ticker symbol and show a "tool tip" style near-realtime synopsis. It could be used within a blog to give more information on a particular company.

Example of Blog Quote in action: (mouse over the company names to get a current quote)
Blog Quote Sample Story
Mouse over the company names to see a near-realtime quote. In technology, Apple is an interesting company as is Dell, Yahoo and Google. Hovering over the company names triggers a back-end XML request that loads the quotes and shows them in a css configured span tag. Other companies you could try would be Level 3 if you are into carriers.

I could really use some help with CSS and browser compatibility issues. If you have any expertise you could lend, please contact me through the form on my homepage. I am also interested in getting this code rolled into popular blogging software applications like WordPress or Movable Type. If you can help out with development, please contact me.

How it works:
When you mouse over a link, an XMLHTTP request (ala Google Maps) queries an XML quote engine running on that returns the near-realtime quote data from Yahoo Finance. JavaScript and CSS are then used to display the results in the browser as a "tool tip" that disappears when the mouse moves away. Additional mouseover events conditionally show the stock quote information in memory so quotes are only looked up once every 5 minutes or so.

How to get this working on your site:
The XML quote engine that gets quote info from Yahoo Finance is currently available in JSP and PHP versions. Your site will need to be able to execute JSP or PHP. Other versions of the getQuote functionality are needed. Please contact me if you can write such a tool.

Copy the following files to your site:
Edit showQuote.js to point to the proper backend script for your installation. (Either JSP (default) or PHP.)

Add the following two lines within the <head> of your html page:

<link rel="stylesheet" href="quoteStyle.css" type="text/css">
<script language="JavaScript" src="showQuote.js"></script>

Make a link to a company on your page with the following code:

<a href="" class="quote" onMouseover="showQuote( 'AAPL' )"><u>Apple</u><span id="AAPL"></span></a>

Try loading the page and mousever the link.

Link to this page from your site so others can get this functionality.

<a href="">Blog Quote</a>

To Do:
  • After 5 minutes, allow quotes to be dynamically looked up again. Done
  • Kill XML requirement. Read data directly from Yahoo CSV Not Done tried this but security restrictions would cause an "are you sure?" window to pop up when accessing data from a third party website.
  • Show the code so users can see how it works and what it might take to get this going on their own site. Done
  • Add more getQuote backend samples. Need PHP, (possible PHP starting point) (PHP is done) ASP, C#, (possible C# starting point) Java Servlet (based on the jsp version?) and possibly others.
  • Add a better HOWTO so others can add this functionality to their blogs.
  • Browser compatibility:
    MacSafariyes - thanks to a fix by Mark Boughter
    WinInternet Explorerno - works the first time but subsequent hovers don't
  • Handle long company names. (Use nobr?) Can't let it blow out the table size. Example: Berkshire Hathaway
  • Integrate with WordPress (done by Andy Hill), Movable Type and other blog software.
Why do we <u> links and set "text-decoration: none" in the css? Because if you don't, the <span> gets underlined as well because it's part of the <a> tag. Trying to "text-decoration: none" the span inside the <a> tag doesn't work because the <span> tag inherits from the <a> tag and overrides the "text-decoration: none" you set in Firefox. Interestingly enough, you can add additional decoration such as an overline, but you can't get rid of the underline.

To achieve Safari compatability, Mark Boughter added display: inline-block; and vertical-align: middle; to .quote in quoteStype.css. Thanks Mark.

Once to every man and nation,
comes the moment to decide,
In the strife of truth with falsehood,
for the good or evil side;
Some great cause,
some great decision,
offering each the bloom or blight,
And the choice goes by forever,
'twixt that darkness and that light.
Once to Every Man and Nation.mp3
~ James R. Lowell - 1845

"In our sleep, pain that cannot forget falls drop by drop upon the heart and in our despair, against our will comes wisdom through the awful grace of God."
~ Aeschylus

"Some men see things as they are and ask 'Why?'. I dream of things things that never were and ask 'Why not?'"

"In dreams begin responsibilities."
~ U2

"... we do these things not because they are easy, but because they are hard!"
~ JFK - on sending man to the moon

user:   pass:   © 1995-2005