tutorials.de Buch-Aktion 05/2012
Seite 1 von 2 12 LetzteLetzte
ERLEDIGT
NEIN
ANTWORTEN
25
ZUGRIFFE
1936
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    Thomas D Thomas D ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Linz
    Beiträge
    311
    Hallo!

    Ich bin derzeit beim Entwickeln einer Bildergalerie. Dabei habe ich das Problem, dass ich solange Graphiken in eine Zeile einfügen möchte, solange Platz ist - sprich: kein horizontaler Scrollbalken. Ich habe mir gedacht, die Größe des Fenster durch JavaScript abzufragen und dies mit der Breite der Bilder zu vergleichen. Jetzt habe ich aber das Problem, dass die folgende Anweisung mir nichts zurück liefert:

    Code :
    1
    
    document.getElementById('content').style.width;

    Auch der Zugriff ohne die CSS-Eigenschaft, die gesetzt ist, funktioniert nicht. Ich wäre an einer dynamischen Lösung interessiert, sodass die Einteilung der Bilder auch dann noch funktioniert, wenn die Breite per CSS verkleinert oder vergrößert wird. Wenn jemand eine Lösung dieses Problems oder Alternativvorschläge hat, nur her damit ...

    MfG, Thomas D.
     

  2. #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    versuch es mal mit der Eigenschaft offsetWidth.
    Code :
    1
    
    document.getElementById('content').offsetWidth
    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK

  3. #3
    Thomas D Thomas D ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Linz
    Beiträge
    311
    Super, es funktioniert ! Hvala lepa!

    Es bleibt doch leider eine Frage offen: Im Firefox hat alles so funktioniert, wie es sollte. Im Opera wird der Text in Verbindung mit dem Bild allerdings anders dargestellt. Somit würde ich gerne die Breite eines <td>-Tags auslesen, um beiden Browsern zur Genüge tun. Allerdings funktioniert weder

    Code :
    1
    
    alert (td.width);

    noch

    Code :
    1
    
    alert (td.offsetWidth);

    Wie kriege ich das hin
     

  4. #4
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    wenn ich die Tabellenzelle über eine ID anspreche, funktioniert es bei mit im IE6, FF1.5 und Opera 9.
    Code :
    1
    2
    3
    4
    5
    6
    
    <table>
        <tr>
         <td id="td_id">Hallo, wie breit bin ich?</td>
         <td><button onclick="alert(document.getElementById('td_id').offsetWidth);">Antwort</button></td>
        </tr>
    </table>
    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK

  5. #5
    Thomas D Thomas D ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Linz
    Beiträge
    311
    Stimmt, wenn ich das so wie du schreibe, dann geht's auch. Blöderweise erzeuge ich die Tabelle dynamisch zur Laufzeit:

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    
    var table = document.getElementById ("galerieCont");
    var c, tr, td, img;
     
    while (table.firstChild != null) //bisherigen Inhalt löschen
        table.removeChild (table.firstChild);
     
    var ordnername, screenWidth = document.getElementById('content').offsetWidth;
    var platz = 0;
     
    tr = document.createElement ("tr");
    for (ordnername in Bildinfos)
    {
        platz += folderImg.width;
        if (platz >= screenWidth) //neue Zeile, da kein Platz mehr
        {
            table.appendChild (tr);
            tr = document.createElement ("tr");
            platz = 0;      
        }
        
        td = document.createElement ("td");
        img = document.createElement ("img");
        img.setAttribute ("src", folderImg.src);
        //img.setAttribute ("onMouseOver", "alert ('Hallo');");
        
        td.appendChild (img);
        td.appendChild (document.createTextNode (ordnername));
        tr.appendChild (td);
        [B]alert (td.offsetWidth); //liefert leider stets 0[/B]
    }
    table.appendChild (tr);

    In Firefox geht's, da hier die Breite des img-Tags von belang ist. Bei Opera kommt's aber scheinbar auf beides an. Interessanter Nebenaspekt: Im IE geht das Script gar nicht - woran könnte denn das liegen und gibt es eine Alternative wie ich die Breite des <td>-Tags auf dann auslesen kann, wenn ich es zur Laufzeit erzeuge?

    Thx, Thomas D.
     

  6. #6
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    offensichtlich kann die Breite über offsetWidth erst ermittelt werden, wenn die Tabelle in den Dokumentenbaum
    eingebunden wurde.

    Vielleicht hilft Dir folgender Workaround weiter.
    1. Erstelle zunächst eine Tabelle, in der alle Zellen in einer Zeile eingebunden werden.
    2. Jede Zelle bekommt eine ID, anhand derer sie später wieder identifiziert werden kann
    3. Es wird ein verstecktes DIV erstellt.
    4. Dieses DIV nimmt die Tabelle auf und wird ins Dokument eingebunden.
    5. Jetzt wird die eigentliche Tabelle erstellt, indem die IDs der zuvor erstellten Zellen durchlaufen werden.
    6. Zu jeder Zelle wird die Breite ermittelt und bei erreichtem Maximum eine neue Zeile in der Zieltabelle angelegt.
    7. Zum Schluss wird die Workaround-Tabelle wieder gelöscht und die Zieltabelle ins Dokument geschrieben.
    Der Quellcode könnte folgendermassen aussehen:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    
    <?xml version="1.0" encoding="iso-8859-1" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>www.tutorials.de</title>
    <meta name="author" content="Quaese" />
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
     
    <script type="text/javascript">
      <!--
    var arrBilder = new Array();
    arrBilder[0] = new Image();
    arrBilder[0].src = "../bilder/fussball1.jpg";
    arrBilder[0].txt = "Text";
    arrBilder[1] = new Image();
    arrBilder[1].src = "../bilder/fussball2.jpg";
    arrBilder[1].txt = "Ich bin der ellenlange Text zum Bild und so weiter und so weiter";
    arrBilder[2] = new Image();
    arrBilder[2].src = "../bilder/fussball3.jpg";
    arrBilder[2].txt = "Noch Text";
     
    var intScrWidth = 200; // Breite, ab der umgebrochen wird
     
    function dieFunktion(){
      var arrIDs = new Array();
     
      /* Workaround-Tabelle aufbauen und in Dokument einhängen (versteckt) */
      var objTable = document.createElement("table");
      var objTBody = document.createElement("tbody");
      var objTR = document.createElement("tr");
     
      for(entry in arrBilder){
        var objImg = document.createElement("img");
        objImg.src = arrBilder[entry].src;
        var objTD = document.createElement("td");
        // Hilfs-ID in Zelle schreiben
        objTD.id = "workaround_" + entry;
        // ID in Hilfsarray sichern
        arrIDs[arrIDs.length] = "workaround_" + entry;
        // Bild und Text in Zelle einbinden
        objTD.appendChild(objImg);
        objTD.appendChild(document.createTextNode(arrBilder[entry].txt));
        // Zelle einhängen
        objTR.appendChild(objTD);
      }
      // Zeile und TBody einhängen
      objTBody.appendChild(objTR);
      objTable.appendChild(objTBody);
     
      // Verstecktes DIV erstellen, Tabelle darin einbetten und das ganze Konstrukt in Dokument einbinden
      var objDiv = document.createElement("div");
      objDiv.style.visibility = "hidden"; // "visible"
      objDiv.appendChild(objTable);
      document.getElementsByTagName("body")[0].appendChild(objDiv);
     
     
      /* Eigentliche Tabelle aufbauen - aus Breiten der Workaround-Tabelle */
      var intAdd = 0;
      var table = document.getElementById("galerieCont");
     
      while(table.firstChild != null)
        table.removeChild(table.firstChild);
     
      objTBody = document.createElement("tbody");
      objTR = document.createElement("tr");
     
      // Alle IDs der Workaround-Tabelle durchlaufen
      for(entry in arrIDs){
        // Zellen ID-weise ermitteln und übergeben
        objTD = document.getElementById(arrIDs[entry]);
        // Aktuelle Breite ermitteln
        var intHelp = parseInt(objTD.offsetWidth);
        //  Zelle einbinden
        objTR.appendChild(objTD);
        // Gesamtbreite ermitteln
        intAdd += intHelp;
     
        // Falls Maximalbreite erreicht wurde
        if(intAdd >= intScrWidth){
          intAdd = 0;
          objTBody.appendChild(objTR);
          objTR = document.createElement("tr");
        }
      }
      objTBody.appendChild(objTR);
      table.appendChild(objTBody);
     
      // Workaround-Tabelle wieder aus Dokument löschen
      document.getElementsByTagName("body")[0].removeChild(objDiv);
    }
     //-->
    </script>
    </head>
    <body>
    <button onclick="dieFunktion();">ab ...</button>
    <table id="galerieCont">
      <tr><td>Die Zelle</td></tr>
    </table>
    </body>
    </html>
    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK

  7. #7
    Thomas D Thomas D ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Linz
    Beiträge
    311
    Danke für deine Hilfe ! Da das Script aber mit der Tabelleneinbindung im IE ohnehin nicht funktioniert - egal, ob ich die Sachen jetzt auslesen kann oder nicht, der IE lässt nicht zu, Tabellen einzubinden. Im Opera und Firefox geht's ...

    Daher habe ich mich dazu entschlossen, das Layout mit CSS aufzubauen. Dazu habe ich dann den unten angefügten Code verwendet, der im IE bestens funktioniert ... dafür in Opera und Firevox nicht . Bei diesen beiden Browsern werden die Icons wild am Bildschirm angezeigt und die Struktur nicht eingehalten, wohingegen beim IE alles so angezeigt wird, wie es sein sollte.

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    
    <html><head>
    <style type="text/css">
        #beschriftung {
            float: left;
            text-align: center;
            width: 80px; //Breite des Icons folder.bmp
            border: 2px solid black; //Hilfsanzeige
        }
        img.icon {
            border: 2px solid black;
        }
        #box {
            width: 1cm; //danach folgt der Textumburch
            vertical-align: top;
            margin-right: 0.3cm;
            margin-bottom: 0.5cm;
            text-align: center;
        }
        
        #galerieCont {
            border: 2px solid black;
            width: 600;
        }
    </style>
     
    </head><body>
     
    <h1>Galerie</h1>
     
    <div id="galerieCont">
        <span id="box">
            <img src="res/folder.bmp" class="icon" />
            <p id="beschriftung">Eine g'scheide Beschriftung'</p>
        </span>
        <span id="box">
            <img src="res/folder.bmp" class="icon" />
            <p id="beschriftung">abc</p>
        </span>
        <span id="box">
            <img src="res/folder.bmp" class="icon" />
            <p id="beschriftung">Sackhüfen in Wels</p>
        </span>
        <span id="box">
            <img src="res/folder.bmp" class="icon" />
            <p id="beschriftung">abc</p>
        </span>
        <span id="box">
            <img src="res/folder.bmp" class="icon" />
            <p id="beschriftung">Vernisage in Pregarten</p>
        </span>
        <span id="box">
            <img src="res/folder.bmp" class="icon" />
            <p id="beschriftung">abc</p>
        </span>
        <span id="box">
            <img src="res/folder.bmp" class="icon" />
            <p id="beschriftung">abc</p>
        </span>
        <span id="box">
            <img src="res/folder.bmp" class="icon" />
            <p id="beschriftung">abc</p>
        </span>
    </div>
    </body></html>

    Es ist aus der Haut zu fahren - kaum findet man eine Lösung für den einen Browser geht's im anderen wieder nicht. Gibt es irgendeinen Lösungsvorschlag (vornehmlich per CSS-Formatierung), mit dem ich die Bildergalerie in allen 3 großen Browsern einigermaßen gleich formatieren kann

    MfG, Thomas D.

    BTW: Zur Vereinfachung des Problems habe ich jetzt einfach mal den ganzen JavaScript-Teil weggelassen und eine rein dynamische Lösung verwendet.
     

  8. #8
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    mein Script funktioniert bei mir auch im IE, ausserdem im Opera, Firefox und Konqueror.

    Ich denke, dass Dein IE-Problem darin lag, dass Du die Tabellenzeile in das Tabellenelement einhängen
    wolltest. Korrekterweise muss es jedoch in ein TBODY-Element eingehängt werden. Dieses wird dann in
    die Tabelle eingebunden.

    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK

  9. #9
    Thomas D Thomas D ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Linz
    Beiträge
    311
    Zitat Zitat von Quaese Beitrag anzeigen
    Hi,

    mein Script funktioniert bei mir auch im IE, ausserdem im Opera, Firefox und Konqueror.

    Ich denke, dass Dein IE-Problem darin lag, dass Du die Tabellenzeile in das Tabellenelement einhängen
    wolltest. Korrekterweise muss es jedoch in ein TBODY-Element eingehängt werden. Dieses wird dann in
    die Tabelle eingebunden.

    Ciao
    Quaese
    Hm, jetzt habe ich die Tabellenlösung aber schon verworfen. Hättest du vielleicht auch eine Idee, wieso meine CSS-Lösung nicht in Browsern mit der Gecko Engine funktioniert? Ansonsten muss ich halt alles noch einmal auf die Tabellen umschreiben ...
     

  10. #10
    Thomas D Thomas D ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Linz
    Beiträge
    311
    So, bin jetzt wieder zur der von dir angedachten Tabellenlösung zurückgekehrt. Zuerst hat diese nur im Firefox und dem IE funktioniert, da Opera das DOM scheinbar etwas anders interpretiert (s. Code) . Auf jeden Fall habe ich auch dieses Problem durch eine Opera-spezifische Browserweiche aus der Welt geschafft . Jetzt gibt es nur mehr ein kleines Detailproblem (bei allen Browsern das gleiche): In der ersten Zeile der Bildausgabe wird ein Element früher umgebrochen als es sollte. Die restlichen Zeilen passen dann alle:

    Code:

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    
    <html><head></head><body>
    <script type="text/javascript">
        var folderImg = new Image ();
        folderImg.src = "res/folder.bmp";
        var Bildinfos = new Array ("abc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc");
     
        function ordnerAuswahlAufbauen ()
        {
            var table = document.getElementById ("galerieCont");
            var hiddenTable = document.getElementById ("hiddenTable");
            var tr, td, tbody, img, c;
            
            //while (table.firstChild != null) //bisherigen Inhalt löschen
                //table.removeChild (table.firstChild);
            
            var ordnername, screenWidth = 600;
            var platz = 0;
            
            /*
            Als erstes wird die Struktur in einer versteckten Tabelle komplett aufgebaut; dies ist
            leider deshalb notwendig, da die offsetWidth von <td>-Tags erst dann korrekt ausgelesen
            werden kann, wenn die Tabelle vollständig in die HTML-Struktur eingebunden worden ist.
            Danach wird die Originaltabelle berechnet, die korrekt ausgerichtet ist  
            */
            tbody = document.createElement ("tbody");
            tr = document.createElement ("tr");
            for (ordnername in Bildinfos)
            {
                platz += folderImg.width;
                if (platz >= screenWidth) //neue Zeile, da kein Platz mehr
                {
                    tbody.appendChild (tr);
                    tr = document.createElement ("tr");
                    platz = 0;      
                }
                
                td = document.createElement ("td");
                img = document.createElement ("img");
                img.setAttribute ("src", folderImg.src);
                
                //img.setAttribute ("onMouseOver", "alert ('Hallo');");
                
                td.appendChild (img);
                td.appendChild (document.createTextNode (ordnername));
                tr.appendChild (td);
            }
            tbody.appendChild (tr);
            hiddenTable.appendChild (tbody);
            
            /*
            Nun wird die eigentlich sichtbare Tabelle erstellt; dies ist deshalb nötig, da die
            Zellenbreite erst dann berechnet werden kann, wenn die Tabelle in die DOM-Struktur
            eingebaut worden ist.
            */ 
            
            var hiddenTr, hiddenTd;
            
            if (navigator.appName == "Opera")
            {   
                hiddenTr = hiddenTable.firstChild.firstChild; //läuft im Opera
                for (c=0; c<2000; c++) //Opera braucht "etwas Zeit", um die offsetWidth korrekt berechnen zu könne :rolleyes:
                    ;
            }
            else //läuft im Firefox und IE
                hiddenTr = hiddenTable.firstChild.nextSibling.firstChild;
            
            tbody = document.createElement ("tbody");
            tr = document.createElement ("tr");
            platz = 0;
             
            while (hiddenTr != null)
            {
                hiddenTd = hiddenTr.firstChild;
                while (hiddenTd != null)
                {
                    platz += hiddenTd.offsetWidth;
                    if (platz >= screenWidth) //neue Zeile, da kein Platz mehr
                    {
                        tbody.appendChild (tr);
                        tr = document.createElement ("tr");
                        platz = 0;
                    }
                    
                    td = document.createElement ("td");
                    
                    //alle Kindknoten des versteckten TDs an das neue anhängen
                    td = hiddenTd.cloneNode (true); //alle Informationen werden mitgeklont - Kindeelement und Text
                    
                    tr.appendChild (td);
                    hiddenTd = hiddenTd.nextSibling;
                }
                hiddenTr = hiddenTr.nextSibling;
            }
            tbody.appendChild (tr);
            table.appendChild (tbody);
        }
    </script>
     
    <h1>Galerie</h1>
     
    <table id="galerieCont" border>
    </table>
    <table id="hiddenTable" style="visibility: hidden">
    </table>
     
    <script language="JavaScript" type="text/javascript">
        ordnerAuswahlAufbauen ();
    </script>
    </body></html>

    Vielleicht kommt ja wer auf den Fehler drauf ...

    MfG, Thomas D.
    Geändert von Thomas D (21.05.07 um 14:14 Uhr)
     

  11. #11
    Thomas D Thomas D ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Linz
    Beiträge
    311
    Hallo!

    Ich habe den Code in meinem vorherigen Posting nun so modifziert, dass jeder ihn ausführen kann. Einzig eine Graphik muss als res/folder.bmp gespeichert werden, um die HTML-Datei anzusehen. Um meinen Fehler noch einmal genauer zu illustrieren, habe ich hier einen Screenshot upgeloadet: www.thomasd.info/temp/HTMLFehler.jpg

    Wie schon gesagt: In der ersten Zeile (und nur dort) wird der Zeilenumbruch schon eine Zelle zu früh durchgeführt. Ich komme leider nicht drauf warum ...

    MfG, Thomas D.
     

  12. #12
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Ich befürchte, dein ganzer Ansatz per JS wird so nicht aufgehen können

    Das Problem ist Folgendes: du musst bereits vor dem Aufbau der Tabelle wissen, wie breit die breiteste Zelle sein wird.
    Warum:
    In Reihe 1 geht alles gut....aber:
    sobald du in den nachfolgenden Reihen Zellen einfügst, und eine Zelle in einer Spalte breiter ist als die breiteste Zelle derselben Spalte in einer vorrangegangenen Reihe, werden alle vorrangegangenen Spalten breiter, und deine Tabelle wird breiter als geplant.

    Ich würde es daher für sinnvoller halten, wenn du zu deinem CSS-Ansatz zurückkehrst.
    Das würde zwar vorrausetzen, dass du im Vorraus für die "Zellinhalte" feste Grössen bestimmst, aber dies sollte aber per PHP machbar sein, da du damit ja bereits vorher ermitteln kannst, wie gross die Grafiken sind.
    Beim Text müsstest du halt ein wenig probieren, ihn zur Not beschneiden o.ä.

    Wenn du es aber unbedingt per JS machen willst, könntest du so vorgehen:
    Erstelle pro "Bildinfo" ein DIV mit bspw. 1px Breite , weise im den Inhalt zu und ermittle die Breite.
    Anhand der grössten ermittelten Breite kannst du dann ermitteln, wieviel Zellen in jedem Fall in eine Reihe passen und die Tabelle entsprechend aufbauen.
     

  13. #13
    Thomas D Thomas D ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Linz
    Beiträge
    311
    Hallo, Sven!

    Deine Argumentation klingt logisch. Daran wird es wohl letzten Endes bei der Tabellenlösung scheitern. Blöderweise funkt meine CSS-Lösung, wie ich bereits ein paar Posts oben weiter darauf hingewiesen habe, nicht im Opera und im Firefox, dafür aber im IE. Hast du vielleicht eine Ahnung wie ich das auch für diese beiden Browser zum Laufen bringen?

    MfG, Thomas D.
     

  14. #14
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    vielleicht hilft Dir folgendes Konstrukt weiter.
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    
    <html><head>
    <style type="text/css">
        .beschriftung {
            text-align: center;
            /*width: 80px; Breite des Icons folder.bmp*/
            border: 2px solid black; /*Hilfsanzeige*/
        }
        img.icon {
            border: 2px solid black;
        }
        .box {
            /*width: 80px; danach folgt der Textumburch*/
            vertical-align: top;
            margin-right: 0.3cm;
            margin-bottom: 0.5cm;
            text-align: center;
        display: block;
        float: left;
        height: 120px;
        }
     
        #galerieCont {
            border: 2px solid black;
            width: 600px;
        }
     
      .clearDiv{ font-size: 1px;
                         line-height: 0em;
                 height: 0;
                 clear: both;}
    </style>
    </head><body>
    <h1>Galerie</h1>
     
    <div id="galerieCont">
        <div class="box">
            <img src="../bilder/telefon.gif" class="icon" />
            <p class="beschriftung">Eine g'scheide Beschriftung'</p>
        </div>
        <div class="box">
            <img src="../bilder/telefon.gif" class="icon" />
            <p class="beschriftung">abc</p>
        </div>
        <div class="box">
            <img src="../bilder/telefon.gif" class="icon" />
            <p class="beschriftung">Sackhüfen in Wels</p>
        </div>
        <div class="box">
            <img src="../bilder/telefon.gif" class="icon" />
            <p class="beschriftung">defghij</p>
        </div>
        <div class="box">
            <img src="../bilder/telefon.gif" class="icon" />
            <p class="beschriftung">Vernisage in Pregarten</p>
        </div>
        <div class="box">
            <img src="../bilder/telefon.gif" class="icon" />
            <p class="beschriftung">abc</p>
        </div>
        <div class="box">
            <img src="../bilder/telefon.gif" class="icon" />
            <p class="beschriftung">abc</p>
        </div>
        <div class="box">
            <img src="../bilder/telefon.gif" class="icon" />
            <p class="beschriftung">abc</p>
        </div>
      <div class="clearDiv">&nbsp;</div>
    </div>
    </body></html>
    IDs dürfen innerhalb eines Dokumentes nur einmalig vergeben werden, deshalb die Änderung von beschriftung
    und box in Klassen.
    Weiterhin werden Kommentare in CSS nicht mit Doppelslashes gekennzeichnet, sondern mit /**/.

    Vielleicht kannst Du ja etwas damit anfangen.

    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK

  15. #15
    Thomas D Thomas D ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Linz
    Beiträge
    311
    Vielen Dank für die Hinweise - der Code ist jetzt wirklich wesentlich kürzer und logischer !

    Allerdings habe ich das Problem, dass ich die Ordnerstruktur dynamisch herstellen möchte und hier der Internet Explorer mit dem Setzen der Class-Eigenschaft so seine Probleme hat:

    Code :
    1
    
    span.setAttribute ("class", "box");

    Zumindest ist es das, was ich glaube, warum das Design jetzt im Firefox und Opera, dafür aber nicht im IE funktioniert. Gibt es hierfür einen Workaround?

    Der komplette Code:

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    
    function ordnerAuswahlAufbauen ()
    {
        var galCont = document.getElementById ("galerieCont");
        var img, c, anchor, paragraph, span;
        
        for (ordnername in Bildinfos)
        {           
            span = document.createElement ("span");
            span.setAttribute ("class", "box");
            
            anchor = document.createElement ("a");
            anchor.setAttribute ("href", "Test.htm");
            
            img = document.createElement ("img");
            img.setAttribute ("src", folderImg.src);
            img.setAttribute ("alt", ordnername);
            
            paragraph = document.createElement ("p");
            paragraph.appendChild (document.createTextNode (ordnername));
            paragraph.setAttribute ("class", "beschriftung");
            
            anchor.appendChild (img);
            anchor.appendChild (paragraph);
            
            span.appendChild (anchor);
            galCont.appendChild (span);
        }
    }

    Wie gesagt, im Opera und Firefox alles bestens, im IE wird aber jeder Ordner in einer eigenen Zeile angezeigt. Thx für eure Hilfe !

    MfG, Thomas D.

    Weiters bin ich gerade beim Überlegen, wie ich es angehen soll, dass nachdem der Platz in der Höhe ausgereizt ist - im Normalfall nach 3 Zeilen Ordnern, die folgenden Seiten angezeigt werden sollen; sprich: Seite 2-x der Galerie. Hier werde ich wahrscheinlich die betreffenden Elemente einfach unsichtbar machen und je nach Klick anzeigen lassen. Schauen wir mal, wie ich das per JavaScript auslesen kann, ob die Seite schon voll oder nicht. Fürs erste sollte ich mich aber darauf konzentrieren, dass das ganze auch im IE läuft ...
     

Ähnliche Themen

  1. Mit Javascript ein onclick-Attribut hinzufügen
    Von sharK223 im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 27.06.10, 19:41
  2. XSLT Tag-Attribut auslesen
    Von derdienstag im Forum XML Technologien
    Antworten: 1
    Letzter Beitrag: 08.02.10, 13:39
  3. Javascript Width Problem
    Von SCIPIO-AEMILIANUS im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 13.03.09, 23:48
  4. Attribut aus xml auslesen
    Von tabina im Forum .NET Datenverwaltung
    Antworten: 2
    Letzter Beitrag: 22.01.08, 21:30
  5. bildgröße (width, height) auslesen?!
    Von -Ener- im Forum PHP
    Antworten: 6
    Letzter Beitrag: 04.08.05, 18:30