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 Anders.com 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:
Requirements:
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="http://finance.yahoo.com/q/bc?s=AAPL" 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="http://www.anders.com/projects/blogQuote/">Blog Quote</a>
|
To Do:
After 5 minutes, allow quotes to be dynamically looked up again. DoneKill 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:
| Mac | Firefox | yes |
| Mac | Safari | yes - thanks to a fix by Mark Boughter |
| Mac | Camino | yes |
| Win | Firefox | yes |
| Win | Internet Explorer | no - 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.
Notes:
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?'"
|
| ~ RFK |
|
"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 |
 
|
