CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 03 19 00:08:42

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Fenêtre & Pop-up

> FENETRE DHTML ( FONCTIONNE AVEC OPERA ET IE )

FENETRE DHTML ( FONCTIONNE AVEC OPERA ET IE )

Information sur la source

Note :

5,00 / 10

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

Auteur : biskbart

Ecrire un message privé

Site perso

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>

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

index2.Html 5 702 octets
shadow.GIF 136 octets

Télécharger le zip

Sources du même auteur

EXPLORATEUR DOM

PETIT EDITEUR D ICONE

SYSTEME DE NOTATION

TRIANGLES EN JAVASCRIPT

Toutes les sources de biskbart

Sources de la même categorie

FENETRE D'ACTUALITE par kazma

CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS ... par Nementon

FENETRE DE LOGIN par kazma

MESSAGES VIRTUELS par grarestephane

ENVOIE DE MESSAGE AUTOMATIQUE par grarestephane

Toutes les sources de la catégorie Fenêtre & Pop-up

Sources en rapport avec celle ci

FENETRE D'ACTUALITE par kazma

FERMER LA FENÊTRE PRINCIPALE par lurked

UN CLIC = UN LIEN + UNE POPUP (LA PAGE DU POPUP NE T'APPARTI... par transgoku

MISE À JOUR D'UNE LISTE DÉROULANTE VIA UN POPUP par ahcorad

INFO BULLE MULTI -TEXTE OU FAUSSE FENÊTRE POPUP (SIMPLE ET P... par xloadx

Commentaires et avis

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

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

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

Discussions en rapport avec ce code source dans le forum

Rafraichir la fenetre "parent" [ par aurélien ] Bonjour à tous, J'ai une page en html/php a partir de laquelle, en cliquant sur un bouton, j'ouvre un popup, et j'aimerais que lorsque je ferme ce pop pb d'ouverture fermeture de popup [ par jeffb ] bonjour,j'ai ouvert une fenetre popup avec la fonction:popupHandle=open('popup.asp', 'Cobrowsing1', 'status=no, resizable=1, scrollbars=1, toolbar=0, Dialogue entre une fenetre et une popup [ par bob ] Bonjour à tous G un petit soucis G une page dans laquelle G un boutton "Valider" qui appelle une fonction js qui fait ceci :.....var ouvert=window.ope Recuperation d'un POST d'un popup vers une frame de la fenetre ki a ouvert le popup [ par Petiout2 ] bonjour,j'aimerai recuperer un post d'un popup, et renvoyé ces informations vers la fenetre mere ki a appelé le popupj'ai essayé ca :<SCRIPT langua Fonction popup [ par jimmy69 ] Salut a tous,Voila je debute vraiment en javascript ma question sera peut etre un peu bete voir stupide mais bon je la pose qd meme :-)!Voila j"aimera ouvrir un popup et fermer la premiere fenetre [ par jeantend ] je veux ouvrir une fenetre ki va charger un popup et se fermer (elle meme pas fermer le popup)...j ecris cela :<html><head><script lang fenetre connexion [ par essom ] dans ce site et particulièrement dans la partie "votre accés" il ya un lien "connexion" qui permet d'ouvrir une popup qui n'est pas comme les autres.j fenetre connexion [ par essom ] dans ce site(avant de règler votre compte pour pouvoir accéder à tous les sources) t particulièrement dans la partie "votre accés" il ya un lien "conn fenetre connexion [ par essom ] dans ce site(avant de règler votre compte pour pouvoir accéder à tous les sources) t particulièrement dans la partie "votre accés" il ya un lien "conn Ouvrir une nouvelle fenetre depuis un PoPuP [ par marm0tte ] Voila, g fait une session en php pour accedder a la rubrique admin de mon site.La page de connection s'ouvre dans un popup, et quand on se connect (ap

Nos sponsors

Derniers Blogs

TECHDAYS 2010 GENèVE : RETROUVEZ-MOI POUR UNE SESSION SUR LA HAUTE DISPONIBILITé ET LE SCALEOUT AVEC SQL SERVER par christian

[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA par cyril

CERTIFICATIONS BETA .NET 4 par KooKiz

[MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2 par redo

LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010! par MPOWARE

Forum

RE : LECTURE PROPRIéTé IMAGE SUR BOUTON PARCOURIR par kazma

RE : CHANGEMENT D' UNE IMAGE par blacknaske

RE : VALIDATION D'UN FORMULAIRE par crememain

LECTURE PROPRIéTé IMAGE SUR BOUTON PARCOURIR par dadbn

RE : EFFACER UNE LIGNE DANS FICHIER TEXTE EN PHP par ChasseurDeChimeres

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

plaquette - logo
Budget : 350€
Gestion clientele JEE
Budget : 500€
URGENT Travaux PAO iWork 09 arabe hebreu anglais captures ecran
Budget : 400€

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods