Home  ›  Why Is My Upload Bar on the Same Percentage

Why Is My Upload Bar on the Same Percentage

Written By Wednesday, April 13, 2022 Add Comment Edit

Looking for a jQuery version of jsProgressBarHandler? Then requite this file a effort. It'due south a ported version created by Darryl Pentz, pb programmer at CentraStage

Overview

  • What is jsProgressBarHandler?
  • Demo
  • Download
  • Version History
  • License & Usage
  • Installation/Configuration
  • FAQ
  • Feedback/Assistance/Back up
  • Make a donation

What is jsProgressBarHandler ?

jsProgressBarHandler is a Javascript based Pct Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code past Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar tin easily be extended and tweaked just by setting a few parameters.

jsProgressBarHandler

jsProgressBarHandler has been tested and verified working in IE6, IE7, FireFox 2 and Safari iii.0.three. Other browsers should work fine also (untested though).

height

Demo

Download

Version History

Version 0.three.3 – 2008.11.10

  • UPD: fixed IE compatibility event (thanks Kevin – Sep 19 2008 / 6pm)
  • UPD: setPercentage now parses the targetPercentage to an Integer to avert infinite loop (thanks Jack – Sep 07 2008 / 9pm)
  • UPD: Moved from Consequence.Observe(window, 'load', fn) to document.discover('dom:loaded', fn) in gild to strength people to utilise an upwardly to date Prototype release.
  • UPD: setPercentage now takes an overrideQueue param. If ready the current queue is cleared.
  • ADD: Added onTick callback outcome which gets called when the percentage is updated.
  • ADD: Added stable (as in "non-crashing") versions of the additions which offset surfaced in the (unreleased) 0.3.ii release
    Preloading support partially implemented in IE equally all versions (IE6,7&8) are quite hard to tame (ane time they piece of work, the next reload they don't anymore)

Version 0.3.two – 2008.04.09 (*UNRELEASED*)

  • ADD: implemented preloading of images to avoid slight flicker when switching images (BUGGY!)
  • Add: percentage prototype now has class percentImage and per centum Text now has class percentText; This allows you to style the output easily.

Version 0.3.one – 2008.02.20

  • UPD: fixed queue bug when animate was set to false (cheers Jamie Chong)
  • UPD: updatedPrototype to version 1.6.0.two

Version 0.3.0 – 2008.02.01

  • ADD: animation queue, prevents from the progressbar getting stuck when multiple calls are made during an animation
  • UPD: multiple barImages at present work properly in Safari

Version 0.2.ane – 2007.12.21

  • ADD: option: gear up boxImage
  • ADD: option: set barImage (1 or more than)
  • Add together: choice: showText

Version 0.two – 2007.12.13

  • SYS: Total rewrite of jsProgressBarHandler, now comes in two classes
  • Add: Configuration Options (animate, width, height)

Version 0.i – 2007.08.02 – * INITIAL RELEASE *

  • Bones rewrite of the webappers.com version

pinnacle

License & usage

Installation/Configuration

Working with Red on Rails? Then check out Progress Bar Helper, written by Thomas Gendulphe

Progressbars can either exist manually created, or automatically.

Automatic Creation of Progress Bars

  1. Include the needed javascript (ii files) in your HTML document (included in download)

    [html] <!– jsProgressBarHandler prerequisites : prototype.js –>
    <script blazon="text/javascript" src="js/prototype/prototype.js"></script>

    <!– jsProgressBarHandler cadre –>

    <script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script>[/html]

  2. The elements you want to change with a dynamic progressBar must be scripted as this:

    [html]<span grade="progressBar" id="myElementId">xv%</span>[/html]

    • Aye, it must be a span chemical element
    • progressBar is the className that will trigger jsProgressBarHandler to change it with a progress bar
    • the id (myElementId in the example) must be unique (as per HTML specification) and is required for jsProgressBarHandler to work properly
    • the innerHTML of the element must exist the percentage (either with or without the &proc; character)
  3. Yous might desire to edit the showtime few lines (#28-35) of js/bramus/jsProgressBarHandler.js to modify some settings like width, height, animation and the images to use
  4. That'south it, y'all're done!

Manual Cosmos of Progress Confined

  1. Include the needed javascript (ii files) in your HTML certificate (included in download)

    [html] <!– jsProgressBarHandler prerequisites : prototype.js –>
    <script type="text/javascript" src="js/image/prototype.js"></script>

    <!– jsProgressBarHandler core –>

    <script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script>[/html]

  2. Create a container (viz. a regular HTML chemical element similar a paragraph or a span) in your HTML file to concord the progressbar. Brand sure it has an id set.

    [html]<div grade="percentImage1" id="hereComesMyFirstProgressBar">[ Loading Progress Bar ]</div>[/html]

  3. If you're using the default markup used (with span elements which has progressBar as className), then edit js/bramus/jsProgressBarHandler.js and prepare the var autoHook to false (line #25)

  4. Create a new JS_BRAMUS.jsProgressBar instance by adding this javascript to your HTML folio (the code will exist executed when the DOM is done loading):

    [js]Result.detect(window, 'load', part() {
    firstManualPB = new JS_BRAMUS.jsProgressBar($('hereComesMyFirstProgressBar'), 50, {breathing: fake, width: 240, height: 24});
    secondManualPB = new JS_BRAMUS.jsProgressBar($('hereComesMySecondProgressBar'), 10, {animate: true, showText: false});
    }, false);[/js]

    • The beginning param is the element to create the progressbar in
    • The second param is the (intial) per centum the progressbar should hold
    • The tertiary param is optional and holds a specific configuration for that instance. Parts of this object can exist omitted (and parts of the default options will be used instead), or the param tin fifty-fifty be dropped (the full default options volition be used)
  5. You lot might desire to edit the starting time few lines (#28-35) of lib/jsProgressBarHandler.js to change the default settings for width, height, animation and the images to utilize
  6. To configure an onTick callback function, please read the postal service introducing jsProgressBarHandler 0.iii.three 😉
  7. That'due south it, yous're washed!

top

FAQ

Coming soon:

  • How can I implement my own images?
  • How can I create a multi-colored progress bar? (tip: options.barImage)
  • How can I invoke a certain action when a certain percentage is reached? (tip: options.onTick – see this folio for now.)

peak

Feedback/Support

One tin can always leave a comment in example any questions should ascend or if a bug were to exist found; and one can ever support me past altruistic me a tidbit to my paypal ;)

tiptop

Make a donation

hardythadisitud.blogspot.com

Source: https://www.bram.us/projects/js_bramus/jsprogressbarhandler/

0 Response to "Why Is My Upload Bar on the Same Percentage"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel