Loading ...
Sorry, an error occurred while loading the content.

progress bar?

Expand Messages
  • Michael Terry
    Hi, Has anyone made a good looking progress bar widget with yui? -- mwt
    Message 1 of 2 , Nov 3, 2006
    • 0 Attachment
      Hi,

      Has anyone made a good looking progress bar widget with yui?

      -- mwt
    • onionesque
      ... I won t vouch for good looking , but here s one I made. It uses YAHOO.ext.DomHelper, but you could easily replace the DomHelper code I m using with
      Message 2 of 2 , Nov 4, 2006
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, Michael Terry <michael.terry@...> wrote:
        > Has anyone made a good looking progress bar widget with yui?

        I won't vouch for "good looking", but here's one I made. It uses YAHOO.ext.DomHelper, but you could easily replace the DomHelper code I'm using with document.createElement, etc.

        Usage:

          var p = new Demo.ProgressBar();
          p.show();
          p.setProgresss(.2);
          p.setProgress(.9);
          p.setMessage("Hello, I'm doing something!");
          p.setIndeterminate(true);
          p.setMessage("This could take a long time.");
          p.hide();


        ProgressBar.css

        .progressbar {
            position: relative;
            left: 0;
            top: 0;
            text-align: center;
            width: 1px;
            height: 15px;
            background-color: blue;
            overflow: hidden;
            color: white;
            font-size: 12px;
        }

        .indeterminate {
            width: 211px ! important;
            background: white -5px -2px url(img/barberpole.gif) no-repeat;
        }
            
        .progressbarcontainer {
            width: 211px;
            height: 15px;
            border: 1px solid #eeeeee;
        }

        .progressdialog .bd {
            text-align: left;
        }

        .progressmessage {
            margin-bottom: 1ex;
        }
        /* end css */


        ProgressBar.js

        Demo.ProgressDialog = function () {
            var messageId = YAHOO.util.Dom.generateId();
            var barId = YAHOO.util.Dom.generateId();
            
            var dialogDiv = YAHOO.ext.DomHelper.append(document.body, { tag: 'div', cls: 'progressdialog', children: [
                { tag: 'div', cls: 'hd', html: 'Upload Progress' },
                { tag: 'div', cls: 'bd', children: [
                    {tag: 'div', id: messageId,  cls: 'progressmessage', html: '&nbsp;'},
                    {tag: 'div', cls: 'progressbarcontainer', children: [
                        {tag: 'div', id: barId, cls: 'progressbar'}
                    ]}
                ]}
            ]});
            
            this.dialog = new YAHOO.widget.Dialog(dialogDiv, {
                draggable: true,
                modal: true,
                visible: false,
                close: false,
                fixedCenter: true,
                constrainToViewport: true
            });
            this.dialog.render();
            this.message = $(messageId);
            this.bar = $(barId);
        };

        Demo.ProgressDialog.prototype.dialog = null;
        Demo.ProgressDialog.prototype.message = null;
        Demo.ProgressDialog.prototype.bar = null;

        Demo.ProgressDialog.prototype.show = function () {
            this.dialog.show();
        };

        Demo.ProgressDialog.prototype.hide = function () {
            this.dialog.hide();
        };

        Demo.ProgressDialog.prototype.setIndeterminate = function(beIndeterminate) {
            var b = this.bar;
            if (beIndeterminate)
            {
                YAHOO.util.Dom.addClass(b, 'indeterminate');
                b.innerHTML = '';
            }
            else
            {
                YAHOO.util.Dom.removeClass(b, 'indeterminate');
            }
        };

        Demo.ProgressDialog.prototype.setMessage = function (text) {
            this.message.innerHTML = text;
        };

        Demo.ProgressDialog.prototype.setProgress = function (ratio) {
            var width = Math.floor(100 * ratio) + '%';
            this.bar.style.width = width;
            this.bar.innerHTML = width;        
        };

      Your message has been successfully submitted and would be delivered to recipients shortly.