Dom

A List Apart licht een tipje van de sluier op met een preview van HTML 5. Remedies tegen divitis, betere multimedia integratiemogelijkheden en DOM gebaseerd. En natuurlijk heel wat nieuwe elementen, attributen en deprecated elementen (bye bye frame, frameset en font Een technische vergelijking met HTML 4 vind je op w3.org!

Toen collega F. mij gisteren vroeg om op een klein halfuur (oké, hij gaf mij eigenlijk 15 minuten) een uitklapbare menustructuur in HTML te programmeren, was dat voor mij een uitdaging. Ja, ik kon van die ingewikkelde DHTML toestanden downloaden en daarmee aan de slag gaan. Maar het moest eenvoudiger kunnen.

Met wat slim spelen met HTML, CSS en DOM had ik op goed 20 minuten de oplossing uitgewerkt. Eén HTML pagina en één CSS file. Meer niet. Waarmee ik gelijk mijn verwachtingen over mijn eigen kunnen en over de mogelijkheden van CSS/DOM flink heb overtroffen.

Aangezien we hier op het werk nogal into ingewikkelde folderstructuren zijn, speel ik nu met het idee om een tooltje te maken die de HTML automatisch kan genereren van platte tekst of XML. Mijn DOM functie doet de rest…

Kijk! Ik heb iets in javascript gemaakt. Voor één van de [tag]PHP[/tag] projectjes op het werk wilde ik een bepaalde functie uit del.icio.us kopiëren. Als je een site bookmarkt (heb ik dat juist vervoegd?) dan moet je tags opgeven. Je krijgt dan een lijstje met tags die je ooit al eens hebt ingevoerd. Als je op een tag klikt, dan verschijnt die automagisch in het <input> veld zodat tags en bookmarks kunnen worden gekoppeld.

Moeilijk? Helemaal niet, zo heb ik ontdekt! Vandaag heb ik diezelfde functionaliteit nagemaakt in drie lijntjes code. Voor de liefhebbers van [tag]DOM[/tag] en [tag]javascript[/tag].

function putTags(tag) {<br>    var input = document.getElementsByName('tags');<br>    var output = input.namedItem('tags').value + tag + " ";<br>    input.namedItem('tags').value = output;<br> }

Uiteraard ga ik er van uit dat het name attribuut de waarde “tags” draagt. Gebruiken doe je het zo: <a href="javascript:putTags('een-tagje')">

[tag]Web 2.0[/tag] en al! Ha!