Ben's Hobbyhoekje -- Nep-portal II

Nep-portal II

Een portal is een website die eigenlijk alleen maar links bevat. Een bekend voorbeeld is startpagina.nl. Aan die site hangen weer andere sites ("dochters") die zelf ook weer portal zijn, maar dan gespecialiseerd op een bepaald onderwerp.
Deze portals maken gebruik van speciale programmatuur die een pagina aanmaakt op het moment dat deze wordt opgeroepen. Hiermee is het bijvoorbeeld ook mogelijk om een rubriek "uit" te zetten door op het kruisje te klikken, zoals in een "echt" window. Hiervoor zijn wat zwaardere middelen nodig dan alleen HTML en JavaScript.
Het voert te ver om deze techniek hier te gaan beschrijven en beschikbaar te stellen.

Op deze plaats vind je een beschrijving van hoe je iets kunt bouwen wat er toch aardig op lijkt. Er wordt alleen gebruik gemaakt van HTML in combinatie met JavaScript en een stylesheet.

De code van het voorbeeld kun je downloaden voor je eigen gebruik, inclusief de plaatjes. Zie onder aan deze pagina.

De volgende zaken worden besproken:
1. De algehele aanpak.
2. De bestanden die je nodig hebt.
3. Mogelijkheden om de kleuren enz. te veranderen.
Een uitgewerkt voorbeeld staat onderaan deze bespreking.
De aanpak is heel eenvoudig:
- Maak een tabel van drie kolommen (een of twee kan natuurlijk ook; bij meer dan drie wordt het al gauw onoverzichtelijk).
- De cellen van de eerste rij voeg je samen tot één cel (colspan="3"). Hierin kun je een tekst zetten over de links in het portaal.
- Elke cellen van de tweede rij bevat een een aantal tabellen die elk bestaan uit één kolom en twee rijen van elk één cel. De onderste rij/cel bevat de links. De bovenste rij/cel bevat een "rubriek-naam" waaronder de links vallen.
- Door op de rubriek-namen te klikken wordt een rubriek geopend en krijg je de links te zien, of wordt deze juist weer gesloten. Dit wordt geregeld door een vrij complex stuk JavaScript. Het staan in de file portal.js, die je in de <HEAD> moet zetten.
- Gebruik zoveel tabellen met links als je nodig hebt. Verdeel deze tabellen evenwichtig over de drie cellen van de "hoofd-tabel".
- Desgewenst voeg je een laatste rij toe waarvan je de cellen weer samenvoegt tot één cel, om bijvoorbeeld je e-mail adres in te zetten, zodat bezoekers kunnen reageren op niet-werkende links, of om nieuwe links voor te stellen.
De code van de hele tabel staat in de downloadfile.
De instellingen van de kleuren regel je met het stylesheet portal.css, dat je linkt vanuit de <HEAD>. Dit kun je aanpassen zoals je wilt.
Door op een rubriek-naam te klikken wordt, via de event-handler onClick, de JavaScript-function expandcontent() aangeroepen. Deze verzorgt het openen en sluiten van de rubrieken. Deze function verzorgt ook het omkeren van de pijl naar boven / beneden.
Om een en ander voor elkaar te krijgen is het noodzakelijk dat de tabel-cellen die de rubriek-gegevens (lees: de hyperlinks) bevatten een ID hebben. De function expandcontent() wordt aangeroepen met dat ID als parameter.
Omdat het script moet 'weten' welke "pijl" er moet worden omgedraaid, heeft de <IMG>-tag waarin de pijl staat ook een id. Deze is gelijk aan de id van de rubriek-naam, voorafgegaan door 'Pull_'.
Als voorbeeld staat hieronder de code van de rubriek 'Webdesign':

<table width="100%" cellpadding="2" cellspacing="0"><tr>
<td class="HeaderLine" onClick="expandcontent('101')" style="cursor:pointer">
<img id="Pull_101" src="pulldown.gif" width="15" height="15" align="right">
Webdesign
</td></tr><tr><td class="Portal_Content"><div id="101" class="switchcontent">
<a href="JavaScript:n('https://home.hccnet.nl/s.f.boukes')">Ben's Hobbyhoekje</a><br>
<a href="JavaScript:n('http://www.javascriptkit.com/')">JavaScript Kit</a><br>
<a href="JavaScript:n('http://www.dynamicdrive.com')">Dynamic drive</a><br>
<a href="javascript:n('https://www.robotstxt.org')">Robots</a><br>
</div></td></tr></table>
De class switchcontent die in deze code wordt gebruikt wordt gemaakt vanuit het JavaScript in de file portal.js bij het openen van de pagina. Je vindt hem dus niet terug in het style-sheet portal.css.
Merk op dat de hyperlinks gebruik maken van een JavaScript-function n(). Deze zorgt ervoor dat de aangeroepen website verschijnt in een apart window met de naam 'BenWindow'; tevens wordt dit window naar de voorgrond gehaald. Deze function staat in de file portal.js. De werking wordt beschreven in het item "Window openen/sluiten vanuit een ander window".
De naam 'BenWindow' kun je overigens veranderen, zie hieronder.
In de file portal.js staan zes dingen die je kunt aanpassen om de werking van het portal te veranderen:
- De code is zo gebouwd dat alle rubrieken gesloten zijn als de pagina wordt geopend. Je kunt dit veranderen. Hiervoor zijn twee mogelijkheden:
  1. Door aanpassen van de function do_onload(). Deze staat in de file portal.js, bijna aan het einde. Gebruik daarvoor de JavaScript-code:
    setTimeout("expandcontent('101')",100);
    De parameter van expandcontent is het ID van de rubriek die je wilt openen.
    Merk op dat het bij deze methode niet zinvol is om meer dan één rubriek te openen als de variabele collapseprevious="yes" (zie hieronder).
  2. De tweede methode is veel lastiger maar werkt beter. Je moet hiervoor per rubriek die je wilt openzetten de code van de tabel aanpassen:
    - Vervang in de <img>-tag de figuur pulldown.gif door pullup.gif.
    - Voeg aan de <div>-tag het volgende attribuut toe:
      style="display:block"
