Div/layer mobile comme une fenetre

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

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)