Readmore uitklap content met customized scrollbar

Status
Niet open voor verdere reacties.
K

killer4all2

Gebruiker
Lid geworden
26 mei 2009
Berichten
449
Goedendag,

Momenteel ben ik bezig met een website en wil drie post items laten weergeven in de content. Omdat het een simpele kleine pagina word zit er een standaard height aan mijn wrapper & content.

Wat ik wil
Ik wil dat er op thuis pagina (home) drie nieuws items worden weergeven. Er is een maximale hoogte van deze items. De tekst word dus afgekapt zodra het teveel word. Daaronder moet een readmore knop komen en moet deze content (van de post) groter worden met een animatie.

Dit had ik bijna voor elkaar gekregen, maar het werkt niet helemaal correct. Om dit makkelijker uit te leggen heb ik de pagina twee keer geupload, zodat jullie zien wat er aan de hand is.

Voorbeeld site 1:
Bij deze pagina kun je zien dat de content inderdaad scrolled maar er geen custom scrollbar aan de zijkant tervoorschijn komt.
http://the-resistance.eu/usr/voorbeeld-scroll1/

Voorbeeld site 2:
Deze scrollbar laadt wel als de content al groter is dan zijn maximale height op het begin. (komt waarscheinlijk door body load)
Zoals je ziet als je op de readmore knop druk word de slider niet groter en valt de onderste content buiten de kader.
http://the-resistance.eu/usr/voorbeeld-scroll2/

Weet iemand een scriptje die deze twee elementen allebij bij zich heeft of weet iemand een fix dan hoor ik dat graag. Ik heb al twee dagen lopen zoeken, maar kan niet deze combinatie vinden en op de manier zoals ik het wil.

Of als je weet hoe ik dit kan oplossen hoor dat ook heel graag natuurlijk! :-) De code en de script kun je makkelijk zien door de broncode te bekijken of via firebug.

Ik hoop dat iemand mij kan helpen!

Met vriendelijke groet,
Rowan
 
Hoi killer4all2,

Hoeps! Als je het er niet bij gezegd had, zou ik nooit van z'n leven in voorbeeld-scroll2 een aangepaste scrollbar gezien hebben... :rolleyes:
Die zou m.i. veel breder of met afwijkende kleur gestyled moeten worden, zodat opvalt dat het een scrollbar is. Nu lijkt het een randje. Hij is ook niet erg toegankelijk: als je geen ervaren muisgebruiker met vaste hand bent, kan je 'm niet vastpakken! Mensen met verminderde motoriek dus helemaal niet.
Motto: "Eerst de bruikbaarheid, dan het mooi." :)

Dan de eigenlijke vraag. ;)
  • De {overflow:hidden;} uit de <div id="mCSB_1"> halen, invoegen in de #wrapper, en dan de styles van de #wrapper en #content verder oppoetsen zodat er niets uit kan steken? Bv. brede border van de #wrapper of iets dergelijks.
  • Er zal ook nog iets moeten gebeuren voor de mensen met zonder javascript ingeschakeld.
  • Zie ook: Gelaagd bouwen.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ik zou het even proberen heel erg bedankt! Wat de kleuren betreft :P Dit is zodat je duidelijk de blokken kan zien waar de pagina uit opgebouwd is. :) Het uiteindelijke design dat ik voor ogen heb is heel anders :P

#De site die je ziet is een voorbeeld pagina! Niet de echte website. Vind 't beetje beledigend over komen :)
 
Laatst bewerkt:
Dit heeft het probleem zoals ik al verwacht had helaas niet opgelost. Als ik namelijk extra "post items" vanaf het begin toevoeg, dan functioneert de scrollbar wel na behoren. Ik denk dat het te maken heeft met de jquery dat de scrollbar van te voren checked of hij uit de content valt.

Het is misschien handiger om al een scriptje te krijgen die deze twee functies al van te voren heeft, aangezien ik op het moment nog niet beschik over de kennis om dit op te lossen.

Als het probleem simpelweg in de css lag dan had ik er waarschijnlijk zelf wel uitgekomen :-).

Als iemand nog een scriptje als deze heeft te liggen of kan uitleggen wat er mis is met 't javascript graag ! :)

Toch erg bedankt voor je reactie.
 
