met jQuery css positioneren wijzigen
ik heb een parent div, met daarin twee child divs (identieke, horizontaal naast elkaar, zelfde css class)
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
.child {
width : 450px;
height : 400px;
margin : 25px 75px 15px 75px;
position : relative;
float : left;
}
width : 450px;
height : 400px;
margin : 25px 75px 15px 75px;
position : relative;
float : left;
}
vervolgens word in de eerste div dynamisch met jQuery een aantal blokken geplaatst, naar gelang het aantal de breedte en hoogte wordt aangepast, volgens dit model:
Code (php)
1
2
3
4
2
3
4
width : //variabel
height : //variabel
bottom : //variabel (ligt aan aantal blokken, feitelijk de hoogte van 1 blok * het aantal blokken, zodat elk blok boven elkaar ligt)
position : absolute;
height : //variabel
bottom : //variabel (ligt aan aantal blokken, feitelijk de hoogte van 1 blok * het aantal blokken, zodat elk blok boven elkaar ligt)
position : absolute;
wanneer ik nu door wat jQuery het bovenste blok verplaats naar de andere container, moet deze als het ware naar beneden 'vallen', dus zo dicht mogelijk tegen de bodem van de container aan (wederom afhankelijk van het aantal blokken en hoogte van elk blok), dit doe ik door de css van het verplaatste blok te veranderen op deze manier:
Code (php)
1
disc.css('bottom' , ((aantaldiscs * hoogtediscs) + 'px'));
disc is natuurlijk het blok, aantaldiscs het aantal blokken en hoogtediscs de hoogte van elk blok, aanwezig in die container.
nu wanneer er dus een blok verplaatst word naar een lege container, moet deze naar beneden vallen, en volgens chrome dev tools is de css aangepast (in dit geval naar bottom : 0;)
toch blijft deze op dezelfde hoogte hangen als waar die vandaan kwam. iemand een idee?
p.s. het gaat inderdaad over de torens van hanoi
Gewijzigd op 07/03/2013 20:04:14 door Jeroen VD
