Breadcrumbs in JavaScript
Hierboven staan "Breadcrumbs". Dat is een manier om de gebruiker van je site te laten zien waar hij/zij zich bevindt.
Breadcrumbs worden uitgebreid besproken in het item Breadcrumbs: Wat het is en hoe je
het kunt gebruiken.
Op deze pagina wordt een JavaScript besproken waarmee je breadcrumbs kunt maken op je eigen site. Het gaat hier om location-breadcrumbs.
Dat wil zeggen dat de kortste weg vanuit de root van de site naar de huidige pagina wordt getoond.
JavaScripts voor het maken van breadcrumbs zijn beschikbaar op internet, zij het beperkt. De meeste van deze scripts dateren van
vóór 2008.
Het script dat hier wordt besproken is gebaseerd op het script dat oorspronkelijk is gemaakt door
Justin Whitford.
Het is op internet te vinden in diverse uitvoeringen. De verschillen zijn echter klein. Ik ben uitgegaan van de versie van Oktober 2007.
Het script werkt goed in een site met frames. Ik heb het aangepast zodat het ook kan werken met websites waarvan de URL niet een toplevel-domein is, zoals deze website.
Opmerking: Tegenwoordig zijn er ook server-side scripts beschikbaar voor het maken van breadcrumbs. In een CMS is
de functie vaak standaard aanwezig. Maar omdat niet iedereen server-side scripting kan gebruiken en/of een CMS heeft...
De code kun je downloaden om zelf te gebruiken. Het origineel vind je op The JavaScript Source.com.
- Er worden twee items besproken:
- De werking van het script, in grote lijnen
- Inbouwen in je eigen site
- Het script werkt, zonder in detail te treden als volgt:
- Eerst wordt de link naar het top-level domein uitgeschreven, tenzij dat wordt tegengehouden door de instellingen in het script.
- Daarna wordt de URL van de huidige pagina opgehaald met behulp van document.location.
- Daaruit wordt de subdirectory bepaald, waar de huidige pagina in staat.
- Uitgaande van die subdirectory, wordt er een of meerdere malen een verwijzing naar bovenliggende subdirectories (dus met ../) toegevoegd.
- Vervolgens worden hier de links in de breadcrumbs mee gemaakt. Deze bevatten dus relatieve paden.
- Achter elke link wordt een scheidingsteken geplaatst.
- Als laatste wordt de titel van het document (m.b.v. document.title) er aan toegevoegd en worden de breadcrumbs op het scherm getoond.
- De browser vertaalt de relatieve paden naar absolute paden.
- De JavaScript-code staat in de file breadcrumbs.js. Deze moet je in de meeste gevallen aanpassen om het te gebruiken.
- De breadcrumbs worden op het scherm getoond door de function breadcrumbs() aan te roepen vanuit de <BODY>, op de plaats waar de breadcrumbs moeten verschijnen.
- De opmaak wordt geregeld met de CSS-class topnav.
- In breadcrumbs.js kun je twee zaken aanpassen:
Variabele Betekenis separatorChar Hiermee geef je aan wat het scheidingsteken tussen de afzonderlijke links is. Hier: »
Er wordt door het script automatisch een spatie vóór en een spatie na het scheidingskarakter geplaatst.
Voor het scheidingskarakter wordt meestal een > of een » gebruikt. Je kunt separatorChar net zo lang maken als je wilt, maar aangeraden wordt niet meer dan één karakter te nemen.firstInSequence Hiermee geef je aan of de root van je website in het top-level van een domein staat, of niet.
Voorbeeld:- Stel: De URL van een website is:
http://www.mijnwebsite.nl.
De root van die website is het top-level van het domein mijnwebsite.nl.
In dit geval moet je firstInSequence een waarde geven, bijvoorbeeld 'Home' of 'Start'. - Stel: De URL van een website is:
http://www.mijnprovider.nl/mijnwebsite,
De root van die website is de subdirectory 'mijnwebsite' van het domein 'mijnprovider.nl'.
In dit geval mag je firstInSequence geen waarde geven, maar moet firstInSequence een lege string zijn.
Root van het domein is http://home.hccnet.nl. Top-level van deze site is https://home.hccnet.nl/s.f.boukes. - Stel: De URL van een website is:
- Zorg er voor dat er in elke subdirectory van je site een aparte file "index.html" (of vergelijkbaar) staat.
Deze index.html moet nuttige informatie laten zien, anders kan het de bezoeker van je site in verwarring brengen
Op deze website is aan deze eis niet voldaan. Klik maar eens op 'html-3'...
- De opmaak van de breadcrumbs wordt geregeld met de CSS-class topnav. De CSS-attributen voor deze class zet je in een style-tag in de <HEAD>, of neem je op in een stylesheet.
- Er is niets op tegen om de naam topnav te wijzigen in wat anders. Daarvoor wijzig je in breadcrumbs.js de regel
var output = "<div class='topnav'>".
- De link naar breadcrumbs.js, de bijbehorende CSS-code en de aanroep van bradcrumbs() moeten worden opgenomen op elke pagina waar de breadcrumbs moeten verschijnen.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Dit heb je nodig op elke pagina van je site die de breadcrumbs moeten tonen)
(Zet deze style en dit JavaScript in de <HEAD>)
(Zet dit in de <BODY>, op de plaats waarde breadcrumbs moeten verschijnen)<style>
.topnav {
font-size:0.8em;
color:#000;
background-color:#ffdc82;
border:1px solid #0099cc;
padding:0.5em;
}
</style>
<script src="breadcrumbs.js"></script>
<script>
breadcrumbs()
</script>
Downloaden:
Druk op de knop:
File: voorb320.zip, 1233 bytes.
