Archief - scroll in div

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

faxxR

Legacy Member
Hallo,

ik heb het volgende:
question.png | Afbeelding Uploaden - Makkelijk afbeeldingen uploaden!

Nu wil ik dat als ik op het pijltje naar boven klik dat naar de vorige li en pijltje naar beneden naar de volgende li ga.

Dit is mijn code :

Code:
<div class="section">
			<ul>
				<li class="sub" id="section1">
					<h2>Voorgeschiedenis</h2>
					<p>In Gent, de historische hoofdplaats van het graafschap Vlaanderen, werd sedert de middeleeuwen door zeer verscheidene instanties en op vele plaatsen rechtgesproken. Vanaf 1407 was Gent ook de zetel van de "Raad van Vlaanderen", het hoogste gerechtshof van het graafschap. Het zetelde in het Gravensteen tot 1778. Daarna zetelde deze raad in een gedeelte van het nu opgeheven Jezuïetenklooster in de Volderstraat.</p>
					<p>In 1795 schaften de Franse bezetters al de oude rechtsinstellingen af en richtten meteen het "Tribunal civil du département de l'Escaut" op. Dit tribunaal voor de provincie Oost-Vlaanderen zetelde op de plaats van de afgeschafte Raad van Vlaanderen. De daarna in 1800 ingestelde rechtbank van eerste aanleg had ook haar zetel in de Volderstraat. Tot in 1846 het Justitiepaleis aan het Koophandelsplein in gebruik werd genomen.</p>
					<a href="#section1b" class="next">&gt;&gt;</a>
				</li>
				<li class="sub" id="section1b">
                <h2>Recollettenplein</h2>
					<p>Tot de oprichting van het justitiegebouw werd beslist doordat de Belgische Grondwet van 1831 bepaalde dat er te Gent een Hof van beroep voor Oost- en West-Vlaanderen zou komen. Dit zetelde aanvankelijk in een deel van het stadhuis. De zittingen werden regelmatig gestoord door te veel drukte en lawaai van binnen en buiten het gebouw. Daarom besliste het stadsbestuur tot de oprichting van een nieuw gerechtsgebouw op het Recollettenplein. </p>
					<p>Dit plein was ontstaan door de afbraak in 1797 van het sedert de 13° eeuw bestaande klooster van de Minderbroeders (Recolletten). Dat klooster was door de Franse Revolutie afgeschaft en als nationaal goed verkocht.</p>
					<a href="#section1" class="prev">&lt;&lt;</a>
					<a href="#section1c" class="next">&gt;&gt;</a>					
				</li>
				<li class="sub" id="section1c">
                <h2>Koophandelsplein</h2>
					<p>In 1836 werd de eerste steen van het nieuwe gerechtsgebouw gelegd. De bouw heeft geduurd tot 1846. De kostprijs liep op tot ruim 2.000.000 frank. Omdat de stad eiste dat ook de Handelsbeurs er zou ondergebracht worden (wat tot 1900 duurde) werd het Recollettenplein omgedoopt tot Koophandelsplein.</p>
					<a href="#section1b" class="prev">&lt;&lt;</a>
					<a href="#section1d" class="next">&gt;&gt;</a>					
				</li>
                <li class="sub" id="section1d">
                <h2>Eerste Wereldoorlog</h2>
					<p>Tijdens de eerste wereldoorlog 1914-18 werd het Justitiepaleis bezet door het Duitse leger en gebruikt als arsenaal en werkplaats. Ook werd het de zetel van de inspectie van het Etappegebied Oost- en West-Vlaanderen. Op de zijgevel in de Schouwburgstraat is als spoor van de bezetting boven het groot venster nog altijd het overschilderd opschrift "Etappeninspektion" te lezen. Men moet wel wat zoeken want het is niet langer duidelijk zichtbaar. </p>
					<p>Het Hof van beroep werd voor de duur van de oorlog overgebracht naar de Vlaamse Academie in de Koningstraat. De Rechtbank van eerste aanleg kwam in de Kleine Sikkel aan de Nederpolder terecht.</p>
					<a href="#section1c" class="prev">&lt;&lt;</a>
					<a href="#section1e" class="next">&gt;&gt;</a>					
				</li>
                <li class="sub" id="section1e">
                <h2>Brand van 1926</h2>
					<p>Het Justitiepaleis werd op 19 maart 1926 zwaar geteisterd door een felle, twee dagen durende brand. De buitenmuren werden gespaard maar praktisch heel het interieur, de inboedel en de meeste dossiers gingen in de vlammen op. Wel werd in de rechtbank van eerste aanleg het geschilderd portret van Keizerin Maria-Theresia uit 1749 gered. Ook de oude bibliotheek van de Raad van Vlaanderen kon worden gered. De Rechtbank en het Hof van beroep werden tijdelijk overgebracht naar het gebouw naast de Kathedraal van Gent waar tegenwoordig de school van Klein Sint-Bavo is.</p>
					
					<a href="#section1d" class="prev">&lt;&lt;</a>
					<a href="#section1f" class="next">&gt;&gt;</a>					
				</li>
                <li class="sub" id="section1f">
                <h2>Wederopbouw</h2>
					<p>Na de brand werd de wederopbouw uitgevoerd onder leiding van architect M. De Vaere en duurde tot 1930. De binneninrichting werd volledig gewijzigd. De grote "Salle des pas perdus" op de eerste verdieping verdween. In de plaats daarvan werd gekozen voor een binnenkoer met ruime, goed verlichte gangen rondom. Het aantal bruikbare lokalen werd van 58 op 100 gebracht. Binnenin is het gebouw sober gehouden. Er werden enkele grote schilderijen opgehangen.</p>
					<a href="#section1e" class="prev">&lt;&lt;</a>
					<a href="#section1g" class="next">&gt;&gt;</a>					
				</li>
                <li class="sub" id="section1g">
                <h2>Modernisering</h2>
					<p>Ondanks de modernisering van het Justitiepaleis in 1930, was het gebouw te klein geworden. In 1997 ontstonden er duidelijke plannen om al de gerechtelijke diensten van het arrondissement samen te voegen. Er werd gekozen voor een nieuw gerechtsgebouw aan de Opgeëistenlaan bij het Rabot. Het oude Justitiepaleis werd grondig gerenoveerd en toegekend  aan het Hof van beroep en het Arbeidshof. De buitengevel werd aan een grondige herstelling en reiniging onderworpen. Het donkere gebouw heeft daardoor eindelijk zijn oorspronkelijke lichte kleur herkregen.</p>
					<a href="#section1f" class="prev">&lt;&lt;</a>
									
				</li>
			</ul>
	
		
		</div>

