Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 13

Thema: animieren eines erzeugten <div> Ladebalkens

  1. #1
    HTML Newbie
    Registriert seit
    14.08.2012
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard animieren eines erzeugten <div> Ladebalkens

    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=XjCjb...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-Code:
    <input type="button"; onclick="isChecked()"; value="Add Download">
    Der Code zum hinzufügen der Reihe an sich:
    HTML-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 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);
                
            }
    und zuletzt noch der Progessbar:
    HTML-Code:
    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 + '%';
                }
            }
    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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    HTML Newbie
    Themenstarter

    Registriert seit
    14.08.2012
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: animieren eines erzeugten <div> Ladebalkens

    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);
                
                
            }
    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.

  3. #3
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: animieren eines erzeugten <div> Ladebalkens

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    14.08.2012
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: animieren eines erzeugten <div> Ladebalkens

    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?

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: animieren eines erzeugten <div> Ladebalkens

    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/1...ull=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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    14.08.2012
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: animieren eines erzeugten <div> Ladebalkens

    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

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: animieren eines erzeugten <div> Ladebalkens

    is ja nich tragisch..^^ in 45 minuten is meine radiosendung vorbei, da kann ich dir wieder helfen
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    14.08.2012
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: animieren eines erzeugten <div> Ladebalkens

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

  9. #9
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: animieren eines erzeugten <div> Ladebalkens

    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?
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    14.08.2012
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: animieren eines erzeugten <div> Ladebalkens

    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();
                }
            }
    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();
                
                
            }
    Geändert von jungspund (21.08.2012 um 14:30 Uhr)

Ähnliche Themen

  1. Zeilenumbrüche in durch Skript erzeugten Seiten
    Von ullistein im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 0
    Letzter Beitrag: 03.02.2011, 16:16
  2. Kopflogo animieren
    Von a18k07 im Forum Flash Forum
    Antworten: 4
    Letzter Beitrag: 07.05.2008, 18:55
  3. Navigation animieren, verändern usw.
    Von 00eraser00 im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 23.07.2007, 12:05
  4. Navigation animieren
    Von Dr. Evil im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 12
    Letzter Beitrag: 20.07.2007, 08:45
  5. Gifs animieren
    Von CheckaBunny im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 6
    Letzter Beitrag: 16.07.2007, 12:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •