IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[JAVASCRIPT][MENU CONTEXTUEL] affichage


Sujet :

JavaScript

  1. #1
    Membre chevronn� Avatar de mathieugamin
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    572
    D�tails du profil
    Informations personnelles :
    �ge : 45
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 572
    Par d�faut [JAVASCRIPT][MENU CONTEXTUEL] affichage
    Bonjour,
    J'ai un menu contextuel fait en JS et faisant appel � une librairie.

    Quand je click-droit sur un �l�ment sp�cifique, ce menu se d�veloppe, prenant la place du menu contectuel du navigateur.

    Le probl�me est que depuis que j'ai install� un menu de navigation CSS, lorsque je fait appara�tre mon menu contextuel sur certains �l�ments, cela masque 75% de la page en blanc...

    Quelqu'un connait-il une solution?

    Voici le code du menu :
    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
     
    <script language="javascript">
     
    function menuA(){
    				return new Menu_Contextuel(
    					[
    					{
    						'ItemName': 'Modify',
    						'Action': 'document.location.href=\'mod_products.php?ref=XXXXXX\'',
    						'Image': {'url':'../images/image.gif', 'position':'left'}
    					}
    					]
    					,
    					{
    						'focusOn':{'background':'#316AC5', 'color':'#FFFFFF'},
    						'focusOff':{'background':'#ffffff', 'color':'#000000'},
    						'menu_color':{'background':'#ffffff', 'shadow':'#9D9DA1'},
    						'separator':{'size':'1', 'color':''},
    						'shadow_padding':'2'
    					}
    				   );
    			}
    </script>
    Et la biblioth�que...
    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
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
     
    var Class = {
    				create: function() 
    						{
    							return function() 
    								   {
    										this.initialize.apply(this, arguments);
    								   }
    						}
    			}
     
    Function.prototype.bind = function(object) 
    						  {
    							var __method = this;
    							return function() 
    								   {
    										return __method.apply(object, arguments);
    								   }
    						  }
     
    var Menu_Contextuel = Class.create();
    Menu_Contextuel.prototype = 
    {
     
    			initialize : function (itemArray,options)
    						 {
     
    							this.items = itemArray;
     
     
    							this.menu_style = 'z-index:500;'+
    											  'position:absolute;'+
    											  'width:200px;'+
    											  'border:1px solid '+options.menu_color.shadow+';'+
    											  'background-color:'+options.menu_color.background+';'+
    											  'font-family:Tahoma;'+
    											  'font-size:11px;'+
    											  'cursor:default;'+
    											  'visibility:hidden;'+
    											  'padding:3;';
     
    							this.shadow_style = 'z-index:400;'+
    												'position:absolute;'+
    												'width:200px;'+
    												'border:1px solid '+options.menu_color.shadow+';'+
    												'background-color:'+options.menu_color.shadow+';'+
    												'font-family:Tahoma;'+
    												'font-size:11px;'+
    												'color:'+options.menu_color.shadow+';'+
    												'cursor:default;'+
    												'visibility:hidden;'+
    												'padding:3;';
     
    							this.focusOn_style = 'background:'+options.focusOn.background+';'+
    												 'color:'+options.focusOn.color+';';
     
    							this.focusOff_style = 'background:'+options.focusOff.background+';'+
    												  'color:'+options.focusOff.color+';';
     
    							this.separator_style = 'size='+options.separator.size+' '+
    												   'color='+options.separator.color+' ';
     
    							this.shadow_padding = options.shadow_padding;
     
     
    							this.create_html(); 
    							this.set_listener();
    						 }
    			,
     
    			mousePositionCapture: function(e)
    								  {
    									var event = typeof window.event != 'undefined' ? window.event : e;
    									var Xfen, Xdoc, Yfen, Ydoc, el;
    									Xfen = event.clientX;
    									Xdoc = Xfen + document.body.scrollLeft;
    									Yfen = event.clientY;
    									Ydoc = Yfen + document.body.scrollTop;
     
    									this.mouse_x = Xdoc;
    									this.mouse_y = Ydoc;
    								  }
    			,
     
    			open: function()
    				  {
    					document.getElementById("menu_contextuel_div").style.top = this.mouse_y;
    					document.getElementById("menu_contextuel_div").style.left = this.mouse_x;
    					document.getElementById("menu_contextuel_shadow_div").style.top = this.mouse_y+parseInt(this.shadow_padding);
    					document.getElementById("menu_contextuel_shadow_div").style.left = this.mouse_x+parseInt(this.shadow_padding);
    					document.getElementById("menu_contextuel_div").style.visibility = "visible";
    					document.getElementById("menu_contextuel_shadow_div").style.visibility = "visible";
    					return false;
    				  }
    			,
     
    			close: function()
    				   {
    					document.getElementById("menu_contextuel_div").style.top = 0;
    					document.getElementById("menu_contextuel_div").style.left = 0;
    					document.getElementById("menu_contextuel_shadow_div").style.top = 0;
    					document.getElementById("menu_contextuel_shadow_div").style.left = 0;
    					document.getElementById("menu_contextuel_div").style.visibility = "hidden";
    					document.getElementById("menu_contextuel_shadow_div").style.visibility = "hidden";
    				   }
    			,
     
    			create_html: function()
    						 {
     
    							var html_code_ombre = '<div id="menu_contextuel_shadow_div" style="'+this.shadow_style+'">';
    							var html_code_item = '';
    							var background_focusOn = this.focusOn_style.split(';')[0].split(':')[1];
    							var background_focusOff = this.focusOff_style.split(';')[0].split(':')[1];
    							var color_focusOn = this.focusOn_style.split(';')[1].split(':')[1];
    							var color_focusOff = this.focusOff_style.split(';')[1].split(':')[1];
     
    							for(var i=0;i<this.items.length;i++)
    							{
    								if (this.items[i].ItemName != null)
    								{
    									var imageLeft = this.items[i].Image == null ?
    																''
    																:
    																(
    																	this.items[i].Image.position == 'right' ?
    																							''
    																							:
    																							'<img valign=bottom style="position:absolute;left:1px;" src="'+this.items[i].Image.url+'" height="15" width="15">'
    																);
    									var imageRight = this.items[i].Image == null ?
    																''
    																:
    																(
    																	this.items[i].Image.position == 'left' ?
    																							''
    																							:
    																							'<img valign=bottom style="position:absolute;right:1px;" src="'+this.items[i].Image.url+'" height="15" width="15">'
    																);
    									html_code_item += '<div style="padding-left:15px;padding-right:7px;'+this.focusOff_style+'" onClick="document.onclick();'+this.items[i].Action+'" onMouseOver="this.style.background=\''+background_focusOn+'\';this.style.color=\''+color_focusOn+'\';" onMouseOut="this.style.background=\''+background_focusOff+'\';this.style.color=\''+color_focusOff+'\';">'+imageLeft+this.items[i].ItemName+imageRight+'</div>';
    									html_code_ombre += '<div style="padding-left:15px;padding-right:7px;">&nbsp;</div>';
    								}
    								else
    								{
    									html_code_item += '<hr '+this.separator_style+'>';
    									html_code_ombre += '<hr '+this.separator_style+'>';
    								}
    							}
    							html_code_item += '</div>';
     
    							if (document.getElementById('menu_contextuel_div'))
    							{
    								document.documentElement.lastChild.removeChild(document.getElementById('menu_contextuel_div'));
    								document.documentElement.lastChild.removeChild(document.getElementById('menu_contextuel_shadow_div'));
    							}
     
    							document.documentElement.lastChild.innerHTML += '<div id="menu_contextuel_div" style="'+this.menu_style+'">'+html_code_item+html_code_ombre+'</div>';
    						 }
    			,
     
    			set_listener: function()
    						  {
    							document.onmousemove = this.mousePositionCapture.bind(this);
    							document.oncontextmenu = this.open.bind(this);
     
     
     
    							var oldOnClick = document.onclick;
    							var addedFunc = this.close.bind(this);
    							if (typeof (document.onclick) != 'function') document.onclick = addedFunc;
    							else 
    							{
    								document.onclick = function(e)
    												   {
    													oldOnClick(e);
    													addedFunc(e);
    												   }
    							}
    						  }
    };
    Je pense que c'est une interpr�tation du background du menu, mais lorsque le menu est d�sactiv�, la page reste cach�e...

    PS : Ce n'est pas moi qui aie d�velopp� ce menu et la biblioth�que associ�e, merci � The Rubik's Man.

  2. #2
    Membre chevronn� Avatar de mathieugamin
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    572
    D�tails du profil
    Informations personnelles :
    �ge : 45
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 572
    Par d�faut
    Quelqu'un a une id�e?

    Est-ce que �a peut �tre li� � une update du syst�me d'exploitation (M$ Win XP)?

    Il y avait des hacks dans le code CSS, mais m�me en changeant pour un menu sans hacks, je retrouve le probl�me...

    Tout �a c'est li� � IE (sous FF je n'ai pas ce probl�me)... connaissez-vous un moyen de corriger le probl�me?

    Quelqu'un a-t-il d�j� eu le cas?

    Merci

  3. #3
    Membre chevronn� Avatar de mathieugamin
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    572
    D�tails du profil
    Informations personnelles :
    �ge : 45
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 572
    Par d�faut
    J'ai finalement trouv� la solution... bien entendu propre � IE, pour changer !

    En fait c'est le z-index de la div utilis�e par le menu qui flanche tout dans IE, mais pas dans FF (�trange, non? )

    Enfin donc voil�, il suffisait de le retirer ce z-index...

    Merci � ceux qui ont cherch� !

+ R�pondre � la discussion
Cette discussion est r�solue.

Discussions similaires

  1. Interdire l'affichage du menu contextuel par d�faut
    Par beegees dans le forum G�n�ral JavaScript
    R�ponses: 0
    Dernier message: 11/07/2009, 16h44
  2. R�ponses: 7
    Dernier message: 30/05/2009, 23h43
  3. Affichage d'�l�ments d'un menu contextuel
    Par jeanvalery dans le forum Windows
    R�ponses: 1
    Dernier message: 08/04/2008, 18h57
  4. R�ponses: 4
    Dernier message: 25/01/2008, 12h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo