Relative Position von absoluter Position abhängig machen
JCB
- dhtml
Hallöchen :o)!
Also, ich habe ein JS, das mir ein paar Tabellen generiert, die dann mit XML-Daten gefüllt werden. Läuft auch alles super. Es sieht dann in etwa so aus:
Tabelle 1
Tabelle 2
Tabelle 3
Tabelle 4
...
Jetzt möchte ich die Position ab der 3. Tabelle verändern. Sie sollen einfach ein Stück nach unten rutschen:
Tabelle 1
Tabelle 2
Tabelle 3 (style=position:absolute;)
Tabelle 4 (style=position:absolute;)
...
Das hab ich momentan so gemacht, dass ich allen Tab. ab der 3. eine feste Position zugewiesen hab. Jetzt nur mein Problem: wenn Tab. 3 etwas größer wird, ragt sie über Tab. 4. Meine idee war, der Tab. 3 eine feste und den folgenden eine relative Position zu geben. Nur irgendwie klappt das nicht so ganz. Alle Tab. bis auf Tab 3 behalten ihre alten Positionen. Mach ich was falsch oder geht das generell nicht?
Gruß,
Jan
PS: Hier noch das JS:
<script type="text/javascript">
<!--
var anzahl;
var pos;
var tab;
anzahl = 14;
pos = 400;
document.all.liste.innerHTML = "<table style=position:fixed; datapagesize=4 id=table30 border=0 width=100% datasrc=#xmldso cellspacing=0 cellpaddding=0 datafld=RLISTE>"
+ "<tr>"
+ "<td id=tdtest width=10% valign=Top><font face=verdana size=2>"
+ " <span datafld=RPosition dataformatas=HTML></span>"
+ "</td>"
+ "<td width=10% valign=Top><font face=verdana size=2><span datafld=Menge dataformatas=HTML></span></td>"
+ "<td width=15% valign=Top><font face=verdana size=2><span datafld=ObjektNR dataformatas=HTML></span></td>"
+ "<td width=35% valign=Top><font face=verdana size=2><span datafld=Bezeichnung dataformatas=HTML></span></td>"
+ "<td width=15% valign=Top align=right><font face=verdana size=2><span datafld=Einzelpreis dataformatas=HTML></span></td>"
+ "<td width=15% valign=Top align=right><font face=verdana size=2><span datafld=Gesamtpreis dataformatas=HTML></span></td>"
+ "</tr>"
+ "</table>";
aktiv = window.setTimeout("test1()",2000);
for(var i = 1; i <= anzahl-4; i++)
{
document.all.liste.innerHTML = document.all.liste.innerHTML + "<table id=table3"+ i +" style=position:relative; datapagesize=1 border=0 width=100% datasrc=#xmldso cellspacing=0 cellpaddding=0 datafld=RLISTE>"
+ "<tr>"
+ "<td id=tdtest width=10% valign=Top><font face=verdana size=2>"
+ " <span datafld=RPosition dataformatas=HTML></span>"
+ "</td>"
+ "<td width=10% valign=Top><font face=verdana size=2><span datafld=Menge dataformatas=HTML></span></td>"
+ "<td width=15% valign=Top><font face=verdana size=2><span datafld=ObjektNR dataformatas=HTML></span></td>"
+ "<td width=35% valign=Top><font face=verdana size=2><span datafld=Bezeichnung dataformatas=HTML></span></td>"
+ "<td width=15% valign=Top align=right><font face=verdana size=2><span datafld=Einzelpreis dataformatas=HTML></span></td>"
+ "<td width=15% valign=Top align=right><font face=verdana size=2><span datafld=Gesamtpreis dataformatas=HTML></span></td>"
+ "</tr>"
+ "</table>";
}
function test2() // wird über einen Button aufgerufen
{
document.getElementById("debugoptionen").style.top = -1000;
pos = 1290;
for(var i = 1; i <= anzahl-4; i++)
{
pos=pos+98;
if (i % 7 == 0 )
{
pos=pos+460
document.getElementById("table3"+ i).style.position="absolute";
document.getElementById("table3"+ i).style.top=pos;
}
}
pos=pos+98;
document.getElementById("table4").style.top = pos;
}
//-->
</script>