javascript - Magic Line Not Updating with fullPage.js when Moving Up and Down w Keypad

Question

I've combined Full Page Scroll by Alvaro Trigo, https://github.com/alvarotrigo/fullPage.js and Magic Line Navigation by Chris Coyier, http://css-tricks.com/jquery-magicline-navigation/. Almost gotten it to fully work, except when you scroll up and down with the arrow keys, it updates the active link, but the Magic Line doesn't update to it. So close...

Here is the js fiddle: http://jsfiddle.net/X5juR/

and here is sample code for the Magic Line

Thanks everyone!

    $(function() {
        var $el, leftPos, newWidth,
            $mainNav = $("#menu");

            /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
        $mainNav.append("<li id='magic-line'></li>");

             /* Cache it */
        var $magicLine = $("#magic-line");

        $magicLine
            .width($(".active").width())
            .css("left", $(".active a").position().left)
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());

        $("#menu li:not('#magic-line') a").hover(function() {
            $el = $(this).parent();
            leftPos = $el.position().left;
            newWidth = $el.width();
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        },function() {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                width: $magicLine.data("origWidth")
            });
        }).click(function() {
             $mainNav.find('li').removeClass('active');
             $(this).parent().addClass('active');
             $magicLine
                .data("origLeft", $magicLine.position().left)
                .data("origWidth", $magicLine.width());
        });
        /* Kick IE into gear */
        $(".active a").mouseenter();


});

Answer 1

Magicline is not suppose to work this way. You would need to code it by yourself...

Anyway, take a look at this living example: http://jsfiddle.net/X5juR/1/

I converted the anonymouse function to magicLine() function and then I used the afterRender and afterLoad callbacks to deal with the menu:

// inline script in the head tag
$(document).ready(function () {
    var pepe = $.fn.fullpage({
        anchors: ['link1', 'link2', 'link3', 'link4', 'link5'],
        menu: '#menu',
        afterRender: function () {
            magicLine();
        },
        afterLoad: function (anchorLink, index) {
            var magicLine = $("#magic-line");
            var current = $('#menu').find('li').eq(index-1).find('a');
            var el = current.parent();
            var leftPos = el.position().left;
            var newWidth = el.width();
            magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        }
    });

});