Div/layer mobile comme une fenetre
Soyez le premier à donner votre avis sur cette source.
Vue 18 294 fois - Téléchargée 1 429 fois
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.
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.
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.
j'ai trouvé un code similaire, ici : http://i.gautier.free.fr/jsprof/scripts/r6.htm
A+
Il est vrai qu il est mieux de faire bouger directement le div.
Merci de ton code
A++
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>
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.