Win a copy of Functional Reactive Programming this week in the Other Languages forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

progressbar library

 
Sanjiv Jivan
Ranch Hand
Posts: 52
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,
I'm looking for a good javascript progressbar library (with a commercial friendly licence). I want to use this to display progress of a long running process. The server progress will be determined via AJAX and the progress bar indicator should be updated accordingly. Another nice-to-have would be if the progressbar allowed an image to be displayed for progress.

I'm basically looking for a progressbar that looks like and behaves like the the one on : http://www.kayak.com (kayak is not using a freeware library).

Thanks,
Sanjiv
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Are we talking real progress indication or just throw up an image or so.

Eric
 
Sanjiv Jivan
Ranch Hand
Posts: 52
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Well it will be a real progress bar where the percentage complete will be retreived from the server via AJAX. However from the JS progress bar library perspective, I just need a library that supports setting of percentage.

The progressbar library on kayak allows specifying an image (1x1 pixel) and the library expands the height and width to create the progress indicator. This way I dont have to provide a separate image for each percentage. An image looks better than a html colored cell. Again, the image thing is a nice to have but the library needs to support setting of pergentage and update the indicator accordingly.

Thanks,
Sanjiv
 
Jeff Rago
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Sanjiv,

Feel free to use the progressbar.js file, I'm the author and we have no problem with you using it as long as you're not planning on selling it as your own.

Be aware that some of the border styles don't work properly on Firefox (you get a nice 3D bevel in IE) although I haven't spent much time trying to get it to work.

Next time you need to make travel plans, check out kayak.com :-)

-jeff
 
Sanjiv Jivan
Ranch Hand
Posts: 52
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks a bunch Jeff. kayak.com is really sweet and I'll certainly give it a shot when booking my next flight. The UI is awesome and makes it much easier to search for flights. Great use of AJAX technology.

It will be great if you can create a sourceforge project and licence it as LGPL - which seems to suite your requirements. The project could grow into something larger like a generic ajax + java based asynchronous task processing library with the ability for a user to cancel a running task. I think this is something that is a very common requirement for many web based projects however there is a lack of suitable libraries. I'd be happy to join this project as a developer

Sanjiv
[ December 01, 2005: Message edited by: Sanjiv Jivan ]
 
Sanjiv Jivan
Ranch Hand
Posts: 52
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Jeff,
I forgot to mention that kayak.com suffers from one of IE's bugs/(mis)features that might affect performance and scalability of your site. When using elem.innerHTML to set the "new" content, if the new content has repeated images, each image is re-fetched from the server instead of using the browser cache. In kayak.com's case, flight logos like US.gif is re-requested numerous times by the browser. You can use a proxy tool like fiddler to confirm this behavior.

The problem is described here : http://www.bazon.net/mishoo/articles.epl?art_id=958

Since you're dealing with a known set of images (flight logo's), you could probably use the hidden div image preloading workaround like

<div style='display:none'><img src= "US.gif'></div> or its javascript equivalent.

See following link for complete description :
http://support.microsoft.com/default.aspx?scid=kb;en-us;319546

This issue becomes more tricky when the dynamic html content has many possible images that it can display. I'm a member of an OS AJAX based project where we inspect the images in the new content, preload them and then replace the innerHTML to avoid this issue.

Hope this helps,
Sanjiv

[ December 01, 2005: Message edited by: Sanjiv Jivan ]
[ December 01, 2005: Message edited by: Sanjiv Jivan ]
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic