animieren eines erzeugten <div> Ladebalkens

jungspund

Hallo,

ich habe folgendes Problem, und zwar besitze ich eine Tabelle, in welcher ich "dynamisch" Downloads hinzufügen kann.
Damit das ganze auch etwas ansprechender aussieht, habe ich eine <div> Progressbar in die Tabelle mit übernommen, da super Schrott Browser ala IE
mit dem Progessbar noch nicht so wirklich zurechtkommen (unter XP auf jedenfall).

hatte mir dazu ein eigentlich recht gutes zutorial angeguckt(tutorialreihe):
http://www.youtube.com/watch?v=XjCjbRWX38c&feature=relmfu

nach ewiger Sucherei hab ich mich nun entschieden mal nachzufragen.

erst einmal der Code:

Der Button zum hinzufügen der Reihe in die Tabelle

HTML

<input type="button"; onclick="isChecked()"; value="Add Download">

Der Code zum hinzufügen der Reihe an sich:

HTML

function addDownload(filename, filesize) {

            var table       = document.getElementById("download_table");
            var body        = table.getElementsByTagName("tbody")[0];
            var tr          = document.createElement("tr");
            var td1         = document.createElement("td");
                td1.appendChild(document.createTextNode(filename));
            var td2         = document.createElement("td");
                td2.appendChild(document.createTextNode(filesize));

                //Definieren des Progressbalkens
            var td3         = document.createElement("td");
            var container   = document.createElement("div");
            var bar = progressbarGui(container);


            td3.appendChild(container);

            var td4         = document.createElement("td");
            var button      = document.createElement("input");
                button.setAttribute("type","button");
                button.setAttribute("Value", ". . .");
                td4.appendChild(button);
            var td5         = document.createElement("td");
                td5.appendChild(document.createTextNode("downloading"));

            td1.setAttribute("width", "40%");
            td2.setAttribute("width", "10%");
            td3.setAttribute("width", "30%");
            td4.setAttribute("width", "10%");
            td5.setAttribute("width", "10%");

            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td5);
            tr.appendChild(td4);
            tr.setAttribute("id", filename);
            tr.setAttribute("onclick", "markRow(this)");
            tr.setAttribute("style", "background:rgb(245, 245, 245)");

            //bar.set_percantage(80);
            tr.ready = function() {
                var i = 0;

                var intervall = window.setInterval(function()  {
                    if(i >= 100) {
                        window.clearInterval(intervall);
                    }
                    bar.set_percantage(i);
                    ++i;
                },100);
            }

            body.appendChild(tr);

        }

Alles anzeigen

und zuletzt noch der Progessbar:

HTML

function progressbarGui(container) {
            var progressbar = document.createElement("div");
            var bar         = document.createElement("div");
            var text        = document.createElement("div");

            progressbar.style.width     = "100%";
            progressbar.style.height    = "20px";

            bar.className               = "progress";

            progressbar.appendChild(bar);

            text.style.marginTop        = "-19px"
            text.style.textAlign        = "center";
            text.style.textSize         = "15px";

            text.appendChild(document.createTextNode("0%"));

            progressbar.appendChild(text);

            container.appendChild(progressbar);

            this.set_percantage = function(percantage) {
                bar.style.width = percantage + '%';
            }
        }

Alles anzeigen

Hatte schon versucht, mit tr.onload oder tr.ready einen Effekt ala window.onload zu erzeugen, sprich nachdem die Reihe fertig in das HTML Dokument geladen wurde das Intervall zu starten.
Hoffe da gibt es eine Lösung zu, wobei ich denke, dass sie recht einfach ist und ich nur gerade nicht darauf komme.

jungspund

habe den Balken mittlerweile animiert bekommen, indem ich das ausgelagerte div Element, welches den Balken darstellt wieder in das hinzufügen der Reihe gelegt habe, dabei habe ich nun ein weiteres Problem. Erst einmal der Code:

Code

function addDownload(filename, filesize) {

            var table       = document.getElementById("download_table");
            var body        = table.getElementsByTagName("tbody")[0];
            var tr          = document.createElement("tr");
            var td1         = document.createElement("td");
                td1.appendChild(document.createTextNode(filename));
            var td2         = document.createElement("td");
                td2.appendChild(document.createTextNode(filesize));

                //Definieren des Progressbalkens
            var td3         = document.createElement("td");
            var container   = document.createElement("div");
            var progressbar = document.createElement("div");
            var bar         = document.createElement("div");
            var text        = document.createElement("div");

            progressbar.style.width     = "100%";
            progressbar.style.height    = "20px";

            bar.className               = "progress";

            progressbar.appendChild(bar);

            text.style.marginTop        = "-19px"
            text.style.textAlign        = "center";
            text.style.textSize         = "15px";

            text.appendChild(document.createTextNode("0%"));

            progressbar.appendChild(text);

            container.appendChild(progressbar);




            td3.appendChild(container);

            var td4         = document.createElement("td");
            var button      = document.createElement("input");
                button.setAttribute("type","button");
                button.setAttribute("Value", ". . .");
                td4.appendChild(button);
            var td5         = document.createElement("td");
                td5.appendChild(document.createTextNode("downloading"));  

            td1.setAttribute("width", "40%");
            td2.setAttribute("width", "10%");
            td3.setAttribute("width", "30%");
            td4.setAttribute("width", "10%");
            td5.setAttribute("width", "10%");

            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td5);
            tr.appendChild(td4);
            tr.setAttribute("onclick", "markRow(this)");
            tr.setAttribute("style", "background:rgb(245, 245, 245)");


            body.appendChild(tr);

            set_percantage = function(percantage) {
                bar.style.width = percantage + "%";
                text.removeChild(text.firstChild);
                text.appendChild(document.createTextNode(percantage + "%"));
            }

            var i = 0;

            var interval = window.setInterval(function() {
                if(i>=100) {
                    window.clearInterval(interval);
                }
                set_percantage(i++);
            },200);


        }

