Div/layer mobile comme une fenetre

Soyez le premier à donner votre avis sur cette source.

Vue 18 164 fois - Téléchargée 1 412 fois

Télécharger le projet
Commenter

Description

J'ai monté ce script avec plein de bout de code trouver ici et la.
ce script permet de creer une fenetre deplacable avec la souris avec les leyers.
le script est compatible ie4 et + , ns4 et + .

pour deplacer cette fenetre utilisez la barre marron (barre de titre, meme deplaement qu'une fenetre OS).
pour afficher une image dans cette fenetre liquez sur un lien image1.gif ou image2.gif.
pour cacher l'image chargée, cliquez sur O ds la barre de titre (idem pour la faire reaparaitre)

le script n'est pas commenté mais le bloque est tres facilement utilisable pour tout vos sites.
le style de la fenetre est modifiable via du code html assez simplement.

Source / Exemple : 


<html>

<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<title>dsdsd</title>

<style>
	<!--
		.drag {
			position:relative; cursor:hand	
		}
	//-->
	.barre_titre {
		background-color:#FFFFFF; position:absolute; top:0; left:0;
	}
	.barre_contenu {
		position:absolute; top:30; left:0; background-color:#FFFFFF;
	}
	.table_titre {
		border-width:1px; border-color:rgb(102,102,102); border-style:solid;
	}
	.table_contenu {
		border-width:1px; border-color:rgb(102,102,102); border-style:solid;
	}
	
</style>

<script language='JavaScript'>
var dom = (document.getElementById)? true:false;
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
var dd_mode='';

function onoffdisplay(){
	if (ie4) {
		if (cadre_contenu.style.display=='') cadre_contenu.style.display='none'
		else cadre_contenu.style.display=''
	}else	if (dom) {
		if (document.getElementById('cadre_contenu').style.display=='') document.getElementById('cadre_contenu').style.display='none' 
		else document.getElementById('cadre_contenu').style.display=''
	}else	if (ns4) {
		if (document.layers.cadre_contenu.visibility=='show') document.layers.cadre_contenu.visibility='hide' 
		else document.layers.cadre_contenu.visibility='show'
	}
}

function changer_image(ima) {
	if (ie4) {
		visual.src=ima;
		cadre_contenu.style.display=''
	}else	if (dom) {
		 document.getElementById('visual').src=ima;
		 document.getElementById('cadre_contenu').style.display=''
	}else	if (ns4) {
		document.layers.visual.visibility=ima;
		document.layers.cadre_contenu.visibility='show'
	}	
}

function start() {
	var h=100;
 	if (ie4) {
		var w=document.body.clientWidth-200;
		w=50;
		cadre_barre.style.left=w;
		cadre_barre.style.top=h;
		cadre_contenu.style.left=w;
		cadre_contenu.style.top=h+30;
		cadre_contenu.style.display='none';
		cadre_barre.onmousedown=beginDrag;
	}else if (dom) {
		var w=window.outerWidth-200;
		w=0
		document.getElementById('cadre_barre').style.left=w;
		document.getElementById('cadre_barre').style.top=h;
		document.getElementById('cadre_contenu').style.left=w;
		document.getElementById('cadre_contenu').style.top=h+30;
		document.getElementById('cadre_contenu').style.display='none';
		document.getElementById('cadre_barre').addEventListener('mousedown',beginDrag, false);
	}else if (ns4) {
		var w=window.outerWidth-200;
		w=0
		document.layers.cadre_barre.left=w;
		document.layers.cadre_barre.top=h;
		document.layers.cadre_contenu.left=w;
		document.layers.cadre_contenu.top=h+30;
		document.layers.cadre_contenu.visibility='hide'
		document.captureEvents(Event.MOUSEDOWN);
		document.onmousedown=beginDrag;
	}
}

function doDrag(e) {
	if (ie4) {
		var difX=event.clientX-window.lastX;
	   var difY=event.clientY-window.lastY;
		var newX1 = parseInt(cadre_barre.style.left)+difX;
	   var newY1 = parseInt(cadre_barre.style.top)+difY;
	   cadre_barre.style.left=newX1+'px';
	   cadre_barre.style.top=newY1+'px';
	   cadre_contenu.style.left=newX1+'px';
	   cadre_contenu.style.top=newY1+30+'px';
	   window.lastX=event.clientX;
	   window.lastY=event.clientY;
	}else if (dom) {
		var difX=e.clientX-window.lastX;
	   var difY=e.clientY-window.lastY;
		var newX1 = parseInt(document.getElementById('cadre_barre').style.left)+difX;
	   var newY1 = parseInt(document.getElementById('cadre_barre').style.top)+difY;
	   document.getElementById('cadre_barre').style.left=newX1+'px';
	   document.getElementById('cadre_barre').style.top=newY1+'px';
	   document.getElementById('cadre_contenu').style.left=newX1+'px';
	   document.getElementById('cadre_contenu').style.top=newY1+30+'px';
	   window.lastX=e.clientX;
	   window.lastY=e.clientY;
	}else if (ns4) {
		var difX=e.pageX-window.lastX;
	   var difY=e.pageY-window.lastY;
		var newX1 = parseInt(document.layers.cadre_barre.left)+difX;
	   var newY1 = parseInt(document.layers.cadre_barre.top)+difY;
	   document.layers.cadre_barre.left=newX1;
	   document.layers.cadre_barre.top=newY1;
	   document.layers.cadre_contenu.left=newX1;
	   document.layers.cadre_contenu.top=newY1+30;
	   window.lastX=e.pageX;
	   window.lastY=e.pageY;
	} 
}

function beginDrag(e) {
	if (ie4) {
		window.lastX=event.clientX;
	   window.lastY=event.clientY;
	   document.onmousemove=doDrag;
	   document.onmouseup=endDrag;
//		if (event.srcElement.id=='cadre_barre'){
//			Récup de l'Id d'un élément sous IE
//		}
	}else if (dom) {
		window.lastX=e.clientX;
	   window.lastY=e.clientY;
	   window.onmousemove=doDrag;
	   window.onmouseup=endDrag;
		myattr=e.target.getAttribute('ID');
//		if(myattr=='cadre_barre') {
//			Récup de l'ID d'un élément sous NS6
//		}
	}else if (ns4) {
		window.lastX=e.pageX;
	   window.lastY=e.pageY;
	   document.captureEvents(Event.MOUSEMOVE)
	   document.onmousemove=doDrag;
	   document.captureEvents(Event.MOUSEUP)
	   document.onmouseup=endDrag;
	}
}

function endDrag(e) {
	 if (ie4 || ns4) {
	 	document.onmousemove=null;
	 }else if (dom) {
		window.onmousemove=null;
	}else if (ns4) {
		alert('endDrag');
		document.onmousemove=null;
	}
}

</script>

</head>

<body bgcolor='white' text='black' link='blue' vlink='purple' alink='red'  onload='start();'>

<p><script language='JavaScript'>
	var ns4 = (document.layers)? true:false;
	var ie4 = (document.all)? true:false;
	var dom = (document.getElementById)? true:false;
	if ((dom) || (ie4)) {
		document.write("<div id='cadre_barre' class='barre_titre'><table class='table_titre' cellpadding='5' cellspacing='0' width='310'><tr><th width='275' height='19' valign='middle' nowrap bgcolor='#CC9900'><p>ici pour deplacer la mini fenetre</p></th><th width='15' height='19' valign='middle' nowrap bgcolor='#CC9900'><p><a href='#' onclick='onoffdisplay();'><font color='red'>O</font></a></p></th></tr></table></div>");
		document.write("<div id='cadre_contenu' class='barre_contenu'><table class='table_contenu' cellpadding='5' cellspacing='0' width='310'><tr><td width='300' height='263' align='center' valign='middle' colspan='2' bgcolor='white'><p><img id='visual' src='' border='0'></p></td></tr></table></div>");
	} else if (ns4) {
		document.write("<layer id='cadre_barre' class='barre_titre'><table class='table_titre' cellpadding='5' cellspacing='0' width='310'><tr><th width='275' height='19' valign='middle' nowrap bgcolor='#CC9900'><p>ici pour deplacer la mini fenetre</p></th><th width='15' height='19' valign='middle' nowrap bgcolor='#CC9900'><p><a href='#' onclick='onoffdisplay();'><font color='red'>O</font></a></p></th></tr></table></layer>");
		document.write("<layer id='cadre_contenu' class='barre_contenu'><table class='table_contenu' cellpadding='5' cellspacing='0' width='310'><tr><td width='300' height='263' align='center' valign='middle' colspan='2' bgcolor='white'><p><img id='visual' src='' border='0'></p></td></tr></table></layer>");
	}
</script>

</p>
<p><a href="#" onclick="changer_image('1.gif');">image 1 .gif</a></p>
<p><a href="#" onclick="changer_image('2.gif');">image 2 .gif</a></p>
</body>

</html>

Conclusion :


un ptit zip est dispo et fonctionnel.
perso jai testé sous IE5 et ns6 et ca marche impec (ce dont je suis plutot content).

voila voilou.
Christophe.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Afficher les 6 commentaires
Signaler Commenter la réponse de cs_Marcial
cs_Marcial
Messages postés
59
Date d'inscription
samedi 3 mai 2003
Statut
Membre
Dernière intervention
31 juillet 2008
 -
Bon code...
J'ai mis 8 car on sent l'effort et la recherche.
(sinon cela mérite un 7)
J'aurais mis 9/10 si le calque permettant le déplacement avait été dans le calque déplacé...

ce qui aurais donné le code suivant...

<html>

<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<title>dsdsd</title>

<style>
<!--
.drag {
position:relative; cursor:hand
}
//-->
.barre_titre {
background-color:#FFFFFF; position:absolute; top:0; left:0;
}
.barre_contenu {
position:absolute; top:30; left:0; background-color:#FFFFFF;
}
.table_titre {
border-width:1px; border-color:rgb(102,102,102); border-style:solid;
}
.table_contenu {
border-width:1px; border-color:rgb(102,102,102); border-style:solid;
}

</style>

<script language='JavaScript'>
var dom = (document.getElementById)? true:false;
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
var dd_mode='';

function onoffdisplay(){
if (ie4) {
if (cadre_contenu.style.display=='') cadre_contenu.style.display='none'
else cadre_contenu.style.display=''
}else if (dom) {
if (document.getElementById('cadre_contenu').style.display=='') document.getElementById('cadre_contenu').style.display='none'
else document.getElementById('cadre_contenu').style.display=''
}else if (ns4) {
if (document.layers.cadre_contenu.visibility=='show') document.layers.cadre_contenu.visibility='hide'
else document.layers.cadre_contenu.visibility='show'
}
}

function changer_image(ima) {
if (ie4) {
visual.src=ima;
cadre_contenu.style.display=''
}else if (dom) {
document.getElementById('visual').src=ima;
document.getElementById('cadre_contenu').style.display=''
}else if (ns4) {
document.layers.visual.visibility=ima;
document.layers.cadre_contenu.visibility='show'
}
}

function start() {
var h=100;
if (ie4) {
var w=document.body.clientWidth-200;
w=50;
cadre_barre.style.left=w;
cadre_barre.style.top=h;
cadre_contenu.style.left=w;
cadre_contenu.style.top=h+30;
cadre_contenu.style.display='none';
cadre_barre.onmousedown=beginDrag;
}else if (dom) {
var w=window.outerWidth-200;
w=0
document.getElementById('cadre_barre').style.left=w;
document.getElementById('cadre_barre').style.top=h;
document.getElementById('cadre_contenu').style.left=w;
document.getElementById('cadre_contenu').style.top=h+30;
document.getElementById('cadre_contenu').style.display='none';
document.getElementById('cadre_barre').addEventListener('mousedown',beginDrag, false);
}else if (ns4) {
var w=window.outerWidth-200;
w=0
document.layers.cadre_barre.left=w;
document.layers.cadre_barre.top=h;
document.layers.cadre_contenu.left=w;
document.layers.cadre_contenu.top=h+30;
document.layers.cadre_contenu.visibility='hide'
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=beginDrag;
}
}

function doDrag(e) {
if (ie4) {
var difX=event.clientX-window.lastX;
var difY=event.clientY-window.lastY;
var newX1 = parseInt(cadre_barre.style.left)+difX;
var newY1 = parseInt(cadre_barre.style.top)+difY;
cadre_barre.style.left=newX1+'px';
cadre_barre.style.top=newY1+'px';
cadre_contenu.style.left=newX1+'px';
cadre_contenu.style.top=newY1+30+'px';
window.lastX=event.clientX;
window.lastY=event.clientY;
}else if (dom) {
var difX=e.clientX-window.lastX;
var difY=e.clientY-window.lastY;
var newX1 = parseInt(document.getElementById('cadre_barre').style.left)+difX;
var newY1 = parseInt(document.getElementById('cadre_barre').style.top)+difY;
document.getElementById('cadre_barre').style.left=newX1+'px';
document.getElementById('cadre_barre').style.top=newY1+'px';
document.getElementById('cadre_contenu').style.left=newX1+'px';
document.getElementById('cadre_contenu').style.top=newY1+30+'px';
window.lastX=e.clientX;
window.lastY=e.clientY;
}else if (ns4) {
var difX=e.pageX-window.lastX;
var difY=e.pageY-window.lastY;
var newX1 = parseInt(document.layers.cadre_barre.left)+difX;
var newY1 = parseInt(document.layers.cadre_barre.top)+difY;
document.layers.cadre_barre.left=newX1;
document.layers.cadre_barre.top=newY1;
document.layers.cadre_contenu.left=newX1;
document.layers.cadre_contenu.top=newY1+30;
window.lastX=e.pageX;
window.lastY=e.pageY;
}
}

function beginDrag(e) {
if (ie4) {
window.lastX=event.clientX;
window.lastY=event.clientY;
document.onmousemove=doDrag;
document.onmouseup=endDrag;
// if (event.srcElement.id=='cadre_barre'){
// Récup de l'Id d'un élément sous IE
// }
}else if (dom) {
window.lastX=e.clientX;
window.lastY=e.clientY;
window.onmousemove=doDrag;
window.onmouseup=endDrag;
myattr=e.target.getAttribute('ID');
// if(myattr=='cadre_barre') {
// Récup de l'ID d'un élément sous NS6
// }
}else if (ns4) {
window.lastX=e.pageX;
window.lastY=e.pageY;
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=doDrag;
document.captureEvents(Event.MOUSEUP)
document.onmouseup=endDrag;
}
}

function endDrag(e) {
if (ie4 || ns4) {
document.onmousemove=null;
}else if (dom) {
window.onmousemove=null;
}else if (ns4) {
alert('endDrag');
document.onmousemove=null;
}
}

</script>


</head>



<script language='JavaScript'>
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
var dom = (document.getElementById)? true:false;
if ((dom) || (ie4)) {
document.write("

ici pour deplacer la mini fenetre |<gras>[# image 1 .gif]


[# image 2 .gif]




</html>
Signaler Commenter la réponse de atlante34
atlante34
Messages postés
14
Date d'inscription
lundi 16 janvier 2006
Statut
Membre
Dernière intervention
24 janvier 2012
 -
merci Marcial,
Il est vrai qu il est mieux de faire bouger directement le div.
Merci de ton code
A++
Signaler Commenter la réponse de cs_bobabar
cs_bobabar
Messages postés
12
Date d'inscription
mercredi 8 décembre 2004
Statut
Membre
Dernière intervention
8 avril 2013
 -
Je n'ai pas réussi à le faire fonctionner que ce soit sous IE 6 ou FireFox 2.0 (pris les fichiers du .zip).

A+
Signaler Commenter la réponse de jiminy2
jiminy2
Messages postés
18
Date d'inscription
mercredi 27 juin 2007
Statut
Membre
Dernière intervention
25 mars 2008
 -
Pareil, ça ne marche pas pour moi.

j'ai trouvé un code similaire, ici : http://i.gautier.free.fr/jsprof/scripts/r6.htm
Signaler Commenter la réponse de cirkooo
cirkooo
Messages postés
35
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
26 décembre 2012
 -
le 1 er et deuxieme code marche impecablement, mais que le code est long. Ça doit être bien de comprendre tous ce code.... ^^.
Commenter la réponse de ThunderPsycho
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 (lumesh)