begin process at 2008 08 30 01:10:18
1 233 969 membres
8 nouveaux aujourd'hui
14 294 membres club

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

FENETRE DHTML ( FONCTIONNE AVEC OPERA ET IE )


Information sur la source

Catégorie :Fenêtre & Pop-up Classé sous : fenetre, popup, deplacer Niveau : Initié Date de création : 06/02/2006 Vu / téléchargé: 6 942 / 671

Note :
5 / 10 - par 1 personne
5,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note

Description

Voila j'ai fait un petit programme pour avoir des fenetres dynamiques et que l'on peut bouger et redimensionner.
Voilà les bugs :
Je n'ai aucune idée de pourquoi ca ne fonctionne pas sous Mozilla ( c'est à dire Netscape, et Firefox )
Je n'arrive pas à tronquer le texte si le redimensionnement est trop petit
Donc cette source est là pour évoluer.
Merci

Source

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <html>
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  • <meta name="generator" content="PSPad editor, www.pspad.com">
  • <title>
  • </title>
  • </head>
  • <script>
  • shadowpic = new Image;
  • shadowpic.src = "shadow.GIF";
  • var movewindow = false;
  • var resizewindow = false;
  • var decaX,decaY, num, numwindow, numresize;
  • var windowinf = new Array;
  • var oldx, oldy;
  • function windowinfo(x,y,l,h,title,shadow) {
  • this.x=x;
  • this.y=y;
  • this.l=l;
  • this.h=h;
  • this.title=title;
  • this.shadow=shadow;
  • }
  • function updatewindow(num,x,y,l,h,shadow)
  • {
  • if(shadow==true)
  • {
  • var objet = document.getElementById("shadow"+num);
  • objet.style.height=h;
  • objet.style.width=l;
  • }
  • var objet = document.getElementById("windowtitle"+num);
  • objet.style.height=14;
  • objet.style.width=l-25;
  • var objet = document.getElementById("window"+num);
  • objet.style.height=h;
  • objet.style.width=l;
  • var objet = document.getElementById("windowmain"+num);
  • objet.style.height=h-29;
  • objet.style.width=l-6;
  • var objet = document.getElementById("windowresize"+num);
  • objet.style.left=x+l-5;
  • objet.style.top=y+h-5;
  • }
  • function resize()
  • {
  • num=numresize;
  • if(resizewindow==true)
  • {
  • if(oldx!=event.clientX || oldy!=event.clientX)
  • {
  • x=windowinf[num].x;
  • y=windowinf[num].y;
  • l=windowinf[num].l;
  • h=windowinf[num].h;
  • l=l+event.clientX-oldx;
  • h=h+event.clientY-oldy;
  • oldx=event.clientX;
  • oldy=event.clientY;
  • if(l<60){l=60};
  • if(h<60){h=60};
  • updatewindow(num,x,y,l,h,windowinf[num].shadow);
  • windowinf[num].l=l;
  • windowinf[num].h=h;
  • }
  • }
  • }
  • function endresize()
  • {
  • resizewindow=false;
  • }
  • function move()
  • {
  • if(movewindow==true)
  • {
  • num=numwindow;
  • if(windowinf[num].shadow==true){
  • var objet = document.getElementById("shadow"+num);
  • objet.style.left=event.clientX-decaX+18+"px";
  • objet.style.top=event.clientY-decaY+18+"px";}
  • var objet = document.getElementById("window"+num);
  • objet.style.left=event.clientX-decaX+"px";
  • objet.style.top=event.clientY-decaY+"px";
  • var objet = document.getElementById("windowclose"+num);
  • objet.style.left=event.clientX-decaX+3+"px";
  • objet.style.top=event.clientY-decaY+3+"px";
  • var objet = document.getElementById("windowtitle"+num);
  • objet.style.left=event.clientX-decaX+26+"px";
  • objet.style.top=event.clientY-decaY+3+"px";
  • var objet = document.getElementById("windowmain"+num);
  • objet.style.left=event.clientX-decaX+3+"px";
  • objet.style.top=event.clientY-decaY+26+"px";
  • var objet = document.getElementById("windowresize"+num);
  • objet.style.left=event.clientX-decaX+windowinf[num].l-5+"px";
  • objet.style.top=event.clientY-decaY+windowinf[num].h-5+"px";
  • }
  • //document.window.style.left=100+'px';
  • }
  • function endmove()
  • {
  • movewindow=false;
  • }
  • function beginmove(num)
  • {
  • movewindow=true;
  • numwindow=num;
  • var objet = document.getElementById('window'+num);
  • cx=objet.offsetLeft;
  • cy=objet.offsetTop;
  • decaX=event.clientX-cx; // Decalage de la souris ave le bord
  • decaY=event.clientY-cy; // Decalage de la souris ave le bord
  • //if(!document.all)document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);
  • document.onmousemove=move;
  • document.onmouseup=endmove;
  • }
  • function beginresize(num)
  • {
  • resizewindow=true;
  • numresize=num;
  • oldx=event.clientX;
  • oldy=event.clientY;
  • //if(!document.all)document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);
  • document.onmousemove=resize;
  • document.onmouseup=endresize;
  • }
  • function AddWindow(x,y,l,h,title,shadowon)
  • // Position x et y, Longueur, Hauteur
  • {
  • num=num+1;
  • var tmp = new windowinfo(x,y,l,h,title,shadowon);
  • windowinf[num]=tmp;
  • info=" style=\"position :absolute; left : "+(x+l-5)+"px; top : "+(y+h-5)+"px; width :"+10+"px; height :"+10+"px; cursor : nw-resize; z-index : 3\"";
  • document.write("<div id=\"windowresize"+num+"\""+info+" onMouseDown=\"beginresize("+num+")\"></div>");
  • if(shadowon==true){
  • info=" style=\"position :absolute; left : "+(x+18)+"px; top : "+(y+18)+"px; width :"+l+"px; height :"+h+"px; noborder;background-image: url('shadow.GIF')\"";
  • document.write("<div id=\"shadow"+num+"\""+info+"></div>");}
  • info=" style=\"position :absolute; left : "+x+"px; top : "+y+"px; width :"+l+"px; height :"+h+"px; padding : 4px; border : 2px solid black; background-color : #bbb\"";
  • document.write("<div id=\"window"+num+"\""+info+"></div>");
  • info=" style=\"position :absolute; left : "+(x+3)+"px; top : "+(y+3)+"px; width :"+14+"px; height :"+14+"px; padding : 2px; border : 2px solid black;background-color : #ccc; text-align : center\"";
  • document.write("<div id=\"windowclose"+num+"\""+info+"><small><small><b>x</small></small></b></div>");
  • info=" style=\"position :absolute; left : "+(x+26)+"px; top : "+(y+3)+"px; width :"+(l-25)+"px; height :"+14+"px; padding : 2px; border : 2px solid black;white-space: nowrap; overflow: noscroll; background-color : #aaf; cursor : hand\"";
  • document.write("<div id=\"windowtitle"+num+"\""+info+" onMouseDown=\"beginmove("+num+")\" ><small><small><b>"+title+"</b></small></small></div>");
  • info=" style=\"position :absolute; left : "+(x+3)+"px; top : "+(y+26)+"px; width :"+(l-6)+"px; height :"+(h-29)+"px; padding : 4px; border : 2px solid black; background-color : #fff\"";
  • document.write("<div id=\"windowmain"+num+"\""+info+" >");
  • }
  • </script>
  • <body>
  • <script>AddWindow(20,20,120,120,'Outil',true);
  • </script>
  • Bonjour
  • coucou
  • comment vas tu ?
  • </div>
  • </body>
  • </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">	
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>
    </title>
  </head>