- De variabele enablepersist; kan de waarden "on" en "off" hebben.
  - Als de waarde "on" is, wordt de instelling van het portal bewaard in een zogenaamd session-cookie. Als je na een korte omzwerving over internet weer terugkeert in het portal staat het nog zoals het stond. Als je echter de browser uitschakelt en weer opstart staat het portal weer in de begintoestand.
  - Als de waarde "off" is, wordt de instelling van het portal niet bewaard.
  - Je kunt enablepersist door de bezoekers van je pagina laten veranderen, maar dat heeft echter weinig zin. Daarom heeft deze bladzijde daar geen mogelijkheden voor.
  - Op deze bladzijde is enablepersist="on".
- De variabele collapseprevious; kan de waarden "yes" en "no" hebben.
  - Als collapseprevious="yes" wordt de rubriek die op dat moment open staat gesloten als je een andere rubriek opent. In het andere geval blijft een openstaande rubriek open staan tot je hem zelf weer sluit.
  - Je kunt collapseprevious door je gebruikers laten veranderen. Op deze bladzijde kan dat ook, door middel van een button onderaan de bladzijde. Deze button werkt als een AAN/UIT-schakelaar.
  - Bij het openen van de pagina is collapseprevious="yes" (dus: AAN).
  - De button roept de function SwitchCollapse()aan om collapseprevious te veranderen. Deze function staat in de file portal.js.
- De variabele windowname bevat de naam van het window waarin de aangeroepen websites worden geopend. Dat werkt overigens alléén als je de JavaScript function n() gebruikt voor het openen van de links (Zie boven).
  In dit voorbeeld is dat windowname='BenWindow', maar je kunt elke geldige naam nemen.
  Een paar speciale mogelijkheden:
  - windowname='_self': De website wordt geopend in het actieve window. In een site met frames (zoals deze) wordt de site geopend in het actieve frame.
  - windowname='_top': De website wordt geopend in het actieve window. In een site met frames (zoals deze) worden de frames weggedaan.
  - windowname='_blank' De website wordt geopend in een nieuw window.
- De variabelen pullup resp. pulldown bevatten (de naam van) de pijltjes omhoog en omlaag, in de titelbalk van elke rubriek. Hier zijn dat pullup.gif resp. pulldown.gif. Hier kun je je eigen pijltjes inzetten.
  - De attributen width en height staan in de code van de tabel. Die moet je zo nodig veranderen.
  - Op deze bladzijde zijn de afmetingen van de pijltjes 15 x 15 pixels. Dat is meestal wel groot genoeg.
Hieronder zie je een voorbeeld van een dergelijke "Portaal-tabel".
De links in de rubriek "Webdesign" werken echt. De rest is alleen als voorbeeld.

Voorbeeld van een Nep-Portal

Deze pagina is een afgeleide van de beroemde portaalsites van startpagina, startkabel en wat er allemaal niet meer te vinden is

Webdesign

Ben's Hobbyhoekje
JavaScript Kit
Dynamic drive
Robots

Zoekmachines

Zoekmachines link 1
Zoekmachines link 2
Zoekmachines link 3

Spelletjes

Spelletjes link 1
Spelletjes link 2
Spelletjes link 3
Spelletjes link 4
Spelletjes link 5

Downloads

Downloads link 1
Downloads link 2

Leuke Dingen

Leuke Dingen link 1
Leuke Dingen link 2
Leuke Dingen link 3
Leuke Dingen link 4

Homepages

Homepages link 1
Homepages link 2
Homepages link 3

Software

Software link 1
Software link 2
Software link 3

Als je een goed idee hebt of een link wilt aanmelden, stuur een e-mailtje naar aa@bb.cc.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk on de <BODY>.

De code ziet er als volgt uit:

(Zet deze code in de <HEAD>)

<link rel="stylesheet" href="portal.css">
<script src="portal.js"></script>

(Zet deze code in de <BODY>, op de plaats waar de tabel met links moet komen.)

<table width=100% border="1" bordercolor="#c0c0c0" cellspacing="5" cellpadding="2">
<tr>
.
.

Zie de inhoud van de downloadfile!
.
.
</tr>
</table>



<p align="center">
<button name="Collapse" value="Vorig Menu Sluiten AAN/UIT" type="button" onClick="SwitchCollapse()">Vorig Menu Sluiten AAN/UIT</button>
</p>

Downloaden:

Druk op de knop: File: voorb118.zip, 4375 bytes.

Opmerking:

Een wat eenvoudiger uitvoering van dit portaal vind je in het item "Nep-portal" .

Een wat meer uitgebreide beschrijving van het werken met het style-attribuut display vind je in het item "Informatie laten verdwijnen en weer laten verschijnen".