Hoi killer4all2,
Als ik namelijk extra "post items" vanaf het begin toevoeg, dan functioneert de scrollbar wel na behoren. Ik denk dat het te maken heeft met de jquery dat de scrollbar van te voren checked of hij uit de content valt.
Klik om te vergroten...
Dat zou best wel eens kunnen. Er zit zo'n berg scripts in, dat ik niet kan overzien waar de angel zit (ben ook niet bedreven in jQuery).

Ik ben trouwens ook wat aan het pielen met css en zelfbouw-javascript (met gewone scrollbar, en zonder animatie), en al een aardig eindje op weg.
Het model doet het ook zonder javascript (dan alleen scrollen), op diverse resoluties.
Hij klapt al automatisch in tot 3 posts met gelijke hoogte.
Ook op alle resoluties, m.n. op alle schermhoogtes (zonder tweede verticale scrollbar rechts).
Hij zet er automatisch een link "Meer..." bij.
Die link werkt ook al, met behoud van het scrollen van alles :).
Terugklap-link moet nog in orde gemaakt worden.
En ... nog wel "even" Internet Explorer tot gehoorzaamheid dwingen... :rolleyes:

Wordt vervolgd,
CSShunter
____________
O, zie nu dit:
Vind 't beetje beledigend over komen
Klik om te vergroten...
Dat was dus gans niet de bedoeling. Ik kon/kan niet weten wat je al/niet van plan bent *), en ga ervan uit dat een testpagina min of meer in de buurt komt van de echte (afgezien van kleuren, images, enz., dat snapte ik al).
Maar over de kleuren van de blokken hoorde je mij niet klagen, alleen over de breedte/zichtbaarheid van de scrollbar. :p
- En "in het wild" kom ik af en toe van die erg smalle/onopvallende/moeilijkbruikbare custom scrollbars tegen.
Dus zette ik 't er even bij: baat het niet dan schaadt het niet. Toch?
____________
*)
Als het probleem simpelweg in de css lag dan had ik er waarschijnlijk zelf wel uitgekomen :-).
Klik om te vergroten...
Meestal zijn het hierbij combi-problemen css+js. Ik weet ook niet wat je program-van-eisen is voor de site, maar bv. op een klein tablet draait 't ook niet zoals ik vermoed dat je bedoelt. Tenminste volgens de "view-responsive-layouts" van de Webdev.Toolbar in FF (screenshot; ik zit inmiddels hier).
 
Bedankt voor je reactie :) Ik snap je opmerking wel hoor ^^ Maar je weet dus niet hoe ik mijn probleem op kan lossen?

Wat bedoel je met dat laatste aangezien de pagina zonder fouten is gecodeerd :P Waarom vallen alle blokken over elkaar als hij op een klein tablet word weergeven? Een klein tablet zal de pagina toch gewoon uit-zoemen zoals bij een mobiel? Of heb ik dit mis :)

Maar uiteindelijk wil ik het javascript gebruiken voor een kleine portfolio site met een klein blog eraan (simpele posts om mensen op de hoogte te houden) Hier koppel ik dan een cms'je van mijzelf aanvast.

Ik ga inderdaad van het voorbeeld de sidebar en de content wel gebruiken, maar de sidebar komt er heel anders uit te zien :P En ook wat breder natuurlijk zoals je al zegt :-) Wou eerst even het scriptje werkend krijgen voordat ik met een site zoals deze voort ga.

Bedankt voor je reacties ik hoop dat iemand een scriptje heeft klaar liggen voor dit dat zou een stuk makkelijker zijn aangezien ik zelf nog niet over de benodigde kennis van javacsript bezit :)

Met vriendelijke groet,
Rowan
 
Hoi Rowan,
Wat bedoel je met dat laatste aangezien de pagina zonder fouten is gecodeerd
Klik om te vergroten...
Jawel, maar een pagina kan foutloos html en foutloos css zijn, en toch niet goed in beeld komen.
  • Meest extreme voorbeeld: body{display:none;} bij een foutloze html. :p

=======
Waarom vallen alle blokken over elkaar als hij op een klein tablet word weergeven?
Klik om te vergroten...
Omdat de blokken ook al over elkaar vallen op een wat kleiner desktop-scherm.
Bekijk je 'm op een screen van 1280x1024px of groter, dan zie je dit:

