Vakken vullen, maar niet bij AH
Hoi motower,
Ja, php is een geheel eigen taal. Maar het kan ook met javascript.
De <div>'s (d.w.z. het gebruik van css, en scheiding van de html-structuur en de css-opmaak) moet je je zeker eens in gaan verdiepen: dat geeft veel flexibiliteit aan je pagina's, en de html wordt er veel mooier / eenvoudiger van. Ook heel makkelijk aan te passen: als iets in de opmaak je niet bevalt, maak je één verandering in het css-stylesheet, en het werkt meteen door op alle pagina's van de site. Dat is andere koek dan dat je in alle tabellen van alle pagina's moet duiken om die ene verandering door te voeren!
In het begin komt er nogal veel tegelijk aan css-eigenschappen op je af, maar als je daar eenmaal doorheen bent, wordt het echt heel leuk!
De lijst met mogelijkheden
Wat er met javascript nodig is, is om te beginnen de definitie van een serie array's om de verschillende delen van de in te pluggen blokken te kunnen vangen:
Als je per in te voegen cel- of div-blok hebt: een
link, een
image, een
kopje en een stukje
tekst, dan wordt het bv.:
[JS]var link_url= new Array();
var link_img= new Array();
var link_kop= new Array();
var link_txt= new Array();[/JS]
Dan kan je een rijtje aanmaken met de essentiële gegevens van je 25 opties, bv.:
[JS]link_url[0] = "www.mijnprachtigefotosite.nl";
link_img[0] = "images/alpenOchtend.jpg";
link_kop[0] = "Mooi hè?";
link_txt[0] = "Klik op bovenstaande link om van deze foto en andere prachtige foto's te genieten!";
link_url[1] = "www.degraseter.nl";
link_img[1] = "images/potjeKoken.jpg";
link_kop[1] = "Niet te versmaden";
link_txt[1] = "Er gaat niets boven eigen potje koken. Maak éénpans-gerechten met smaak!";
enz.[/JS]
NB: in het DOM (Document Object Model) van de html krijgt het eerste element altijd een
0 en niet een
1!
Van lijst naar html-code
De html-structuur van zo'n blokje is steeds hetzelfde, en de inhoud kan er in gedropt worden met een functie:
[JS]function vulVak(n, rnd){
var inh = '<p class="wissel-link"><a href="http:\/\/'+link_url[rnd]+'"><img src="'+link_img[rnd]+'" alt=""><br>';
inh += '<span>'+link_url[rnd]+'<\/span><\/a>';
inh += '<div class="wissel-txt">';
inh += ' <h2>'+link_kop[rnd]+'<\/h2><p>'+link_txt[rnd]+'<\/p><\/div>';
var vak = document.getElementById('vak-'+n); //pak nu het betreffende vak bij zijn lurven
vak.innerHTML = inh; // en vul dat met de klaargezette inhoud
}
[/JS]
Daarin is "n" het eerste, tweede of derde vak dat gevuld moet worden, en "rnd" staat voor het random-getal dat bij dat vak moet passen.
De uitkomst wordt dan bijvoorbeeld voor vak 3 (n=3) en bv. een rnd=2:
HTML:
<div class="wisselvak" id="vak-3">
<p class="wissel-link"><a href="http:www.blotehemelreizen.nl"><img src="images/alpen.jpg" alt="" /><br />
<span>www.blotehemelreizen.nl</span></a></p>
<div class="wissel-txt">
<h2>Alles geregeld</h2>
<p>Wilt u echt nergens naar hoeven omkijken? Boek onze geheel verzorgde reizen!</p>
</div>
</div>
De "classes" die er in staan, zijn de aangrijpingspunten om met css steeds dezelfde opmaak te verzorgen van wat er in zo'n blok komt. Als die eenmaal één keer voor een vak is vastgesteld, hoef je je daar niet meer om te bekommeren; dan gaat alles vanzelf goed.
NB: in de praktijk begin je met de html + css voor de 3 vakken in orde te maken. Daarna ga je dat terugvertalen in het javascript zoals hierboven, zodat het random kan worden ingevuld.
Het trekken van de randoms
Nu moeten we dus aan die 3 verschillende randoms voor de 3 te vullen vakken komen. Een random die al geweest is, mag niet nog eens, anders komen er twee dezelfde vakken naast elkaar. Daar steken we een stokje voor!
De eerste random kan gewoon getrokken worden, pas bij de tweede en derde speelt het eventueel hetzelfde zijn. De tweede mag niet hetzelfde zijn als de eerste. De derde mag eveneens niet hetzelfde zijn als de eerste, maar ook niet hetzelfde als de tweede. Dat kan als volgt:
[JS]var random_1 = Math.floor(Math.random()*aantalDiv); // Output-waarden: 0, 1, 2, ... (aantalDiv - 1)
var random_2;
var random_3;
function randomize2(){
random_2 = Math.floor(Math.random()*aantalDiv); // Output-waarden: 0, 1, 2, ... (aantalDiv - 1)
if (random_2 == random_1){ // als dezelfde uitkomst als random_1
randomize2(); // nog eens proberen (tot niet dezelfde)
}
}
function randomize3(){
random_3 = Math.floor(Math.random()*aantalDiv); // Output-waarden: 0, 1, 2, ... (aantalDiv - 1)
if ((random_3 == random_1)||(random_3 == random_2)){ // als dezelfde uitkomst als random_1 of random_2
randomize3(); // nog eens proberen (tot niet dezelfde)
}
}
[/JS]
NB: ook hier is de eerste random-waarde:
0 en niet
1. Dat loopt gelijk op met de waarden in de arrays (dus alle opties krijgen één nummer lager dan het aantal opties), en ze komen allemaal aan de beurt.
Opstarten
Nu alles klaar staat, moet vervolgens moet het handeltje in de goede volgorde aan de praat gebracht worden. Daar maken we weer een mooie functie voor:
[JS]function goRandom(){
vulVak(1,random_1); // random_1 was al gemaakt, vak 1 kan meteen gevuld worden
randomize2(); // random_2 trekken
vulVak(2,random_2); // vak 2 vullen n.a.v. random_2
randomize3(); // random_3 trekken
vulVak(3,random_3); // vak 3 vullen n.a.v. random_3
}[/JS]
Die functie moet automatisch gaan draaien als de pagina ingeladen is (niet eerder, want dan staan de vakken
<div class="wisselvak" id="vak-1"> enz. nog niet in de html, en dan kan het script niets met zo'n id doen):
[JS]window.onload = function(){
goRandom();
}[/JS]
De noscript-variant
In principe zouden we nu in de html kunnen volstaan met lege vakken:
HTML:
<div class="wisselvak" id="vak-1">
</div>
<div class="wisselvak" id="vak-2">
</div>
<div class="wisselvak" id="vak-3">
</div>
... want via het script worden ze met op maat gesneden "innerHTML" gevuld.
Maar als dan in een browser javascript niet ondersteund wordt of niet aan staat, is er helemaal niets te zien. Dus vullen we de 3 vakken met 3 opties naar keuze: die worden getoond als er geen javascript is. Zodra het javascript aan de gang gaat, wordt deze inhoud vervangen door die van het script.
Klaar en testen maar
Succes!
CSShunter
