Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Magellan links don't work on 6.4.1.2 #235

Open
MicahBrown opened this issue Jul 21, 2017 · 2 comments
Open

Magellan links don't work on 6.4.1.2 #235

MicahBrown opened this issue Jul 21, 2017 · 2 comments

Comments

@MicahBrown
Copy link
Contributor

After upgrading from 6.3 to 6.4.1.2, I noticed that magellan links won't highlight the link for the currently visible section. Also, clicking the link results in this error on FF:
screenshot

Here's my HTML (that works fine in v6.3):

<div class="row" data-sticky-container>
  <nav class="columns sticky" data-sticky data-top-anchor="section1" data-btm-anchor="section1:bottom"  style="background: #fff;" data-sticky-on="small" data-margin-top="0">
    <ul class="horizontal menu small green" data-magellan>
      <li><a href="#section1">Section 1</a></li>
    </ul>
  </nav>
</div>

<section id="section1" data-magellan-target="section1">
  ...
</section>
@MicahBrown
Copy link
Contributor Author

MicahBrown commented Jul 24, 2017

I found that part of the issue is in the manifest. foundation.js includes smoothScroll.js after magellan.js.

I replaced //= require foundation.js with //= require foundation_libs.js in my app.js manifest. Then created a foundation_libs.js file with the following (which includes smoothScroll.js before magellan.js):

//= require foundation.core.js
//= require foundation.util.box.js
//= require foundation.util.imageLoader.js
//= require foundation.util.keyboard.js
//= require foundation.util.mediaQuery.js
//= require foundation.util.motion.js
//= require foundation.util.nest.js
//= require foundation.util.timer.js
//= require foundation.util.timerAndImageLoader.js
//= require foundation.util.touch.js
//= require foundation.util.triggers.js
//= require foundation.smoothScroll.js
//= require foundation.abide.js
//= require foundation.accordion.js
//= require foundation.accordionMenu.js
//= require foundation.drilldown.js
//= require foundation.dropdown.js
//= require foundation.dropdownMenu.js
//= require foundation.equalizer.js
//= require foundation.interchange.js
//= require foundation.magellan.js
//= require foundation.offcanvas.js
//= require foundation.orbit.js
//= require foundation.responsiveAccordionTabs.js
//= require foundation.responsiveMenu.js
//= require foundation.responsiveToggle.js
//= require foundation.reveal.js
//= require foundation.slider.js
//= require foundation.sticky.js
//= require foundation.tabs.js
//= require foundation.toggler.js
//= require foundation.tooltip.js
//= require foundation.zf.responsiveAccordionTabs.js

That fixed the jump-to navigation when clicking the links, but the link for the corresponding "active" section are still not being highlighted.

@MicahBrown
Copy link
Contributor Author

The link highlighting issue was due to the change in selector from active to is-active and wasn't really an issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant