0

I made two functions for a site with jQuery. It's a fixed header and a smooth scroll. Widely used and well documented. For the fixed header I first stored the most basic stuff in variables and then the function itself to execute it afterwards.

JavaScript (jQuery)

The following parts are wrapped inside $(window).load() 
var win = $(window),
    doc = $(document),
    sec = $('section'),
    nav = $('nav'),
    anc = $('nav a'),
    pos = nav.offset().top,
    arr = sec.map(function() { // Fill array with top offsets from section
                return $(this).offset().top;
          }).get(),
    act = function() { // Make function to add/remove active class
                var t = win.scrollTop();
                t > pos ? nav.addClass('sticky')
                : nav.removeClass('sticky'),
                $.each(arr, function(i, val) {
                    (t >= val && t < (val + sec.eq(i).outerHeight(true))) ? anc.eq(i-1).addClass('wow')
                    : anc.eq(i-1).removeClass('wow')
                })
          }; // Variables end
win.scroll(act) // Execute sticky function

For the smooth scroll I used this very compact solution by Joseph Silber which is executed after the above portion.

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 800);
    return false;
});



HTML (Jade)

body.preload

    section#id1
        h1 someHeadline
        nav
            a(href='#id1') linkName
            a(href='#id2') linkName
            ...

    section#id2
        moreContent

    section#id3
        evenMoreContent

    ...



THE ISSUE

Actually,...when I fiddle this, there is no issue at all...It behaves just like I want it to. And actually this has worked perfectly fine for me about a week ago.
But:
Since yesterday, when working locally, weird things happen:
  • The 'act' function won't get executed in any browser on my system.
  • The smooth scroll function won't fire in Chrome or Safari. (I suppose that's gotta do with the 'act' function not being executed).
  • jQuery itself works fine, as I do have a .removeClass executed first, which works (see fiddle), and I also tried to debug only appending some random class to all divs, which worked w/o issues.
  • There is no console error.

I double and triple checked spelling and typos in the .jade file, the compiled .html file, the source code, and compared it with my fiddle back and forth. The code is identical...


Some more details about my setup:

  • CodeKit 2.1.1 for compiling (compiles ok)
  • HTML written in Jade (compiles ok)
  • JavaScript wrapped in $(window).load() at bottom of page
  • localhost set up on OSX 10.9.4
  • Tested in Chrome 36, Safari 7, FF 31 and Opera 23
  • Tested the fiddle on my virtual machine w/ Windows 7 and IE 11, which was ok
  • Tested the page as standalone on my virtual machine w/ Windows 7 and IE 11, which was not ok (same as above)

This is driving me nuts. I know it's hard to tell what's happening on other people's localhosts but I hope some of you have an idea on what it could be. If you want more details please tell me and I'll try to complete them asap. Thank you.

Community
  • 1
  • 1
Marian
  • 1,352
  • 4
  • 15
  • 28
  • Well have you tried adding some `console.log()` calls to verify that (for example) "sec" really is being initialized properly? – Pointy Aug 21 '14 at 14:34
  • Hmm...the arrays for `sec`, `nav`, `anc` and `pos` are fine, but `console.log(act)` prints an emtpy function `function act()` I guess that's not supposed to look like that? – Marian Aug 21 '14 at 16:34
  • Yes that seems suspicious. There's no obvious reason that would happen, if your code really looks like that and there are no errors reported. – Pointy Aug 21 '14 at 16:42
  • what kind of localhost you have? Mamp? I copy+pasted your stuffs from the fiddle into files and ran it on my own localhost using mamp, no problems. Have you tried something like that? I know nothing about Jade though, so i cant comment on that. – jaakkoj Aug 22 '14 at 06:42

0 Answers0