Routines divers

MINI FENETRE

Une mini fenêtre que le lecteur peut déplacer. IE4+ seul

Afficher un message incontournale dans une mini fenêtre que l'on peut néanmoins déplacer. Netscape n'affichera que le contenu de la fenêtre (soit comme du texte normal).

Démo : Cliquer-glisser sur la barre de titre pour déplacer la fenêtre.

Titre de la fenêtre

Scripts DHTML

Une compilation des meilleurs scripts du Web

Etape 1 :
Ajouter entre les balises <HEAD>...</HEAD> :

<script> // by Erik Arvidsson for WebFX at http://webfx.eae.net var checkZIndex = true; var dragobject = null; var tx; var ty; var ie5 = document.all != null && document.getElementsByTagName != null; function getReal(el) { temp = el; while ((temp != null) && (temp.tagName != "BODY")) { if ((temp.className == "moveme") || (temp.className == "handle")){ el = temp; return el; } temp = temp.parentElement; } return el; } function moveme_onmousedown() { el = getReal(window.event.srcElement) if (el.className == "moveme" || el.className == "handle") { if (el.className == "handle") { tmp = el.getAttribute("handlefor"); if (tmp == null) { dragobject = null; return; } else dragobject = eval(tmp); } else dragobject = el; if (checkZIndex) makeOnTop(dragobject); ty = window.event.clientY - getTopPos(dragobject); tx = window.event.clientX - getLeftPos(dragobject); window.event.returnValue = false; window.event.cancelBubble = true; } else { dragobject = null; } } function moveme_onmouseup() { if(dragobject) { dragobject = null; } } function moveme_onmousemove() { if (dragobject) { if (window.event.clientX >= 0 && window.event.clientY >= 0) { dragobject.style.left = window.event.clientX - tx; dragobject.style.top = window.event.clientY - ty; } window.event.returnValue = false; window.event.cancelBubble = true; } } function getLeftPos(el) { if (ie5) { if (el.currentStyle.left == "auto") return 0; else return parseInt(el.currentStyle.left); } else { return el.style.pixelLeft; } } function getTopPos(el) { if (ie5) { if (el.currentStyle.top == "auto") return 0; else return parseInt(el.currentStyle.top); } else { return el.style.pixelTop; } } function makeOnTop(el) { var daiz; var max = 0; var da = document.all; for (var i=0; i<da.length; i++) { daiz = da[i].style.zIndex; if (daiz != "" && daiz > max) max = daiz; } el.style.zIndex = max + 1; } if (document.all) { //This only works in IE4 or better document.onmousedown = moveme_onmousedown; document.onmouseup = moveme_onmouseup; document.onmousemove = moveme_onmousemove; } document.write("<style>"); document.write(".moveme {cursor: move;}"); document.write(".handle {cursor: move;}"); document.write("</style>"); </script>

Etape 2 :
Ajouter entre les balises <HEAD>...</HEAD> :

<style>  </style>

La dimension de la fenêtre se modifie dans #testDiv {position: relative; height: 50px; width: 300px; ...
D'autres éléments peuvent être modifiés avec une bonne connaissance des feuilles de style.

Etape 3 :
Ajouter dans le body, là où doit apparaître la fenêtre :

<div id="testDiv"> <div class="handle" handlefor="testDiv" id="title">Titre de la fenêtre</div> <div id="inner"> Le contenu de la fenêtre ici ! </div> </div>

On peut modifier ici

le titre de la fenêtre.
le contenu de la fenêtre.