Prototype - Element wo anders hin kopieren (verschieben)

badloader · 19. Mai 2010

Hi,

das DIV soll von unten nach oben kopiert/verschoben werden. So funktioniert es derzeit nicht

Code:

 // put li images to the top and remove at the bottom
 $$('div.liImages').each(function (item) {
 var offset = item.positionedOffset();
 
 //alert(offset[1] + ' ' + windowHeight);
 
 if (offset[1] > windowHeight) {
 
 $('slider').insert({
 top: item
 });
 }
 });

Code:

<div id="slider">
<!-- Hier hoch soll jeweils geschoben werden und unten gelöscht -->
<div class="liImages">Inhalt 1</div>
<div class="liImages">Inhalt 2</div>
<div class="liImages">Inhalt 3</div>
<div class="liImages">Inhalt 4</div>
</div>

Anzeige

Murdoc · 19. Mai 2010

AW: Prototype - Element wo anders hin kopieren (verschieben)

zum verständiss, wenn ein element außerhalb des sichtbereiches is soll es einmalig nach oben verschoben werden?

badloader · 19. Mai 2010

AW: Prototype - Element wo anders hin kopieren (verschieben)

ja genau.

es soll oben ins div und unten weg. Geht um eine vertikale Slideshow wo die Bilder von oben nach unten laufen

Murdoc · 19. Mai 2010

AW: Prototype - Element wo anders hin kopieren (verschieben)

ah, also nicht einmalig

die div's sollen also in nem interval einfach die reihenfolge ändern.

start:

Code:

div1
div2
div3
div4

nach erstem durchlauf:

Code:

div4
div1
div2
div3

usw...

was ich gerade nicht verstehe ist, warum du das bild erst verschiebst wenn es außerhalb des sichbereiches ist. wenn man mal bedenkt das jemand mit ner niedrigen auflösung daherkommt oder apple fans die den browser ja nicht maximiert haben. wie willst du ausschließen das alle bilder auf einmal verschoben werden?

badloader · 19. Mai 2010

AW: Prototype - Element wo anders hin kopieren (verschieben)

tue ich nicht.

ich zeige dir am besten meinen code:

Code:

function startSliding() {
 
 // put li images to the top and remove at the bottom
 $$('div.liImages').each(function (item) {
 var offset = item.positionedOffset();
 
 //alert(offset[1] + ' ' + windowHeight);
 
 if (offset[1] > windowHeight) {
 
 $('slider').insert({
 top: item
 });
 }
 });
 
 var currentOffset = $('slider').positionedOffset();
 var nextTop = currentOffset[1] + oneHeight;
 
 // go down
 new Effect.Morph('slider', {
 style: 'top:' + nextTop + 'px;',
 duration: 10,
 afterFinish: function () { startSliding(); }
 });
}

Die können ruhig alle hoch kommen ja eh wieder runter. Bzw sie sollen ja weiter hoch später, sprich (-YYpx) also über den anderen sollten sie sein. Aber so weit bin ich ja noch gar nicht

Murdoc · 19. Mai 2010

AW: Prototype - Element wo anders hin kopieren (verschieben)

blick ich immer noch nicht ganz, aber egal ^^

um das element von unten nach oben zu verschieben reicht folgener code:

Code:

 // put li images to the top and remove at the bottom
 $$('div.liImages').each(function (item) {
 var offset = item.positionedOffset();
 
 //alert(offset[1] + ' ' + windowHeight);
 
 if (offset[1] > windowHeight) {
 var itemClone = item.cloneNode(true);
 item.remove();
 
 $('slider').insert({
 top: itemClone
 });
 }
 });

badloader · 19. Mai 2010

AW: Prototype - Element wo anders hin kopieren (verschieben)

wenn ich fertig bin gibts nen preview

hast du denn eine andere idee?

-----

hab das ganze gelöst.

das ganze läuft so:
Bilder fahren einzeln runter mit Effect.Move. Modus ist "relative".
Bilder fahren um genau eine Bilderhöhe nach unten (dazu müssen alle gleich hoch sein)
Dann wird geprüft ob sie nicht schon zu tief sind: "if (currentTop >= (imageCount-1)*imageHeight) {"
Ist dies der Fall werden sie mit -imageHeight wieder hochgesetzt.
Läuft einwandfrei und relativ flüssig.

Trotzdem danke Murdoc für deine Hilfe! Das kann man siche rnochmal gebrauchen!
Code wird vielleicht zu einem Tool fürs Downloaden optimiert und dann Publik gemacht

Nützliche Suchen

Prototype - Element wo anders hin kopieren (verschieben)

Videos zum Themenbereich