[DOM] Fenetre non popup affichant page html

Version imprimable

17/07/2008, 10h12
doudoustephane

[DOM] Fenetre non popup affichant page html

Bonjour.
Je cherche à afficher un page html dans un fenêtre sur rollover d'un texte.
Le problème, c'est que je ne veux pas que c'est fenêtre soit une popup mais plus comme un menu. Un exemple est disponible sur cette page (http://www.ae.com/web/international/...questid=194743) en mettant votre souris sur "My Bag" à droite et le reste du menu sur la même ligne.
Savez-vous comment faire ?
Ou connaissez-vous un gabarit/framework/librairie qui me permettent de faire cela ?
Merci d'avance
Cordialement
17/07/2008, 10h30
Auteur

bonjour,

la galerie CSS peut sans doute répondre à ton problème ?
17/07/2008, 10h31
SpaceFrog

window prototype ...
fais une recherche sur le forum ..
17/07/2008, 10h33
doudoustephane

Citation:

Envoyé par Auteur

bonjour,

la galerie CSS peut sans doute répondre à ton problème ?

Cela va en effet me convenir pour faire un menu, mais pas pour y intégrer une page web avec formulaire par exemple, à priori
Mais bon, je regardes quand meme si je ne pourrais pas l'adapter pour cela...
17/07/2008, 10h35
SpaceFrog

http://dcabasson.developpez.com/arti...ototype-1.4.0/
17/07/2008, 10h46
doudoustephane

Citation:

Envoyé par SpaceFrog

http://dcabasson.developpez.com/arti...ototype-1.4.0/

Oui, j'ai vu
Merci
Mais j'avoue que j'ai déjà regardé protoype et cela ne me semble pas très simple d'utilisation.
Mais je reprend avec ce lien d'aide voir...
17/07/2008, 11h02
doudoustephane

Citation:

Envoyé par Auteur

bonjour,

la galerie CSS peut sans doute répondre à ton problème ?

en fait, cela ne convient pas car leur menu, lorsqu'il s'ouvre, déplace le reste de la page, et ça, je ne le souhaite pas
je continue de regarder prototype
17/07/2008, 11h05
Bovino

Eventuellement, prototip, un plugin de prototype, pourra te donner une solution correspondant à ce que tu cherches.
17/07/2008, 11h09
SpaceFrog

joli en effet Beef !

ça existe en moins... cher
http://www.walterzorn.com/tooltip/to...e.htm#download
17/07/2008, 11h33
Bovino

Citation:

Envoyé par SpaceFrog

ça existe en moins... cher
http://www.walterzorn.com/tooltip/to...e.htm#download

Moins lourd aussi ! Pas besoin de charger prototype juste pour une infobulle ! :aie:
17/07/2008, 12h45
Auteur

Citation:

Envoyé par Bovino

Moins lourd aussi ! Pas besoin de charger prototype juste pour une infobulle ! :aie:

pour l'infobulle tu as toujours l'attribut tittle :aie: (pardon ? oui, d'accord je sors....).

Citation:

en fait, cela ne convient pas car leur menu, lorsqu'il s'ouvre, déplace le reste de la page, et ça, je ne le souhaite pas

C'est à dire ? Normalement ces menus ne bousculent pas le contenu de la page.
17/07/2008, 18h45
doudoustephane

Citation:

Envoyé par Auteur

C'est à dire ? Normalement ces menus ne bousculent pas le contenu de la page.

ben, j'ai fait un essai avec les exemples fournis dans la galerie css, et cela déplacer mon texte en fonction du menu que j'ouvrais...
17/07/2008, 19h19
Auteur

Montre nous ton code. Et quel menu as-tu utilisé ?
17/07/2008, 19h37
SpaceFrog

ça sent le z-index ça ...
18/07/2008, 08h02
Bovino

Tu insères probablement ton élément au mauvais endroit dans le DOM. D'où le déplacement du reste de la page...
18/07/2008, 19h04
doudoustephane

en fait, je parviens à faire ce que je veux avec prototype, ce qui résoud mon problème
mais il me reste deux points qui m'embete :
1) la taille verticale et horizontale sont pour le moment fixe alors que mon texte à afficher est variable.
je souhaite donc récupérer les dimensions de mon div afficher par prototype en javascript mais les solutions que j'ai essayé (style.height, offsetheight notamment) retourne toujours 0.
comment faire pour les récupérer svp ?
2) je souhaite que la fenêtre, que j'ouvre sur "onmouseover", se ferme sur "onmouseout" du texte (si elle n'est pas sur la fenêtre prototype bien sur).
le problème est que, si je mets une fonction de fermeture sur onmouseout, avec ou sans timer, la fenêtre se ferme et se rouvre sans arret.
J'espère être suffisamment clair.
A quel moment ou comment fermer la fenetre automatiquement donc, sans que l'utilisateur soit obliger de cliquer sur un bouton ou un lien "fermer" ?

merci d'avance
cordialement
18/07/2008, 21h23
Auteur

pour le 1)
- style.height retournera toujours 0 sauf si tu définis la valeur dans un script. Sinon c'est offsetHeight (c'est avec une majuscule)

pour le 2)
- ça c'est un problème au niveau de la propagation des événements dans les éléments imbriqués. Montre nous ton code HTML + CSS + JS (pas le PHP).

Citation:

Envoyé par Auteur

pour le 1)
- style.height retournera toujours 0 sauf si tu définis la valeur dans un script. Sinon c'est offsetHeight (c'est avec une majuscule)

