Calling For Ideas: dwProgressBar and Typewriter

By on  

Just wanted to throws this out there quick. I'm looking for ideas from you on how to enhance my dwProgressBar and Typewriter classes. I appreciated the compliments but I know there's always room for improvement. I need your ideas!! Here's what I have so far:

dwProgress Bar

  • "Stepping Mode" -- Instead of constant set() calls, why not step a specified number each time?
  • More examples



  • "Character Deletion" -- Everyone makes typos, right? Now the typewriter can go backward!
  • "Character Delay Variation" -- Now the pace at which the typewriter displays characters can vary.


Can you think of anything else? Please let me know!

Track.js Error Reporting

Upcoming Events

Recent Features

  • 9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • 5 More HTML5 APIs You Didnât Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...

  • Create a Download Package Using MooTools Moousture

    Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP. The XHTML We provide...


  1. Chuck

    Hey David,

    I was wondering why you use mootools mostly instead of jquery.

  2. dwProgress Bar:
    you can pass as argument an array of function to execute, the script can count it, execute it and set itself to increase by a portion on every end.


    var f= new Array();
    f[0] = alert('olè');
    f[1] = alert('olè2');
    f[2] = alert('olè3');
    f[3] = alert('olè4');
    pb = new dwProgressBar(f,{  
        container: $('put-bar-here'),  
        startPercentage: 0, 
        boxID: 'box',  
        percentageID: 'perc'

    in this case, for every alert() the bar can increase itself by a 25% automatically.


  3. I obviously can’t speak for David (and you were asking him so you probably don’t care :) ) but for me it simply comes down to familiarity. I started with MooTools when it was still just MooFx and based around a “lite” version of Prototype (if memory serves). From there I just migrated to MooTools and used it when I needed more than a one or two small onload functions. I’ve dabbled with jQuery since it came around to top all the popularity polls but I’ve never seen a killer feature that’s stolen me away. This could be laziness on my part as much as anything but it’s worked for me so far.

    I’ve always felt that it was sort of skipped over a little unfairly. There was a period of time when you couldn’t turn round without tripping over a Scriptaculous article. MooTools, as it was then, was getting very little attention despite offering, for me, similar simplified control in, at the time, a dramatically smaller filesize (I say at the time as I have no idea when Scriptaculous itself it like these days). Then it seemed like suddenly jQuery was everywhere and the Moo went unnoticed. It’s possible that there was a more involved and public discussion process that lead to jQuery’s dominance but if that history exists I blinked and missed it.

    Sorry, I’m rambling on, and potentially to people who aren’t interested :) Move along, nothing to see.

  4. Chuck

    hey evil,

    Thanks for that. I asked David but would like to know from others. Laziness is a great reason. Since I didn’t know ANY js until jquery, the plugins made it for me. Since then I’ve learned a little.

    I think the reason a lot of people skipped moo is because (at least a year ago) they really pushed it was for advanced js people. I was scared to post there, being a rookie and all. Then jQ came along and it seemed easier for noobs to learn. Kinda like joomla.

    I’ve heard great things about moo though, and the MODx devs use it for the manager. They say it worked great and fast w/ Ext for the new backend ui.

  5. I’m using jQuery because it had some effects, MooTools didn’t support well enough. That’s the only reason. It’s a pure matter of taste I think. But I wouldn’t say that jQuery is the “MooTools Joomla” – then MooTools would be “Typo3″. Try to compare Joomla and Typo3 ;-)
    jQuery is also full of advanced features. If you’re new to JS, both frameworks are well done (and easy to learn) I think.

  6. Chuck

    The only comparison was “Joomla is often chosen because it is easy for rookies: jQuery may have a quick uptake because it is easy for rookies”

    My comparison ends there.

  7. aleorem

    the message variable that the writer actually writes should came out of an object in html. that would allow search engines to parse the text, and people with deactivated javascript. furthermore you can use markups like strong or em.

    it would be cool if you could add a courser that the text writes

  8. Some ideas for Typewriter –
    Being able to load ‘news’ or ‘headlines’ from a different page, e.g a news page, maybe it could pull in everthing within the news div (not sure if thats even possible) using ajax.

    Secondly a delay after set no of characters/words so you could have
    “Breaking News . .
    and then it stops (maybe a dot appears and then dissepears over teh space of 5 seconds) then the rest of the message appears so it looks like its pulling in breaking news as it happens.

    Just a few ideas!

    Maybe once the ‘headline’ has been typed out, it then slides up out of the box and the next one is typed in.

  9. RG

    Ummm, Joomla may well be used by Rookies but its by no means a rookie web builder.

    It happens to be a CMS that allows a web builder to make effective sites with rapidly where the sites recipient (ie: customer) can be taught or entire organization taught how to effectively manage the site.

    Typo 3 as well as numerous others are complete nightmares when it comes to training an external organization on maintaining a site. Understand something here… Programmers (which I am one) have essentially forced many businesses into a wall which Micro$oft is working to resolve. We’ve built static sites, flash sites, sites with Drupal and others… Not a SINGLE customer of ours is EVER happy about having us get paid to maintain a site. What businesses and even privateers want is a site built for them and then they want just maintain it, add content, photo’s, manage a blog whatall.

    Because of basically web development firms greed factor Micro$oft has decided the opportunity exists to cease this market in large fashion. I suggest you look at what the strategic vision is, take a look at what Visual Studio 2010 is to be as well as the time frames of the next three release of Visual Studio, SQL Server and IIs.

    Beyond needing perhaps an artist… the Web Developer will become a relic as businesses, individuals etc. will be able to drag/drop, set properties and associations and be able to literally visually build webs that make not only Joomla, but Typo, Drupal and numerous others look like DOS .vs. Windows.

    Thats only a bit of the pie however… For stand alone apps, c/s apps they are moving the same way. For example I saw a few demos of forms, say an invoice form, purchase order, general accounting forms literally customized easily, dragged and dropped into VS 2010 and wham… it built an application that from scratch would have taken me 6 months and it did so in about 4 minutes.

    While we as programmers may see fault in everything from Joomla to DotNetNuke reality is we are not the customer. The technology both in computing performance and price as well as coders holding cards close so they stay the focal point for business, applications etc. development instead of considering the customers ablity to control is going to result in programmers becoming the exception, not the rule.

    Now… whether anyone care debate that… doesnt matter.

    We have had more customers happy with their Joomla sites and easy training than any other web building solution we have encountered. Our business has spiked in huge fashion due to it. Additionally we do get more of these clients asking us for additions, scrolling this, and active that because they realize… Once we do the dev work they do the rest and they LOVE IT.

    THEY see the results of THEIR efforts and take ownership in it .vs. them paying us over and over and over. Its simply a no brainer folks. Locally here where we are not only has our business increased in huge fashion due to Joomla CMS but we have had numerous clients dropping other local firms in favor of us… Why? Because word travels.

    Joomla is not a amateur platform… It is in fact a fantastic way to make money.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...