Fenètre flotante

Commenter

Contenu du snippet

Voici une petite fenètre flotante.

Source / Exemple : 


Dans le 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>
<style>
<!--
#testDiv {position: relative;  height: 50px; width: 300px;
	 border: 2 outset white; background: lightyellow; margin: 0px;}
#title	{background: activecaption; font: caption; width: 100%;
	color: captiontext; padding: 3px; margin: 0px;}
#inner	{border: 2 inset white; margin: 0px; padding: 3px;height: 100%;}
-->
</style>

Dans le body :
<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>

Conclusion :


Amusez-vous bien ! :)

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Arnotic)