Closed npapazian closed 6 years ago
That's strange and annoying. Angular (or something) is squelching the scroll listener which triggers the _updateActive function. There's one that should be applied to window with the $(document).foundation()
call that doesn't seem to be triggering the magellan listener. I honestly have no idea why this is happening, but I only spent 10 minutes with it.
Same issue for me using Meteor (Blaze rendering engine).
Same issue for me using Panini and importing Markdown content
I'm using Foundation 6.2.3, and meet same issue when using Magellan with React. if refresh the page, it will work(cause server rendering). but if navigate to the page(with React Router used), it will not set active class
not sure if I handle this rightly, but I make it work by doing two steps after new it: Step 1: $('#magellan').foundation('reflow'); in Foundation source code, line 4926:
$(window).one('load', function () {
if (_this.options.deepLinking) {
if (location.hash) {
_this.scrollToLoc(location.hash);
}
}
_this.calcPoints();
_this._updateActive();
});
reflow does calcPoints and _updateActive, that will make location detect working and set active class
Step 2: Foundation.IHearYou(); in Foundation source code, line 1588:
$(window).load(function () {
checkListeners();
});
and line 1728:
Foundation.IHearYou = checkListeners;
Foundation should do these automatically when create new instance of Magellan, right?
Generally speaking, we do not recommend using the native jquery-based Foundation javascript within an Angular or React app. Both of these frameworks expect to control the entire DOM, and unless you're an expert, getting them to play nicely with something else controlling the DOM is very challenging.
There are some excellent Foundation ports into these frameworks that reimplement the javascript in a way that plays nicely within the framework:
However from what I can see, neither has implemented Magellan. I'm not entirely sure why.
I've run into this as well when creating Magellan menus dynamically in JS based on page content.
I'm seeing this problem as well in an Angular app, Foundation v6.3.0, but the problem ins happening in a reveal modal.
I am also seeing this issue. Menu links get the active class on click, but not when section scrolls into place.
I was finding that magellan wasn't firing data-events="scroll" in my code. So - I manually added it to and it now fires.
<ul class="vertical menu" data-magellan id="magellan" data-events="scroll">
How can we reproduce this bug
What did you expect to happen Magellan should apply an 'active' class when the element is in view
What happened instead No active classes are applied to the menu.
I'm using F6 in an angular application and i'm trying to use ng-repeat with the requisite magellan markup. I'm initializing the foundation js after content is loaded. plugins (sticky, accordion, dropdown) seem to work, just not magellan.
Codepen: http://codepen.io/npapazian/pen/MKVGrr