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 :

Bug : Mon contenu actionne onmouseout :(


Sujet :

JavaScript

  1. #21
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    169
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 169
    Points : 34
    Points
    34
    Par défaut
    Voila mon code qui fonctionne.

    Si vous y voyez une erreur n'hésitez pas.
    Il ne me reste plus qu'a faire la déco pour les différentes version de css.

    Une fois la déco et le remplissage terminé, je le laisserai peu être toujours accessible en haut de page .Tout dépendra de la place qu'il prendre quand il est fermé.

    Merci à tous.

    Mon code fonctionnel : (même si bordelique.
    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
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    <div id="div_menu" class='bulle_deco menu_header' style="top:-10px; left:-480px; width:500px; height:120px; padding:10px; border:solid; border-width:1; " onmouseover="javascript:menu('over',1)" onmouseout="javascript:menu_out('out',1)">
    <table width="100%" border="1px">
    <tr><td align="right"><div class="menu_normalize"><b>&nbsp;MENU</b>&nbsp;</div>
    <hr /><div class="menu_normalize">
    <img src = '{PHPBB_ROOT_PATH}mes_images/header/texte0.png' onclick="javascript:zoom(109);"/>
     
    <img src = '{PHPBB_ROOT_PATH}mes_images/header/texte1.png' onclick="javascript:zoom(107);"/></div>
    </td></tr></table>
     
     
    </div>
    <script type="text/javascript">
     
    // MENU MOBILE
    var menu_max_left	= -55;
    var	menu_min_left	= -480;
    var bound			= 0; // N° du rebound en cours et effectué
    var menu_pos		= ''; // position actuelle du menu
    var user_action 	= 0; // 0 = actionné par la fonction ; 1 = actionné par l'utilisateur
    var menu_running	= 0; // 0 = inacitf ; over = ouverture ; out = fermeture 
    var menu_status		= 0; // 0 = fermé ; 1 = ouvert 
    var speed 			= 8; // vitesse 
    var bound_speed		= 1; // Vitesse des rebonds, le 1er est 3x cette vitesse
    var bound_running	= 0; // ne pas toucher
    var bound_action	= 0; // ne pas toucher
    var bound_of		= 0; // ne pas toucher
    var bound_length	= 12; // taille des debonds, le 1er est 3x cette distance 
    var bound_next 		= action; // ne pas toucher
    var t;
    var action 			='';
    var user_action		='';
    var done 			='out';
     
    // pour eviter les bug lors du passage souris sur elements contenus.
    function menu_out(action,user_action)
    	{
    	if	((user_action == 1) && (menu_running == 'out') && (action == 'out')) 
    			{return;}
     
    	else if	((user_action == 1) && (menu_running == 'over') && (action == 'out')) 
    			{
    			clearTimeout(t);
    			menu_running = 'out';
       		    t = setTimeout("menu('out',0)",1);
    			}
     
    	else	{t = setTimeout("menu('out',1)",100);}
    	}
     
    function menu(action,user_action)
    	{
    	bound_next		= action;
    	bound_of		= bound_length * bound_running;
     
    // (action) => action de la souris : over ? out ?
    // (user_action) => action demandée par l'utilisateur : 0 = non ; 1 = oui
    // (menu_runninng) => action déjà en cours ? si oui laquelle : over ; out ; sinon 0
     
    	menu_pos = (document.getElementById('div_menu').style.left).replace('px', '');
    	menu_pos = 1*(menu_pos);
     
    // Empèche la cumulation d'une même action.
    	if		((user_action == 1) && (menu_running == 'over') && (action == 'over')) 
    			{return;}
     
    // Inversement de l'action si demandée par l'utilisateur
    	else if	((user_action == 1) && (menu_running == 'out') && (action == 'over')) 
    			{
    			clearTimeout(t);
    			menu_running = 'over';
       		    t = setTimeout("menu('over',0)",1);
    			}
     
    // Gestion des rebonds over
    	else if		(( (action == 'bound_over_1') || (action == 'bound_over_3') ) && (done != 'done') )
    				{
    				bound_running	= action.substr(11,12);
    				bound_action	= action.substr(6,10);
     
    				if (menu_pos > (menu_max_left - bound_of))
    					{
    					menu_pos -= bound_speed * bound_running;
    					document.getElementById('div_menu').style.left = menu_pos+'px';
    					clearTimeout(t);
    	    		    t = setTimeout("menu(bound_next,0)",1);
    					}
    				else
    					{
    					bound = bound_running;
    					clearTimeout(t);
    	    		    t = setTimeout("menu('over',0)",1);
    					}
    				}
     
    // Gestion des rebonds out
    	else if		( (action == 'bound_out_1') || (action == 'bound_out_3') && (done != 'done') )
    				{					
    				bound_running	= action.substr(10,11);
    				bound_action	= action.substr(6,9);
     
    				if (menu_pos < (menu_min_left + bound_of))
    					{
    					menu_pos += bound_speed * bound_running;
    					document.getElementById('div_menu').style.left = menu_pos+'px';
    					clearTimeout(t);
    	    		    t = setTimeout("menu(bound_next,0)",1);
    					}
    				else
    					{
    					bound = bound_running;
    					clearTimeout(t);
    	    		    t = setTimeout("menu('out',0)",1);
    					}
    				}
     
     
     
    // Si action over est demandée et aucune action en cours
    	else if	(action == 'over') 
    			{
     
    			// pour eviter les bug lors du passage souris sur elements contenus.
    			if (done == 'over')  {clearTimeout(t); return; }
    			done = '';
     
    			// Progression de l'action
    			if (menu_pos < menu_max_left)
    				{
    				menu_pos += speed;
    				document.getElementById('div_menu').style.left = menu_pos+'px';
    				clearTimeout(t);
       		    	t = setTimeout("menu('over',0)",1);
    				menu_running = 'over';
    				}
     
    			// Si l'action atteint son objectif
    			else if (menu_pos >= menu_max_left)
    				{
    				if (bound == 0) 
    					{
    					clearTimeout(t);
    					t = setTimeout("menu('bound_over_3',0)",1);
    					}
    				else if (bound == 3) 
    					{
    					clearTimeout(t);
    					t = setTimeout("menu('bound_over_1',0)",1);
    					}
    				else 
    					{ 
    					clearTimeout(t);
    					menu_running = 0;
    					bound = 0;
    					done = 'over';
    					}
    				}
    			}
     
    // Si action out est demandée et aucune action en cours
    	else if	(action == 'out')
    			{
    			// pour eviter les bug lors du passage souris sur elements contenus.
    			done = '';
     
    			// Progression de l'action if onmouseout
    			if (menu_pos > menu_min_left)
    				{
    				menu_pos -= speed;
    				document.getElementById('div_menu').style.left = menu_pos+'px';
    				clearTimeout(t);
        		    t = setTimeout("menu('out',0)",1);
    				menu_running = 'out';
    				}
     
    			// Si l'action atteint son objectif
    			else if (menu_pos <= menu_min_left)
    				{
    				if (bound == 0)
    					{
    					clearTimeout(t);
    					t = setTimeout("menu('bound_out_3',0)",1);
    					}
    				else if (bound == 3)
    					{
    					clearTimeout(t);
    					t = setTimeout("menu('bound_out_1',0)",1);
    					}
    				else 
    					{
    					clearTimeout(t);
    					menu_running = 0;
    					bound = 0;
    					done = 'out';
    					}
    				}
    			}		
     
    	}
     
     
    </script>
    Et mon css
    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
    .bulle_deco{
    background-image		: -moz-linear-gradient(-65deg, #e7e9ef 18%, #FFFFFF);
    background-image		: -webkit-gradient(linear, left top, right bottom, color-stop(0.18, #e7e9ef), color-stop(1.0, #e7e9ef));
    -webkit-border-radius	: 14px;
    -moz-border-radius		: 14px;
    border-radius			: 14px; 
    -webkit-box-shadow		: 8px 8px 12x #aaa;
    -moz-box-shadow			: 8px 8px 12px #aaa;
    box-shadow				: 8px 8px 12px #aaa; 
    border					: 0px solid #000000;
    outline					: 0px solid #000000;
    vertical-align			: middle; 
    }
     
     
    .menu_header{
    -webkit-transform	: skew(-35deg);
    -moz-transform		: skew(-35deg);
    -o-transform		: skew(-35deg);
    vertical-align		: bottom; 
    width				: 200px;
    padding-left		: 10px;
    padding-right		: 10px;
    position			: absolute;
    }
     
    .menu_normalize{
    -webkit-transform	: skew(35deg);
    -moz-transform		: skew(35deg);
    -o-transform		: skew(35deg);
    }

  2. #22
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    169
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 169
    Points : 34
    Points
    34
    Par défaut
    J'ai édité mon code ce matin, il manquer un ajustement sur d’inversement du mouvement pendant un défilement. Je pense ne rien avoir oublié ce coup-ci.
    Et pour un noob je trouve que c'est pas du mauvais travail

  3. #23
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Points : 6 755
    Points
    6 755
    Par défaut
    C'est peut-être parce que tu n'es plus un noob
    Au fait, si tu veux faire du CSS3, tu oublies Opera et MSIE. Tu connais CSS3 Please ? Il est pas forcément complet, mais il est pratique

    Forme toi avec les cours et tutoriels CSS.

  4. #24
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    169
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 169
    Points : 34
    Points
    34
    Par défaut
    Je vais regarder

    Je connais juste ca
    http://css3.mikeplate.com/

    COté IE et opréa on m'a déjà conseillé une astuce, mettre un code CSS2 juste avant le CSS3 pour servir de code de secours si le code CSS3 ne passe pas.

    C'est pas trop mal même s'il y une faille dans son systeme.

    Bonne journée

Discussions similaires

  1. La barre de défilement décale mon contenu!
    Par Isotrope2 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 12/09/2010, 22h26
  2. BUG IE,contenu décallé
    Par libuma dans le forum Mise en page CSS
    Réponses: 14
    Dernier message: 27/11/2008, 13h25
  3. Décalage de mon contenu
    Par Topheur dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 04/05/2007, 10h06
  4. IE7 bug mon pc
    Par lynda skywing dans le forum IE
    Réponses: 8
    Dernier message: 12/03/2007, 17h30
  5. [JTable] Cellule editable qui efface mon contenu
    Par Zanton dans le forum Composants
    Réponses: 4
    Dernier message: 01/06/2006, 12h34

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