Overlay op unizo.be
De bedoeling is om de website in de achtergrond te plaatsen, daarboven een half transparante laag te leggen, zodat je nog wat ziet van de site, maar vooral ook dat je niet meer op de hyperlinks van de website kan klikken.
En daarboven dan een overlay laag.
Dus op zijn simpelst voorgesteld
<div>
de website
</div>
<div>
transparante laag over gans het scherm
</div>
<div>
laag die je erop wenst te leggen.
</div>
het probleem met een dynamische site (althans deze die ik zelf heb gemaakt, maar ook bv met een joomla, ....) is dat de website bestaat uit een header, de content en een footer.
vb.
<div>Top</div>
<div style="float:left;">left</div>
<div style="float:right" id="content">Content</div>
<div>Bottom</div>
Het stuk van '<div>Top' tot 'id="content">' is hierbij de header en het stuk na 'Content' tot het einde is de footer.
In het stuk van de 'Content' kan je gemakkelijk een layer plaatsen die zal dienen als de overlay, maar wat gebeurd er. deze is dan een child van 'content'.
<div>Top</div>
<div style="float:left;">left</div>
<div style="float:right" id="content">
Content
<div id="overlay_content"></div>
</div>
<div>Bottom</div>
En hierbij valt alles in duigen, want je mag de z-index vervangen in gelijk wat je wil. Er zal niks veranderen.
Wanneer je het overlay-stuk op hetzelfde niveau als de andere div's plaats dan kan je wel spelen met de z-index.
vb.
<div>Top</div>
<div style="float:left;">left</div>
<div style="float:right" id="content">Content</div>
<div>Bottom</div>
<div id="overlay_content"></div>
Helaas is dit niet evident in een CMS systeem.
Maar via javascripting kan de overlay_content gebracht worden op hetzelfde niveau als de andere.
<div id="top">Top</div>
<div style="float:left;">left</div>
<div style="float:right" id="content">
Content
<div id="overlay_content"></div>
</div>
<div>Bottom</div>
<script>
var obj = document.getElementById('top');
var overlayContent = document.getElementById('overlay_content');
//copieer overlayContent in clone
clone = overlayContent.cloneNode(true);
//plak dit op hetzelfde niveau als het root element
obj.parentNode.appendChild(clone); // plak dit op parent niveau
//afwerken, verwijder origineel zodat het niet meer zichtbaar is, maar ook dat eventuele id's niet meer dubbel aanwezig zijn
overlayContent.parentNode.removeChild(overlayContent); //verwijder het origineel
</script>