fonction redimensionnement marche pas sous firefox

**calitom** · 10/09/2007, 10h59

Bonjour,

J'ai fais une fonction pour redimensionner un div. Elle marche bien sous IE, mais pas sous firefox...
Pourquoi?
Voila les fonctions que j'utilise:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
var xinit; // position de la souris au clic sur le div
var yinit;
var x; // position de l'élément au départ
var y;
var initier = false; // si on est en train de cliquer
var idEnCours; // id du div qui est en cours de modif
 
function init(e, id){
	idEnCours = id;
	initier = true;
	xtmp = document.getElementById(id).offsetLeft;
	ytmp = document.getElementById(id).offsetTop;
	x = document.getElementById(id).offsetLeft;
	y = document.getElementById(id).offsetTop;
	xinit = e.clientX;
	yinit = e.clientY;
}
 
function bouge(e){
	// si on a cliqué et qu'on bouge
	if(initier){
		xtmp = document.getElementById(idEnCours).offsetLeft;
		ytmp = document.getElementById(idEnCours).offsetTop;
		document.getElementById(idEnCours).style.width = document.getElementById(idEnCours).offsetWidth + (e.clientX - x - document.getElementById(idEnCours).offsetWidth - 25);
		document.getElementById(idEnCours).style.height = document.getElementById(idEnCours).offsetHeight + (e.clientY - y - document.getElementById(idEnCours).offsetHeight);
	}
}
 
function fin(e){
	initier = false;
}

En fait, dans le div que je veux redimensionner, j'ai un div dans le coin en bas à droite qui lorsque je clique dessus déclenche la fonction init = début redimensionnement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<body onmousemove="bouge(event);" onmouseup="fin(event);">
<DIV class=box id=boxHandle1 >
  <DIV id=carre_resize onmousedown="init(event,'boxHandle1');"></DIV>
</DIV>

Le message renvoyé par le debbuggeur javascript de firefox est:

Erreur d'analyse de la valeur pour la propriété "width". Déclaration abandonnée.
Erreur d'analyse de la valeur pour la propriété "height". Déclaration abandonnée.

Merci d'avance de votre aide

**calitom** · 10/09/2007, 15h05

Est ce que c'est bien la bonne manière de modifer la largeur et la hauteur pour firefox?

**calitom** · 11/09/2007, 10h01

D'autre part, je voudrais savoir quel est l'équivalent de contentEditable=true pour firefox, car cet attribut est interprété par IE mais pas par firefox.

**SpaceFrog** · 11/09/2007, 11h10

fasi une recherche sur la gestion d'evenement crossbrowser ...
ça c'est exclu IE

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
xinit = e.clientX;
	yinit = e.clientY;

pour le coup du div editable, il faudra faire une grosse bidouille sur les onkeyup pour gérer le innerHTML ...

**Bisûnûrs** · 11/09/2007, 11h27

Envoyé par calitom

Est ce que c'est bien la bonne manière de modifer la largeur et la hauteur pour firefox?

Tu as oublié de préciser les unités :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById(idEnCours).style.height = taille + "px"; // Bon
document.getElementById(idEnCours).style.height = taille; // Mauvais

**calitom** · 11/09/2007, 11h40

c'était bien du au fait que j'avais oublié la taille!!
Merci !

Et donc pour gérer le contentEditable il faut que je fasse quoi?

**Bisûnûrs** · 11/09/2007, 11h56

Sur le onclick du div en question, tu affiches un textarea reprenant le innerHTML du div et sur le onblur du textarea, tu réaffiches le div en prenant la valeur du textarea.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function switchObj(div, textarea){
	if(div.style.display != "none"){
		div.style.display = "none";
		textarea.style.display = "block";
		textarea.value = div.innerHTML;
	}
	else{
		div.style.display = "block";
		textarea.style.display = "none";
		div.innerHTML = textarea.value;
	}
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="truc1" onclick="switchObj(this, document.getElementById('truc2'))">Texte</div>
<textarea id="truc2" style="display:none" onblur="switchObj(document.getElementById('truc1'), this)"></textarea>

Après il ne te reste plus qu'à gérer les \n et les <br />.

**calitom** · 11/09/2007, 12h31

Ca marche très bien, mais je souahiterai vraiment pouvoir editer un div directement, car j'ai par exemple besoin d'ajouter des images, ou de mettre en forme le texte...

Et dans ce cas, si je sélectionne du texte et que j'essaye par exemple de cliquer sur le bouton pour modifier la mise en forme, la perte du focus déclenche la retransformation du textarea en div, et je ne peux donc pas mettre en forme le texte...

**Bisûnûrs** · 11/09/2007, 12h34

Dans ce cas-là il te faut tout simplement un éditeur WYSIWYG.

Regarde du côté de FCKEditor.

**calitom** · 11/09/2007, 14h39

Pour gérer les retours à la ligne, comment je peux faire?
En sachant que je veux différencier les sauts de ligne des sauts de paragraphe:
enter ->fin paragraphe donc saute une ligne
maj+enter -> retour à la ligne dans le paragraphe

fonction redimensionnement marche pas sous firefox

JavaScript

Discussions similaires

Partager

Partager