Hoi George,
Ja, vroeger ging het er heel anders aan toe: framesets, tables, javascript-menu's, javascript-rollover's, javascript-popup's ... :shocked:
De eerste "echte" css waar je een goed instrument voor de layout mee in handen kreeg, was css2.1 (met de eerste Working Draft in 2002). Maar er gingen heel wat jaartjes overheen voordat de browsers er goed mee overweg konden: Internet Explorer bleef drastisch achter op de andere. En tijdens de browseroorlog van rond 2004 had Microsoft zo zijn eigen opvattingen over html en css (o.a. t/m IE5.5 een afwijkend css-boxmodel).
Gelukkig is dit gaandeweg bijgetrokken.
=======
Inderdaad is het niet zo'n gek idee om voor "dwaalgasten" op de popup-pagina's een Home-kop op te nemen: via Google komen de popup-pagina's als zelfstandige pagina's tevoorschijn, en dan kan je op deze manier op de gewone site komen.
=======
Extra probleem!
In de loop der jaren hebben browsers, wijs geworden door misbruik van popup's en pop-under's, verschillende beveiligingsmechanieken ingebouwd tegen ongewenste popup-verschijnselen.
Als ik in Firefox begin met de popup-pagina "
Australopithecus sediba":
- Dan gebeurt er ... niets als ik op de knop "Sluit" klik.
- Dan opent de Home-pagina in een nieuw tabblad als ik op "Home" klik.
- Maar met de popup-pagina ... gebeurt nog steeds niets (ondanks het script): die blijft open in zijn eigen tabblad.
Huh?
Reden is mijn instelling van Firefox, waarin ik niet toegestaan heb dat scripts aan de haal gaan met mijn vensters:
- Daarmee werkt window.close() alleen maar, als ik zelf met een klik opdracht heb gegeven een popup te openen; en bij een zelfstandig geopende pagina is dat niet het geval.
- Bij een door mij geopende popup werkt het wel, maar dan doen zich weer de verschijnselen voor van de dubbele tabbladen.
=======
Wat nu?
Als je gebruikersvriendelijk wilt werken met de knoppen onderaan de popup-pagina, zou je eigenlijk een "popup-verklikker" moeten hebben, die vertelt of de pagina als popup of los is geopend.
En dat kan!
Het werkt als volgt:
Op de verwijzende pagina
- Op de verwijzende pagina voeg je een (fake) bladwijzer toe aan de link naar de popup, bijvoorbeeld #special:
- Op de pagina "Evolutie-nieuws" wordt dan de "klik hier" link:
HTML:
<p>
Klik <a href="http://www.lucyonline.nl/voorouders/australopithecus-sediba_verhaal_nrc_2013.htm"
onclick="return openWin(this.href+'#special', 900, 750)">hier</a>
om het artikel te lezen.
</p>
- Het achtervoegsel #special wordt er via het script in gezet: staat onverhoopt javascript uit bij de bezoeker, dan werkt de onclick niet en opent de popup-pagina gewoon in hetzelfde tabblad. Toegankelijkheid gewaarborgd!
- Tweede voordeel: de Google-bot kent ook geen javascript: dus de link met het achtervoegsel kan niet door Google geïndiceerd worden (waarmee de verkeerde knop onderaan de popup-pagina zou komen te staan).
Op de popup-pagina
Hier wordt de <div id="nav"></div> standaard gevuld met alleen de knop "Home":
HTML:
...
<div id="nav"><a href="http://www.lucyonline.nl/index.htm">Home</a></div>
...
- Staat onverhoopt javascript uit bij de bezoeker, dan kan altijd op de homepage gekomen worden (in hetzelfde tabblad).
- Staat onverhoopt javascript uit bij de bezoeker, en komt deze van een verwijzende pagina, dan kan daarnaar teruggegaan (worden in hetzelfde tabblad) via de gewone "Terug" knop van de browser.
- Toegankelijkheid gewaarborgd!
Op de popup-pagina vindt verder met javascript een detectie plaats of het achtervoegsel
#special bij de link aanwezig is.
- In de adresbalk staat nu:
hetzij: http://www.lucyonline.nl/voorouders/australopithecus-sediba_verhaal_nrc_2013.htm,
hetzij: http://www.lucyonline.nl/voorouders/australopithecus-sediba_verhaal_nrc_2013.htm#special.
- Staat er wel #special achter de bestandsnaam, dan is het een pagina die door een verwijzende pagina geopend is: dus een popup-pagina, die met window.close() gesloten mag worden.
- In dat geval wordt de inhoud van de <div id="nav"></div> vervangen door alleen de knop "Sluiten" waar de window.close() opdracht aan vast zit.
- De knop "Home" is overbodig, want je komt weer terug op de verwijzende pagina.
- Staat er géén #special achter de bestandsnaam, dan is het géén popup-pagina maar een zelfstandige pagina en doet het script niets. Dan blijft alles bij het oude: met de knop "Home" kan je naar de rest van de site gaan zonder dat er een nieuw tabblad geopend wordt.
Het javascript hiervoor komt helemaal onderaan de popup-pagina te staan, vlak voor de </body></html>:
[JS]<script type="text/javascript">
//<![CDATA[
if (location.href.indexOf('#special')!=-1){ // als een #special achtervoegsel in de paginanaam bestaat, dan is het een popup
// en dan wordt de knop "Home" vervangen door de knop "Sluiten"
// om terug te keren naar de pagina waar de popup in werd geopend:
document.getElementById('nav').innerHTML='<a href="#" onclick="window.close(); return false;">Sluit</a>';
}
//]]>
</script>
[/JS]
=======
CSS
Om de knoppen mooi in het midden te krijgen, moet de css iets worden aangepast:
Code:
#nav {
width:auto;
text-align: center;
}
#nav a {
float: none;
display: inline-block;
}
=======
Test!
- Ga naar de zelfstandige pagina: bliksekaters.nl/tests/lucy-A-sediba.html.
Onderaan staat de knop "Home".
Klik > de Homepage verschijnt in hetzelfde venster.
- Ga naar de verwijzende pagina bliksekaters.nl/tests/lucy-evolutie-nieuws.html
Daarin staat de link naar de popup: "Klik hier om het artikel te lezen...".
Klik > het popup-artikel verschijnt.
Onderaan staat nu de knop "Sluiten".
Klik > de popup verdwijnt, en je bent weer terug op Evolutie-nieuws.
Als javascript niet aan staat, werkt het zoals hierboven beschreven.
Is dat wat?
Met vriendelijke groet,
CSShunter
Ik vergat te zeggen dat ook de regels:
