Discussion :

[licorne]

Bonjour,

Voilà je me "bats" avec ce problème depuis un bon moment.

J'ai fait un calendrier annuel avec une suite div collés.
Des changements de couleur s'éffectuent avec les évènements onmousedown, onmouseover et onmouseup.
Ca fonctionne pas trop mal, sauf que régulièrement quand je faits un onmousedown et un onmouseover simultanément un signe interdit s'affiche et perturbe en suite le fonctionnement du prog.

Avez-vous une idée à ce sujet ?

Merci

[licorne]

Peut-être que mon explication n'est pas tout à fait claire.
En fait l'interdiction est matérialisée par un cercle noir barré lorsque la souris passe sur la div d'à côté.
Cela ne se produit pas au premier coup.

Je galère beaucoup sur ce problème.

[deY!]

il y a peut etre un conflit entre tes fonctions.
tu veux que le changement de couleur s'effectue sur le over ? ou le down ?

un peu code serait mieux

[licorne]

Je te le livres tel quel, si c'est pas assez clair, je te le renvoies autrement.

Code :

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

$ret.="<div id='jour[".$x."]' style='position:absolute; visibility:visible; top:".$top."px; left:".$left."px; width:23px; height:23px; z-index:1;border:1px solid #FFFFFF;' onmousedown='tab_cal = Array(365); tab_cal[".$x."] = \"D\"; if(document.getElementById(\"jour[".$x."]\").style.backgroundColor == \"#b6dada\") document.getElementById(\"jour[".$x."]\").style.backgroundColor = \"#ffffa8\"; else if(document.getElementById(\"jour[".$x."]\").style.backgroundColor == \"#ffffa8\") document.getElementById(\"jour[".$x."]\").style.backgroundColor = \"#b6dada\";' onmouseup='for (i=0;i<365;i++) v = tab_cal.pop();' onmouseover='if(document.getElementById(\"jour[".$x."]\").style.backgroundColor != \"#c0c0c0\" && tab_cal.length > 0) select_mdate(".$x.");'>";

La fonction :

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
function select_mdate(x) 
{
	var deb = 999; 
	var couleur = "";
 
//alert(x);
	// Recherche de la case enfoncée
	for(i=0;i<=x;i++) 
		if(tab_cal[i] == "D") 
		{
			deb = i; 
			if (document.getElementById("jour["+deb+"]").style.backgroundColor != "#c0c0c0") 
				couleur = document.getElementById("jour["+deb+"]").style.backgroundColor;
		}
 
	// Applique la couleur de la case enfoncée aux cases survolées
	if (x > deb && deb != 999) 
		for(i=deb;i<=x;i++) 
			if (document.getElementById("jour["+i+"]").style.backgroundColor != "#c0c0c0") 
				document.getElementById("jour["+i+"]").style.backgroundColor = couleur;
 
}

[deY!]

Bon.... deja je me suis arreter de lire... dans tes evennements... ne mets pas de code javascript... appel une fonction qui s'occupera d'initialiser le tout.

en javascript tu as l'objet

Code :

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

this

c'est beau.. si tu fais

Code :

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

<div id="mydiv" onmousedown="javascript:myFunction(this)">

c'est pareil que

Code :

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

<div id="mydiv" onmousedown="javascript:myFunction(document.getElementById('mydiv'))">

[licorne]

Voici le code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ret.="<div id='jour[".$x."]' style='position:absolute; visibility:visible; top:".$top."px; left:".$left."px; width:23px; height:23px; z-index:1;border:1px solid #FFFFFF;' 
 
onmousedown='action_mdown(".$x.");' 
 
onmouseup='for (i=0;i<365;i++) v = tab_cal.pop();' 
 
onmouseover='if(document.getElementById(\"jour[".$x."]\").style.backgroundColor != \"#c0c0c0\" && tab_cal.length > 0) select_mdate(".$x.");'>";
 
if ($cal[1] == "Samedi" || $cal[1] == "Dimanche")
	$ret.="<script>document.getElementById('jour[".$x."]').style.backgroundColor = '#c0c0c0';</script>";
