Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

A bunch of code isn't working and I'm trying to identify where the problem lies but console.log() isn't logging any results in Chrome Dev tools, am I doing it correctly?

$(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');
            }   });
        });

EDIT FULL CODE ADDED

$(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

Some bits of the full code (above) refer to other JS files and code returns no errors when run with these files present. After troubleshooting I see the console message before the scroll function but I do not see the console message within the scroll function.

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(){
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
160 views
Welcome To Ask or Share your Answers For Others

1 Answer

Sounds like you've either hidden JavaScript logs or specified that you only want to see Errors or Warnings. Open Chrome's Developer Tools and go to the Console tab. At the bottom you want to ensure that JavaScript is ticked and also ensure that you have "All", "Logs" or "Debug" selected.

Example Screenshot

In the image above I have JavaScript, Network, Logging, CSS and Other ticked and "All" selected.


Another potential problem could be that your $(window).scroll() function isn't wrapped within a .ready() function (as documented here):

$(document).ready(function() {
    $(window).scroll(function() {
        ...
    });
});

When pasting your code into JSFiddle and giving some dummy content, your code works perfectly fine: JSFiddle demo.


Edit:

The question was edited. The new code given throws two errors:

Uncaught ReferenceError: fitHeight is not defined Uncaught TypeError: Cannot read property 'addEventListener' of null

Because of this, the code stops execution prior to reaching any console.log call.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share

548k questions

547k answers

4 comments

86.3k users

...