Discussion :

[kiproko]

Bonjour à tous

Je crée un nouveau post car le sujet qui me préoccupe est listé comme résolu, ce qui n'est pas le cas (post original).

J'ai utilisé le script de ce post pour une page (dico des termes employés dans la boîte) que je fais pour un client qui m'a demandé un minimum de clics sur cette page.

Mais voilà, ça marche parfaitement sur Firefox et Safari comme d'hab, par contre sur cette m**** d'IE comme d'hab aussi, ça ne marche pas ... complètement.

J'ai mis un popup en survol sur chaque définition (enfin jusqu'à la lettre M incluse, après j'ai pas encore fait je viens de remarquer le bug)
Sur la partie affichée ça marche nickel, par contre si on descend avec l'ascenseur pour voir les définitions du bas de page, ça m'affiche les popups en haut de la page n'importe où et plus à côté du mot.

C'est difficile à expliquer, si qqun peut regarder la page en question (sur IE) SVP ce serait vraiment cool.

Je ne connais pas le moindre début de JS donc je suis incapable de corriger si on peut corriger...
Et je viens de passer la journée d'hier à faire plus de la moitié des déf., mon texte n'est plus vraiment récupérable en copier-coller à cause de la syntaxe nécessaire au JS, donc ça serait l'horreur de devoir tout refaire avec un autre qui script qui si ça se trouve en + buggera pareil.

Est-ce que ça peut venir du fait qu'il y ai bcp de JS sur la page? et surtout est-ce que ça peut s'arranger?
Voilà le code js utilisé

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
var tt_posX = 0;
var tt_posY = 0;
var tt_yOffset = 15;
var tt_id;
 
function tt_getEltById(id)
{
	if (document.layers)
		return document.layers[id];
	else if (document.all)
		return document.all[id];
	else if (document.getElementById)
		return document.getElementById(id);
 
	return null;
}
 
function tt_over1(msg,classe,duree)
{
	var c = (typeof classe=='undefined' ? 'tt_default' : classe);
	var d = (typeof duree=='undefined' ? 0 : duree);
	tt_id = setTimeout('tt_show("'+msg+'","'+c+'")',d);
}
 
function tt_over2(msg,duree)
{
	var d = (typeof duree=='undefined' ? 0 : duree);
	tt_id = setTimeout('tt_show("'+msg+'","tt_default")',d);
}
 
function tt_out()
{
	clearTimeout(tt_id);
	tt_hide();
}
/*
function tt_tooltip1(message,tooltip,classe,duree)
{
	document.write("<span onmouseover=\"tt_over1('" + tooltip + "','" + classe + "'," + duree + ")\" onmouseout='tt_out()'>" + message + "</span>");
}
	*/
function tt_show(texte,classe)
{
	var contenu = texte;
  var finalPosX = tt_posX;
  if (finalPosX<0) finalPosX=0;
 
  tt_getEltById("bulle").className = 'tt_abs ' + (typeof classe == 'undefined' ? 'tt_default' : classe);
 
  if (document.layers)
  {
    tt_getEltById("bulle").document.write(contenu);
   	tt_getEltById("bulle").document.close();
    tt_getEltById("bulle").top = tt_posY + tt_yOffset +"px";
    tt_getEltById("bulle").left= finalPosX + "px";
    tt_getEltById("bulle").visibility="show";
  }
  else
  {
   	tt_getEltById("bulle").innerHTML = contenu;
    tt_getEltById("bulle").style.top = tt_posY + tt_yOffset +"px";
    tt_getEltById("bulle").style.left = finalPosX + "px";
    tt_getEltById("bulle").style.visibility="visible";
  }
}
function tt_getMousePos(e)
{
 	tt_posX = (document.all ? event.x + document.body.scrollLeft : e.pageX);
 	tt_posY = (document.all ? event.y + document.body.scrollTop : e.pageY);
}
 
function tt_hide()
{
	if (document.layers)
		tt_getEltById("bulle").visibility="hide";
	else
		tt_getEltById("bulle").style.visibility="hidden";
}
 
function tt_init(classe)
{
	if (document.layers)
	{
		window.captureEvents(Event.MOUSEMOVE);
		window.onmousemove=tt_getMousePos;
		document.write("<layer name='bulle' class='tt_abs' style='visibility:hide'></layer>");
	}
	else if (document.all || document.getElementById)
	{
		document.write("<div id='bulle' class='tt_abs' style='visibility:hidden'></div>");
		document.onmousemove=tt_getMousePos;
	}
}
 