<script>
shadowpic = new Image;
shadowpic.src = "shadow.GIF";
var movewindow = false;
var resizewindow = false;
var decaX,decaY, num, numwindow, numresize;
var windowinf = new Array;
var oldx, oldy;

function windowinfo(x,y,l,h,title,shadow) {
     this.x=x;
     this.y=y;
     this.l=l;
     this.h=h;
     this.title=title;
     this.shadow=shadow;
}

function updatewindow(num,x,y,l,h,shadow)
{
 if(shadow==true)
 { 
  var objet = document.getElementById("shadow"+num);
  objet.style.height=h;
  objet.style.width=l;
  }
  var objet = document.getElementById("windowtitle"+num);
  objet.style.height=14;
  objet.style.width=l-25;
  var objet = document.getElementById("window"+num);
  objet.style.height=h;
  objet.style.width=l;
  var objet = document.getElementById("windowmain"+num);
  objet.style.height=h-29;
  objet.style.width=l-6;
  var objet = document.getElementById("windowresize"+num);
  objet.style.left=x+l-5;
  objet.style.top=y+h-5;
 } 


function resize()
{
num=numresize;
if(resizewindow==true)
 {
 if(oldx!=event.clientX || oldy!=event.clientX)
 {
  x=windowinf[num].x;
  y=windowinf[num].y;
  l=windowinf[num].l;
  h=windowinf[num].h;
  l=l+event.clientX-oldx;
  h=h+event.clientY-oldy;
  oldx=event.clientX;
  oldy=event.clientY;
  if(l<60){l=60};
  if(h<60){h=60};
  updatewindow(num,x,y,l,h,windowinf[num].shadow);
  windowinf[num].l=l;
  windowinf[num].h=h;
  }
 }
}

