gideonx
%Europe/Berlin %141 %2009, 03:23
Ik vraag me af of het mogelijk is het volgende te doen met behulp van CSS / JavaScript:
Ik wil een aantal blokken op een pagina tonen, bij wijze van een gallery ( hoewel er geen images maar html-content in de blokken komt te staan ).
Bij het klikken op een blok, vergroot deze dusdanig dat hij de content die er in zit toont. Dit is altijd een standaard width ( de breedte van twee blokken ), maar de height is variabel.
De basis-opstelling, waarbij alle blokken default staan en er niks is aangeklikt:
http://www.lifelike.nl/ff/basecase.JPG
Nu heb ik de blokken met float:left geprobeerd uit te lijnen, en later met display:inline-block, maar dat was geen succes ( wat logisch is, aangezien inline-block, zoals de naam al zegt, inline is. )
Iets dergelijks als dit is dan het resultaat:
http://www.lifelike.nl/ff/hoe_het_niet_moet.JPG
Terwijl ik het zo wil hebben:
http://www.lifelike.nl/ff/hoe_het_moet.JPG
Dus als een blok groter wordt, moet de content er aan alle kanten omheen vallen, NIET alleen aan de rechterkant zoals bij float:left; het geval is, en ook niet pas onder het grote blok, maar ook hiernaast.
Is hier een bestaand script voor, kan dit met CSS, of heeft iemand een idee om dit met JavaScript te regelen?
Belangrijk om te weten:
- Het aantal blokken naast elkaar is in mijn quick&dirty paint-voorbeeldjes 5, maar dit kan varieren naar aanleiding van de breedte van de browser.
- De height van het aangeklikte blok is variabel.
- Er kan ten alle tijde maar 1 blok "uitgeklapt" zijn. Open je een nieuw blok, dan sluit de andere.
Hopelijk kan iemand mij hier mee helpen.
Ik wil een aantal blokken op een pagina tonen, bij wijze van een gallery ( hoewel er geen images maar html-content in de blokken komt te staan ).
Bij het klikken op een blok, vergroot deze dusdanig dat hij de content die er in zit toont. Dit is altijd een standaard width ( de breedte van twee blokken ), maar de height is variabel.
De basis-opstelling, waarbij alle blokken default staan en er niks is aangeklikt:
http://www.lifelike.nl/ff/basecase.JPG
Nu heb ik de blokken met float:left geprobeerd uit te lijnen, en later met display:inline-block, maar dat was geen succes ( wat logisch is, aangezien inline-block, zoals de naam al zegt, inline is. )
Iets dergelijks als dit is dan het resultaat:
http://www.lifelike.nl/ff/hoe_het_niet_moet.JPG
Terwijl ik het zo wil hebben:
http://www.lifelike.nl/ff/hoe_het_moet.JPG
Dus als een blok groter wordt, moet de content er aan alle kanten omheen vallen, NIET alleen aan de rechterkant zoals bij float:left; het geval is, en ook niet pas onder het grote blok, maar ook hiernaast.
Is hier een bestaand script voor, kan dit met CSS, of heeft iemand een idee om dit met JavaScript te regelen?
Belangrijk om te weten:
- Het aantal blokken naast elkaar is in mijn quick&dirty paint-voorbeeldjes 5, maar dit kan varieren naar aanleiding van de breedte van de browser.
- De height van het aangeklikte blok is variabel.
- Er kan ten alle tijde maar 1 blok "uitgeklapt" zijn. Open je een nieuw blok, dan sluit de andere.
Hopelijk kan iemand mij hier mee helpen.