Discussion :

[venomelektro]

Hello,

question un peu tricky sur une méthode pour faire quelque chose d assez simple sur le papier mais que je galère a intégrer

(AJAX/mootools/PHP inside)

voila , je dois intégrer une charte graphique un peu pointue pour un site avec arrondis et dégradé a gogo.

Sur les pages, j ai des sous menus qui chargent des pages en ajax

chaque élément de sous menu est un div avec une partie gauche (arrondi graphique, une partie centrale : couleur de fond et lien) , et une partie droite (arrondi graphique)

le tout contient biensur un joyeux rollover qui change les classes CSS des trois parties on the fly.

je simplifie volontairement mon code, je cherche une piste car qq chose m échappe dans le methodologie

Code :

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

1
2
3
4
5
6
 
	<div id="menu_block_1" onmouseover="javascript:MakeCornerOver('monelement');" onmouseout="javascript:MakeCornerOut('monelement');" class="menu_block">
		<div class="cornerleftpro" id="left_monelement"></div>
		<div class="center_menu" id="menu_c_monelement"><a href="javascript:ShowProfile('monelement')" id="menu_link_{$ajax_link}">Mon lien</a></div>
		<div class="cornerrightpro" id="right_monelement"></div>
	</div>

le js

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
 
function MakeCornerOver(id) {
				$('left_' + id ).className='cornerleftpro_over';
				$('right_' + id ).className='cornerrightpro_over';
				$('menu_c_' + id).className='center_menu_over';
 
			}
 
			function MakeCornerOut(id) {
				$('left_' + id ).className='cornerleftpro';
				$('right_' + id ).className='cornerrightpro';
				$('menu_c_' + id).className = 'center_menu';
 
			}
 
			function SetActivePage(id) {
				$('left_' + id).className  = 'cornerleftpro_active';
				$('right_' + id).className = 'cornerrightpro_active';
				$('menu_c_' + id).className = 'center_menu_active';
 
				$('menu_block_' + id).onmouseover = null;
				$('menu_block_' + id).onmouseout = null;
				$('menu_link_' + id).href = 'javascript:;';
 
			}
			function UnSetActivePage(id) {
				$('left_' + id).className  = 'cornerleftpro';
				$('right_' + id).className = 'cornerrightpro';
				$('menu_c_' + id).className = 'center_menu';
 
				$('menu_block_' + id).onmouseover = ????
				$('menu_block_' + id).onmouseout = ???;
				$('menu_link_' + id).href = 'javascript:ShowProfile( "' + id + '");';
 
			}

alors , la ou c est chaud, c est que quand on clique sur un element du menu, la page devient "active" et du coup plus de lien (pas cliquable) , et les rollover s en vont.
jusque la , tout va bien

par contre j ai du détuire mes callback sur onmouseover et onmouseout pour faire ca, comme ceci

Code :

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

1
2
3
 
$('menu_block_' + id).onmouseover = null;
$('menu_block_' + id).onmouseout = null;

la difficulté , comme le tour est en ajax, et de restaurer les onmouseover , onmouseout apres coup (les ??? dans mon code plus haut)

j ai bien essayé

Code :

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

1
2
 
$('menu_block_' + id).onmouseover = MakeCornerOver(id);

mais on dirais que Javascript cherche a placer id alors que c est une variable locale, du coup je me retrouve avec une erreur id est indéfini

j ai ensuite essayer divers eval , sans arriver a rien de concluant.

je serais assez embeté de faire une fonction par elements de menu vu le nombre de sous menu, mais faute de mieux si je trouve rien d ici demain , je vais faire ca , meme si je trouve ca nul

toute idée / suggestion est donc la bienvenue

Merci d avance

[venomelektro]

Hello,

je reviens a la charge, n ayant pas trouvé la réponse a mon problème

personne n a d idée ?


ps : un modérateur a déplacé mon message dans le sous forum mootools mais mon probleme n est pas vraiment un problème mootools mais plutot un problème javascript de base.

[venomelektro]

hum je pensais pas le problème si dur


en tous cas pour ceux que ca intéresse, j ai ciblé le problème

si je veux réactiver les rollover apres les avoir forcer a null

Code :

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

1
2
3
4
 
 
$(id).onmouseover = MakeCornerOver('MyVideos');
$(id).onmouseout  = MakeCornerOut('MyVideos');

ne fonctionne pas

mais

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
function RestoreVideosCornerOver(){
 MakeCornerOver('MyVideos');
}
 
function RestoreVideosCornerOut(){
 MakeCornerOut('MyVideos');
}
$(id).onmouseover = RestoreVideosCornerOver
$(id).onmouseout  = RestoreVideosCornerOut;

fonctionne


le bug vient donc du fait que javascript ne sait pas passer dynamiquement un parametre a la fonction qu on définit sur les evenements mouseover et mouseout, a moins bienentendu, que l on ai définit ces evenement dans les elements html eux meme

Je repose donc ma question :

y a t il un moyen de contourner cela ?

Car ca va me faire bcp de helper fonctions a faire la

Merci d avance à ceux qui voudront apporter quelque element a ce (mono/dia)logue