function endresize()
{
 resizewindow=false;
}

function move()
{
if(movewindow==true)
{
  num=numwindow;
if(windowinf[num].shadow==true){
  var objet = document.getElementById("shadow"+num);
  objet.style.left=event.clientX-decaX+18+"px";
  objet.style.top=event.clientY-decaY+18+"px";}
  var objet = document.getElementById("window"+num);
  objet.style.left=event.clientX-decaX+"px";
  objet.style.top=event.clientY-decaY+"px";
  var objet = document.getElementById("windowclose"+num);
  objet.style.left=event.clientX-decaX+3+"px";
  objet.style.top=event.clientY-decaY+3+"px";    
  var objet = document.getElementById("windowtitle"+num);
  objet.style.left=event.clientX-decaX+26+"px";
  objet.style.top=event.clientY-decaY+3+"px";
  var objet = document.getElementById("windowmain"+num);
  objet.style.left=event.clientX-decaX+3+"px";
  objet.style.top=event.clientY-decaY+26+"px";
  var objet = document.getElementById("windowresize"+num);
  objet.style.left=event.clientX-decaX+windowinf[num].l-5+"px";
  objet.style.top=event.clientY-decaY+windowinf[num].h-5+"px";
 }
 

//document.window.style.left=100+'px';
}
function endmove()
{
 movewindow=false;
}
function beginmove(num)
{
 movewindow=true;
 numwindow=num;
 var objet = document.getElementById('window'+num);
 cx=objet.offsetLeft;
 cy=objet.offsetTop;
 decaX=event.clientX-cx; // Decalage de la souris ave le bord
 decaY=event.clientY-cy; // Decalage de la souris ave le bord
 //if(!document.all)document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);
 document.onmousemove=move;
 document.onmouseup=endmove; 
}

function beginresize(num)
{
 resizewindow=true;
 numresize=num;
 oldx=event.clientX;
 oldy=event.clientY;
 //if(!document.all)document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);
 document.onmousemove=resize;
 document.onmouseup=endresize; 
}


