php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 03-07-2009, 18:31
ezkimo
 Registrierter Benutzer
Links : Onlinestatus : ezkimo ist offline
Registriert seit: Apr 2005
Ort: Beckum / Westf.
Beiträge: 279
ezkimo befindet sich auf einem aufstrebenden Ast
ezkimo eine Nachricht über ICQ schicken
Standard Interpreter Problem bei Prototype Klasse

Hallo Gemeinde,

leider hänge ich gerade an einer Sache, bei der ich hoffe von Euch den weiterbringenden ultimativen Tipp zu bekommen. Es geht um Folgendes:

Ich habe eine Prototype / Javascript Klasse, welche asynchron alle Thumbnails eines Albums einer Galerie ermittelt. Es wird ein JSON String zurückgeliefert, welcher letztendlich in ein Objekt aufgelöst wird. Anhand des Objektes erstelle ich pro Bild ein DIV Element, welches das jeweilige Thumbnail enthält. Nachdem alle DIV Elemente erstellt wurden, benötige ich die gesamte Breite aller DIV Elemente, um sie in einer Slide-Show darzustellen. An sich alles machbar und funktioniert soweit auch.

Es gibt lediglich ein Problem beim ermitteln der gesamten Breite. Zunächst aber mal der Code in gekürzter Fassung ...

Code:
var Gallery = Class.create({
    
    albumID : 0,
    itemCount : 0,

    initialize : function(albumID) {
        this.albumID = albumID;
        new Ajax.Request('index.php?action=Foo&do=Bar&albumID='+albumID, {
            method : 'post',
            onComplete : function(transport) {
                var data = transport.responseText.evalJSON(true);
                ...
            }
        });
    },

    createImageContainer : function(imagePath, image) {
        var itemDiv = new Element('div', {
            'class' : 'foo',
            'id' : 'item-' + this.itemCount
        });

        var itemImage = new Element('img', {
            'src' : imagePath + image['src'],
            'alt' : image['caption']
        });

        itemDiv.appendChild(itemImage);
        $('imageContainer').appendChild(itemDiv);
    },

    setMaxWidth : function() {
        var maxWidth = 0;
	$$('div[id*="item-"]').each(function(item) { 
		maxWidth = maxWidth + item.getWidth();
		alert(maxWidth); 
	});

        $('imageContainer').setStyle({
            width: maxWidth + 'px'
        });
    }
});
Das Augenmerk gilt der Funtion setMaxWidth. Diese Funtion liest alle erstellten DIV Elemente aus und ermittelt die Breite und addiert diese zur Gesamtbreite zusammen. Solang ich das alert() in dieser Funktion belasse, funktioniert alles wie gewünscht. Wenn ich das alert() rausnehme bekomme ich eine maximale Breite von lediglich 300 Pixeln, obwohl die Breite über 2000 Pixel hinaus gehen müsste.

Ich habe es schon mit der window.setTimeout() Funktion probiert, um ein Delay im Funktionsablauf zu erzeugen. Aber klappt auch nicht. Gibt es hier einen Lösungsansatz?

Danke schon mal für die möglichen Antworten.
__________________
MM Newmedia | MeinBlog
Mit Zitat antworten
  #2 (permalink)  
Alt 04-07-2009, 13:01
ezkimo
 Registrierter Benutzer
Links : Onlinestatus : ezkimo ist offline
Registriert seit: Apr 2005
Ort: Beckum / Westf.
Beiträge: 279
ezkimo befindet sich auf einem aufstrebenden Ast
ezkimo eine Nachricht über ICQ schicken
Standard Lösung

Da war der Interpreter wohl ein wenig zu langsam. Die volle Breite des dynamisch erstellten DIV Elements war zum Zeitpunkt, an dem die volle Breite des DIV Elements gemessen werden sollte, noch gar nicht vorhanden, da das Element noch gar nicht vollständig im DOM vorhanden war.