readmore-1280x1024.png

1280x2024px​

Merk op dat de volledige hoogte niet benut wordt. Dat komt door de fixed-height van 600px van de #wrapper. Bij grotere schermen wordt dit steeds erger: de loze ruimte onderin wordt steeds groter, en je moet met de inwendige scrollbar meer scrollen dan nodig zou zijn.

De andere kant op is dit ook zo. Bij openen op 1024x768px zie je dit:

readmore-1024x768-start.png

1024x768px / start​

Dan is er onderaan ruimte te kort, en verschijnt rechts de standaard-scrollbar. De bezoeker moet met 2 scrollbars manipuleren om de site te zien...
Verder zit de css zo in elkaar, dat de blokken over elkaar heen gaan schuiven als je met de normale scrollbar aan de slag gaat.

readmore-1024x768-scroll.png

1024x768 / scroll​

Hierbij lopen het witte kader, de contentkolom en de rechterkolom niet gelijk op. Dat is een kwestie van z-indexen, en zou aangepast kunnen worden. Maar dan wordt de keuze: gaat de pagina over de kopbalk heen, of gaat ie er onder schuiven? Er overheen = niet zo mooi. Maar er onderdoor = dan heb je niet de volledige inwendige scrollbar binnen handbereik.

Hoe kleiner het schermformaat, des te erger dit wordt. Bij een mobieltje in landscape (480x320px) wordt het dit:

readmore-480x320.png

480x320px​

Hier moet je ongelooflijk in de weer met de twee verticale scrollbars tegelijk om alles te kunnen zien. :rolleyes:

Kortom, door de fixed-height heeft dit ontwerp een zelfaanpassend vermogen voor de hoogte van... nihil!
Dit wordt bevestigd als je gaat kijken wat er gebeurt als javascript uit staat:

readmore-1280x1024-scriptloos.png

1280x1024px / scriptloos​

Als het goed is, zou er nu geen rechter scrollbar moeten zijn, en zou er vanzelf een inwendige scrollbar moeten komen, terwijl de pagina als totaal er helemaal op staat. Maar daar voorziet de css van het model niet in.

=======
Een klein tablet zal de pagina toch gewoon uit-zoemen zoals bij een mobiel? Of heb ik dit mis?
Klik om te vergroten...
Hoe de automatische zoom van een tablet of mobiel werkt, weet ik niet precies.
Maar als ik de vaste wrapper-breedte van 860px terugbreng tot een landscape-breedte van 800px voor een klein tablet, wordt het dit:

Dat gaat nog wel, al zal er ook automatisch een rechterscrollbar bij komen om dat niet alles op de hoogte van 600px past.
Maar zou je hetzelfde auto-zoomen doen voor een mobieltje met een landscape-breedte van 480px, dan zou dit het resultaat zijn:
  • 480x320px-autozoom, screenshot 1:1. De letters gaan onleesbaar worden, want er zijn geen pixels genoeg voor!
  • Bij bekijken in portrait-stand (om beter op-neer te kunnen scrollen) zou er al helemaal niets meer overblijven.
  • Dit zou te ondervangen zijn door (via een css3 media-query) een aangepast ontwerp te maken voor kleine schermen, waarbij de rechterkolom onder de content-kolom wordt geplaatst; zie ook bv. hier.

=======
Maar hoe dan ook blijft staan dat de fixed-height van het huidige model een sta-in-de-weg is voor prettig bekijken.
Vandaar dat ik er in mijn alternatieve ontwerp een (javascript-onafhankelijke) zelfregulerende hoogte in wil zetten. En dat lijkt makkelijker dan het is! ;)

=======
Wou eerst even het scriptje werkend krijgen voordat ik met een site zoals deze voort ga.
Klik om te vergroten...
In mijn ogen komt de jQuery custom-scrollbar pas aan de orde als het basismodel + uitklapscript goed werkt. Maar of de jQuery custom-scrollbar in principe overweg kan met (of aan te passen is tot) een on-the-fly wijziging van de inhoud (door uit/inklappen), weet ik niet.

Dus kant-en-klare scriptologen mogen zich inderdaad melden! :)

Met vriendelijke groet,
CSShunter
 
