CSS-width-Attribut per JavaScript auslesen

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: http://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.
 
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.
 
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.
 
Hi,

vielleicht hilft Dir folgendes Konstrukt weiter.
Code: 
<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
 
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: 
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: 
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 :) ...
 
Hi,

ersetze
Code: 
span.setAttribute ("class", "box");
durch
Code: 
span.className = "box";
So sollte es auch im IE funktionieren.

Ciao
Quaese
 
Naja...selbst mit Sehschwäche dürfte es zu erkennen sein, dass in der 1. Spalte das 3 Kästchen mehr Platz benötigt :eek:

Ermittle nach dem Einfügen jedes Knotens seine Höhe, zum Schluss durchlaufe dann nochmal alle Knoten und weise ihnen die höchste ermittelte Höhe zu:
Code: 
<html> <head> <title>Test</title> 
<script type="text/javascript"> 
<!--
folderImg=new Image();
folderImg.src = "res/folder.gif";
var Bildinfos = new Array ("abc", "dkkd", "aaaaaa", "cccc", "dkkd dkkd dkkd dkkd ", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd");
	
function ordnerAuswahlAufbauen ()
{
  maxHeight=0;
	var galCont = document.getElementById ("galerieCont");

	for (ordnername in Bildinfos)
	{			
		galCont.innerHTML+= '<div><a href="Test.htm">'+
		                    '<img border="0"src="'+folderImg.src+'"><span style="cursor:pointer">'+
		                    Bildinfos[ordnername]+'</span></a></div>';
		maxHeight=Math.max(galCont.lastChild.offsetHeight,maxHeight); 
	}
  for(i=0;i<galCont.childNodes.length;++i)galCont.childNodes[i].style.height=maxHeight+'px';
}
window.onload=ordnerAuswahlAufbauen;
//-->
</script>
<style type="text/css">
<!--
#galerieCont {border: 2px solid black;width: 600px;}
#galerieCont div{width:80px;float:left;border:1px solid #000;background:#f1f1f1;font:normal 10px Sans-Serif}
#galerieCont div span{display:block;width:100%;border-top:1px solid c1c1c1;}
-->
</style>
</head>
<body>
<div id="galerieCont"></div>
</body>
</html>
 
Zuletzt bearbeitet:
rotzlöffeli hat gesagt.:
Naja...selbst mit Sehschwäche dürfte es zu erkennen sein, dass in der 1. Spalte das 3 Kästchen mehr Platz benötigt :eek:
Zum Vergrößern anklicken....

Das habe ich natürlich gesehen. Allerdings war es für mich verwundernswert, dass Opera und Firefox keinerlei Probleme damit haben und nur der IE muckt. Von dem her fände ich eine Sonderlösung für das Redmonter Produkt ziemlich na ja.

rotzlöffeli hat gesagt.:
Ermittle nach dem Einfügen jedes Knotens seine Höhe, zum Schluss durchlaufe dann nochmal alle Knoten und weise ihnen die höchste ermittelte Höhe zu:
Zum Vergrößern anklicken....

Darauf wird es wohl leider wieder einmal hinauslaufen. Letzten Endes ist klar: Sowohl die Tabellen- als auch die CSS-Lösung sind hier meist ungeeignet, da sie einmal in dem einen laufen, in dem anderen wieder nicht. Ändert man was, ist es wieder genau umgekehrt. Es ist aus der Haut zu fahren :mad:! ...
 
Thomas D hat gesagt.:
Darauf wird es wohl leider wieder einmal hinauslaufen. Letzten Endes ist klar: Sowohl die Tabellen- als auch die CSS-Lösung sind hier meist ungeeignet, da sie einmal in dem einen laufen, in dem anderen wieder nicht. Ändert man was, ist es wieder genau umgekehrt. Es ist aus der Haut zu fahren :mad:! ...
Zum Vergrößern anklicken....

Warum ist das klar?
Da du die Sache ohnehin per JS machen willst, sehe ich nicht wo das Problem bei meinem Vorschlag ist... und der funktioniert browserunabhängig.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück