Cursor message javascript(info bulle)

**programmatrice** · 06/05/2012, 21h55

Salut tous,
Je sais pas ou est le probleme??? ça a marché deja mais d'un coup ce code ne fonctionne pas! Merci de m'aider de trouver l'erreur

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(document).ready(function() {
$('#premiere').mouseover(function() {
$.cursorMessage("Pour une bonne presentation de votre description du produit,<br> Vous pouvez utilisez la mise en forme suivante,<br> *la balise >U< <u> Votre texte souligné</u><br>* la balise >B< <b>Votre texte en gras</b><br>*la balise >I< <i>Votre texte italique</i><br>...");
}).mouseout($.hideCursorMessage);
$('#deuxieme').mouseover(function() {
$.cursorMessage("Pour une bonne presentation de votre description du produit,<br> Vous pouvez utilisez la mise en forme suivante,<br> *la balise >U< <u> Votre texte souligné</u><br>* la balise >B< <b>Votre texte en gras</b><br>*la balise >I< <i>Votre texte italique</i><br>...");
}).mouseout($.hideCursorMessage);
});
</script>

**RomainVALERI** · 07/05/2012, 11h32

Tu es sur des id des éléments sur lesquels ce code se branche ? Ils n'ont pas changé récemment ? (premiere et deuxieme)

Invité · 07/05/2012, 11h40

Bonjour,
si ce code fonctionnait, il faut peut-etre voir ailleurs, non ?
- jQuery fonctionne bien ? (initialisation, version...)
- as-tu d'autres scripts JavaScript/jQuery avant (dont un qui pourrait contenir une erreur et qui stoppe le fonctionnement du javascript) ?
- conflit de script ?
- ... ?

Ajoute des alert :

Code :

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

alert("jusqu'ici, ça va...");

**programmatrice** · 08/05/2012, 15h36

@jreaux62!
Effectivement, j'ai en rajouté d'autre code javascript et jquery mais ils fonctionnent normalement et chaque bout de code est dans un <script...></script> idependamment des autres!
Les ids sont bien vérifiés
alors que doit - on faire?

Invité · 08/05/2012, 15h41

As-tu un lien où on pourrait voir le problème ?

[Edit] Je viens d'essayer ton script (après avoir téléchargé le plugin cursorMessage 0.2) : il fonctionne sans souci.

As-tu initialisé (avec le bon chemin) :

Code :

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

<script type="text/javascript" src="./js/cursorMessage/jquery.cursorMessage.js"></script>

Ou il faut chercher le problème ailleurs...

**programmatrice** · 08/05/2012, 17h11

oui oui ts va bien
comme vous avez dit!
avant que j'ai integeré d'autres script js et jquery il a fonctionné normlement mais lorsque j'ai en rajouté d'autres, ça devient non fonctionnél!
ou pourrait etre ailleurs le probleme?
c sur q les autres scripts ont empeche ceci d'etre execute??

Invité · 08/05/2012, 17h14

Teste en enlevant un script à la fois.
Tu verras bien lequel pose problème.

Comme tu ne veux pas nous montrer ton code ou un lien, on ne peux rien faire de plus pour toi...

**programmatrice** · 08/05/2012, 17h25

nn plus pas de prob, just j'ai pas fait attention voici tous ce que j'ai dans la partie header

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/workFlow.js"></script>
<script language="javascript" src="../js/jquery.cursorMessage.js" type="text/javascript"></script>



<script type="text/javascript">
$('#cmt').hide();
$('#go').click(function() {
$('#cmt').slideToggle();
});
</script>



<meta charset="UTF-8" />
<style>
.button{
cursor: pointer;
text-decoration: none;
background-color: none;
display: inline-block;
font-weight: bold;
border-radius: 1em / 2em;
color: #fff;
background-color: #900;
padding: 4px 14px 6px;
text-shadow: 0 0 5px #000;
text-shadow: 1px 1px 1px #000;
inset 0 1px 4px #666;
inset 0 -6px 6px #666;
background-color: #FFCC33;

}
a:link
{
	text-decoration:none;
}
.img
{
float:right;
}
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }

.h3_image {
position:relative;
}
.lien_image {
position:absolute;
display:none;
position: absolute;
margin-left: 100px;
margin-right: 100px;
}
.lien_image a {
color: #000;
background-color:#FFF;
font-size:0.8em;
cursor: pointer;
position: absolute;
margin-left: -10px;
margin-top: -100px;

/* ajouter ici les autres styles à appliquer ... */
}
</style>









<link href="../js/jquery.ui.all.css" rel="stylesheet" media="all" type="text/css" />
<script type="text/javascript" src="../js/jquery2_google_libs.js"/>
</script>
<script type="text/javascript" src="../js/jquery1_google_libs.js"/></script>
<script type="text/javascript">
function confirmer(a,b,c){
if (window.confirm('Êtes-vous sûr de supprimer ce commentaire ?'))
{document.location.href="supprimerCmt.php?idp="+a+"&cnt="+b+"&id="+c;}
else {return false}
}
function confPub(a){
if (window.confirm('Êtes-vous sûr de supprimer cette publication ?'))
document.location.href="supprimerPub.php?id="+a;
else 
return false;
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#premiere').mouseover(function() {
$.cursorMessage("Pour une bonne presentation de votre description du produit,<br> Vous pouvez utilisez la mise en forme suivante,<br> *la balise >U< <u> Votre texte souligné</u><br>* la balise >B< <b>Votre texte en gras</b><br>*la balise >I< <i>Votre texte italique</i><br>...");
}).mouseout($.hideCursorMessage);
$('#deuxieme').mouseover(function() {
$.cursorMessage("Pour une bonne presentation de votre description du produit,<br> Vous pouvez utilisez la mise en forme suivante,<br> *la balise >U< <u> Votre texte souligné</u><br>* la balise >B< <b>Votre texte en gras</b><br>*la balise >I< <i>Votre texte italique</i><br>...");
}).mouseout($.hideCursorMessage);
});
</script>
<script>
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog:ui-dialog" ).dialog( "destroy" );

var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );

function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}

function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {

return false;
} else {
return true;
}
}
function errorPass(p1,p2) {
p1.addClass( "ui-state-error" );
p2.addClass( "ui-state-error" );
updateTips( "Veuillez verifier votre mot de passe" );

}

function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}

