Accueil > Forum > > > > Problème de DIV
 Problème de DIV
vendredi 7 août 2009 à 17:14:46 |
Problème de DIV
igregbzh
|
Bonjour à tous voila j'effectue une petite application en javascript et la j'ai un gros problème. En fait j'arrive a déplacer et redimensionner les div que je place manuellement dans mon code mais dès que j'en dessine une nouvelle, je ne peut pas les déplacer ni les redimensionner. Merci de votre aide car la je suis vraiment bloqué.
Code HTML : <html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Dessin" href="dessin.css" />
<title>Dessin</title>
<!-- Script des axes qui suivent la souris -->
<script language="JavaScript">
var d;
var bouton = false;
var posx;
var posy;
var i =0;
var initx=false;
var inity=false;
var MonTableauX1 = new Array();
var MonTableauX2 = new Array();
var MonTableauY1 = new Array();
var MonTableauY2 = new Array();
var x = 0;
var y = 0;
var idSelected;
//désactiver selection
function disableselect(e){
return false
}
function reEnable(){
return true
}
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
//coordonnées qui suivent la souris
function infoSouris(event)
{
var xS = event.clientX;
var yS = event.clientY;
if (x > 1020 || y > 570){
document.getElementById('info').style.visibility='hidden';
}
else if (x < 20 || y < 20){
document.getElementById('info').style.visibility='hidden';
}
else{
document.getElementById('info').style.visibility='visible';
}
document.getElementById('coordonnes').value = xS + ', ' + yS;
var element = document.getElementById('info');
element.style.position = 'absolute';
element.style.left = xS + 10 + 'px';
element.style.top = yS + 10 + 'px';
}
//axes qui suivent la souris
function Pos_souris(e) {
x = e.pageX;
y = e.pageY;
document.getElementById('horizontale').style.top = y;
document.getElementById('verticale').style.left = x;
if (x > 1020 || y > 570){
document.getElementById('horizontale').style.visibility='hidden';
document.getElementById('verticale').style.visibility='hidden';
}
else if (x < 20 || y < 20){
document.getElementById('horizontale').style.visibility='hidden';
document.getElementById('verticale').style.visibility='hidden';
}
else{
document.getElementById('horizontale').style.visibility='visible';
document.getElementById('verticale').style.visibility='visible';
}
}
//activer le bouton dessin rectangle
function activerBouton(){
if (document.getElementById('boutonOn').value =="Tracer un rectangle"){
bouton = true;
document.getElementById('boutonOn').value="Tracage en cours...";
document.getElementById('boutonOn').style.border = "solid 2px #00FF00";
document.getElementById('workZone').style.cursor= "default";
document.onmousemove = Pos_souris;
}
else {
bouton = false;
document.getElementById('boutonOn').value="Tracer un rectangle";
document.getElementById('boutonOn').style.border = "";
document.getElementById('workZone').style.cursor= "default";
document.onmousemove = "";
}
}
//changement d'option dans la liste
function change(id){
idSelected = document.forms.formulaire.liste.options.selectedIndex;
document.getElementById('alerte').value = idSelected;
if(document.forms.formulaire.liste.options.selectedIndex==0){
document.getElementById('suppr').style.visibility='hidden';
document.getElementById('mod').style.visibility='hidden';
document.getElementById('x1').value = "";
document.getElementById('y1').value = "";
document.getElementById('x2').value = "";
document.getElementById('y2').value = "";
}
else{
document.getElementById('x1').value = MonTableauX1[id];
document.getElementById('y1').value = MonTableauY1[id];
document.getElementById('x2').value = MonTableauX2[id];
document.getElementById('y2').value = MonTableauY2[id];
document.getElementById('suppr').value = "Supprimer div_" + document.forms.formulaire.liste.options.selectedIndex;
document.getElementById('suppr').style.visibility='visible';
document.getElementById('mod').style.visibility='visible';
}
var divNonSelect = document.getElementsByClassName('square');
for(k=0;k<divNonSelect.length;k++)
{
divNonSelect[k].style.border = "1px solid #59A059";
}
document.getElementById('div_'+id).style.border= "3px solid #FF00FF";
}
//Suppression d'une div
function supprDiv(idtodel){
document.getElementById('workZone').removeChild(document.getElementById('div_'+idtodel));
document.forms.formulaire.liste.options.selectedIndex = 0;
document.forms.formulaire.liste.options[idtodel]=null;
}
//tracage des rectangles
function dessiner(obj,e){
if (bouton == true){
posx=0;
posy=0;
var ev=(!e)?window.event:e;
posx=ev.clientX;
posy=ev.clientY;
obj.onmousedown=function(){
if (bouton == true){
i ++;
initx=posx;
inity=posy;
d = document.createElement('div');
d.id ='div_' + i;
d.className='square';
d.name ='div_' + i;
d.style.left=initx+'px';
d.style.top=inity+'px';
document.getElementsByName('workZone')[0].appendChild(d);
d.onMouseOver=fnOnMouseOver(d.id);
d.onMouseOut=fnOnMouseOver();
document.forms.formulaire.liste.options[document.forms.formulaire.liste.options.length] = new Option(d.id,d.id);
document.forms.formulaire.liste.options.selectedIndex = i;
document.getElementById('suppr').value = "Supprimer div_" + document.forms.formulaire.liste.options.selectedIndex;
MonTableauX1[i]=posx;
MonTableauY1[i]=posy;
}
}
obj.onmouseup=function(){initx=false;inity=false;}
if(initx){
d.style.width=Math.abs(posx-initx)+'px';
d.style.height=Math.abs(posy-inity)+'px';
d.style.left=posx-initx<0?posx+'px':initx+'px';
d.style.top=posy-inity<0?posy+'px':inity+'px';
MonTableauX2[i]=(posx);
MonTableauY2[i]=(posy);
}
document.getElementById('prenom').value = d.id;
document.getElementById('x1').value = MonTableauX1[i];
document.getElementById('y1').value = MonTableauY1[i];
document.getElementById('x2').value = MonTableauX2[i];
document.getElementById('y2').value = MonTableauY2[i];
}
else {
return buton=false;
}
}
function fnOnClick(dd)
{
var divNonSelect = document.getElementsByClassName('square');
for(k=0;k<divNonSelect.length;k++)
{
divNonSelect[k].style.background = "";
divNonSelect[k].style.opacity = "";
}
document.getElementById(dd).style.background = "blue";
document.getElementById(dd).style.opacity = 0.5;
}
//Modification d'une div
function modDiv(idToMod){
}
//-----------Modification d'une div Drag and Drop-----------------//
var X_OTHER= 1;
var X_LEFT= 2;
var X_RIGHT = 3;
var Y_OTHER= 1;
var Y_UP= 2;
var Y_DOWN= 3;
var vgCurrentElement = null;
var vgCurrentPositionX = X_OTHER;
var vgCurrentPositionY = Y_OTHER;
var vgCurrentX = 0;
var vgCurrentY = 0;
var vgCurrentWidth = 0;
var vgCurrentHeight = 0;
var vgMouseX = 0;
var vgMouseY = 0;
var vgMouseDiffX = 0;
var vgMouseDiffY = 0;
var vgMouseDown = false;
var vgTimerMouse;
var vgTimerTime = 20;
function position(e)
{
vgMouseX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
vgMouseY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
}
function fnResizeDiv()
{
if(vgCurrentElement!=null && vgCurrentElement!=undefined)
{
if (navigator.appName.substring(0,3) == "Net") {
document.getElementById(vgCurrentElement).style.left = vgCurrentX;
document.getElementById(vgCurrentElement).style.top = vgCurrentY;
document.getElementById(vgCurrentElement).style.width = vgCurrentWidth-2;
document.getElementById(vgCurrentElement).style.height = vgCurrentHeight-2;
}else {
document.getElementById(vgCurrentElement).style.left = vgCurrentX;
document.getElementById(vgCurrentElement).style.top = vgCurrentY;
document.getElementById(vgCurrentElement).style.width = vgCurrentWidth;
document.getElementById(vgCurrentElement).style.height = vgCurrentHeight;
}
}
}
function fnOnMouseDown()
{
vgMouseDown = true;
if(vgCurrentElement!=null && vgCurrentElement!=undefined)
{
//Init of size
vgCurrentX = document.getElementById(vgCurrentElement).offsetLeft;
vgCurrentY = document.getElementById(vgCurrentElement).offsetTop;
vgCurrentWidth = document.getElementById(vgCurrentElement).offsetWidth;
vgCurrentHeight = document.getElementById(vgCurrentElement).offsetHeight;
//Init of distance
vgMouseDiffX = vgMouseX-vgCurrentX;
vgMouseDiffY = vgMouseY-vgCurrentY;
//Init of position
if(vgMouseDiffX < 20 || (vgCurrentWidth-vgMouseDiffX) < 20)
{
if(vgMouseDiffX < vgCurrentWidth/2)
vgCurrentPositionX = X_LEFT;
else
vgCurrentPositionX = X_RIGHT;
}
else
vgCurrentPositionX = X_OTHER;
if(vgMouseDiffY < 20 || (vgCurrentHeight-vgMouseDiffY) < 20)
{
if(vgMouseDiffY > vgCurrentHeight/2)
vgCurrentPositionY = Y_DOWN;
else
vgCurrentPositionY = Y_UP;
}
else
vgCurrentPositionY = Y_OTHER;
vgTimerMouse = setInterval("fnOnMouseMove();", vgTimerTime);
}
}
function fnOnMouseUp()
{
vgMouseDown = false;
clearInterval(vgTimerMouse);
}
function fnOnMouseMove()
{
if(vgMouseDown && vgCurrentElement!=null && vgCurrentElement!=undefined)
{
switch(vgCurrentPositionX)
{
case X_LEFT:vgCurrentWidth += vgCurrentX-vgMouseX;
if(vgCurrentWidth<0)
vgCurrentWidth = 0;
else
vgCurrentX = vgMouseX;
break;
case X_RIGHT: vgCurrentWidth = vgMouseX-vgCurrentX;
if(vgCurrentWidth<0)
vgCurrentWidth = 0;
break;
default: break;
}
switch(vgCurrentPositionY)
{
case Y_UP:vgCurrentHeight += vgCurrentY-vgMouseY;
if(vgCurrentHeight<0)
vgCurrentHeight = 0;
else
vgCurrentY = vgMouseY;
break;
case Y_DOWN: vgCurrentHeight = vgMouseY-vgCurrentY;
if(vgCurrentHeight<0)
vgCurrentHeight = 0;
break;
default: break;
}
if(vgCurrentPositionX==X_OTHER && vgCurrentPositionY==Y_OTHER)
{
vgCurrentX = vgMouseX-vgMouseDiffX;
vgCurrentY = vgMouseY-vgMouseDiffY;
}
fnResizeDiv();
}
}
function fnOnMouseOver(sSelectedElementName)
{
if(!vgMouseDown)
{
if(sSelectedElementName==null && sSelectedElementName!="undefined")
{
vgCurrentElement = null;
}
else
{
vgCurrentElement = sSelectedElementName;
}
}
}
document.onmousemove = position;
//-----------Modification d'une div Drag and Drop-----------------//
</script>
</head>
<body>
<div id='workZone' name='workZone' onmousemove="infoSouris(event), dessiner(this,event);" onMouseDown="fnOnMouseDown();" onMouseUp="fnOnMouseUp();">
<div id="info">
<input type="text" id="coordonnes" value="inconnues" readonly="readonly" size="8" />
</div>
<div id=horizontale></div>
<div id=verticale></div>
<div id="divTest" class='square' name="divTest" onMouseOver="fnOnMouseOver('divTest');" onMouseOut="fnOnMouseOver();" onClick="fnOnClick('divTest');">
</div>
<div id="divTest2" class='square' name="divTest2" onMouseOver="fnOnMouseOver('divTest2');" onMouseOut="fnOnMouseOver();" onClick="fnOnClick('divTest2');">
</div>
</div>
<div id='menu'>
<input type="button" id='boutonOn' onclick="activerBouton()" value="Tracer un rectangle"/></br>
<form name="formulaire" id="formulaire">
<select name="liste" id="liste" onchange="change(this.selectedIndex)">
<option value="null">Selectionner un rectangle</option>
</select>
</form>
<form name='info'>
<input id="prenom" type="hidden"/></br>
x1 : <input id="x1" value='test' readonly="readonly" size="5"/></br>
y1 : <input id="y1" readonly="readonly" size="5" value="" /></br>
x2 : <input id="x2" readonly="readonly" size="5" value="" /></br>
y2 : <input id="y2" readonly="readonly" size="5" value="" /></br>
</form>
<input type="button" id='suppr' onclick="supprDiv(document.forms.formulaire.liste.options.selectedIndex)" value='Supprimer' /></br>
<input id='alerte' /></br>
</br>
<button onclick="javascript:location.reload();">Recharger la page</button></br>
</div>
</body>
</html> mon CSS:
Code HTML : body{
background-color: #FFFFFF;
margin: 20;
overflow: hidden;
padding: 0;
}
#workZone{
border: 2px;
border-color: black;
border-style: solid;
float:left;
width: 1000px;
height: 550px;
}
#divTest {
left: 500px;
width: 320px;
height: 240px;
position: absolute;
/*BACKGROUND-IMAGE: url(../images/bg.gif);*/
border: 1px solid blue;
}
#divTest2 {
top: 300px;
width: 100px;
height: 200px;
position: absolute;
border: 1px solid red;
}
.square {
border: 1px solid #59A059;
position: absolute;
}
|
|
lundi 10 août 2009 à 16:31:09 |
Re : Problème de DIV
dvdstory
|
Je veux pas être méchant mais si ta pas de réponse faut pas t'étonner.
On veut bien d'aider mais on veut pas se taper la lecture et l'interprétation de tes 250 lignes de code.
Utilise Firebug avec Firefox pour trouver la ligne qui bug.
Ou insère les lignes qui correspondent à ton problème.
Tu ne devrais pas publier + de 30 lignes de codes.
|
|
Cette discussion est classée dans : code, var, false, border, if
 Répondre à ce message
 Sujets en rapport avec ce message