Bedankt voor je reactie ;) Je hebt er veel tijd aan besteed zie ik ! :) Ik heb besloten de pagina gewoon langer te laten worden. Dat lijkt mij toch het beste en de custom scrollbar achterwegen te laten. Dan is mijn hele probleem ook meteen opgelost.

Bedankt voor je reactie en ben weer wat anders gaan kijken naar websites :) Er valt altijd weer wat te leren :D
 
Hoi Rowan,
Ik heb besloten de pagina gewoon langer te laten worden. Dat lijkt mij toch het beste en de custom scrollbar achterwege te laten. Dan is mijn hele probleem ook meteen opgelost.
Klik om te vergroten...
Ha, de weg van de minste weerstand! ;)

Maar ho-ho, er komt nog wat aan: zonder custom scrollbar, maar wel met het originele opmaak-idee en de uitklappers; en dan voor alle beeldschermen en browsers geschikt. Ambachtelijk gemaakt, met kladblok en zonder jQuery. Want: "met css kan alles"!
Wacht nog maar even af! :)

Met vriendelijke groet,
CSShunter
 
Hoor ik de toekomst ? :) Er kan nu al heel veel met css inderdaad maar nog niet genoeg ^^

Komt nog ! :D
 
Hoi Rowan,
Er kan nu al heel veel met css inderdaad maar nog niet genoeg ^^
Klik om te vergroten...
Mmoah, ik vind dat nog wel meervallen. ;)

Boven het originele model bij bekijken zonder javascript ...

readmore-old-nw-css.png

.. en onder wat ook zonder javascript kan, gewoon met css2.1 en xhtml1.0-strict. :)
Er zit alleen wat css3 bij voor de ronde hoekjes. Er is geen html-5 gebruikt; oudere browsers kunnen er ook mee overweg.



Om de automatische pagina-aanpassing aan de hoogte te krijgen was wat steggelen nodig met wrappers, al dan niet absoluut gepositioneerd, en met verschillende overflows.
  • De body centreert de pagina horizontaal.
  • Een aparte #borderwrapper is nodig voor het witte kader met het eigen randje. Deze heeft geen hoogte van 100%, maar wel een vaste top- en bottom-afstand. Daarmee is de auto-aanpassing aan de schermhoogte gewaarborgd.
  • Daarbinnen zitten een #contentwrapper voor de linkerkolom, en een #rightcolumnwrapper voor de rechterkolom.
  • Beide hebben een {overflow:auto;} voor een inwendige scrollbar. Dan kan de rechterkolom zo nodig een eigen inwendige scrollbar krijgen, die onafhankelijk is van de stand van de scrollbar van de content.
  • Binnen de #contentwrapper zit de #content, met als enige functie wat afstand te kunnen maken tussen de content-inhoud en de inwendige scrollbar aan de rechterkant ervan.
  • Op deze manier kan er nooit een "normale" rechterscrollbar van de browser bij komen: die is niet nodig.
  • Ook de #rightcolumnwrapper heeft een #rightcolumn er in, eveneens om positionering via paddings mogelijk te maken.
  • De topics binnen de #content zitten in de verschillende <div>'s met class="post", waarbinnen telkens weer een linkerkolommetje en de eigenlijke inhoud van de post zit.
  • Om goed te kunnen testen, zijn de posts gevuld met dummy-tekst van verschillende hoogtes.
  • Tenslotte is er nog de #header-balk die over de volle breedte moet lopen, maar wel gecentreerde inhoud met vaste breedte moet krijgen om synchroon te lopen met de paginabreedte; deze heeft een eigen absolute positie, los van alles.

Aldus stap 1 van het gelaagd bouwen.
Eigenlijk zit hiervoor nog stap 0, die al in de pagina is opgenomen: een paginastructuur en indeling die als platte tekst bruikbaar is.
Dwz.: zodanig in elkaar zit dat pure text-browsers ermee overweg kunnen (die zien dit: readmore-uitklap-vs5-01a.htm), en ook voorlees-browsers. Die spreken dit uit:

readmore-fangs.png

