Beiträge von jungspund

jungspund

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

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

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

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

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

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?

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.

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.

Beiträge von jungspund

animieren eines erzeugten <div> Ladebalkens

animieren eines erzeugten <div> Ladebalkens

animieren eines erzeugten <div> Ladebalkens

animieren eines erzeugten <div> Ladebalkens

animieren eines erzeugten <div> Ladebalkens

animieren eines erzeugten <div> Ladebalkens

animieren eines erzeugten <div> Ladebalkens

animieren eines erzeugten <div> Ladebalkens