Discussion :

[tigunn]

Bonjour,
je rencontre un problème pour utiliser jquery dans une iframe.
Sur une page php de mon site, j'ai une iframe qui charge un fichier html.
Dans ce fichier html se trouve des notes de bas de pages, que je voudrais transformer en infobulle avec la bibliotheque tinyTips.

Pour une démonstration, j'avais placé le code suivant dans le fichier html:

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
(function($){  
	$(document).ready(function() {
		$('span.MsoFootnoteReference').each(function() {
			var elt_pere = $(this).parent('a');
			var a_href = elt_pere.attr('href');
			var a_href_clean = a_href.substring(2);
 
			if (a_href_clean.length<5) {
				var debut_tips = '';
				var fin_tips = '';
				var note_sc = $('div#'+a_href_clean).html();	
				$(this).tinyTips(debut_tips+note_sc+fin_tips);
			}	
		});
	});
})(jQuery);
</script>

Avec l'appel aux deux librairies jquery et tinyTips, et la css tout était dans le fichier; et cela fonctionnait.
J'ai mis en pièce jointe un exemple de fichier inclus dans l'iframe (sans les définitions css, fonctions et librairies jquery).

Je voulais reprendre tout cela et placer l'appel aux librairies jquery, la définition des fonctions jquery et leur css sur ma page php; mais là ce fut le drame.
Déjà la sélection des éléments doit prendre en compte l'iframe; mon code ci-dessus, je l'ai adapté ainsi:

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
        jQuery(document).ready(function() {
                jQuery("#iframe_html").load(function() {
                jQuery("#iframe_html").contents().find("span.MsoFootnoteReference").each(function() {
 
                                var elt_pere = jQuery(this).parent("a");
                                var a_href = elt_pere.attr("href");
                                var a_href_clean = a_href.substring(2);
                                var debut_tips = "";
                                var fin_tips = "";
 
                                if (a_href_clean.length<5) {
                                        var note_sc = jQuery("#iframe_html").contents().find("div#"+a_href_clean).html();
 
                                        jQuery(this).tinyTips(debut_tips + note_sc + fin_tips);
                                }
                        });
                });
        });

Je vous met les déclarations css: car elles pourraient bien jouer un rôle:

Code css :

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
 .tinyTip {
        width: 325px;
        padding: 17px 0px 0px 0px;
        display: block;
        background: url("http://..../tinyTip-top.png") 0px 0px no-repeat;
}
 
.tinyTip .content {
        padding: 0px 15px 0px 15px;
        font-size: 14px;
        font-family: "Lucida Sans Unicode";
        color: #010101;
        background: url("http://...../tinyTip-content.png") 0px 0px repeat-y;
}
 
.tinyTip .bottom {
        height: 47px;
        background: url("http://..../tinyTip-bottom.png") 0px 0px no-repeat;
        font: 0px/0px sans-serif;
}

je reussit a afficher une infobulle sur ma 1ere note mais pas les autres. Par contre au passage de la souris sur ceux-ci la barre de défilement change comme si du texte était rajouté en fin de ma page php mais il me demeure invisible.
Merci de votre aide. si j'ai mal expliqué n'hésitez et demander moi des explications.

--------------------------------------------------------------------------
Edit:
En fait, le problème vient de la librairie tinyTips qui récupère la position des éléments span.MsoFootnoteReference avec la fonction offset.
Ce qui fait que la position de base de l'infobulle est calculée à partir de cette position (celle sur la page html) et comme mon iframe est plus grande que ma page php. Mes infobulles doivent apparaitre très bas sur ma page php.
Il faudrait donc trouver une astuce pour récupérer la position de la souris sur l'écran au survol de l'iframe.