Relatieve Z-index

[Tofu]

Ik ben bezig met een systeempje, waar je labels/etiketten over een touw heen kan slepen.
Het touw moet door een gaatje in het label gaan. Dus heb ik een label nu opgebouwd uit 2 delen:
De bovenzijde, met een lage Z-index (geen), daarboven het touw, en het onderste deel van het label heeft een Z-index hoger dan het touw.

Nu wil ik als je een label over een ander heel schuift, dat het dan ofwel onder, ofwel boven het ander label schuift. Op dit moment gaat de bovenkant dus wel boven de bovenkant van label 2, maar niet boven de onderkant van label 2, omdat die een hogere Z-index heeft.

Een testcase staat op de volgende URL: Klik.
Daar kan je dus de bovenste label vastpakken met je muis, en naar onderen slepen, over de 2de label heen. Dan zie je wat er gebeurd. Hoe los ik dit op?

[BtM909]

Waarom niet dynamisch je z-index aanpassen? Normaal gaan labels ook niet door het midden door elkaar, maar ik neem aan dat je dat probeert te simuleren?

[Voutloos]

Dynamische z-index welke afhankelijk is van de hoogte en klaar ben je.

[Tofu]

BtM909 schreef op maandag 19 mei 2008 @ 15:10:
Waarom niet dynamisch je z-index aanpassen? Normaal gaan labels ook niet door het midden door elkaar, maar ik neem aan dat je dat probeert te simuleren?

Dat is juist mijn probleem , dat ze in het midden door elkaar gaan, in plaats van onder of boven elkaar.

offtopic:
Normaal kunnen labels op een touw sowieso niet onderling van plaats wisselen, maar goed

Ik heb daaraan gedacht, aan het dynamisch aanpassen, maar ik weet niet naar wat ik ze moet aanpassen.
Dit zou denk ik enkel gaan als het touw uit verschillende stukjes bestond.

Nu moeten label (bovendeel - parent) en innerLabel (onderdeel - child) namelijk elk een Z-index lager en hoger dan het touw hebben.

Zo heeft het touw bijvoorbeeld 10. label heeft dan 8, en innerLabel 12.
Bij label 2 heeft label dan 9 en innerLabel 11.
Nu zou label (1) dus >11 moeten hebben om boven innerLabel (onderste deel) van label 2 uit te komen. Maar dat kan ik doen niet, want dan komt de bovenkant boven het touw (Z-index 10) uit.

Daarbij kan ik label eigenlijk ook helemaal geen Z-index geven, want van zodra ik er een Z-waarde aan toewijs kan ik er geen touw meer tussenkrijgen, zeer raar. Zie ook deze demo.

EDIT: Ik zie trouwens dat de testcase enkel nog maar goed werkt in Opera, Firefox, Safari. IE kijkt blijkbaar nog niet naar de Z-index die er al staat.

[ Voor 6% gewijzigd door Tofu op 19-05-2008 15:45 ]

[Voutloos]

O, ik zie nu pas het probleem. Beter opgeschreven:
regel 1) Elke bovenkant zit achter het touw
regel 2) Elke onderkant zit voor het touw

Bij overlap:
regel 3) De bovenkant van het hogere label zit voor het lagere label
regel 4) De onderkant van het hogere label zit voor het lagere label

Volgens mij kan dit wel.
Touw 10
Bovenste label 9 / 12
Onderste label 8 / 11
Maak z-index hoogte afhankelijk. Voor de bovenkant: hoe hoger, des te dichter bij z_touw. Voor de onderkant: hoe hoger, des te verder boven z_touw.

Conclusie: ik blijf bij m'n 1e post.

[ Voor 3% gewijzigd door Voutloos op 19-05-2008 16:01 ]

[RM-rf]

de eenvoudigste oplossing is de gekozen z-index afhankelijk te maken van de Y-as (top: Npx) positie qua positionering (maar dan afgetrokken van de totale vensterhoogte in pixels)
dus als de positionering 'top: Npx' is na een move, de z-index op 'z-index: Window-height - N; zetten

weet je altijd dat de hoger gepositioneerde elementen , ook een hogere z_index waarde hebben (en grootste voordeel is dat je nergens een array moet bijhouden met al je andere elementen en die 'vergelijken' tov elkaar)

[ Voor 14% gewijzigd door RM-rf op 19-05-2008 16:07 ]

[Tofu]

Voutloos schreef op maandag 19 mei 2008 @ 16:01:
O, ik zie nu pas het probleem. Beter opgeschreven:

Bedankt

Touw 10
Bovenste label 9 / 12
Onderste label 8 / 11

Helaas, zo voldoe je niet aan regel 3:
regel 3) De bovenkant van het hogere label zit voor het lagere label
De bovenkant van het hogere label, 9 dus, zal voor de bovenkant van het lagere label zitten ( 8 ), maar achter de onderkant van het lagere label (11).

regel 4) De onderkant van het hogere label zit voor het lagere label
De 12 zal inderdaad boven zowel 8 als 11 uitkomen.

