After created the yqlClient, it looks like I can do something fun with it. I love investing in stock market that sounds good if I can do something about it.
Here i created a quote panel which use YUI, jquery, flot extension on jquery, my yqlClient…etc. Everything done with HTML, CSS, Javascript. 0 lines PHP. But there are problems that as cookie was used as a permanent storage, so user cannot bring along the data when they switched a browser / computer…
This application used a html page in Yahoo! Finance, a xml call from the flash chart, Yahoo news RSS feed. Then use YQL to pulling the data and re-construct the interface in the way I want. This is fun that with the help of YQL, data can be pulled together quickly and creating some demo app in a short time to get user feedback and change again.
The quote panel.
Screen cap of the quote panel
The YQL API support the JSONP format which allow you to specify a Javascript function to handle the data (XML / JSON) return from the API. A normal JSON will return a string which is a javascript object like:
{key1:”value1″,key2:10.35}
While a JSONP will look like:
js_function({key1:”value1″,key2:10.35});
Which the return string from server will be a valid javascript function call and passing a object literal (or the original JSON string) into the function. For more on JSONP, there is an article on Ajaxian.
As you can see above, the handling function will be a global functions in order to make the JSONP to work. Also, the scope of the calling function / object will be completely loss. So I created a simple YQL client which do the auto scope fixing. It works like YUI2’s connection manager and support a callback object which you can specify a method to handle the JSON return, the scope of “this” object, timeout of your YQL call, and pass on argument to the handling function.
Here is a simple demo using the javascript yql client to get the digg’s rss feed.
It is a good fun to play with Yahoo! Query Language (YQL). YQL is a service enables applications to query, filter, and combine data from different sources across the Internet. Many data in the Yahoo! network can be retrieved from YQL with a SQL like syntax.
SELECT * FROM flickr.photos.search WHERE text="cat"
Means to do a flickr search on photo with the text equals to cat. But the thing that catch me is the capability to convert the content (HTML page) from an external site to a well formatted XML / JSON.
select * from html where url="http://news.yahoo.com/"
and xpath="/html/body/div[@id='doc4']/div[@id='bd']/div[@id='yui-main']/div/div[@id='top-story']/div/div[1]/div[2]/h2/a"
The YQL above will return the headline from Yahoo! news. The xpath part looks pretty scary, but with the xpather firefox addon, you can get the xpath on any DOM element with right click -> Show in XPather. (P.S. One thing to notice with xpather is the tbody tag, which firefox will add to its DOM tree for table which might not really exist in the source HTML. This extra tbody will make YQL returns nothing as it never exists in the HTML code.)
This is an excellent tool for the Javascript. Imagine that if you are going implement a RSS reader, without YQL, the RSS reader application must prepare all the data at the server side and send back to the client (like Fig.1). This is bad for performance as curl call are blocking calls while consuming YQL at client browser can be asynchronous and parallel. This sounds wise to offload those data crawling process to the client (like Fig.2).
Fig. 1 The web application prepare all the data at the server side
Fig. 2 Offloading the blocking curl calls to client side parallel YQL request.
I just come across to work with an API related to timestamp and need to do some time unit conversion. Have tried to found some timestamp converter from the web and firefox addon, but none of converter I find suit my need. So just spend a day to create a converter with a calendar on it.
Features:
- Convert timestamp to date, click on the log to navigate the calendar
- Convert seconds / minutes into number of days, hours
- Arrow key to navigate the calendar (only when focus is not on the text field )
It is common to have element stacking at bottom no matter how large the z-index is. There are 2 things to check when it happens.
The position property in CSS
z-index only affect elements with position property set to “relative”, “absolute”, and “fixed”.The z-index values of the all the parent
Parent elements up the DOM tree
If you want a child element stack on top, all its parent elements must have an z-index that’s large enough to make itself stacking on top. That means if an element(Element A) stack below something, all the child nodes of Element A will stack below it.
Extra favor for IE6
There is a serious bug in IE6, element with position set to “relative”, “absolute”, or “fixed” without explicitly specify a z-index, the z-index of that element will be ZERO. This is 90% of the cause that makes z-index not working on IE6. When you found high z-index does not stack on top in IE6, but works well in firefox, you probably want to check all the parent elements with position set to the above 3 values.
The final result
Open in new window
What it does
Just a basic markup and CSS which create an imageless button. It support zooming / changing font-size. But it is true that imageless button is bad in semantic markup compare to <a> / <input>, as the construct of the button is layers of <div>. If you compare the semantic to buttons using sliding window, it is pretty much the same.
Tested in Firefox 3, IE 6, IE 7, Safari 3.1
Read more »
What is z-index
When we talk about 3D, we have the x,y,z dimension. z-index is the third dimension on a web page which determine how element stack. It works like Photoshop’s layer. In general, larger z-index stack on top of smaller z-index. But there still other factors that will affect the layer stacking, which are the position property in CSS and the html structure.
How z-index works
It is often to find that z-index doesn’t work as expected. Sometimes it work on Firefox but failed in IE 6. The first thing to make z-index work is you need to position that element. You can set the position property to absolute, fixed, or relative (but not static). Below is series of samples to test on how z-index stacking works.
Read more »
