Vastgepind voortgangsmenu
Lange teksten kun je beste indelen in hoofdstukken. Als je die op je website publiceert kun je de hoofdstukken markeren met bookmarks. In HTML doe je dat met <a name="Hoofdstuk-1></a>. Je kunt daar naar toe springen met gewone hyperlinks. Die kun je in knoppen zetten, vergelijkbaar met de navigatie op deze website.
Op deze pagina presenteer ik code, waarmee je zoiets realiseert. De knoppen dienen echter niet alleen voor de navigatie, het zijn ook progress-bars, die per hoofdstuk aangeven hoe ver je gevorderd bent in dat hoofdstuk.
Omdat dit niet goed is in te passen in een site met frames (zoals deze) wordt het voorbeeld getoond in een apart tabblad. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
Dit is een bewerking van code die is gemaakt door Jayson Winters voor Web Designer Magazine. Verdere informatie ontbreekt. Er wordt gebruik gemaakt van een jQuery-plug-in met de naam lockfixed, die is gemaakt door die is gemaakt door Yvo Schaap. De code van de jQuery-plugin staat niet meer op zijn site, maar je vindt de code wel in de downloadfile.
- Er worden twee items besproken:
- De werking van het script, in algemene termen.
- Inbouwen in je eigen site.
- De werking van het script
- Na het laden van de benodigde CSS en JavaScript wordt de <body> verdeeld in drie delen: Dit gebeurt met <div>-tags
- Een sidebar.Hier in staat het menu. De sidebar wordt met behulp van de jQuery-plug-in op zijn plaats gehouden. Dit is het enige wat de plug-in doet. Tegenwoordig zou dat ook met CSS geregeld kunnen worden, waardoor je jQuery voor deze toepassing niet meer nodig hebt.
- Een deel met de koppen en de broodtekst: content. Deze is steeds opgebouwd uit:
<a name="Hoofdstuk1"></a><h2>1. Jantje zag eens pruimen hangen</h2>- Een aantal <p> ... </p>-tags met de tekst van het hoofdstuk.
- Een voettekst: footer. Deze is zo gepositioneerd dat deze onder de broodtekst staat. Dat bereik je door footer binnen content te plaatsen.
- Het bovenstaande wordt bij elkaar gehouden in de wrapper main. Ook dit is een <div>.
- De knoppen zijn eigenlijk de voortgangsbalken (<progress>), wwar de links (rood) en de ondertitel (wit) bovenop zijn gelegd.
- De knoppen zijn 235px breed. daar gaat de (2px) padding vanaf. Dat is vastgelegd in de CSS voor de class menu.
De hoogte wordt bepaald door de inhoud van de knoppen. De link-tekst en de ondertitel mogen daardoor elk niet langer zijn dan één regel, anders ontspoort de hoogte van de knop. - Werking van de links
- De progress bars zjn gemaakt met HTML-tags, elk met een uniek id, een startwaarde (value="0") en een eindwaarde (max="…").
- De voortgangsbalken worden door JavaScript bijgewerkt op basis van scrollTop en document.height. Dat is
meteen de zwakte van het script, want de laatste balk ontspoort gemakkelijk; zie hieronder.
- Dit script werkt goed als de zichtbare hoogte van het document niet kleiner is dan de hoogte van het menu op het scherm
(hier: 380px) en niet groter is dan ca. 700px. In het eerste geval is niet het hele menu zichtbaar, maar werkt verder goed.
In het tweede geval loopt de voorgangsbalk van de onderste knop (Hier: Hoofdstuk 5) niet helemaal tot aan het einde. Dit is
op te vangen door flink wat witruimte onderaan het document toe te voegen.
- Inbouwen in je eigen site
- Omdat dit een jQuery-plug-in, heb je jQuery nodig. Die betrek je het beste van een CDN. In het originele script en in het voorbeeld is jQuery versie 1.9.0 gebruikt, maar elke latere versie zou moeten werken.
- Na de link naar jQuery volgt de link aan jquery.scrollnavprogress.js.
- Ook laad je de CSS in. Het gaat hier alleen over de opmaak van de knoppen en de indeling van de pagina. Op deze website is dat style455.css, maar je kunt natuurlijk elke naam gebruiken die je wilt.
- De links aan bovenstaande bestanden staan in de <head>.
- De HTML in de <body> bouw je op zoals hierboven in beschreven en hieronder wordt getoond. Je kunt net zoveel hoofdstukken gebruiken als je wilt. Voor elk hoofdstuk heb je een progress-bar nodig en en regel in de document.ready-function.
- Tenslotte zet je de document.ready function aan het einde van de <body>, buiten de scope van de wrapper
main.
- Dan rest nog het bepalen van de getallen max="aa" in de <progress>-tag en xx
en yy in de regels $("#progress_barX").attr('value', ((scrll)*xx)-yy);
in de document.ready function..
Dat is een kwestie van proberen. Zet in eerste instantie aa op 100, voor alle progress-bars. Probeer dan een waarde te vinden voor xx. Maak daarbij ook aa kleiner. Als het gedrag van er een beetje op gaat lijken stel je de waarde van yy in voor de eerste progress-bar (die kan negatief zijn), daarna de tweede, enz.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en voornamelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="style455.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script src="jquery.scrollnavprogress.js"></script>
