https://css-tricks.com/examples/MagicLine/
That's the one I do use, but it requires <script src='//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
But some other scripts requires <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
So what I tried was simply to use them both, but then it crashes.
This is the MagicLine code:
<script>
$(function() {
var $el, leftPos, newWidth,
$mainNav = $("#example-one");
$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#example-one li a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});
</script>
And this is the other:
<script>
$(document).ready(function() {
$("body").on("click", "a", function() {
var href = $(this).attr("href");
if (href.indexOf("#") === 0) {
$("html, body").animate({
scrollTop: ($(href).offset().top - 90)
});
return false;
}
});
});
</script>
If I use 1.5.2 the last wont work, so if I delete that one it works but the MagicLine. How do I get both to work together?