$( "#dialog-form" ).dialog({
autoOpen: false,
height: 600,
width: 350,
modal: true,
buttons: {
"Enregistrer modification": function() {

allFields.removeClass( "ui-state-error" );


/*bValid = bValid && checkLength( nomfr, "nomfr", 3, 16 );
bValid = bValid && checkLength( nomen, "nomen", 3, 16 );
bValid = bValid && checkLength( email, "email", 6, 80 );
bValid = bValid && checkLength( password1, "password1", 5, 16 );
bValid = bValid && checkLength( password2, "password2", 5, 16 );
bValid = bValid && checkLength( descfr,"descfr", 5, 16 );
bValid = bValid && checkLength( descen,"descen", 5, 16 );
bValid = bValid && checkLength( tel,"tel", 5, 16 );
bValid = bValid && checkLength( descen,"siege", 5, 16 );

bValid = bValid && checkRegexp( nomfr, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
bValid = bValid && checkRegexp( password1, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
*/
var	    nomfr = $( "#nomfr" ),
nomen = $( "#nomen" ),
descfr = $( "#descfr" ),
descen = $( "#descen" ),
siege = $( "#siege" ),
tel = $( "#tel" ),
email = $( "#email" ),
lastpass=$( "#lastpass"),
password1 = $( "#password1" ),
password2= $( "#password2" );

if ((nomfr.val().length > 15) || (nomfr.val().length < 3))
{
nomfr.addClass( "ui-state-error" );
updateTips( "Veuillez entrer votre nouveau nom en français" );
return false;
}
else
{
nomfr.removeClass( "ui-state-error");
if ((nomen.val().length > 15) || (nomen.val().length < 3))
{
nomen.addClass( "ui-state-error" );
updateTips( "Veuillez entrer votre nouveau nom en anglais" );
return false;
}
else
{
nomen.removeClass( "ui-state-error");
if ((descfr.val().length > 15) || (descfr.val().length < 3))
{
descfr.addClass( "ui-state-error" );
updateTips( "Veuillez entrer votre nouvelle description en français" );
return false;
}
else
descfr.removeClass( "ui-state-error");
{
if ((descen.val().length > 15) || (descen.val().length < 3))
{
descen.addClass( "ui-state-error" );
updateTips( "Veuillez entrer votre nouveau description en anglais" );
return false;
}
else
{
descen.removeClass( "ui-state-error");
if ((siege.val().length > 15) || (siege.val().length < 3))
{
siege.addClass( "ui-state-error" );
updateTips( "Veuillez entrer votre nouveau siege" );
return false;
}
else
{
siege.removeClass( "ui-state-error");
if ((tel.val().length > 15) || (tel.val().length < 3))
{
tel.addClass( "ui-state-error" );
updateTips( "Veuillez entrer votre nouveau telephone" );
return false;
}
else
{
tel.removeClass( "ui-state-error");
if ((email.val().length > 15) || (email.val().length < 3))
{
email.addClass( "ui-state-error" );
updateTips( "Veuillez entrer votre nouveau e-mail" );
return false;
}
else
{
email.removeClass( "ui-state-error");

if ((password1.val().length > 15) || (password1.val().length < 3))
{
password1.addClass( "ui-state-error" );
updateTips( "Veuillez entrer votre nouveau mot de passe" );
return false;
}
else
{
password1.removeClass( "ui-state-error");

if ((password2.val().length > 15) || (password2.val().length < 3))
{
password2.addClass( "ui-state-error" );
updateTips( "Veuillez confirmer votre nouveau mot de passe" );
return false;
}
else
{
password2.removeClass( "ui-state-error");
if(password1.val() == password2.val())
{
$( this ).dialog( "close" );
window.location.href = "modifierCompte.php?nomfr="+nomfr.val()+"&nomen="+nomen.val()+"&descfr="+descfr.val()+"&descen="+descen.val()+"&password1="+password1.val()+"&lastpass="+lastpass.val()+"&siege="+siege.val()+"&tel="+tel.val()+"&email="+email.val()+"&ail="+email.val();
}
else
{password1.addClass( "ui-state-error" );
password2.addClass( "ui-state-error" );
updateTips( "Veuillez vérifier votre nouveau mot de passe" );
return false;
}
}}}}}}}}


}

},
Annuler: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});

$( "#create-user" )

.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>



<div class="demo">

<div id="dialog-form" title="Veuillez entrer vos nouvelles coordonnées">
<p class="validateTips">Tous les champs sont obligatoires</p>

<form>
<fieldset>
<label for="name">Nom_fr</label>
<input type="text" name="nomfr" id="nomfr" class="text ui-widget-content ui-corner-all" />
<label for="name">Nom_en</label>
<input type="text" name="nomen" id="nomen" class="text ui-widget-content ui-corner-all" />
<label for="name">Desc_fr</label>
<input type="text" name="descfr" id="descfr" class="text ui-widget-content ui-corner-all" />
<label for="name">Desc_en</label>
<input type="text" name="descen" id="descen" class="text ui-widget-content ui-corner-all" />
<label for="name">Siége social</label>
<input type="text" name="siege" id="siege" class="text ui-widget-content ui-corner-all" />
<label for="name">Télephone</label>
<input type="text" name="tel" id="tel" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Ancien mot de passe</label>
<input type="password" name="lastpas" id="lastpass" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Nouveau mot de passe</label>
<input type="password" name="password1" id="password1" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Confirmer nouveau mot de passe</label>
<input type="password" name="password2" id="password2" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>

<!-- End demo-description -->






<title>ma Compte</title>

Invité · 08/05/2012, 18h00

Envoyé par jreaux62

=> Teste en enlevant un script à la fois.

Ca donne quoi ?

PS: et mets de l'ordre dans ton code !
Tout est mélangé (code javascript, css et html)
ET une belle indentation permettrait d'y vois plus clair.

**programmatrice** · 08/05/2012, 18h14

VOUS voulez dire quoi par enlevez un script a la fois??

Invité · 08/05/2012, 18h22

Les scripts Javascript dans ta page.

Enlève-les, un par un,
et vérifie à chaque fois que ton script (celui qui ne marche pas) fonctionne ou pas.

=> l'objectif est de trouver celui qui pose un problème, ok ?

**programmatrice** · 08/05/2012, 19h06

oh, Merci bien pour cette methode!!
En fait j'ai trouvé d'ou vient l'erreur mais sans connaitre comment la resoudre
lorsque j'ai aliminé les 2 lignes de code d'importation des code Js de google lbs ça marche!
ces deux

Code :

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

1
2
3
<script type="text/javascript" src="../js/jquery2_google_libs.js"/>
</script>
<script type="text/javascript" src="../js/jquery1_google_libs.js"/></script>

Maitenant que dois je faire!
Si j'elimine ces deux ligne tous un autre traitement va etre infectéé!!!!

Invité · 08/05/2012, 19h47

Et comme ça ? (le 1 avant le 2 + correction erreur de /)

Code :

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

1
2
<script type="text/javascript" src="../js/jquery1_google_libs.js"></script>
<script type="text/javascript" src="../js/jquery2_google_libs.js"></script>

Sinon, il est possible que certains scripts soient en conflit les uns avec les autres (des noms de variables ou identifiants identiques,...)

**programmatrice** · 08/05/2012, 20h03

j'ai corrigé mais aucun changement, l'info bulle ne s'affiche pas encore

**Auteur** · 09/05/2012, 10h29

bonjour,

une petite remarque sur un commentaire que tu as fait :

Envoyé par programmatrice

Effectivement, j'ai en rajouté d'autre code javascript et jquery mais ils fonctionnent normalement et chaque bout de code est dans un <script...></script> idependamment des autres!

non ! Ce n'est pas parce que tu as utilisé plusieurs balises <script> que les codes sont indépendants. A partir du moment où ils sont chargés dans la même page les scripts forment un tout.

Pour t'en convaincre exécute ce code :

Code html :

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
 
<html>
<head>
<script type="text/javascript">
var monMessage = "ceci est le message";
</script>
 
<script type="text/javascript">
function message()
{
        alert(monMessage);
}
 
</script>
 
</head>
<body>
 
<input type="button" value="clique ici" onclick="message()" />
 
</body>
</html>

la fonction message "voit" bien la variable globale monMessage et pourtant les codes sont dans deux balises script.

C'est pour cette raison que jreaux62 t'a demandé de supprimer ton code puis d'ajouter les fonctions une à une jusqu'à ce que le bug soit trouvé

Cursor message javascript(info bulle)

JavaScript

Discussions similaires

Partager

Partager