TEST NEDERLANDSE TAAL
TEST ENGLISH LANGUAGE.
TWEEDE TEST NEDERLANDSE TAAL
SECOND TEST ENGLISH LANGUAGE.
DERDE TEST NEDERLANDSE TAAL
THIRD TEST ENGLISH LANGUAGE.
De laatste weken heb ik gewerkt aan uitbreiding van mijn weblog met functionaliteit voor ondersteuning van meerdere talen. Al geruime tijd was ik van plan om zowel in het Nederlands als in het Engels te gaan publiceren maar daarvoor moest ik wel eerst over multi-language functionaliteit beschikken. Een zoektocht op het Internet leverde wel wat resultaten op maar deze waren allemaal complex en moeilijk te doorgronden.
Uiteindelijk heb ik besloten zelf een poging te wagen om deze multi-language functionaliteit te ontwikkelen. Daarvoor heb ik een aantal van de beschikbare voorbeelden bestudeerd en vooral veel gelezen over CSS, HTML, XHTML, DOM en JavaScript. Op de website van W3 Schools is veel informatie te vinden over deze onderwerpen.
De eisen waaraan de functionaliteit voor mij moest voldoen waren beperkt:
- eenvoudig en beperkte hoeveelheid code
- overeenkomen met bestaande functies zoals itemToggle:
- minimaal ondersteuning bieden voor twee talen
The past weeks I have been working on extending my weblog with functionality for blogging in multi-languages. This was something I planned to do a long time ago but I could not find the time nor a suitable solution.
For a few months I have searched the Internet looking for examples but all the solutions I found were complex and difficult to understand. Finally I decided to give it a try myselve and build the multi-language functionality I had in mind. Since I am not an expert I had to do some studying and reading about JavaScript, CSS, HTML, XHTML and DOM. On the website of W3 Schools there is a lot of information available about these topics that were very useful.
My requirements for this multi-language functionality were limited:
- few lines of simple code
- similar to the existing function itemToggle
- minimal support for two languages
Gaandeweg kwam ik erachter dat het realiseren van de functionaliteit overeenkomstig itemToggle slechts deels mogelijk was. De functie itemToggle is een functie waarmee het mogelijk is het overzicht van bloarts in de rechterkolom te tonen of te verbergen.
After some time I realised that building the functionality similar to the function itemToggle was only partly possible. The function itemToggle is a function that enables the hiding and unhiding of a list of bloarts in the rightbar.
Deze functie wordt aangeroepen door een stukje JavaScript code in de rechterkolom. Door op de hoofding PREVIOUS POSTS te klikken worden de voorgaande titels getoond of verborgen.
This function is called by a small piece of JavaScript code in the right bar. When someone clicks on the heading PREVIOUS POSTS the titles are shown or hidden.
Het verbergen of tonen van titels wordt gerealiseerd door de className van het element PreviousPosts te wijzigen in itemShow of in itemHide via het aanroepen van de functie itemToggle. Via CSS Style instellingen is vastgelegd dat itemShow de waarden toont en itemHide de waarden verbergt.
Hiding and unhiding of titles is done by changing the className of the element PreviousPosts into itemShow or itemHide. CSS Style settings enable values are shown with itemShow and hidden with itemHide.
Om een tweetal redenen was het niet mogelijk om overeenkomstig itemToggle de multi-language functionaliteit te realiseren. Allereerst selecteert het statement document. getElementById(postId) slechts het eerste overeenkomstige element op de weblogpagina en niet de daaropvolgende elementen. Een functie waarmee het volgende overeenkomstige element gezocht en geselecteerd wordt kon ik niet vinden. Daarnaast had ik problemen met de wijze waarop Microsoft Internet Explorer en Mozilla FireFox of SeaMonkey omgaan met de functionaliteit van het toepassen van de className wijzigingen.
Verder wilde ik de functionaliteit realiseren door gebruik te maken van een zelf gedefinieerde Tag BLOGLANG. Het wijzigen van de classNames op zelf gedefinieerde tags kreeg ik niet voor mekaar.
Gelukkig kwam ik later op het Internet een andere aanpak tegen die alleen uitgaat van het aanpassen van de Style van een class zonder daarvoor getElementById te gebruiken voor het vinden van overeeenkomstige elementen.
There were two reasons why I could not get it working using similar functionality as itemToggle. Firstly the statement document.getElementById(postId) finds and selects only the first matching element on the weblogpage and not the remaining matching elements. I could not find a way to select the other elements.
Secondly I had problems with the way Microsoft Internet Explorer and Mozilla FireFox or SeaMonkey deal with applying className changes. Things that working within IE do not work within FireFox and vice versa.
Furthermore I wanted to develop the functionality using a custom Tag BLOGLANG but I could not get the change of classNames working on custom tags.
Luckily I found another approach that works by changing only the Style of a class without the use of the getElementById for finding the matching elements.
Voor het bereiken van de gewenste multi-language functionaliteit heb ik de template van mijn weblog aangepast en verder uitgebreid. Ik heb ondermeer een aantal wijzigingen doorgevoerd op de structuur van de HTML en het script languageToggle toegevoegd.
Aan het begin van het body-segment heb ik een DIV- element met het ID BlogLanguage en de CLASS SHOWDUTCH toegevoegd.
To achieve the desired multi-language functionality I have changed and extended the template of my weblog. I made some changes to the structure of the HTML and added the script languageToggle.
At the beginning of the body-segment I have added the DIV-element with the ID BlogLanguage and the CLASS SHOWDUTCH.
Aan het segment head heb ik het script languageToggle toegevoegd en verder heb ik het initialisatiescript van de weblogpagina aangepast. Het script languageToggle zorgt voor het verbergen en tonen van de gewenste taalversie op het moment dat het wordt aangeroepen. De werking van het script is vrij eenvoudig. Wanneer het script wordt aangeroepen zullen alle elementen met als TagName DIV opgeslagen worden als een reeks in de variabele x.
De eerste waarde in de reeks bevat het DIV-element met als ID BlogLanguage en als CLASS SHOWDUTCH of SHOWENGLISH. De className van dit eerste DIV-element bepaalt de taalinstelling van de weblog en gebruik ik als stuurparameter.
Wanneer de className gelijk is aan SHOWENGLISH of het script wordt aangeroepen tijdens het openen van de weblog met parameter init dan zullen alle onderliggende DIV-elementen die de className DutchLang hebben zichtbaar gemaakt worden. Terwijl de DIV-elementen met de className EnglishLang verborgen worden.
Gelijktijdig zal de className SHOWENGLISH gewijzigd worden in SHOWDUTCH.
I have added the script languageToggle to the head-segment and changed the initialisation script of the weblogpage. The script languageToggle takes care of hiding and unhiding the requested language version. When the script is called all elements that have a TagName DIV will be stored in the array variable x.
The first value in the array contains the DIV-element with the ID BlogLanguage and the CLASS SHOWDUTCH or SHOWENGLISH. The className of the first DIV-element determines the language setting of the weblog.
When the className equals SHOWENGLISH or the script is called with the parameter init upon opening the weblog then all underlying DIV-elements that have className DutchLang are shown. Meanwhile the DIV-elements with the className EnglishLang are hidden.
At the same time the className SHOWENGLISH is changed into SHOWDUTCH.
Aan het initialisatiescript van mijn weblogpagina heb ik het aanroepen van het script languageToggle toegevoegd met de parameter init. De parameter zorgt ervoor dat de taal ingesteld wordt op het Nederlands tijdens het laden van de weblogpagina. Gedurende het laden zal in eerste instantie nog zowel Engels als Nederlands zichtbaar zijn omdat het script enige tijd nodig heeft.
I have added a call to the script languageToggle with the parameter init to the initialisation script of the weblogpage. The parameter ensures that the language is set to Dutch when loading the weblogpage. At first instance both languages, Dutch and English, are shown because it takes some time for the script to execute.
In de tekst van een bloart zal voor elke specifieke taalversie een DIV-element met als ID BlogLanguage en CLASS DutchLang of DutchEnglish opgenomen moeten worden.
For each language specific version a DIV-element with ID BlogLanguage and CLASS DutchLang or DutchEnglish should be included in the bloart.
Hiermee heb ik de kwaliteit van mijn weblog verder uitgebreid en hoop ik een groter publiek te kunnen bereiken. Mocht u deze aanpak overnemen laat dan een berichtje achter. Binnenkort ga ik kijken of het mogelijk is om eveneens de titel van een bloart taalafhankelijk te maken.
This way I have increased the accessability and quality of my weblog and hopefully reach a greater public. If you are going to take over this approach please leave a small note. In the very near future I am going to investigate whether it is possible to make the title languagedependent.