Gestion de touches F5, BACKSPACE et ENTER (javascript et jQuery) [ par elara1970 ]
Bonjour, Je souhaiterais gérer certaines touches du clavier en javascript (et jQuery). Le code fonctionne bien sous IE mais pas trop avec FF. Cepend
Formulaire Newsletter facebook FBML/FBJS [ par quinton75 ]
Bonjour,[^^clinoeil1][^^clinoeil1] Je souhaite intégrer un formulaire d'inscription à ma Newsletter sur ma page facebook Mon code source HTML d'inté
Intégrer du javascirpit sur facebook (FBML/FBJS) [ par quinton75 ]
Hello,[^^clinoeil1][^^clinoeil1][^^clinoeil1] Petite question à pose. Je souhaite intégrer un formulaire d'inscription à ma Newsletter sur ma page
FBJS : ou mettre le javascript étant dans <head> en html sans le head en fbjs ? [ par quinton75 ]
[code=js] Webform var dtCh='/'; var minYear=1900; var maxYear=2100; function isValidInteger(s){ var i; for(i=
Problème Bizarre if(var!= NULL) en javascript [ par midoxe ]
Bonjour, je me retrouve avce un problème BIZARRE vraiment [^^confus2] !!!!! voici mon code : [code=as]function PromptMessage() { var saisie =
W3C et & dans un code javascript [ par nicolazik ]
Bonjour, j'ai un soucis avec un code du générateur de bannière aléatoire, je l'utilise pour afficher aléatoirement des publicités, or les liens des i
synchroniser une requete ajax asynchrone [ par AlexN ]
Bonjour,Je cherche à synchroniser une requete ajax asynchrone. Et je prend une grosse suée.Je fais appel de manière cyclique à une requete ajax en mod
probleme incompatibilité IE-FF svp HELP !! [ par ju0123456789 ]
Bonjour, depuis plusieurs jours, je mesuis pris la tête pour mon script de mon site web de commande en ligne, mais malheureusement il ne marche pas so
Affichier un texte avec la position X et Y [ par bshaka ]
Bonjour à tous,j'ai trouvé sur le web cette fonction qui affiche date et heure à une position x et y, pour l'appeler, je fais :InitHorloge(265,56,"fon
Affichage d'horloge [ par bshaka ]
Bonjour à tous,J'ai trouvé cette fonction pour afficher l'horloge à une position X Y sur le net, sauf qu'elle n'affiche pas l'horloge à la bonne posit
 Livres en rapport
|
Derniers Blogs
 POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|