tt_init();

Merci d'avance de vos réponses si qqun veut bien jeter un œil!

[SpaceFrog]

fais une recherche avec offsetParent sur ce forum ...

[kiproko]

fais une recherche avec offsetParent sur ce forum ...

merci SpaceFrog pour ta réponse qui m'incite à penser que mon problème peut se résoudre sans tout refaire, c'est déjà ça

j'ai fait une recherche sur offsetParent, j'ai trouvé plusieurs posts, fait plusieurs tests, mais encore une fois je suis moins que débutante sur JS, donc tout ce que je fais est "à l'aveuglette"

1er post, 1er test
J'ai remplacé

Code :

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

1
2
3
4
5
function tt_getMousePos(e)
{
 	tt_posX = (document.all ? event.x + document.body.scrollLeft : e.pageX);
 	tt_posY = (document.all ? event.y + document.body.scrollTop : e.pageY);
}

par

Code :

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

1
2
3
4
5
function tt_getMousePos(e)
{
 	tt_posX = (document.all ? event.x + (document.documentElement.scrollLeft || document.body.scrollLeft));
 	tt_posY = (document.all ? event.y + (document.documentElement.scrollTop || document.body.scrollTop));
}

et j'obtiens une erreur "Object expected"

2ème post test
J'ai remplacé toujours la même portion de code (j'ai supposé que c'était ça mais je n'en sais rien!) par

Code :

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

1
2
3
4
5
6
7
8
9
10
function tt_getMousePos(e)
{
    while (elt.offsetParent) 
	{
        elt = elt.offsetParent;
        tt_posX += elt.offsetLeft;
        tt_posY += elt.offsetTop;
    }
    return {haut: tt_posY, gauche: tt_posX}
}

en ayant pris soin de définir

Code :

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

1
2
var tt_posX = elt.offsetLeft;
var tt_posY = elt.offsetTop + elt.offsetHeight;

(mais ma variable var tt_yOffset est toujours = 15, or j'ai lu qu'il fallait plutôt utiliser les propriétés top et left plutôt que le tableau de nombre)

et j'obtiens une erreur " 'style' is null or not an object"

les autres posts, je ne vois même pas comment intégrer les solutions dans mon code

j'essaie d'y mettre de la bonne volonté, mais en n'y connaissant rien, je peux y passer 3j à changer le code à tâtons, j'aurais vraiment du bol si je tombe sur la solution. donc j'avoue, "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"

qqun peut-il me dire si c'est bien la bonne fonction que je modifie? et si oui, ce que je ne fais pas comme il faut?

Mille mercis d'avance !

[SpaceFrog]

pourquoi te compliquer en passant la position de la souris au lieu de passer la positon de l'element ?

[kiproko]

pourquoi te compliquer en passant la position de la souris au lieu de passer la positon de l'element ?

ben je sais pas moi... c'est juste un code de bigboomshakala qu'il a donné dans un autre post
moi je suis preneuse de n'importe quelle technique qui marche dans mon cas honnêtement

le seul souci c'est que je suis incapable de réécrire le code moi-même
promis je vais me former sur JS parce que je vois que j'en ai de plus en plus besoin, mais là, je ne peux rien faire sans aide de qqun qui s'y connaît (comme toi par exemple )

[kiproko]

bon ayé j'ai trouvé, tu m'as effectivement donné la bonne piste avec ton histoire de position d'élément, merci
t'as été dur, je pensais pas trouver toute seule sans connaître JS, mais finalement si, et je me coucherais moins conne ce soir

donc pour ceux que ça pourrait intéresser, la solution pour que tout marche nickel y compris dans IE, c'est de remplacer dans le code initial

Code :

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

1
2
3
4
5
function tt_getMousePos(e)
{
 	tt_posX = (document.all ? event.x + document.body.scrollLeft : e.pageX);
 	tt_posY = (document.all ? event.y + document.body.scrollTop : e.pageY);
}

par

Code :

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

1
2
3
4
5
function tt_getMousePos(e)
{
 	tt_posX = (document.all ? event.x + (document.documentElement.scrollLeft || document.body.scrollLeft) : e.pageX);
 	tt_posY = (document.all ? event.y + (document.documentElement.scrollTop || document.body.scrollTop) : e.pageY);
}

bon WE à tous !