pour le 2)
- ça c'est un problème au niveau de la propagation des événements dans les éléments imbriqués. Montre nous ton code HTML + CSS + JS (pas le PHP).

Merci de ta réponse.
Pour le "H" majuscule du offsetheight, c'est que je ne l'avais pas mis dans mon message mais il y était bien dans ma page web.
Pour le code, voici la partie qui nous concerne:

Code:

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
<link rel="stylesheet" type="text/css" href="includes/style.css"/>
<script type="text/javascript" src="includes/script/couleurs_text.js"></script>
<script type="text/javascript" src="includes/script/chiffres_lettres.js"></script>
<script type="text/javascript" src="includes/script/preload_image.js"></script>
<script type="text/javascript" src="includes/script/overlib/overlib.js"></script>
<script type="text/javascript" src="includes/script/prototype/prototype.js"></script>
<script type="text/javascript" src="includes/script/prototype/debug.js"></script>
<script type="text/javascript" src="includes/script/prototype/effects.js"></script>
<script type="text/javascript" src="includes/script/prototype/tooltip.js"></script>
<script type="text/javascript" src="includes/script/prototype/window.js"></script>
<script type="text/javascript" src="includes/script/prototype/window_effects.js"></script>
<script type="text/javascript" src="includes/script/prototype/window_ext.js"></script>
<!-- <script type="text/javascript" src="pieddepage.js"></script> --></head>
<script type="text/javascript">
	var win;
	window.body.onclik=close_menu;
	window.body.onMouseOver=close_menu;
	function open_menu()
	{
		win = new Window("win", {className: "dialog", zIndex: 100, showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff, destroyOnClose: true, showEffectOptions: {duration:0.5}});
		win.getContent().innerHTML= "<div class='menu'><a href=\'categories-8.php\' class=\'texte_menu\'>Compensées</a></div>";
		var position = findPos(document.getElementById('boutique_menu'));
		win.setLocation(position[1]+3, position[0]);
		win.show();
	}
 	function close_menu()
	{
		win.destroy();
  	}
	function findPos(obj) 
	{
		var curleft = curtop = 0;
		if (obj.offsetParent) 
		{
			curleft = obj.offsetLeft;
			curtop = obj.offsetTop;
			while (obj = obj.offsetParent) 
			{
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			}
		}
		return [curleft,curtop];
	}
</script>
<a href="index.php" id="boutique_menu" onMouseOver="open_menu();" class="navigation_violet">Boutique</a>

Merci

19/07/2008, 00h25
Auteur
Code:

window.body.onclik=close_menu;

- c'est onclick :) (manque un c)

Code:

window.body.onMouseOver=close_menu;

et
Code:

1 2 <a href="index.php" id="boutique_menu" onMouseOver="open_menu();" class="navigation_violet">
- pour le onmouseover il y a deux fonctions antagonistes : dans un cas tu ouvres le menu (sur la balise <a>) dans l'autre tu le fermes (quand la souris est dans le <body>).

Ce qu'il se passe : quand tu fais onmouseover sur la balise <a> tu appelles open_menu() et comme <a> est dans <body> tu appelles également la fonction définie dans le onmouseover de la balise <body> : tu fermes le menu (appel de close_menu()).
Mais comme ta souris est toujours sur la balise <a> au moment où le menu se ferme l'événement onmouseover de la balise <a> se déclenche à nouveau, le menu s'affiche, etc., etc.
:fleche: ton menu clignote :aie:

Essaye d'appeler la fonction sur l'événement onmouseout() dans la balise <a> et supprime cette ligne de code :

Code:

window.body.onMouseOver=close_menu;

Sinon il faudrait voir si tu ne peux pas court-circuiter l'événement onmouseover de la balise <body> quand il se produit sur la balise <a>.
19/07/2008, 00h51
doudoustephane

Citation:

Envoyé par Auteur

Code:

window.body.onclik=close_menu;

- c'est onclick :) (manque un c)

Ok, merci, faute de frappe et d'inatention

Citation:

Envoyé par Auteur

Code:

window.body.onMouseOver=close_menu;

et
Code html :

<a href="index.php" id="boutique_menu" onMouseOver="open_menu();" class="navigation_violet">

- pour le onmouseover il y a deux fonctions antagonistes : dans un cas tu ouvres le menu (sur la balise <a>) dans l'autre tu le fermes (quand la souris est dans le <body>).

Ce qu'il se passe : quand tu fais onmouseover sur la balise <a> tu appelles open_menu() et comme <a> est dans <body> tu appelles également la fonction définie dans le onmouseover de la balise <body> : tu fermes le menu (appel de close_menu()).
Mais comme ta souris est toujours sur la balise <a> au moment où le menu se ferme l'événement onmouseover de la balise <a> se déclenche à nouveau, le menu s'affiche, etc., etc.
:fleche: ton menu clignote :aie:

Essaye d'appeler la fonction sur l'événement onmouseout() dans la balise <a> et supprime cette ligne de code :

Code:

window.body.onMouseOver=close_menu;

Sinon il faudrait voir si tu ne peux pas court-circuiter l'événement onmouseover de la balise <body> quand il se produit sur la balise <a>.

Oui, mais pour le body, je ne sais pas si j'y ai vraiment accès vu que ma page est rempli de partout par des div et table. A priori, non.
Sinon, j'ai essayé le onmouseout sans la fermeture sur le body, et le menu continu de clignoter également...:lol:
Merci de ton aide