Alles anzeigen

Habe nun unten ein einfach ein normales Intervall erstellt, welches den Ladebalken animiert.
Nun habe ich das Problem, dass beim erzeugen eines Elements sich jedes Intervall nur auf ein Div Element bezieht.
Ein Beispiel:
Ich füge erst eine Reihe hinzu, der "Ladebalken" bewegt sich dabei langsame von 0% - 100%, dabei ist alles richtig.
Füge ich nun noch eine weitere Reihe hinzu, arbeitet das letzte Intervall am neu erstellten "Ladebalken" mit und somit springt dieser immer in der Größe und Prozentzahl.

synaptic

ja so ein vorhaben ist ein klasse beispiel für ein jQuery-Plugin

was genau meinst du mit springen?

ich vermute mal, dass du (weil du keinen namespace/objektbereich hast) die variablen der beiden ladebalken überschreibst und somit kommt eine fehlfunktion zustande

du brauchst hier wohl eher nen objektorientierten ansatz für "normales" javascript oder eben ein jquery-plugin

jungspund

Da meine JQuery Kentnisse leider nur extrem begrenzt sind, würde ich gerne fragen, wie ich es denn bewerkstelligen soll, oder ob es gute Tutorials dazu gibt?

synaptic

gute tutorials.. definiere gut..^^
also tuts gibt es massig, nur gut.. naja das ist was anderes. wenn du mit jQuery noch keinerlei erfahrung hast, dann isses echt nicht einfach dir dir grundlagen so fix zu vermitteln, dass du deinen ladebalken bauen kannst.
eine gut plugin-basis findest du hier:
http://www.jquery-board.de/threads/1867-%…full=1#post7210
wie man ein plugin schreibt findest du auch dort und auch bei jquery selber.
wenn du es aber einmal verstanden hast, willst du nur noch plugins basteln

jungspund

ok dann danke erst einmal, ich werde mal versuchen mich hineinzulesen in die Materie .
Hab halt grad erst ne Asubildung angefangen und hatte vorher noch nie was mit JS, HTML5 am Hut

synaptic

is ja nich tragisch..^^ in 45 minuten is meine radiosendung vorbei, da kann ich dir wieder helfen

jungspund

Danke für den Hinweis mit den Objektorientierten, habs nun mittlwerweile ohne JQuery aber als Objectorientiertes Javascript hinbekommen.

synaptic

hey, kein ding.. aber eine frage hab ich da dennoch

wo ist der sinn eines ladebalkens, der einem einfach nur von 0 auf 100% zählt? ich mein das is doch nur dann wirklich effizient, wenn man damit einen echten zeitraum darstellt oder ein echtes datenvolumen..
so is der balken doch nichtssagend oder irre ich mich etwa?

jungspund

ja da hast du recht, der Balken ist im moment noch nichtssagend, und es ging mir am Anfang nun erst einmal darum jeden Balken zu animieren.
Nun habe ich aber leider ein anderes Problem, denn wenn ich diese Elemente erstellt habe, werden sie doch zu DOM Elementen der Tabelle.
Ich versuche nun mit folgenden Code Zeilen per click auszuwählen.(jedem <tr> Element gebe ich diese Methode durch das Event onclick mit).
Dadurch möchte ich nachher nur eine Zeile ausgewählt haben, in welcher ich den Ladebalken stoppen und wieder starten kann, nun zur Frage:
Ich referenziere hier ja nur die DOM Objekte wenn ich das richtig verstehe, aber in keinem Fall den Ladebalken, wie kann ich diesen Zugriff erreichen? Auch nur per JQuery?
der Code zum auswählen einer Zeile in der Tabelle:

Code

function markRow(item) {

            item.style.backgroundColor = (item.style.backgroundColor == 'rgb(245, 245, 245)') ? '#ccc' : 'rgb(245, 245, 245)' ;


            if(markedRow == item) {
                markedRow   = undefined;
                changeStatusCancel();
                changeStatusPause();
                changeStatusResume();
            }
            else if(typeof(markedRow) != "undefined") {
                markedRow.style.backgroundColor = 'rgb(245, 245, 245)';
                markedRow   = item;
            }
            else if(typeof(markedRow) == "undefined") {    
                markedRow   = item;
                changeStatusCancel();
                changeStatusPause();
                changeStatusResume();
            }
        }

