Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Mysterious jQuery Positioning Problem with MagicLine

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #35610
    roka
    Member

    I tried to integrate the MagicLine Menu with jQuery, as shown in https://css-tricks.com/5582-jquery-magicline-navigation/ and have an mysterious issue with it.

    The magic line isn’t positioned correctly and the width doesn’t fit. I tried to use outerWidth aswell, which didn’t help actually. However my examplejs looks about like this.

    It’s mostly like the original Script. You will notice an alert statement in the code. This is exactly the point. If I run the code without the alert, the positioning doesn’t work. If I run it with alert, I get the empty alert message and the menu works. I’m just starting with jQuery, so this seems quite mysterious to me, though it might be a pretty simple thing.

    Working demo with alert: http://www.ro-ka.net/demo/index.html

    Not working demo without alert: http://www.ro-ka.net/demo/index2.html

    // DOM Ready
    $(function() {

    var $el, leftPos, newWidth;

    /* Add Magic Line markup via JavaScript, because it ain’t gonna work without */
    $(“#main-menu”).append(“

  • “);

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

    // WTF Alert!
    alert(“”);

    $magicLine
    .width($(“.active-menu-item”).width())
    .css(“left”, $(“.active-menu-item a”).position().left)
    .data(“origLeft”, $magicLine.position().left)
    .data(“origWidth”, $magicLine.width());

    // Verschiebung beim hovern
    $(“#main-menu li”).find(“a”).hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    $magicLine.stop().animate({
    left: leftPos,
    width: newWidth
    });
    }, function() {
    // Animation beim verlassen des Fokus rückgängig machen
    $magicLine.stop().animate({
    left: $magicLine.data(“origLeft”),
    width: $magicLine.data(“origWidth”)
    });
    });
    });

    Any ideas?

Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.