Dmv wat hidden tekst is in orde gemaakt dat bv. blinden niet eerst alle blogs moeten aanhoren, voordat ze bij het menu in de rechterkolom kunnen arriveren. Met een skip-content bladwijzer kunnen ze er direct naar toe jumpen.
Ook niet te versmaden: de pagina-structuur biedt een goed houvast voor de Google-bot, want die is ook een pure text-waarnemer.

Maar goed, dit was dus stap 1: html + alleen de opmaak in css.
In de volgende stappen gaat er javascript bij gevoegd worden voor de gewenste functionaliteit: het verkorten van de topics en het plaatsen van "Meer..."-links.
Maar voordat dat helemaal gerealiseerd is, is er nog een weg te gaan...

Wordt vervolgd!
Met vriendelijke groet,
CSShunter
_________________
PS: De pagina-hoogte past zich ook on-the-fly aan aan de schermhoogte. Als je bv. aan de hoogte van het browser-window gaat rekken en trekken, groeit/krimpt de pagina steeds tot de volle beschikbare schermhoogte, en de scollbars worden langer of korter. - Is natuurlijk normaal, maar prettig dat het werkt.
 
Laatst bewerkt:
Wat ik mij nog af vroeg. Hoe komt he dat bij jou als je bijvoorbeeld kijkt naar 1280x1024 voorbeeld de content over de wrapper heen valt? Aangezien er in de css een overflow hidden staat. :)
 
Eh? Snap de vraag niet zo.
De enige {overflow:hidden;} zit op de div's met de class="post".
Die hidden is nodig om de hoogte van elke post zo hoog te maken als de hoogste van de "post-date"-kolom (links) en de "post-content"-kolom (rechts) van elke post.
De "post-date"-kolom is namelijk links drijvend, en zou je het parent element "post" géén {overflow:hidden;} geven, dan zou een hogere "post-date"-kolom in de volgende post doorlopen (en ook de volgende links-gefloate "post-date"-kolom ernaast zetten).



Dit is een trucje dat op hetzelfde neerkomt als een clearing-div op het eind van de post-div, maar dat zijn weer extra html-regels en een extra nodige css-class: .clearL{clear:left;}



In beeld gebracht:

readmore-01a-01b-screenshot.png

Dit alles speelt zich af binnen de #content en de #contentwrapper, en staat daar dus los van.
En voor de totale hoogte van alle posts komt er via die omvattende div's een inwendige scrollbar met: #contentwrapper{overflow:auto;}.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Sorry dat bedoelde ik niet :P

readmore-old-nw-css.png

Bij het plaatje links boven op je voorbeeld zie je dat de post-content over de content heen valt en buiten de wrapper valt. Bij het script dat ik op mijn pc heb gebeurd dit niet vandaar :) Dus ik vroeg mij af waarom dit wel gaande is op jou screenshot.
 
Aha, op die fiets! :D
Mijn plaatje is geschoten als javascript uit staat: "Boven het originele model bij bekijken zonder javascript ...". :p
Er zit op jouw #wrapper en #content géén {overflow:hidden;} in de css, dus dan wordt de overflow gewoon getoond.

Als javascript aan staat, wordt het anders. Dan worden er door het script binnen de #content twee extra <div>'s aangemaakt, voordat de post-div's beginnen.
De buitenste daarvan heet:
Code: 
<div id="mCSB_1" class="mCustomScrollBox" style="position: relative; height: 100%; [COLOR="#B22222"][B]overflow: hidden; [/B][/COLOR]max-width: 100%;" >
en daar wordt dus via het script de hidden overflow in gezet.
Maar met uitgeschakeld js flowt ie wel over. ;)
 
Laatst bewerkt:
Stap 2

Nu ga ik in mijn model ook javascript erbij betrekken. In deze fase: het verdelen van de topic-hoogtes over de beschikbare schermhoogte.
Er worden 3 even hoge posts getoond.
Wat er niet op past, wordt genadeloos afgekapt.
Mocht een post minder ruimte nodig hebben, dan wordt er onder lege hoogte toegevoegd, zodat de 3 stuks toch altijd mooi op scherm komen te staan.