function AddWindow(x,y,l,h,title,shadowon)
// Position x et y, Longueur, Hauteur
{
num=num+1;
var tmp = new windowinfo(x,y,l,h,title,shadowon);
windowinf[num]=tmp;

info=" style=\"position :absolute; left : "+(x+l-5)+"px; top : "+(y+h-5)+"px; width :"+10+"px; height :"+10+"px; cursor : nw-resize; z-index : 3\"";
document.write("<div id=\"windowresize"+num+"\""+info+" onMouseDown=\"beginresize("+num+")\"></div>");
if(shadowon==true){
info=" style=\"position :absolute; left : "+(x+18)+"px; top : "+(y+18)+"px; width :"+l+"px; height :"+h+"px; noborder;background-image: url('shadow.GIF')\"";
document.write("<div id=\"shadow"+num+"\""+info+"></div>");}
info=" style=\"position :absolute; left : "+x+"px; top : "+y+"px; width :"+l+"px; height :"+h+"px; padding : 4px; border : 2px solid black; background-color : #bbb\"";
document.write("<div id=\"window"+num+"\""+info+"></div>");
info=" style=\"position :absolute; left : "+(x+3)+"px; top : "+(y+3)+"px; width :"+14+"px; height :"+14+"px; padding : 2px; border : 2px solid black;background-color : #ccc; text-align : center\"";
document.write("<div id=\"windowclose"+num+"\""+info+"><small><small><b>x</small></small></b></div>");
info=" style=\"position :absolute; left : "+(x+26)+"px; top : "+(y+3)+"px; width :"+(l-25)+"px; height :"+14+"px; padding : 2px; border : 2px solid black;white-space: nowrap; overflow: noscroll; background-color : #aaf; cursor : hand\"";
document.write("<div id=\"windowtitle"+num+"\""+info+" onMouseDown=\"beginmove("+num+")\" ><small><small><b>"+title+"</b></small></small></div>");

info=" style=\"position :absolute; left : "+(x+3)+"px; top : "+(y+26)+"px; width :"+(l-6)+"px; height :"+(h-29)+"px; padding : 4px; border : 2px solid black;  background-color : #fff\"";
document.write("<div id=\"windowmain"+num+"\""+info+" >");


}


</script>
  <body>


<script>AddWindow(20,20,120,120,'Outil',true);


</script>
Bonjour
coucou
comment vas tu ?

</div>

  </body>
</html>
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

  • signaler à un administrateur
    Commentaire de MaX3315 le 07/02/2006 17:24:55

    Salut,

    Pour ton problème sous Firefox l'erreur et facillement récupérable c'est simplement la manière dont tu récupère les événemetns.

    Exemple dans ton code tu as:
    function beginresize(num)
    {
    resizewindow=true;
    numresize=num;
    oldx=event.clientX;
    oldy=event.clientY;
    [...]
    }

    Le problème c'est que event n'existe pas sous firefox... du moins pas de avce cette déclaration


    Pour ma part j'utilise toujours une déclaration du genre
    function beginresize(aEvent)
    {
        var myEvent = aEvent ? aEvent : window.event; //recuperation de l'evenement
        //on recupere objet cible declencheur de l'evenement
        var target= myEvent.target ? myEvent.target : myEvent.srcElement;
        [...]
    }

    et dans l'HTML tu aurais un truc du style <div onMouseDown="beginresize(event)">...

    A noter qu'il est nécessaire de passer event en argument! donc faut trouver une autre astuce si tu veux d'autre arguments (utilisation de l'id de l'objet, etc...)


    Sinon pour ton soucis de chaines trop longues j'ai bosser un peu sur le sujet cf : http://www.javascriptfr.com/code.aspx?ID=35601. Ca te permettra de tronquer le titre et de mettre des '...' automatiquement quelque soit le navigateur.

    Bonne continuation

  • signaler à un administrateur
    Commentaire de MaX3315 le 07/02/2006 17:26:04

    oups mauvais lien.
    C'est par la le truc qui tronque les chaines : http://www.javascriptfr.com/code.aspx?ID=34109

  • signaler à un administrateur
    Commentaire de biskbart le 07/02/2006 18:13:51

    Merci de ton interet et de ton aide. Je me mets au boulot. Merci encore

Ajouter un commentaire

Pub



Appels d'offres

Recherche developpeur ...
Budget : 700€
SITE MARCHAND LOCATION...
Budget : 3 000€
SITE MARCHAND POUR HOTEL
Budget : 4 000€

CalendriCode

Août 2008
LMMJVSD
    123
45678910
11121314151617
18192021222324
25262728293031

Téléchargements

Boutique

Boutique de goodies CodeS-SourceS