[v0.3] mootools 1.2 progress bar

a place to post your own scripts

Moderator: 1.2 Moderators

Forum rules
  • Each Script may have only one thread per mayor release.
  • The owner of the thread should keep the first post up to date (newest version, demo...)
  • The title should include the version -> "[v0.1] Nice mooPlugin"
  • see also the detailed Rules

[v0.3] mootools 1.2 progress bar

Postby akaIDIOT on Fri Jul 18, 2008 2:46 am

This scripts let's you add a progress bar similar to those found in desktop applications to indicate any form of progress like questions in a survey, progress of an asynchronous request or something else.

Fetch the script from spooky.student.utwente.nl, where you can also find a short demo. Documentation can be found inside the javascript-file (though it's rather self-explanatory).

I hope anyone has any use for it! :D

Change log:
0.1:
- Initial version.
0.2:
- Stored both the progress animator and the indeterminate animator in the progress element without using the tween and morph instances of the element as they are both actually 'tweens' (only one property changes).
- Made both the progress animator and the indeterminate animator use "%" as the 'unit' to morph, causing the progress bar to always be filled completely at 100% and automatically resize as it's parent element resizes (when the window size is changed for example).
- Added option "waitForAnimation", which causes the progress bar to wait for the animation toward a certain progress to complete before firing the change- and complete events. THIS OPTION HAS BEEN ENABLED BY DEFAULT, CHANGES DEFAULT BEHAVIOUR!
- Added option "indeterminateMode", defining how indetermination should be animated.
- Added the way events are fired; now uses method "notifyObservers" to fire the change- and complete events (needed for the waitForAnimation option).
- Changed the documentation of constructor option "styles".
- Changed the documentation of all functions to "Method", since once instantiated the functions are methods of the instance.
0.3:
- Bugfix: indeterminateMode "none" caused the progress bar to keep showing the current progress, now displays no progress.
Last edited by akaIDIOT on Tue Aug 12, 2008 12:19 am, edited 5 times in total.
User avatar
akaIDIOT
 
Posts: 10
Joined: Fri Jul 18, 2008 2:37 am
Location: Enschede, THe Netherlands

Re: ProgressBar.js - mootools 1.2 progress bar

Postby daKmoR on Mon Jul 21, 2008 12:04 pm

nice script...

maybe you could change the title to "[v0.1] mootools 1.2 progress bar" or "[v0.1] progress bar" to generate a nice link url for google...
"Speak when you are angry and you will make the best speech you will ever regret." - Ambrose Bierce
User avatar
daKmoR
Site Admin
 
Posts: 860
Joined: Mon Jul 14, 2008 11:40 am

Re: [v0.3] mootools 1.2 progress bar

Postby akaIDIOT on Tue Aug 12, 2008 12:23 am

Only a small bugifx for 0.3, but I was wondering if anyone found any bugs or annoyances I could fix.

Features planned for the future:
- An indeterminate mode that makes passes in one direction (right, probably), resembling the way most OS's animate indeterminism. Unfortunatly this is slightly harder than I anticipated :P
- A vertical mode, useful for something like a battery or something. Just because it _should_ be able to do that :)

Any feedback?
User avatar
akaIDIOT
 
Posts: 10
Joined: Fri Jul 18, 2008 2:37 am
Location: Enschede, THe Netherlands

Re: [v0.3] mootools 1.2 progress bar

Postby Lweel8 on Fri Aug 22, 2008 6:17 pm

Looks great. The whole idea of a progress bar for a survey seems to escape most companies.
Vertical would be good because then you could say show the consumption of space in a storage account... I haven't looked at the code but are you able to use a custom container (like the shape of a gas can or a milk glass) and then fill that?
"The difficult we do immediately. Impossible takes a little longer."
User avatar
Lweel8
mootools fan
 
Posts: 99
Joined: Thu Jul 17, 2008 12:08 am
Location: wellington, ontario, canada

Re: [v0.3] mootools 1.2 progress bar

Postby akaIDIOT on Mon Aug 25, 2008 8:38 pm

Yes, you can. The code is designed to make the bar as plain as it gets. Given no style at all, it will only produce a black bar inside the container you provide. If you for example would give it an element you styled to look like a glass (although right now it doesn't do vertival yet :(), your empty progress bar would look like a glass. The constructor takes a styles parameter to style the inner element. With it you can style the inner element in any way you want, like in my demo a bar that looks like ubuntu's. The code for this is rather simple:

  1.  
  2. var myProgressBar = new ProgressBar($("some-element"), {
  3.   maxValue: 5,
  4.   styles: {
  5.     background: "transparent url('path/to/background/image.png') left center repeat-x"
  6. }});
  7.  


This will create a progress bar into #some-element with the image as a repeated background. Any style you want you can just put in that option. Only things like margin, padding and border will mess with the layout.

Hope this helps you, be sure to check out the JS-file, the documentation is in there and thanks for your comment! :D
User avatar
akaIDIOT
 
Posts: 10
Joined: Fri Jul 18, 2008 2:37 am
Location: Enschede, THe Netherlands

Re: [v0.3] mootools 1.2 progress bar

Postby bratter on Tue Sep 02, 2008 6:57 am

Nice Work!!

This is going to have to be adbrupt, cause I was procrastinating by checking your thing out :P... but in opera 9.15 the bar jumps to the end then retracts when advancing, instead of simply advancing. In FF 2, it was working fine.

This is really good, I think I will have to use it!

Cheers,
Brendan
bratter
 
Posts: 3
Joined: Tue Sep 02, 2008 6:55 am

Re: [v0.3] mootools 1.2 progress bar

Postby ramseymord on Sat Sep 06, 2008 6:13 pm

AMAZING MAN... :o i love it... :P
err.. where's the paypal link? (donate) ;)
ramseymord
 
Posts: 6
Joined: Sat Sep 06, 2008 7:50 am

Re: [v0.3] mootools 1.2 progress bar

Postby akaIDIOT on Sat Sep 06, 2008 8:01 pm

bratter wrote:...in opera 9.15 the bar jumps to the end then retracts when advancing, instead of simply advancing...

Hmm, I see what you mean. That's odd, as it works fine in IE6 as wel...
When I have some time on my hands I'll try to get it fixed :)

ramseymord wrote:AMAZING MAN... :o i love it... :P
err.. where's the paypal link? (donate) ;)

I have no paypal account, nor I am looking to make money out of it. Your support is greatly appreciated though <3
If you feel like doing something back: use it and put my name on your about / credits page :)
User avatar
akaIDIOT
 
Posts: 10
Joined: Fri Jul 18, 2008 2:37 am
Location: Enschede, THe Netherlands

Re: [v0.3] mootools 1.2 progress bar

Postby Quest on Tue Aug 04, 2009 12:11 pm

anyone has this script saved?
link seems to be down...
Quest
mootools connoisseurs
 
Posts: 42
Joined: Mon Jul 28, 2008 9:56 am


Return to Your Scripts

Who is online

Users browsing this forum: MSN [Bot] and 1 guest