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.

[tigunn]

Je met en pièce jointe le html généré.

[SpaceFrog]

rappel: un iframe est une page à part ...
Les scripts de la page mère ne sont pas directement accessibles depuis la page fille.
Jette un oeil par là http://www.developpez.net/forums/d27...enetre-enfant/

[tigunn]

Merci de ta réponse et du lien instructif mais qui ne répond pas à ma question, il me semble (mais je peux me tromper, hélas [ou pas]).
Alors je réexplique (dans le doute):
sur ma page php, j'ai une fonction jquery qui à l'aide de la biblio jQuery.tinyTips me permet de créer une infobulle dans mon iframe (par dessus en fait):

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
	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();
 
					var offset = jQuery(this).offset();
					var top = offset.top;
					var left = offset.left;
					//alert(top+"  "+left);
 
					/*jQuery(this).click(function() {
						//var topi = document.documentElement.scrollTop;
						//var topi = jQuery(this).scrollTop();
						var topi = jQuery("#iframe_html").contents().scrollTop();
	                                        alert(topi);
 
					});*/
 
					// Le mieux que j'ai put obtenir pour l'instant: Gros Sigh !!!!!!!
					jQuery(this).tinyTips(debut_tips + note_sc + fin_tips, 200, left);
 
				}
			});
		});
	});

Ce code me permet bien d'afficher dans une infobulle le code html de la note de bas de page. Mais TinyTips calcule la position de l'infobulle ainsi:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// Offsets so that the tooltip is centered over the element it is being applied to but
			// raise it up above the element so it isn't covering it.
			var yOffset = tinyTip.height() + 17;
			var xOffset = (((tinyTip.width() - 10) / 2)) - ($(this).width() / 2);
 
			// Grab the coordinates for the element with the tooltip and make a new copy
			// so that we can keep the original un-touched.
			var pos = $(this).offset();
			var nPos = pos;
 
			// Add the offsets to the tooltip position
			nPos.top = pos.top - yOffset;
			nPos.left = pos.left - xOffset;

Ce qui retourne la position de l'élément sur la page (et non par rapport à l'écran), mais en l'occurrence il s'agit de la position dans l'iframe. Donc quant la hauteur de celle-ci dépasse la hauteur définit sur ma page php (ce qui est toujours le cas): les notes qui sont affichés (avant tout scroll) s'affiche bien (mais mal placée); mais celle pour lesquelles il faut scroller s'affiche (parfois) très-très bas sur ma page php.

Je voudrais savoir si il est possible de récupérer la position a l'écran de la souris quant elle passe sur une note de mon iframe. Toute solution même bidouillage sera étudié.
Merci de votre attention


-------
Après relecture je m'aperçois que le titre du post n'est pas des mieux choisit: il faudrait pouvoir le renommer : comment obtenir la position de la souris à l'écran ( != de la page) au dessus d'une iframe?

[tigunn]

Il semble impossible de réaliser cette tâche comme l'a remarqué la grenouille cosmonaute.
En ce qui concerne mon site, j'ai fixé en dur la position de mon infobulle. Elle apparait au-dessus de tout.