https://css-tricks.com/examples/MagicLine/ That's the URL I am currently using. However, it relies on
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script><script src="//code.jquery.com/jquery-2.1.4.min.js"></script>I attempted to include both scripts, but it led to a crash.
Here is the Code for MagicLine:
<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 here is the other script:
<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>
When I use version 1.5.2, the last script does not work. If I remove it, the MagicLine works but the other script doesn't. How can I make both work together?