[CSS/JS] Aantal content a.d.v. breedte div

[Asitis]

'Middag!

Ik ben een site aan het ontwikkelen en ik wil daar eens wat verder in gaan dan dat ik normaal doe. De site is 100% schermbreed, de hoofd-div is als een (smalle) balk in het midden van de pagina.
Nu wil ik die site gebruiken om thumbnails op te tonen, en ik vroeg me af of iemand wist hoe ik het aantal thumbnails kan bepalen aan de breedte van de div (dus de grootte van het scherm).

Bijvoorbeeld met een klein beeldscherm (zeg 600px breed) ziet de bezoeker maar 5 thumbnails, met een groot scherm (zeg 1200px breed) ziet de bezoeker 10 thumbnails.
Ze hebben hetzelfde op DeviantArt.com, als je scherm verkleind zie je dat er minder thumbnails te zien zijn, en andersom.
-edit: Ik zie dat de hoofdpagina de thumbnails gewoon onder elkaar uitlijnt, maar wat ik bedoel is te zien in de footer; bij de Daily Deviations-
Ik heb al het een en ander uitgezocht maar ik weet niet echt hoe ik gericht naar zoiets kan zoeken.. Ik weet bijna zeker dat het wel met Javascript geregeld is, maar niet zo goed hoe precies

Hopelijk snapt iemand hier wat ik bedoel, en kunnen jullie me helpen

Bvd!

[ Voor 6% gewijzigd door Asitis op 09-02-2009 10:27 ]

[disjfa]

Wat heb je zelf al gedaan? Als ik namelijk tig plaatjes in html zet en mijn scherm verklein/evrgroot heb ik deze oplossing namelijk al...

[Asitis]

-edit: hier ging iets mis oO..-

[ Voor 87% gewijzigd door Asitis op 09-02-2009 10:32 ]

[Asitis]

disjfa schreef op maandag 09 februari 2009 @ 10:27:
Wat heb je zelf al gedaan? Als ik namelijk tig plaatjes in html zet en mijn scherm verklein/evrgroot heb ik deze oplossing namelijk al...

Als je dat doet, verdwijnen ze toch niet? Als je een divje hebt met 10 plaatjes langs elkaar.. Zodra je dan je scherm verkleint komt er een horizontale scrollbalk, iets wat je bv op die site van DeviantArt niet ziet. Hoe kleiner je scherm, hoe minder thumbnails met daarnaast een " => " knopje om de rest te zien..
Ik heb al geprobeerd om met een div een grid te maken met vaste maten voor de plaatjes, en die div een variabele breedte te geven, maar ik heb geen flauw idee hoe ik de thumbnails buiten het scherm zou laten verdwijnen

[Depress]

Gebruik het window onresize event. Vraag dan de breedte van de div op via DOM. Voer wat berekeningen uit. En pas de inhoud aan.

[mcDavid]

Asitis schreef op maandag 09 februari 2009 @ 10:31:
[...]

Als je dat doet, verdwijnen ze toch niet? Als je een divje hebt met 10 plaatjes langs elkaar.. Zodra je dan je scherm verkleint komt er een horizontale scrollbalk, iets wat je bv op die site van DeviantArt niet ziet. Hoe kleiner je scherm, hoe minder thumbnails met daarnaast een " => " knopje om de rest te zien..
Ik heb al geprobeerd om met een div een grid te maken met vaste maten voor de plaatjes, en die div een variabele breedte te geven, maar ik heb geen flauw idee hoe ik de thumbnails buiten het scherm zou laten verdwijnen

Aangezien plaatjes inline-elementen zijn vliegen ze gewoon een regel naar beneden als er opzij geen ruimte meer is. Dat is precies wat er in je voorbeeld (deviantart) gebeurt.

Als je niet wilt wat er in dat voorbeeld gebeurt, maar daadwerkelijk wilt dat er plaatjes verdwijnen, heb je 2 regels javascript nodig. www.w3schools.com start reading.

[sub0kelvin]

mcDavid schreef op maandag 09 februari 2009 @ 12:31:
[...]

Aangezien plaatjes inline-elementen zijn vliegen ze gewoon een regel naar beneden als er opzij geen ruimte meer is. Dat is precies wat er in je voorbeeld (deviantart) gebeurt.

Als je niet wilt wat er in dat voorbeeld gebeurt, maar daadwerkelijk wilt dat er plaatjes verdwijnen, heb je 2 regels javascript nodig. www.w3schools.com start reading.

Hij bedoelt in de footer. Die laat afhankelijk van de breedte van het scherm meerdere foto's zien. Overigens met een maximum van 8.

Het is overigens geen javascript maar CSS met hidden overflows.

De foto's staan met z'n allen in een div met vaste hoogte, als je dan de breedte beperkt via de browsergrootte, flowen de foto's automatisch naar de volgende regel. Die je niet kunt zien, omdat de hoogte beperkt is.

Voorbeeldje van wat ik bedoel: http://files.maartenvangrootel.nl/overflow/

[ Voor 22% gewijzigd door sub0kelvin op 09-02-2009 13:35 ]

[Asitis]

sub0kelvin schreef op maandag 09 februari 2009 @ 13:03:
[...]

Hij bedoelt in de footer. Die laat afhankelijk van de breedte van het scherm meerdere foto's zien. Overigens met een maximum van 8.

Het is overigens geen javascript maar CSS met hidden overflows.

De foto's staan met z'n allen in een div met vaste hoogte, als je dan de breedte beperkt via de browsergrootte, flowen de foto's automatisch naar de volgende regel. Die je niet kunt zien, omdat de hoogte beperkt is.

Voorbeeldje van wat ik bedoel: http://files.maartenvangrootel.nl/overflow/

Dat is precies wat ik zoek inderdaad! En de oplossing is weer makkelijker dan ik zou denken, bedankt!!

[sub0kelvin]

Ondanks dat ik het zelf was die het antwoord voorkauwde wil ik toch even zeggen dat je dit zelf ook had kunnen vinden. Je had al een site die het gebruikte (dA) en met een beetje Firebuggen had je redelijk makkelijk kunnen vinden hoe zij het doen.