Mes scripts ne marchent que dans ma résolution
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:
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:
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