Toelichting:
  • De beschikbare hoogte bij de aangetroffen beeldscherm-hoogte wordt opgemeten.
  • De ruimte tussen de topic-blokken en voor de verticale borders van de blokken wordt verdisconteerd.
  • Wat overblijft, kan door 3 worden gedeeld.
  • Alle post-div's en alle post-content-div's krijgen een eigen (volgnummer-)ID, zodat ze per stuk te benaderen zijn.
  • Voor later wordt vast een lijstje aangelegd met de werkelijke hoogte per post-div.
  • Met de rechterkolom wordt door het script niets gedaan: die bedruipt zichzelf al via de css.
  • Zie broncode.

Maar het javascript is nog niet klaar: wordt vervolgd!
CSShunter
 
Stap 3

Genadeloos afkappen is nu ook weer zo hard. ;)
Want halverwege een alinea (of in het midden van een regel) de hoogte afkappen is niet echt mooi.

regel-afkap.png



Toelichting:
  • Er wordt een functie newContent(pN) voor elk postNummer aangemaakt (die is dan herbruikbaar voor later het inklappen).
  • Per post-item: alle alinea's <p> worden van achter naar voren doorgelopen.
  • Is de content-hoogte met de laatste alinea te hoog, dan wordt deze alinea verwijderd.
  • Dan wordt gekeken of de content met de dan laatste alinea nog te hoog is; zo ja, weg ermee, enz.
  • De eerste alinea blijft altijd staan, anders is er helemaal niets van de content van een bepaalde post te zien.

Nu is er steeds voldoende ruimte om de regel met de "Meer..."-link te plaatsen, behalve als er maar één alinea over is die eigenlijk nog te hoog is.

Wordt vervolgd!
CSShunter
 
Stap 4

Verder met het javascripten; nu het plaatsen van de "Meer..."-link (zie broncode):


  • De "Meer..."-link hoeft er alleen te komen als de nieuwe hoogte van de items kleiner is dan de oude hoogte van een bepaald item (hetzij de hoogte van de post-date kolom, hetzij de hoogte van de post-content kolom).
  • Eerst wordt de link-regel aangemaakt als nieuw element, en als laatste element toegevoegd aan de post-content: "appendChild".
  • Is de nieuwe gezamenlijke hoogte groot genoeg, dan kan de regel er meteen onder gezet worden.
  • Is de nieuwe gezamenlijke hoogte nu te klein (bij alleen een eerste alinea en erg weinig beeldscherm-hoogte), dan wordt de link-regel helemaal onderaan de post-content gezet en voorzien van een background-image dat naar boven toe verloopt van de content-kleur naar transparant. Daardoor hoeft niet hard te worden afgekapt midden in een regel, maar vervaagt de inhoud zachtjes tot aan de "Meer..."-link:

regel-vervaag.png



Nu staat de link er wel, maar hij moet ook nog gaan werken! ;)
CSShunter
 
Stap 5

Uitklappen via de nu ingevulde functie showPost(pN).
Hiervoor staan alle ingrediënten al klaar: de oorspronkelijke hoogte per post-item speelt de hoofdrol, zodat het uitklappen onafhankelijk per post-item kan plaatsvinden.



Toelichting:
  • Als er uitgeschakelde alinea's in de post-content waren, worden die weer zichtbaar gemaakt.
  • De apart gezette hoogte van de post wordt opgehaald.
  • Er wordt ruimte toegevoegd voor een "Minder..." regel om weer in te kunnen klappen.
  • De oude "Meer..." regel wordt nu de "Minder..." regel, met een link naar een hidePost(pN) functie.
  • Een paar styles worden aangepast.

NB: Hier past de inwendige scrollbar zich keurig aan, in tegenstelling tot de jQuery custom-scrollbar uit de vraag van deze draad. :D

Nu alleen de inklap-functie nog invullen. :)
Wordt vervolgd!
CSShunter
 
Stap 6

De inklap-functie maken: het wordt steeds makkelijker!



Toelichting:
  • Als de "Minder..."-link er helemaal uit gehaald wordt, kan de ingekorte hoogte weer van toepassing worden verklaard.
  • Voor het opnieuw wissen van de overbodige alinea's en het terugplaatsen van de "Meer..."-link wordt de functie newContent(pN) weer aangeroepen
  • Dan doet de browser het nog eens dunnetjes over, en we zijn weer terug bij af. :)
  • En de inwendige scrollbar krimpt weer vlekkeloos tot wat er over is.


Blijft over: de finishing touch.
Wordt vervolgd!
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan