Menu icon Foundation
Magellan not working

 

Im trying to create a little nav that takes me to certain divs on click. It does that, but at the moment it just snaps down to the div. Instead i want a smooth transition down just like it says it should in the documentation.

Also, as i scroll down to the certain divs i want the neccessary nav li's to be highlighted. But when i inspect element on them they dont highlight as i scroll down the page at the moment.. It's definitely picking up the css cdn but the js one im not so sure.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.css">


<section id="div1_wrapper" data-magellan-target="div1_wrapper">

<div class="leftHeaders" data-sticky-container>
    <ul class="sticky" data-sticky data-magellan>
        <li><a href="#div4_wrapper">4th page</a></li>
        <li><a href="#div3_wrapper">3rd page</a></li>
        <li><a href="#div2_wrapper">2nd page</a></li>
        <li><a href="#div1_wrapper">1st page</a></li>
    </ul>
</div>
</section>
<section id="div2_wrapper" data-magellan-target="div2_wrapper">

</section>
<section id="div3_wrapper" data-magellan-target="div3_wrapper">

</section>
<section id="div4_wrapper" data-magellan-target="div4_wrapper">
</section>
 

MagellanhtmlFoundation

 

Im trying to create a little nav that takes me to certain divs on click. It does that, but at the moment it just snaps down to the div. Instead i want a smooth transition down just like it says it should in the documentation.

Also, as i scroll down to the certain divs i want the neccessary nav li's to be highlighted. But when i inspect element on them they dont highlight as i scroll down the page at the moment.. It's definitely picking up the css cdn but the js one im not so sure.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.css">


<section id="div1_wrapper" data-magellan-target="div1_wrapper">

<div class="leftHeaders" data-sticky-container>
    <ul class="sticky" data-sticky data-magellan>
        <li><a href="#div4_wrapper">4th page</a></li>
        <li><a href="#div3_wrapper">3rd page</a></li>
        <li><a href="#div2_wrapper">2nd page</a></li>
        <li><a href="#div1_wrapper">1st page</a></li>
    </ul>
</div>
</section>
<section id="div2_wrapper" data-magellan-target="div2_wrapper">

</section>
<section id="div3_wrapper" data-magellan-target="div3_wrapper">

</section>
<section id="div4_wrapper" data-magellan-target="div4_wrapper">
</section>
 
Will Moody almost 3 years ago

Hi Rhys

 

Are you also calling "$(document).foundation();" in a script tag at the bottom of your page, if so just try commenting out the one one your page and see what happens, if not I'm sorry but I am at the end of my knowledge.

 

Will 

Rhys Edwards almost 3 years ago

Wow, appreciate your help, its working! 

I used that jQuery cdn and put "$(document).foundation();" underneath my $(document).ready(function() { and its now working.

If you feel like being extra helpful i am now getting this error in the console:

"foundation.min.js:1 Tried to initialize sticky on an element that already has a Foundation plugin."

Will Moody almost 3 years ago

Hi Rhys

I have just noticed in your initial coding that you are calling an earlier version of jQuery, I normally use -

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js

Will

Rhys Edwards almost 3 years ago

I also tried commenting everything else out and it still doesn't work.

Rhys Edwards almost 3 years ago

I put $(document).foundation(); at the bottom of my jQuery underneath everything and i get this error in the console: 

Uncaught TypeError: $(...).foundation is not a function

Will Moody almost 3 years ago

Hi Rhys

I normally have it at the top of apps.js and with a clear line after, but in some cases such as when I use MixItUp.js I have found it has to go at the bottom of apps.js.

If it causes an issue can you comment out your other js? and see where that leads you.

 

Will

Rhys Edwards almost 3 years ago

Ok and where do i put that in my js? I tried putting it at the top and i get an console error. 

"Uncaught TypeError: $(...).foundation is not a function"

 

$(document).foundation();
$(document).ready(function() {
    $(".arrowDown, .page2").click(function() {
        $('html, body').animate({
            scrollTop: $(".div2_wrapper").offset().top
        }, 1000);
    });

    $(".page3").click(function() {
        $('html, body').animate({
            scrollTop: $(".div3_wrapper").offset().top
        }, 1000);
    });

    $(".page1").click(function() {
        $('html, body').animate({
            scrollTop: $(".div1_wrapper").offset().top
        }, 1000);
    });

    $(".page4").click(function() {
        $('html, body').animate({
            scrollTop: $(".div4_wrapper").offset().top
        }, 1000);
    });

    $(window).on("scroll", function() {
        if ($(window).scrollTop() < 1000) {
            $("#social_side_links").fadeOut(500);
        } else {
            $("#social_side_links").fadeIn(500);
        }
    });

    $(window).scroll(function() {
        var wScroll = $(this).scrollTop();

        if (wScroll > $("#div4_wrapper").offset().top - 60) {
            $(".topRibbon").slideDown(300);
            $(".topRibbonMail").slideDown(300);
        } else {
            $(".topRibbon").slideUp(1);
            $(".topRibbonMail").slideUp(1);
        }
        if (wScroll > $("#div1_wrapper").offset().top + 300) {
            $(".arrowDiv").fadeOut(700);
        } else {
            $(".arrowDiv").fadeIn(700);
        }
    });

});

Will Moody almost 3 years ago

Hi Rhys

 

"$(document).foundation();" is necessary is your apps.js when you use any element that uses foundation.js, if you look on the kitchen sink page all items that require js are marked.

Magellan is one element marked as requiring js.

 

Will

 

Rhys Edwards almost 3 years ago

Hi thanks for the reply Will,

I just commented out my foundation js cdn and my nav still works btw so i don't think its picking up the js cdn at all. 

I have 4 divs with a height of 800px each so i definitely have content. I just don't understand why it's not working 

Also i noticed in the codepen you made for me, you have this in the js

"$(document).foundation();" 

Do i need that or is that just for codepen? 

Will Moody almost 3 years ago

 Hi Rhys

You must be picking up the js for it to work at all, Magellan is js based and won't work without it.

I have created a codepen at https://codepen.io/FatBuddha/pen/GNGbdK/ using your code which works fine, I have added some content to the sections and the transition is smooth between each section, the snap may be because of a lack of content.

 

Will