KOMPOOS.NL

ononline - HTML5

home » manuals » html5 » ononline.html

sitemap | terug naar het html5 referentie - events - overzicht

voorbeeld van pagina online of offline

Let op!

nog niet alle browsers ondersteunen ononline

uitleg ononline attribuut

Ononline wordt nauwelijks ondersteund door de browsers. Deze procedure maakt gebruik van het online event (dus niet het ononline event). Plaats een div met het id ononline ergens op de pagina, en plaats het javascript zo laag als mogelijk in de body-sectie van de pagina. De stylesheet kan je kwijt in de head-sectie van de pagina. Het gebruik moet duidelijk zijn. Is de browser verbonden met internet dan zie je een groen vlak met ONLINE daarin, en anders een rood vlak met OFFLINE.

de div voor de ononline procedure

<div id="ononline">bezig...</div>

de stylesheet voor de head-sectie

<style type="text/css">
        #ononline{
                font-size:0.8em;
                font-family:Arial,sans-serif;
                width:6em;
                font-weight:bold;
                text-align:center;
                color:#efe;
                background:#8a8}
        #ononline.offline{
                color:#efe;
                background:#900}
        #ononline.online{
                color:#efe;
                background:#090}
</style>

het javascript voor het online- ofline-gebeuren

<script>
        function _ononline(){
        var check_online=document.getElementById('ononline');
        check_online.className=navigator.onLine ? 'online':'offline';
        check_online.innerHTML=navigator.onLine ? 'ON-LINE':'OFF-LINE';}
        setInterval(function(){_ononline()},3000);
</script>