Compatibilité de deux scripts
Bonjour,
je suis en train de monté mon site internet.
j'ai un menu.js (pour le responsive de mon site) et un scroll.js (pour le defillement dans la page).
Indépendamment l'un de l'autre les 2 codes fonctionnes mais dès que j'appel les 2 sur une même page mon menu.js ne fonctionne plus.
mon menu.js
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| var ww = document.body.clientWidth;
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
} |
et mon scroll.js
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
27
| $(document).ready(function(){
$('a[href^=#]').click(function(){
cible=$(this).attr('href');
if($(cible).length>=1){
hauteur=$(cible).offset().top;
}
else{
hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
}
$('html,body').animate({scrollTop:hauteur},1000,'easeOutQuint');
return false;
});
});
$(function(){
$('#btn_up').click(function() {
$('html,body').animate({scrollTop: 0}, 'slow');
});
$(window).scroll(function(){
if($(window).scrollTop()<600){
$('#btn_up').fadeOut();
}else{
$('#btn_up').fadeIn();
}
});
}); |
Savez vous comment je peu faire cohabiter ces 2 scriptes ?
