Discussion :

[Osef_]

Bonjour amis développeurs,

Débutant en JS, je commence juste à faire mes premiers scripts jQuery.

A priori, ce que je fais marche à merveille. Je dis bien à priori car je me rends compte que lorsque je réduis la taille de la fenêtre, plus rien ne va.
J'ai par exemple sur une page d'accueil deux scripts. Un qui fait apparaître une popup au survol d'un titre :

Code JS :

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
$(document).ready(function AfficherCacherStratégie()
	{
  $('#p-stratégie').css('opacity','0');
  $('#h4-stratégie').hover(
    function(){$('#p-stratégie').animate({top:'410px',opacity:1},400);},
    function(){$('#p-stratégie').animate({top:'390px',opacity:0},200);}
    );
  });
 
$(document).ready(function AfficherCacherCommunication()
	{
  $('#p-communication').css('opacity','0');
  $('#h4-communication').hover(
    function(){$('#p-communication').animate({top:'410px',opacity:1},400);},
    function(){$('#p-communication').animate({top:'390px',opacity:0},200);}
    );
  });
 
$(document).ready(function AfficherCacherInternet()
	{
   $('#p-internet').css('opacity','0');
  $('#h4-internet').hover(
    function(){$('#p-internet').animate({top:'410px',opacity:1},400);},
    function(){$('#p-internet').animate({top:'390px',opacity:0},200);}
    );
  });

et un autre qui rajoute un petit box shadow autours de ce titre au survol:

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
 
  $('.activ-div > h4').hover(
    function(){$(this).animate({boxShadow:'0 0 25px #A0A0A0'},400)},
    function(){$(this).animate({boxShadow:'0 0 0px'})}
  );
 
  $('.lienhover1').hover(
    function(){$(this).animate({boxShadow:'0 0 15px #A0A0A0'})},
    function(){$(this).animate({boxShadow:'0 0 0px'})}
    );
});

Que fais je de mal ? Le site est en ligne ICI

[SpaceFrog]

essaye avec des positions en %


et accessoirement factorise tes document ready

[Osef_]

Oui c'était logique de penser aux %, j'aurais du y penser. Mais après test, j'ai toujours le même problème. Peut être est ce du au titre du dessus qui va à la ligne. Je vais voir si je peux bloquer ça en CSS...