else
	$ret.="<script>document.getElementById('jour[".$x."]').style.backgroundColor = '#b6dada';</script>";
 
$ret.="</div>";

les fonctions :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function action_mdown(x) 
{
	tab_cal = Array(365); 
	tab_cal[x] = "D"; 
 
	if(document.getElementById("jour["+x+"]").style.backgroundColor == "#b6dada") 
		document.getElementById("jour["+x+"]").style.backgroundColor = "#ffffa8"; 
	else 
		if(document.getElementById("jour["+x+"]").style.backgroundColor == "#ffffa8") 
			document.getElementById("jour["+x+"]").style.backgroundColor = "#b6dada";
 
}

En ce qui concerne ta remarque sur this, comment appeler une fonction avec un paramètre php tel que

Code :

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

action_mover(this,x)

?

J'ai remarqué que lorsque j'enlève tous les contrôles sur les évènements le problème existe toujours.

[deY!]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ret.="<div id='jour[".$x."]' style='position:absolute; visibility:visible; top:".$top."px; left:".$left."px; width:23px; height:23px; z-index:1;border:1px solid #FFFFFF;' 
 
onmousedown='action_mdown(this, ".$x.");' 
 
onmouseup='for (i=0;i<365;i++) v = tab_cal.pop();' 
 
onmouseover='if(this.style.backgroundColor != \"#c0c0c0\" && tab_cal.length > 0) select_mdate(".$x.");'>";
 
if ($cal[1] == "Samedi" || $cal[1] == "Dimanche")
	$ret.="<script>document.getElementById('jour[".$x."]').style.backgroundColor = '#c0c0c0';</script>";
else
	$ret.="<script>document.getElementById('jour[".$x."]').style.backgroundColor = '#b6dada';</script>";
 
$ret.="</div>";

Code :

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

1
2
3
4
5
6
7
8
9
function action_mdown(div,x) 
{
	tab_cal = Array(365); 
	tab_cal[x] = "D"; 
 
	if(div.style.backgroundColor == "#b6dada") 
		div.style.backgroundColor = "#ffffa8"; 
	else if(div.style.backgroundColor == "#ffffa8") 
			div.style.backgroundColor = "#b6dada";

Pourquoi tu ne fais pas un tableau ?

[licorne]

J'avais commencé par un tableau mais les carrés n'étaient pas rectilignes comme les div.

[deY!]

Autre chose

Code :

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

<script type="text/javascript">

la navigateur comprend mieux...

voire

Code :

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

1
2
3
4
5
6
$ret.="<div id='jour[".$x."]' style='position:absolute; visibility:visible; top:".$top."px; left:".$left."px; width:23px; height:23px; z-index:1;border:1px solid #FFFFFF;"; 
 
if ($cal[1] == "Samedi" || $cal[1] == "Dimanche") 
$ret.="background-color:'#C0C0C0';'";
else
$ret.="background-color:'#B6DADA';'";

[licorne]

Ca ne change rien...

[deY!]

Je simplifiais ton code pour y voir plus clair...

quand tu dis

quand je faits un onmousedown et un onmouseover simultanément

ça veut dire que tu bouge ta souris alors que tu appuie toujours sur le bouton ?
c'est normal le signe interdit alors... ça veut qu'une partie du texte affiché est selectionner et qu'il t'interdit de le deplacer...

Aprés le fait qu'il y une erreur javascript, ça veut juste dire que tes fonctions onmousedown et onmouseover "se gene", tout simplement parcque modifie toutes les deux les même elements.

Selectionne du texte dans la page, et "tire" le ailleurs, tu devrais avec le cercle barré aussi...

[licorne]

Tout cela n'est pas très encourageant...
Je cherche à matérialiser une sélection de l'utilisateur.
Quand il appuie sur la souris puis la déplace sur les cases voisines sans la relacher les cases change de couleur.
Est-ce possible en JavaScript ?

[licorne]

Tu m'as mis sur la voie avec la sélection du texte.
Pour empècher la sélection :

Code :

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

document.onselectstart=new Function ('return false');

Merci pour ta patiente et bon week-end.

[deY!]

Je connaissais pas cette astuce merci à toi aussi, ça peut toujours me servir