Alles anzeigen

Und wie gesagt der Balken macht noch nichts, es geht mir erst einmal darum, dass ich die Elemente steuern kann, wenn dies der Fall ist müsste ich sie nur noch mit Datenwerten füttern.

Edit :

Die Change Status Methoden ändern nur den Status der Buttons Cancel,Pause und Resume von Enabled auf Disabled, falls eine Zeile ausgewählt ist, oder nicht.

Edit2 :

Der vllt noch benöigte Code für den Download.

Code

function addDownload(filename, filesize) { 


            var table       = document.getElementById("download_table");
            var body        = table.getElementsByTagName("tbody")[0];

            /*
            * der Variable progress, wird der Funktion zum erstellen einer Zeile in der Tabelle zugeordnet,
            * um sie als Objekt zu erzeugen, dies ist notwendig, damit die Intervalle die Objekte ansprechen und nicht 
            * nur eine Zeile als Element der Tabelle.
            */
            var progres     = function() {
                this.tr                         = document.createElement("tr");
                this.progress                   = document.createElement('div');
                this.td1                        = document.createElement("td");
                this.td1.appendChild(document.createTextNode(filename));
                this.td2                        = document.createElement("td");
                this.td2.appendChild(document.createTextNode(filesize));
                this.td3                        = document.createElement("td");
                this.container                  = document.createElement("div");
                this.progressbar                = document.createElement("div");
                this.bar                        = document.createElement("div");
                this.text                       = document.createElement("div");
                //Anfang Progressbar
                this.progressbar.style.width     = "100%";
                this.progressbar.style.height    = "20px";

                this.bar.className               = "progress";

                this.progressbar.appendChild(this.bar);

                this.text.style.marginTop        = "-19px"
                this.text.style.textAlign        = "center";
                this.text.style.textSize         = "15px";

                this.text.appendChild(document.createTextNode("0%"));
                this.progressbar.appendChild(this.text);
                this.container.appendChild(this.progressbar);
                //Progressbalken Ende

                this.td3.appendChild(this.container);
                this.td4                        = document.createElement("td");
                this.button                     = document.createElement("input");
                this.button.setAttribute("type","button");
                this.button.setAttribute("Value", ". . .");
                this.td4.appendChild(this.button);
                this.td5                        = document.createElement("td");
                this.td5.appendChild(document.createTextNode("downloading")); 

                this.td1.setAttribute("width", "40%");
                this.td2.setAttribute("width", "10%");
                this.td3.setAttribute("width", "30%");
                this.td4.setAttribute("width", "10%");
                this.td5.setAttribute("width", "10%");



                this.tr.appendChild(this.td1);
                this.tr.appendChild(this.td2);
                this.tr.appendChild(this.td3);
                this.tr.appendChild(this.td5);
                this.tr.appendChild(this.td4);
                this.tr.setAttribute("onclick", "markRow(this)");
                this.tr.setAttribute("style", "background:rgb(245, 245, 245)");


                body.appendChild(this.tr);

                //Das ändern der Größe eines Ladebalkens
                this.set_percantage = function(percantage) {    
                        this.bar.style.width = percantage + "%";
                        this.text.removeChild(this.text.firstChild);
                        this.text.appendChild(document.createTextNode(percantage + "%"));

                }
                this.beendet        = function() {
                    this.td5.removeChild(this.td5.firstChild);
                    this.td5.appendChild(document.createTextNode("beendet"));
                }
                this.pause          = function() {
                    this.td5.removeChild(this.td5.firstChild);
                    this.td5.appendChild(document.createTextNode("pause"));
                }
                this.resume         = function() {
                    this.td5.removeChild(this.td5.firstChild);
                    this.td5.appendChild(document.createTextNode("downloading"));
                }

                var i = 0;

                var interval = window.setInterval(function() {
                    if(i>=100) {
                        window.clearInterval(interval);
                        row.beendet();
                    }
                    row.set_percantage(i++);
                },150);

                this.pause = function() {
                    window.clearInterval(interval);
                    row.pause();
                }
                this.resume = function() {
                    row.resume();
                    var interval = winddow.setInterval(function() {
                      if(i>=100) {
                        window.clearInterval(interval);
                        row.beendet();
                    }
                    row.set_percantage(i++);  
                },150);
            }


            }

            var row = new progres();


        }

Alles anzeigen

jungspund

Habe das Problem nun Mittlerweile gelöst speicher die ganzen Downloads jetzt in nem Array und so kann ich auch darauf zu greifen...

jungspund

hab es nun auch gelöst, keine Antwort mehr nötig, aber trotzdem danke

SinnlosS

Ist zwar erledigt, aber da ich zur Zeit so begeistert von Twitter Bootstrap bin, da gibt es auch schöne Progress Bars. Fortschritt einfach durch javascript-seitige Aktualisierungen der width von div.bar
http://twitter.github.com/bootstrap/components.html#progress

Tags