Folgende Lösung:
Code:
var Gallery = Class.create({
    
    albumID : 0,
    itemCount : 0,
    maxWidth : 0,

    initialize : function(albumID) {
        this.albumID = albumID;
        
        $('itemList').observe('DOMNodeInserted', function(event) {
	    this.maxWidth += Event.element(event).getWidth();
	});

        new Ajax.Request('index.php?action=Foo&do=Bar&albumID='+albumID, {
            method : 'post',
            onComplete : function(transport) {
                var data = transport.responseText.evalJSON(true);
                ...
                $('imageContainer').setStyle({ width : this.maxWidth + 'px' });
            }
        });
    },

    createImageContainer : function(imagePath, image) {
        var itemDiv = new Element('div', {
            'class' : 'foo',
            'id' : 'item-' + this.itemCount
        });

        var itemImage = new Element('img');
        itemImage.observe('load', function() {
            itemDiv.style.minWidth = this.getWidth() + 'px';
        }
        itemImage.src = imagePath + image['src'];
        itemImage.alt = image['caption'];

        itemDiv.appendChild(itemImage);
        $('imageContainer').appendChild(itemDiv);
    },
});
Bei der Erstellung des Image Elements wird noch vor dem Festlegen des src Attributes ein EventListener festgelegt, der, sobald das Bild geladen ist, die Breite des DIV Elements festlegt, in welches das IMG Element später eingefügt wird.

Das DIV Element imageContainer bekommt bei der Initialisierung der Klasse einen EventListener aufgedrückt. Wie in der W3C Recommendation beschrieben, ist das Event DomNodeInserted dafür wie geschaffen.

Somit lässt sich dann auch die komplette Breite des DIV Elementes sauber ermitteln. Da haben wir wieder was dazugelernt. *hehe*
__________________
MM Newmedia | MeinBlog
Mit Zitat antworten
  #3 (permalink)  
Alt 04-07-2009, 13:17
jmc
 PHP Junior
Links : Onlinestatus : jmc ist offline
Registriert seit: Mar 2006
Beiträge: 868
jmc befindet sich auf einem aufstrebenden Ast
Standard

Ich weiss nicht genau, was das Problem bei dir war, denn es ist zu wenig relevanter Code um das sagen zu können, aber du solltest bei deinem Problem auf jeden Fall ohne DomNodeInserted auskommen können.
Du musst die Breite einfach synchron (wohl in deinem Fall im oncomplete) und nicht asynchron machen.
Mit Zitat antworten
  #4 (permalink)  
Alt 04-07-2009, 13:26
ezkimo
 Registrierter Benutzer
Links : Onlinestatus : ezkimo ist offline
Registriert seit: Apr 2005
Ort: Beckum / Westf.
Beiträge: 279
ezkimo befindet sich auf einem aufstrebenden Ast
ezkimo eine Nachricht über ICQ schicken
Standard

Hi jmc,

was ist der Grund für den Verzicht von DOMNodeInserted?

Das Problem war, dass, sobald ich es synchron gemacht habe und die Breite des DIV Elements, welches das Bild sowie padding und margin Werte enthält, ermitteln wollte, keine vollständigen Werte bekommen habe. Es wurden hier lediglich die für das DIV Element festgelegten margin und padding Werte ermitteln, aber nicht die Breite des Bildes, welches sich innerhalb des DIV Elements befindet.

Ich tippe mal, dass das Bild noch nicht vollständig geladen war. Zumindest konnte ich ähnliches an mehreren Stellen im Netz lesen, da ich wohl nicht der einzige mit diesem Problem war.

Ich habe die jetzige Lösung nur im Firefox getestet. Wahrscheinlich wird mir der IE das DOMNodeInserted Event um die Ohren hauen. *narf*
__________________
MM Newmedia | MeinBlog
Mit Zitat antworten
  #5 (permalink)  
Alt 04-07-2009, 13:41
jmc
 PHP Junior
Links : Onlinestatus : jmc ist offline
Registriert seit: Mar 2006
Beiträge: 868
jmc befindet sich auf einem aufstrebenden Ast
Standard

Dieser Event wird je nach Browser sehr Ressourcenaufwendig verarbeitet und du wirst bei einigen Browsern Probleme kriegen (ehrlich gesagt weiss ich aber nicht welche ihn alle unterstützen und welche nicht).
Es wird unter Umständen auch zu oft aufgerufen.
Dass zu Beginn nicht bekannt ist wie gross das Bild ist ist wohl relativ klar.
Deshalb kannst du sowas machen:
Code:
myImg = new Image();
myImg.src = URL;
myImg.onload = function(){
 alert(this.width);
 // create DOMElement and add width
}
Mit Zitat antworten
  #6 (permalink)  
Alt 04-07-2009, 13:46
ezkimo
 Registrierter Benutzer
Links : Onlinestatus : ezkimo ist offline
Registriert seit: Apr 2005
Ort: Beckum / Westf.
Beiträge: 279
ezkimo befindet sich auf einem aufstrebenden Ast
ezkimo eine Nachricht über ICQ schicken
Standard

Ja habe es gerade schmerzlich erfahren.
Weder IE noch Safari interpretieren dieses Event richtig. Naja ... ich werde dann auf die onload Variante zurückgreifen.

Danke für den Tipp.
__________________
MM Newmedia | MeinBlog
Mit Zitat antworten
  #7 (permalink)  
Alt 06-07-2009, 12:02
Benutzerbild von CiaoSen CiaoSen
  Administrator
Links : Onlinestatus : CiaoSen ist offline
Registriert seit: May 2009
Beiträge: 30
CiaoSen befindet sich auf einem aufstrebenden Ast
Standard

Wieso lässt du dir nicht auch noch die angeben von der Höhe und der breite des Bildes über json wiedergeben?

Dann hast du nicht mehr das Problem.

mfg jura
__________________
Hab ich dir erfolgreich geholfen? Wenn ja, dann hilf mir auch und bewerte mich auf php-resource.de

Go and help me
Mit Zitat antworten
  #8 (permalink)  
Alt 06-07-2009, 16:44
ezkimo
 Registrierter Benutzer
Links : Onlinestatus : ezkimo ist offline
Registriert seit: Apr 2005
Ort: Beckum / Westf.
Beiträge: 279
ezkimo befindet sich auf einem aufstrebenden Ast
ezkimo eine Nachricht über ICQ schicken
Standard

Moin Jura,

weil ich über JSON lediglich die Dimensionen des Bildes selbst bekomme. Das DIV Element, welches das Bild enthält, hat aber noch margin und padding Werte. Rein theoretisch könnte ich die einfach zu den Dimensionen des Bildes addieren. Was aber, wenn jemand das CSS Stylesheet ändert und die padding und margin Werte nach seinen Belieben anpasst? Die Variante per getWidth() ist dann einfach sicherer, weil sie die komplette Breite des DIV Elements ausliest.
__________________
MM Newmedia | MeinBlog
Mit Zitat antworten
  #9 (permalink)  
Alt 06-07-2009, 16:48
Benutzerbild von CiaoSen CiaoSen
  Administrator
Links : Onlinestatus : CiaoSen ist offline
Registriert seit: May 2009
Beiträge: 30
CiaoSen befindet sich auf einem aufstrebenden Ast
Standard

Jo das habe ich verstanden.
Aber dein Problem war doch, dass du die Breite der Div's nicht direkt auslesen konntest bevor die Bilder geladen haben?

Wieso benutzt du nicht die Dimensionen und gibst den DIV's diese?
Damit hättest du doch die Breite+Margin/Padding wenn du sie wieder ausliest.

mfg jura
__________________
Hab ich dir erfolgreich geholfen? Wenn ja, dann hilf mir auch und bewerte mich auf php-resource.de

Go and help me
Mit Zitat antworten
  #10 (permalink)  
Alt 07-07-2009, 13:48
ezkimo
 Registrierter Benutzer
Links : Onlinestatus : ezkimo ist offline
Registriert seit: Apr 2005
Ort: Beckum / Westf.
Beiträge: 279
ezkimo befindet sich auf einem aufstrebenden Ast
ezkimo eine Nachricht über ICQ schicken
Standard

Zitat:
Zitat von CiaoSen Beitrag anzeigen
Jo das habe ich verstanden.
Aber dein Problem war doch, dass du die Breite der Div's nicht direkt auslesen konntest bevor die Bilder geladen haben?

Wieso benutzt du nicht die Dimensionen und gibst den DIV's diese?
Damit hättest du doch die Breite+Margin/Padding wenn du sie wieder ausliest.

mfg jura
Das wird ja jetzt quasi auch so gemacht.
Sobald das Bild ermittelt und die Dimensionen bekannt sind, wird dem DIV Element die Breite der einzufügenden Grafik gegeben. Dies funktioniert aber erst, wenn die Grafik wirklich geladen ist. Hier lag das Problem. Erst dann haben die dynamisch erstellten DIV Elemente die Breite des Bildes und können mit der Prototype Methode getWidth() erfasst werden. Also so, wie es jmc erklärt hat, funktioniert es problemlos über die gängigsten Browser hinweg.
__________________
MM Newmedia | MeinBlog
Mit Zitat antworten
Antwort

Lesezeichen

Stichworte
interpreter, oop, prototype


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[JavaScript] Problem mit AJAX-Request über prototype (OnLoading) Jaws HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 2 19-08-2009 15:26
Prototype Json Internet Explorer Problem Turbo HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 12 19-08-2009 02:38
Problem mit $()-Zugriff bei Prototype Mercury1987 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 7 20-11-2007 12:28
prototype Logik-Problem Timo Trallala HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 6 13-09-2007 11:14
Problem IE mit Ajax Klasse (Prototype basierend) BuddyB HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 2 18-12-2006 00:45

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 07:39 Uhr.