Zo zullen de labels alsnog middendoor kruisen.


(De tekening klopt wel niet helemaal met de cijfers)

[Voutloos]

Je moet inderdaad wel zorgen dat de onderkant minstens de halve hoogte is, dus misschien moet je het gaatje van de label wat hoger plaatsen.

edit:

Hmz, die bovenkant van dat onderste label heeft toch ook gewoon een lagere index dan beide delen van het bovengelegen label, dus wat er gaat er nou fout?

[ Voor 36% gewijzigd door Voutloos op 19-05-2008 16:52 ]

[Tofu]

Voutloos schreef op maandag 19 mei 2008 @ 16:50:
Je moet inderdaad wel zorgen dat de onderkant minstens de halve hoogte is, dus misschien moet je het gaatje van de label wat hoger plaatsen.

Ik begrijp niet wat de hoogte ermee te maken heeft? Zowel de onderzijde als de bovenzijde hebben een gelijke hoogte (48 pixels).

edit:

Hmz, die bovenkant van dat onderste label heeft toch ook gewoon een lagere index dan beide delen van het bovengelegen label, dus wat er gaat er nou fout?

Die bovenkant van dat onderste label heeft, in jouw voorbeeld, inderdaad een lagere index dan beide delen van het bovengelegen label, maar het onderste niet. Jouw 9 is kleiner dan de 11 van de onderzijde van van het onderste label. Waardoor het bovenste label zijn topdeel boven de onderste label zijn benedendeel zal schuiven, en vervolgens gedeeltelijk (enkel het bovenste deel) onder het 2de deel.

code:

Touw 10
Bovenste label 9 / 12
Onderste label 8 / 11

Topdeel onderste label:
8<9: bovenste label top heeft 9 => schuift erboven (goed)
8<12: bovenste label bottom heeft 12 => schuift erboven (goed)

Benedendeel onderste label:
11>9: bovenste label top heeft 9 ==> schuift eronder (niet goed, moet ook erboven)
11<12: bovenste label bottom heeft 12 ==> schuift erboven (goed)

Ik heb in mijn voorbeeld wat aangepast. Ik heb beide labels een ander kleur gegeven zodat het hopelijk wat duidelijk wordt.
Het is de bedoeling dat de overgang niet gebeurd zoals op volgend plaatje:

Maar dat een label in zijn geheel, op elk tijdstip ofwel boven of onder een ander label doorgaat, en niet middendoor.

Bedankt voor het meedenken al trouwens

[Voutloos]

Je voorbeeld klopt nu qua z-index zolang het grijze label de bovenste is, right? Dus je kan het wél zo weergeven. Nu alleen nog dynamisch aanpassen (5e keer dat het gezegd wordt).

Maar dat een label in zijn geheel, op elk tijdstip ofwel boven of onder een ander label doorgaat, en niet middendoor.

Staat hier dat een willekeurig label altijd in z'n geheel bovenop een ander willekeurig label zichtbaar is (door mij beschreven), of wil je dat de grijze _altijd_ bovenop ligt. Dat laatste is onmogelijk bij met een constante index voor touw, maar je kan misschien wat sjoemelen, door bijvoorbeeld ten tijde van de overlap waar het fout gaat (plaatje 2, grijze label boven de onderkant van het groene) de z-index van de grone onderkant onder het touw te stoppen. Het touw gaat dan niet juist door de groene heen, maar dat zie je niet, want het grijze label ligt er bovenop.

[ Voor 76% gewijzigd door Voutloos op 20-05-2008 08:26 ]

[Tofu]

Voutloos schreef op dinsdag 20 mei 2008 @ 08:07:
Je voorbeeld klopt nu qua z-index zolang het grijze label de bovenste is, right? Dus je kan het wél zo weergeven. Nu alleen nog dynamisch aanpassen (5e keer dat het gezegd wordt).


[...]
Staat hier dat een willekeurig label altijd in z'n geheel bovenop een ander willekeurig label zichtbaar is (door mij beschreven), of wil je dat de grijze _altijd_ bovenop ligt. Dat laatste is onmogelijk bij met een constante index voor touw, maar je kan misschien wat sjoemelen, door bijvoorbeeld ten tijde van de overlap waar het fout gaat (plaatje 2, grijze label boven de onderkant van het groene) de z-index van de grone onderkant onder het touw te stoppen. Het touw gaat dan niet juist door de groene heen, maar dat zie je niet, want het grijze label ligt er bovenop.

OK, bedankt. Ik had eigenlijk gehoopt op een trucje daarmee je de z-index relatief tegenover elkaar kon instellen, door een gezamenlijk refpunt te nemen oid..
Maar goed, dat dynamisch aanpassen valt nog beter mee dan ik had gedacht, zolang ik de labels op een gelijke afstand behoud moet ik geen db bijhouden.
Ik heb mijn voorbeeldje ondertussen al wat aangepast.
Héél erg bedankt voor je hulp!