Animating lines with JQuery beneath navigation links

Currently in the process of revamping my portfolio website, and it's still a work in progress. Recently stumbled upon a jquery tutorial that enables a line to animate under anchor elements on hover, which I find quite intriguing. However, I am facing two issues with this feature.

  1. While the line gets the appropriate width and left position on hover, it fails to retain these attributes when not active.

  2. Uncertain about how to update the active element so that the line remains with the link that was clicked. At present, the first anchor tag is always considered the active element, causing the line to animate back to it. I believe a click function is needed to clear the current active element and assign the active class to the new one, but I'm not entirely sure.

The code can be found below, or you can view the issue live on my site Here

Below is the code snippet:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header id="header">
    <div class="container">
        <nav id="example-one">
            <ul>
                <li><a class="nav" href="#home">Welcome</a></li>
                <li  class="current_page_item"><a class="nav" href="#featuredWork">Work</a></li>
                <li><a class="nav" href="#caseStudy">Case Study</a></li>
                <li><a class="nav" href="#about">About</a></li>
                <li><a class="nav" href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS:

#magic-line { 
position: absolute;
bottom: 10px; 
/*left: 0; 
width: 100px; */
height: 3px;
background: #fe4902;
}

JQuery:

//Magic line

$(function() {


/* Add Magic Line markup via JavaScript, because it ain't gonna work without */

$("#example-one").append("<li id='magic-line'></li>");


/* Cache it */
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").find("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")
});    
});


});

Appreciate any assistance or guidance given. Thank you in advance.

Answer №1

It seems like this could be the solution you're looking for.

All you have to do is remove

function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });

This might be causing the slider to quickly return to its original position. Are you looking for the slider to only stay in place when clicked?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Efforts to seamlessly combine two divisions of a business card through the use of CSS and HTML

Currently, I am working on designing a business card that includes both front and back sections. Below is the code snippet that I have been using: .business-card:hover .front{ transform: perspective(700px) rotateX(180deg); } .business-card .back{ tr ...

Styling text in table cells using only CSS, without the use of scripting, based on the values within those cells

I have scoured the forum and came across several older threads that suggest it is not achievable with just CSS (the system I am utilizing does not support scripts). Is there a possibility that this has changed or if someone else has an alternative idea? W ...

Ways to centrally position elements in a Bootstrap table

I came across this query and tried implementing the style mentioned, but unfortunately, my table items are not aligned vertically: https://i.sstatic.net/rMqSR.png This is how the HTML appears: .table > tbody > tr > td { vertical-align ...

Use a CSS media query to elevate the third inline-block div above the initial two divs without utilizing Bootstrap

I am trying to style three colored HTML div tags displayed inline-block by using CSS only. The challenge I am facing is getting the blue div to appear on top of the red and green divs. My goal is to achieve a layout where the blue div overlaps the other tw ...

Unable to center div container with margin set to auto

I'm struggling to center my container on the website. My goal is to have it centered and take up about 80% of the page so I can incorporate an image slider and text inside. Using margin: 0 auto doesn't seem to be achieving what I want. The backgr ...

stop cascading style sheets from being overwritten

In my ASP.NET web forms project, I am utilizing Telerik controls. The Problem In one instance, I need to retrieve HTML data from the database, which includes a lot of CSS, images, and HTML content. Here is an excerpt of my code: <telerik:RadLabel ...

"Clicking on the 'View More' button within a foreach loop is only functional for the

I am trying to iterate through a list of items using a foreach loop, and each item has a "view more" option. The intention is that when I click on this option, it should expand to show more details about the respective item. However, I am encountering an i ...

Using jQuery to perform global search and replace with a variable

In this scenario, I am attempting to substitute every occurrence of the newname variable with a hyphen (-). However, in my specific case, newname is being interpreted as text instead of a variable. var newname = 'test'; var lastname = $(this).a ...

What about using CSS sprites in place of individual images?

After examining the code for some major websites, such as YouTube and Yahoo, I noticed that they tend to rely heavily on CSS sprites rather than individual image tags. Is this considered a best practice in web development? While using image tags with alt a ...

Nested tables in CSS

Creating a Gridview with two nested Gridviews in separate cells may result in some CSS inheritance issues. Each row of the table contains these nested Gridviews, but trying to isolate their style using CssClass doesn't always work effectively. Is the ...

The current layout of the div is hindering the ability to switch from vertical scrolling to horizontal scrolling

I'm currently utilizing this scroll converter tool to transform vertical scrolling into horizontal scrolling. However, despite correct script inclusion and initialization, the conversion is not working as expected. It seems like there might be an issu ...

Click on the jq toggle button to increase productivity and complete additional tasks

Is it possible to use a toggle function to create a drop-down menu while also rotating the mobile menu icon image when clicked? Can this be accomplished within the same function, or would I need to add a new event listener to the image? jQuery('#mobi ...

What is the best way to connect individual buttons to a dynamic div that displays different content depending on the button clicked?

Hey there! I'm diving into the world of JavaScript and HTML, and I need some guidance on creating a menu that can toggle visibility of specific content in div(s) depending on which button (picture1-12) is clicked. My idea is to have one div that can d ...

Executing Multiple AJAX Functions with when()

My goal is to use jQuery's when() method to run multiple Ajax functions upon form submission. The plan is to wait for these functions to finish and then finally submit the form. However, it seems like my code is not working as intended: $('form[ ...

What is the best way to handle the keystroke event in a $.bind method?

I'm struggling with passing a specific keystroke through the bind method. $(document).bind('keyup', event, keyup_handler(event)); This is my attempt at solving it.. Here is the function it should be passed to: var keyup_handler = functio ...

organizing arrays with the structure name:url

I have a list of string URLs like "http://dom/image1.jpg","http://dom/image2.jpg" that I obtained from an API which returns only the links. However, the plugin I am using requires the array to be in a specific format: {image:"http://dom/image1.jpg"},{imag ...

Angular: merging multiple Subscriptions into one

My goal is to fulfill multiple requests and consolidate the outcomes. I maintain a list of outfits which may include IDs of clothing items. Upon loading the page, I aim to retrieve the clothes from a server using these IDs, resulting in an observable for e ...

Tips for implementing Header Authorization on a POST FORM with JS/AJAX/JQUERY

Looking to gather user inputs through a form on my webpage and send those values to a PHP hosted on an external site. The Request maker extension indicates that the Header Authorization is included along with other inputs when data is submitted to the exte ...

Is there a hover function in jQuery that works with both mouseenter and mouseout events?

I've been facing a slight issue with a list of items using the <li> element. I have a plugin running that dynamically adds a data-tag ID to the data-* attribute of these items. As a result, all items are dynamically added and another function I ...

Adjust the content to expand and occupy the entire height using Material UI cut-off Drawer

I am using the provided Material UI code for a persistent clipped drawer, but I am encountering an issue with the content height. I have set the background of the content section to red in my demo sandbox to showcase the problem. My goal is for the content ...