I need a little help for Magic Line

[Stevo_Kecman]

Hi all :)

I could really need advice about this: https://css-tricks.com/jquery-magicline-navigation/

The comments are closed back there, so I am trying to get some help here on forum. This is the issue. I manage to combine color transformation from example two into example one… and it all looks fine. This is the code I edited from example.js:

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

$magicLine
.width($(“.current_page_item”).width())
.css(“left”, $(“.current_page_item a”).position().left)
.data(“origLeft”, $(“.current_page_item a”).position().left)
.data(“origWidth”, $magicLine.width())
.data(“origColor”, $(“.current_page_item a”).attr(“rel”));

$(“#example-one li”).find(“a”).hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();

$magicLine.stop().animate({
left: leftPos,
width: newWidth,
backgroundColor: $el.attr(“rel”)
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data(“origLeft”),
width: $magicLine.data(“origWidth”),
backgroundColor: $magicLine.data(“origColor”)
});
});

Color transformation looks beautiful… But my only problem is this line from style.css:

#magic-line {
background: #fe4902; }

Because, now, everytime I hit Refresh in browser, the color of my Magic Line is this one defined by style.css. It is not the one defined by “Rel” atribute in html. After I move my mouse over it, it turn into one it should be in the first place…. Everything else looks great after my first mouse move, but before it, it is always this orange color defined by style.css. I checked example two, there is also similar definition but somehow it is being ignored. What should I do, what I am doing wrong? :)

If anyone can help me, I would be much appreciate, because I really need this thing to work. Thanks in advance :)

[CrocoDillon]

Add the 2nd css line to your initialization code:

$magicLine
.width($(“.current_page_item”).width())
.css(“left”, $(“.current_page_item a”).position().left)
.css(“backgroundColor”, $(“.current_page_item a”).attr(“rel”))
.data(“origLeft”, $(“.current_page_item a”).position().left)
.data(“origWidth”, $magicLine.width())
.data(“origColor”, $(“.current_page_item a”).attr(“rel”));

[Author]

Posts