Iemand die weet hoe ik dit gemakkelijk kan doen? Ik ben al aan het sukkelen geweest met scrollTo en localScroll maar er is altijd wel iets fout :O

Zero Grav

Legacy Member
Waar is je Javascript?

Bij zo'n dingen moet ge gebruikmaken van outerHeight(); omdat ge de padding moet meetellen van uw list items. En dan gewoon overflow: hidden; op een container en uw ul margin-top: -(index*outerHeight li:eq(0));.

faxxR

Legacy Member
Sorry, maar ik versta het niet. Zou je dit even kunnen expliceren?

Zero Grav

Legacy Member
Ge hebt een DIV, pak dat die een hoogte en breedte heeft van 200 pixels en overflow: hidden zodat child nodes die groter zijn niet worden weergegeven en er geen scrollbar komt.
In die DIV zit een UL in met 5 LI's, elke LI heeft een hoogte van 200pixels (met de padding meegerekend == outerHeight in Javascript).

Ge start op index 0 (var index = 0), dat is uw eerste zichtbare LI. Bij het klikken op de pijl naar onder verhoogt ge de index met 1 (index++). Dan wilt ge dat de tweede LI zichtbaar wordt, dus moet de lijst naar boven gaan. Een margin-top zorgt dat dingen naar beneden verschuiven, maar een negatieve margin-top zorgt dat dingen naar boven gaan.

Hoeveel pixels wilt ge naar boven? Bij het laden de hoogte van 0 LI's, bij het klikken op de pijl naar onder de hoogte van 1 LI, nog eens klikken worden 2 LI's, etc&#8230; En dat is niet toevallig gelijk aan de index variabele. Dus elke keer ge klikt verandert ge de margin-top van uw UL naar een negatief meervoud van de hoogte van de LI.

0 keer klikken, index is 0: -(0 * 200) = 0
1 keer klikken, index is 1: -(1 * 200) = -200
etc...

Bij elke klik kijkt ge ook of uw index even groot is als uw aantal LI's - 1 (want uw index begint op 0) en dan kunt ge eventueel de pijl verbergen of bij de volgende klik weer gewoon uw index op 0 zetten zodat em terug naar de eerste LI navigeert.

Als ge dat correct schrijft dan werkt dat exact hetzelfde voor de pijl naar boven, alleen moet ge dan de index - 1 doen natuurlijk.

Omdat uw omringende div ook die hoogte en breedte van 200 pixels heeft, in combinatie met overflow: hidden; wordt er van de UL niets getoond dat buiten die 200 op 200 valt.

Wilt ge dit in videoformaat zien dan kunt ge deze link eens bekijken: Tuts+ Premium Course: 30 Days to Learn jQuery - The Obligatory Slider (First Stab)

En als ge dat nog niet begrijpt, dan moet ge het niet zelf schrijven, want er bestaan letterlijk duizenden scripts voor hetgeen gij wilt doen. Gewoon zoeken op een JQuery Slideshow.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan