<!DOCTYPE html>
<html >
<!-- CODE VOOR INDEX.HTML. DE HIER GEBRUIKTE TECHNIEK (GEBRUIK VAN ONHASHCHANGE) HOUDT IN DAT ALLE PAGINA'S VAN DE SITE (BEHALVE INDEX.HTM) GELADEN WORDEN IN EEN DIV OP INDEX.HTML. WE VERLATEN DUS NOOIT INDEX.HTML. HET ENIGE DAT VERANDERT BIJ 'PAGINAOVERGANG' IS DE INHOUD VAN DE DIV. DE HTML EN ANDERE CODE IN INDEX.HTML GELDT DUS AUTOMATISCH VOOR ALLE PAGINA'S VAN DE SITE (BY DEFAULT), MAAR KAN VOOR SPECIFIEKE PAGINA'S OVERSCHREVEN WORDEN DOOR APARTE CODE DAARIN. -->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kies een titel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<meta name="viewport" content="user-scalable=no">-->
<style>
/* Nodig om elementen met position: relative een hoogte in percentages te geven */
html {height: 100%;}
body {font-family: arial; font-size: 16px; margin:0; padding:0; }
body {position: absolute; left: 0px; top: 0; right: 0; bottom:0 ; max-width: 100%; min-width: 100%;margin:0; padding:0; }
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
/* Met dit script laden we een willekeurige pagina, bijv. page2.html, via iets als onclick="preload_page('page2.htm')" in een verborgen iframe dat als volgt in de body van index.html staat: <iframe name="preload" id="preload" style="position: absolute; width:0; height:0; opacity:0" ></iframe> (zie body sectie hieronder). De pagina wordt niet gewoon als page2.html in het iframe geladen, maar als index.html#page2.html (1e regel van function preload_page(url)). Daarna zorgt de 2e regel van de functie ervoor dat index.html#page2.html na een korte timeout geschreven wordt in de adresbalk van de hoofdpagina. Met dit resultaat 'in handen' doet function hash_change() (zie hieronder) wat het moet doen. (Met deze techniek laden we niet steeds hele nieuwe pagina's, maar alleen divs binnen een specifieke pagina (index.html), wat het laadresultaat ten goede komt). */
function preload_page(url)
{
frames.preload.location.replace('index.html#'+url);
setTimeout('location.href=frames.preload.location',1000)
}
</script>
<script>
/* Als we function preload_page(url) (hierboven) z'n werk hebben laten doen, staat er een nieuw adres met een hash tag (#) in de adresblak, bijv (zoals in ons voorbeeld): index.html#page2.html. Maar er gebeurt nog niets, er wordt nog geen pagina geladen in een blokje van onze pagina (= van index.html). Om dit te laten gebeuren gebruiken we de eerste regel van function hash_change(): $('#import_div').load(location.hash.substring(1,location.hash.length)). Die zorgt er, uitgaande van index.html#page2.html in de adresbalk, voor dat page2.html via Ajax-jQuery geladen wordt in een div van index.html. Die div heeft id="import_div" en moet natuurlijk als zodanig in de body van index.htmlstaan. In ons geval hebben we gekozen voor de volgende specificaties van de div (zie hieronder in de body sectie): <div id="import_div" style="padding-left: 15px; padding-right: 15px; line-height: 23px"></div>. De hoogte van de div past zich aan aan de hoeveelheid inhoud in de geladen pagina.
Wat hebben we nu samengevat gedaan? We hebben via function preload_page(url) en function hash_change() een nieuwe pagina geladen in een div van index.html zonder dar index.html zelf in z'n geheel ververst is. Dat betekent: snellere laadtijd dan in standaard pagina-transities en geen hinderlijk schermgeflikker. Zie het commentaar bij de andere regels van function hash_change() om te zien wat de functie verder nog doet. */
function hash_change()
{
$('#import_div').load(location.hash.substring(1,location.hash.length))
/* Optioneel: maakt paginaovergangen nog soepeler */
document.getElementById('import_div').style.visibility='hidden';
setTimeout("document.getElementById('import_div').style.visibility='visible'",0)
/* Optioneel: scrollt pagina naar boven als er een nieuwe pagina in de div wordt geladen */
setTimeout("window.scrollTo(0,0)",0)
/* Optioneel. Kan nodig zijn. Door jezelf uit te zoeken. */
document.body.style.overflow='auto';
/* Optioneel als je de if-statement even verderop weghaalt en als er op andere pagina's geen andere overschrijvende css van de elementen gegeven wordt. Maar verplicht als je de if-statement behoudt en er overschrijvende css-regels op andere pagina's staan. */
document.getElementById('handje').style.display='block';
document.getElementById('handje').style.bottom=0;
document.getElementById('footer_div').style.display='block';
document.getElementById('grote_afbeelding').style.height='100%';
/* Als de fullscreen afbeelding die bij het laden van een nieuwe pagina steevast getoond wordt op een erg smal scherm verschijnt, dan moet de afbeelding halfscreen worden behalve op de home pagina (= behalve als page1.html in de import-div geladen wordt). (Het handje en de footer zijn sowieso niet aanwezig als de home page geladen wordt, zie commentaar bij bron van page1.html.) */
if(document.body.clientWidth<=document.body.clientHeight && location.hash.substring(1,location.hash.length)!=='page1.html')
{
document.getElementById('grote_afbeelding').style.height='50%';
document.getElementById('handje_down').style.display='none'
}
}
/* Voer de hash_change functie uit als index.html geladen wordt (als je de site opent) en bij elke paginaovergang. Als er behalve index.html nog niets geladen is, laad dan page1.html in de import-div */
window.onhashchange=hash_change;
window.onload=hash_change;
if(window.location.hash=='') window.location.replace('#page1.html')
</script>
</head>
<body >
<!-- Het naar beneden wijzende handje dat onderaan de viewport verschijnt bij iedere nieuwe pagina behalve op de home page en smalle schermen. Een klik erop scrollt de pagina naar beneden tot waar de eigenlijke tekst van een pagina begint. -->
<div id="handje" style="position: absolute; width: 100%; text-align: center; bottom:0; ">
<span style="background: transparent; font-size: 15px; font-family: comic sans ms; padding: 5px; cursor: pointer" onclick="$('html,body').animate({scrollTop: window.innerHeight-parseInt(document.getElementById('menu').clientHeight)}, 0); "><img src="http://www.wierdenland.nl/hand_down.png" id="handje_down" alt="" style="width: 30px; border: 4px solid white; padding: 4px; border-radius: 5px; background: gray; display: inline-block"></span>
</div>
<!--Het onzichtbare iframe waarin elke nieuwe pagina via de functie preload_page(...) voorgeladen wordt alvorens er uit gehaald te worden en in een div met id="import_div" gezet te worden via de hash functie (hierboven, in de head) -->
<iframe name="preload" id="preload" style="position: absolute; width:0; height:0; opacity:0" ></iframe>
<!--Een met opacity bijna onzichtbaar gemaakte achtergrondafbeelding voor elke pagina. Niet te verwarren met de fullscreen afbeelding die halfscreen wordt op smalle schermen -->
<div style="position:fixed; left:0; top: 0; right: 0; height:100%; background: url(http://www.wierdenland.nl/paardengraf.jpg) 50% 50% no-repeat; background-size:cover; opacity: 0.12; z-index:-1"></div>
<!-- BEGIN MENU. -->
<!--Het menu staat in index.html en is zichtbaar op alle pagina's, omdat we nooit index.html verlaten. Het enige dat ververst wordt is de div voor het importeren van pagina's met 'content' (zoals page2.html, hier als voorbeeld gebruikt voor de uitleg)-->
<div id="menu" style="position: fixed; z-index: 1; top:0; padding-top: 20px; padding-bottom: 20px; width: 100%; text-align: center; background: #eeeeee; border-bottom: 1px solid silver; font-family: verdana; font-size: 16px; ">
Simpel menu voor 3 pagina's<br>
Verschijnt automatisch op alle pagina's<br>
<button style="cursor: pointer" onclick="preload_page('page1.html')">HOME</button> <button style="cursor: pointer" onclick="preload_page('page2.html')">Pagina 2</button> <button style="cursor: pointer" onclick="preload_page('page3.html')">Pagina 3</button>
</div>
<!-- EINDE MENU -->
<!--De grote afbeelding op iedere pagina plus tekst erop. Wordt steeds gewijzigd al naar gelang de pagina, zie commentaar in de bron van de andere pagina's -->
<div id="grote_afbeelding" style="position: relative; height: 100%; margin-bottom: 0px; opacity:1;">
<h1 id="grote_afbeelding_tekst" style="position: relative; margin-top:0px; text-align: center; color: #ffffff; font-family: verdana; font-weight: normal; font-size: 40px; top: 50%; "> </h1>
</div>
<!-- De div waarin de pagina's met content geladen worden -->
<div id="import_div" style="padding-left: 15px; padding-right: 15px; line-height: 23px"></div>
<!-- Een div (direct onder de import-div) waarin m.b.v. jQuery een file geladen wordt (footer.html) waarin footer-tekst staat. Verschijnt dankzij de hier gebruikte techniek op elke pagina van de site (behalve op de home page), hoewel alleen geschreven in index.html -->
<div id="footer_div" style="padding-left: 15px; padding-right: 15px; line-height: 23px"></div>
<script>
$('#footer_div').load('footer.html')
</script>
<!-- Script dat ervoor zorgt dat index.html herlaadt bij resize. Is nodig omdat een aantal css-instellingen met javascript gepleegd zijn, waardoor die instellingen zich niet zouden aanpassen aan, bijvoorbeeld, het 'andere venster' dat getoond wordt bij kantelen van een tablet etc. -->
<script>
jQuery(function($){
var windowWidth = $(window).width();
$(window).resize(function() {
if(windowWidth != $(window).width()){
setTimeout("location.reload()",10);
return;
}
});
});
</script>
<!-- Voorladen van grote afbeeldingen -->
<script>
function preloadimages(arr){
var newimages=[], loadedimages=0
var postaction=function(){}
var arr=(typeof arr!="object")? [arr] : arr
function imageloadpost(){
loadedimages++
if (loadedimages==arr.length){
postaction(newimages) //call postaction and pass in newimages array as parameter
}
}
for (var i=0; i<arr.length; i++){
newimages[i]=new Image()
newimages[i].src=arr[i]
newimages[i].onload=function(){
imageloadpost()
}
newimages[i].onerror=function(){
imageloadpost()
}
}
return { //return blank object with done() method
done:function(f){
postaction=f || postaction //remember user defined callback functions to be called when images load
}
}
}
preloadimages(['cafe_winkel_ggroot.jpg', 'calculator_groot.jpg', 'geschiedenis_museum.jpg']).done(function(images){
//call back codes, for example:
//alert(images.length) //alerts 3
//alert(images[3].src+" "+images[0].width) //alerts '1.gif 220'
})
</script>
</body>
</html>