Position der Div's ändern
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
all
blocken
code
element
entsprechenden reihenfolge
funktion
info
inhalt
kategorie
kompletten inhalt
laufzeit
letzter stelle
leute
position
positionieren
post
prozent
schau
url
versuchen
-
Hi Leute!
wie kann ich mit JavaScript die Position von Div's verändern - also
<div id="all"> <div id="content1"> blabla </div> <div id="content2"> blabla </div> <div id="content3"> blabla </div> </div>
wie kann ich jetzt mit javascript den div von z.b. content 3 vor content 2 setzen??
Als Hintegrund info:
Ich hab eine Seite mit mehreren Posts.
Diese Post soll man dann nach Kategorien sortieren können.
Ich hoffe ihr versteht, was ich meine.
mfg
Marius -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Schau dir das mal an:
document.getElementById('all').innerHTML = 'Dein Inhalt';
damit kann man den kompletten Inhalt in einem Element ändern (in diesem Fall mit der id "all").
statt "Dein Inhalt" dann eben die divs in der entsprechenden Reihenfolge -
hm4-blog schrieb:
Schau dir das mal an:
document.getElementById('all').innerHTML = 'Dein Inhalt';
damit kann man den kompletten Inhalt in einem Element ändern (in diesem Fall mit der id "all").
statt "Dein Inhalt" dann eben die divs in der entsprechenden Reihenfolge
erstmal danke für die antwort! =)
Ich habs ausprobiert - nur es ist trotzdem nicht ganz so, wie es soll -> trotzdem komischerweise nicht die richtige reihenfolge und auch ganz verschoben :/
Hier ein Video:
Ich will, dass die post automatisch hinfloaten - wie ganz am ende und nicht einfach dort stehen bleiden.
Jedoch hat das mit
nicht geklappt.document.getElementById("content1").style.cssFloat="left"
was man noch erwähnen sollte: ich arbeite mit dem .style.display="block/none" befehl um die posts, die nicht zu der kategorie gehören, auszublenden.
-
Ich habe mal kurz gesucht, dein Problem sind scher nicht der Inhalt sondern die Positionierung. Dazu musst du nach den Siblings, also Geschwisterelementen anordnen.
Diese Seite fand ich jetzt sehr hilfreich zu dem Thema.
Es gibt die beiden Funktionen appendChild() und insertBefore(), damit sollte es gehen. Zumindest würde ich es so versuchen:
Zuerst kopierst du den Inhalt (also doch den inner HTML) von dem Element, dass du neu positionieren möchtest. Jetzt weiß ich nicht, wie man das am besten machen würde die neue Position zu finden. Entweder wird Einfügen an erster Stelle oder Einfügen an letzter Stelle nochmal etwas Überlegung erfordern.
Wenn an letzter Stelle eingefügt werden soll machst du append auf das Elternelement, ansonsten insert auf das Element, vor dem eingefügt werden soll.
Eine floating Animation kann dem ganzen dann vorangehen, da müssen dann die aktuelle Koordinaten mit den Zielkoordinaten irgendwie ineinander über gehen.
currentPosistion = sourcePosition * (1 - laufzeit in Prozent) + destinationPosition * laufzeit in Prozent
Das ganze dann mit x und y bzw top und left oder wie auch immer.
Oder aber du machst gleich komplett alles über die CSS eigenschaften und lässt JavaScript komplett deine Elemente auf der Seite positionieren. Dann brauchst du die im HTML garnicht mehr umsetzen.
/edit
Achja, das ganze sieht mir nach einem tollen Anwendungsgebiet für JQuery aus. Ich bin mir sicher das es dafür eine schöne Funktion dort gibt.
Beitrag zuletzt geändert: 18.7.2012 23:35:25 von travianinc -
animationartz schrieb:
document.getElementById("content1").style.cssFloat="left"
Wieso "cssFloat"?
Wo hast du das her? Probier mal nur "Float". -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
