Console.log ne fonctionne pas du tout
Un tas de code ne fonctionne pas et j'essaie d'identifier le problème mais console.log() n'enregistre aucun résultat dans Chrome Outils de développement, que je fais c'est correctement?
$(window).scroll(function() {
$('section').each(function(){
var id='#'+$(this).attr('id'),
off=$(id).offset().top,
hei=$(id).height(),
winscroll=$(window).scrollTop(),
dif=hei+off-($(window).height());
if (winscroll >= off && winscroll<=dif) {
console.log('first broken');
$(id+' .sticky').removeClass('abs').addClass('fix');
} else if (winscroll > dif){
console.log('second broken');
$(id+' .sticky').removeClass('fix').addClass('abs');
} else {
console.log('third broken');
$(id+' .sticky').removeClass('fix abs');
} });
});
MODIFIER LE CODE COMPLET AJOUTÉ
$(document).ready(function() {
// If a browser supports 3D transforms use the fancy menu if it doesn't, use standard accordion menu instead
if($('html').hasClass('csstransforms3d')){
$( "#mp-menu" ).removeClass( "snap-drawers" ).addClass( "mp-menu" );
$('nav ul li ul').css('border-bottom','1px solid rgba(255, 255, 255, .05)');
$('nav ul li ul').css('background','none');
// Insert elements where necessary to create the right structure
$('#mp-menu').wrapInner('<div class="mp-level" />');
$('#mp-menu').find('li > ul').wrap('<div class="mp-level" />');
$("#mp-menu ul li .mp-level").prepend(function () {
return '<span class="menu-title">' + $(this).prev().text() + '</span> <a class="ico mp-back" href="#">Back</a>';
});
// load in necessary JS files
$.getScript('http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/multi-level-menu.js');
} else {
// load in necessary JS files
$.getScript( "http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/jquery.navgoco.min.js", function() {
$("#demo1").navgoco({accordion: true});
});
$.getScript( "http://176.32.230.2/baodev.com/cjo/wp-content/themes/CJO/js/snap.min.js", function() {
// Snapper settings
var snapper = new Snap({
element: document.getElementById('scroller'),
disable: 'right',
maxPosition: 291
});
var addEvent = function addEvent(element, eventName, func) {
if (element.addEventListener) {
return element.addEventListener(eventName, func, false);
} else if (element.attachEvent) {
return element.attachEvent("on" + eventName, func);
}
};
// Toggle button
addEvent(document.getElementById('trigger'), 'click', function(){
if( snapper.state().state=="left" ){
snapper.close();
$( ".menu-trigger" ).removeClass( "active" );
} else {
snapper.open('left');
$( ".menu-trigger" ).addClass( "active" );
}
});
addEvent(document.getElementById('scroller'), 'click', function(){
if( snapper.state().state=="left" ){
$( ".menu-trigger" ).removeClass( "active" );
}
});
/* Prevent Safari opening links when viewing as a Mobile App */
(function (a, b, c) {
if(c in b && b[c]) {
var d, e = a.location,
f = /^(a|html)$/i;
a.addEventListener("click", function (a) {
d = a.target;
while(!f.test(d.nodeName)) d = d.parentNode;
"href" in d && (d.href.indexOf("http") || ~d.href.indexOf(e.Host)) && (a.preventDefault(), e.href = d.href)
}, !1)
}
})(document, window.navigator, "standalone");
});
} // end if
fitHeight();
$(window).scroll(function() {
$('section').each(function(){
var id='#'+$(this).attr('id'),
off=$(id).offset().top,
hei=$(id).height(),
winscroll=$(window).scrollTop(),
dif=hei+off-($(window).height());
console.log('msj');
if (winscroll >= off && winscroll<=dif) {
$(id+' .sticky').removeClass('abs').addClass('fix');
} else if (winscroll > dif){
$(id+' .sticky').removeClass('fix').addClass('abs');
} else {
$(id+' .sticky').removeClass('fix abs');
}
});
});
});
// Trigger FitHeight on browser resize
$(window).resize(fitHeight);
EDIT
Certains bits du code complet (ci-dessus) font référence à d'autres fichiers JS et le code ne renvoie aucune erreur lorsqu'il est exécuté avec ces fichiers présents. Après le dépannage, je vois le message de la console avant la fonction de défilement, mais je ne le vois pas dans la fonction de défilement.
fitHeight();
console.log('About to bind scroll effects'); // I SEE THIS MESSAGE
$(window).scroll(function() {
console.log("scroll bound, now loop through sections"); //BUT NOT THIS ONE
$('section').each(function(){
Je me sens un peu stupide à ce sujet, mais que cela soit une leçon pour tout le monde ... Assurez-vous de cibler le bon sélecteur!
Fondamentalement, la console n'enregistrait rien car cet extrait de code en particulier tentait de saisir la zone de défilement de ma fenêtre, alors qu'en fait, mon code était configuré différemment pour faire défiler un DIV entier à la place. Dès que j'ai changé:
$(window).scroll(function() {
pour ça:
$('#scroller').scroll(function() {
La console a commencé à enregistrer les messages corrects.
On dirait que vous avez soit masqué les journaux JavaScript, soit spécifié que vous souhaitez uniquement afficher les erreurs ou les avertissements. Ouvrez les outils de développement de Chrome et accédez à l'onglet Console. En bas, vous voulez vous assurer que JavaScript est coché et que vous avez bien sélectionné "Tous", "Journaux" ou "Débogage".
Dans l'image ci-dessus, javascript, réseau, journalisation, CSS et autres cochés et "Tous" sélectionnés.
Un autre problème potentiel pourrait être que votre fonction $(window).scroll() ne soit pas encapsulée dans une fonction .ready() (comme documenté ici ):
$(document).ready(function() {
$(window).scroll(function() {
...
});
});
Lorsque vous collez votre code dans JSFiddle et lui donnez un contenu factice, votre code fonctionne parfaitement: démonstration de JSFiddle .
Modifier:
La question a été modifiée. Le nouveau code donné génère deux erreurs:
Uncaught ReferenceError: fitHeight n'est pas défini. Uncaught TypeError: Impossible de lire la propriété 'addEventListener' de null.
De ce fait, le code arrête l'exécution avant d'atteindre tout appel console.log.
Dans mon cas, tous les messages de la console ne s'affichaient pas car j'avais laissé une chaîne dans la zone de texte "filter".
Supprimez le filtre en cliquant sur le X comme indiqué:
Dans mon cas, je développais un Polymer WebComponent, inclus avec <link rel="import"> dans le document HTML principal. Il s'avère que le fichier HTML WebComponent était mis en cache pour une raison quelconque, même si je l'avais modifié depuis la version mise en cache.
Pour le résoudre, j'ai ouvert la Console du développeur (sous Chrome), cliqué avec le bouton droit de la souris sur la flèche de rechargement située en regard de la barre d'adresse et sélectionné "Vider le cache et le rechargement à chaud" - le problème était résolu.
Envisager une approche plus pragmatique de la question "faire les choses correctement".
console.log("about to bind scroll fx");
$(window).scroll(function() {
console.log("scroll bound, loop through div's");
$('div').each(function(){
Si les deux logs sont correctement générés, il est probable que le problème existe dans votre déclaration var. Pour résoudre ce problème, envisagez de le diviser en plusieurs lignes:
var id='#'+$(this).attr('id');
console.log(id);
var off=$(id).offset().top;
var hei=$(id).height();
var winscroll=$(window).scrollTop();
var dif=hei+off-($(window).height());
En procédant ainsi, au moins pendant le débogage, vous constaterez que varid est indéfini, ce qui provoque des erreurs dans le reste du code. Est-il possible que certaines de vos balises div n'aient pas d'identifiant?