Obtain the Location and Size of the Main Menu

I am curious about how to retrieve the position and width of a parent element using jQuery. To demonstrate, consider the following HTML:

<ul id="menu">
    <li>Parents</li>
    <ul>
        <li>Child</li>
    </ul>
</ul>

Here is my jQuery code snippet:

if($('#menu > li > ul').children('li').hasClass('current-menu-item')){
//perform an animation
    left: $(this).parent().siblings().position().left,
    width: $(this).parent().siblings().width()
});

If I am currently at <li>child</li>, how can I obtain the position and width of its parent element <li>parents</li>?

javascriptjquerycss

Answer №1

const selectedParent = $('#navigation .active-menu-item').parent().closest('li');
const currentPosition = selectedParent.position();
const parentWidth = selectedParent.width();

Answer №2

The sample HTML you provided doesn't seem to match with your jQuery code. It appears that there is no element with the class current-menu-item.

Based on your question, it seems like you want to retrieve the position and width of the parent elements of the <li>parents</li>.

In order to achieve this, you can utilize the > combinator to select only immediate children.

var select =  $('#menu > li');
var left = parent.position().left;
var top = parent.position().top;
var width = parent.width();

Check out this working example for reference.

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

CodeIgniter Flexi Auth - Redirect users promptly upon login expiration

Is it possible to use the CodeIgniter Flexi Auth library to redirect a user to the login page immediately upon session expiration, displaying a message stating: "Your login has expired, please login again," rather than waiting until page load? I'm co ...

javascriptphpcodeigniterauthentication

I am receiving a Promise object with a status of "pending" within an asynchronous function on node.js

I have a nodejs class function that retrieves all rows from the database. module.exports = class fooClass { static async fooFunc() { const mysql = require('mysql'); const util = require('util'); const conn = mysql.createC ...

javascriptnode.jsasynchronous

Converting an object with nested arrays into its original form (Ajax request using C#)

I am struggling with the deserialization of an object that has two properties. One property is a simple string, while the other property is an array of arrays, with each element in an array having a name and a value. The POST operation works fine until it ...

c#javascriptarraysajaxjson

The content is being pushed down by the responsive navigation bar

While the navbar is in normal non-responsive mode (I'm not sure if that's the right terminology) on Chrome and you scroll down, the logo image stays behind the menu. However, when the screen width shrinks and the menu collapses, clicking the icon ...

cssnavbar

Playing only audio and no video in an Android WebView using HTML5

I am currently facing a challenge with a webpage that includes an html5 video and css3 animations. While the web page functions perfectly on an android device's browser, I am experiencing laggy, glitchy, and jumpy animations when using hardware accele ...

androidhtmlcssvideowebview

Is there any potential security vulnerability when using ActiveRecord::Serialization.from_json() in RoR to parse uploaded JSON?

Currently in the process of setting up an export-import feature in Ruby on Rails. I have been contemplating the possibility of malicious code injection since JSON has the capability to include JavaScript. Is there a risk that someone could inject harmful ...

javascriptruby-on-railsrubyjsonsecurity

Increased impact of dynamically added elements following page transition

After implementing dynamic functionality from jQuery in my code, I encountered an issue where if I navigate back one page and then return to the original page containing the added elements, they seem to trigger twice upon clicking. To troubleshoot, I incl ...

javascriptjqueryhtmljquery-mobile

JSON parsing problem in web browsers

I've been working on an application using Asp.net MVC. When I submit the form using jQuery: var Data = $("#frmForgotPassword").serialize(); $.post("<%= Url.Action("ForgotPassword","Account") %>/", Data, function(retdata, textStatus) { if ( ...

jqueryasp.net-mvcjquery-post

Errors and disruptions caused by SmoothScroll, ScrollMagic, and GSAP triggering glitches, jumps, and crashes

Connecting ScrollMagic with GSAP is not an issue - it works seamlessly. However, I encountered a problem when trying to implement smooth scrolling for my mouse. I added a smooth scrolling plugin to my project from this link: http://www.jqueryscript.net/ani ...

javascriptjquerysmooth-scrollinggsapscrollmagic

Utilize Underscore and Node.js to remove div elements from the body of a request URL

Is there a way to filter out specific data from a URL that is in HTML format? I only need certain divs with particular IDs or classes, not everything. Currently, I am using the "request" node module to fetch the data from the URL and attempting to utiliz ...

javascriptnode.jsunderscore.js

Error in processing AJAX request for Datatables

Currently, I am utilizing DataTables for server-side processing by fetching information from a form. Upon submitting the form, DataTables triggers an Ajax request which is then handled by a Java Servlet. Encountering some issues, I turned to Firebug for d ...

jqueryjspservletsdatatables

Tips for using jQuery to verify the most recent entry in a form

Struggling with this issue - I can't seem to get jquery to function the way I need it to: Essentially, when a user exits a text field, jquery is supposed to capture the input value and respond accordingly: for example, if the user types 'value& ...

javascriptjqueryforms

Having trouble with passing props in React. Any suggestions on what I might be missing?

It seems like I am facing an issue with passing props in React, and for some reason, it's not functioning as expected. I'm a bit puzzled by the whole situation. Main Application Component import React from 'react' import Produc ...

javascriptreactjsdataflow

Altering documents post Bower installation

I took the initiative to manually download the css and js files for an angular module (here). In order to make a small adjustment, I modified the css (specifically changing max-width in the media query): Original: @media only screen and (max-width: 800px ...

htmlcssangularjsbower

How can I resolve the "web page not found" error when using jQuery .replace()?

Working on HTML and javascript/jquery scripts, I have encountered a peculiar issue. My script utilizes a for-in loop to iterate through a JavaScript object, substituting specific patterns in HTML-formatted lines with data from the object using jQuery .appe ...

javascriptjqueryhtml

The debugging tool couldn't pinpoint the error, which is quite odd

I'm going crazy... there's an error in the script but I can't seem to find it, and oddly enough, even the Explorer debug doesn't catch it!! I've checked it multiple times with the exercise but I just can't locate it. <s ...

javascriptjquery

Click to refine list or view

Currently, I am engaged in creating my own version of a social media platform inspired by Twitter. In this project, tweets are being automatically generated from a JavaScript file. One key feature I'm working on is that when a user clicks on a usern ...

javascriptjqueryhtmldomview

react-video-recorder` facing challenges with loading

I recently integrated react-video-recorder into my application. After checking out the demos on Stackblitz and Storybook hosted on Vercel, I was impressed with how well it worked in my browsers. However, when I added it to my codebase, the component would ...

javascriptreactjsweb-mediarecorder

The newly added highlighted CSS in jQuery cannot be removed once an alert is generated

http://jsfiddle.net/Cyjye/ I am a beginner with jquery. I have created an HTML table shown in the jsfiddle link. Initially, the selection should be made from the second row, second cell, but in my HTML table, the selection is being made from the first ro ...

jqueryhtmlcss

Issue with $_POST being empty after making a $.post request

My dilemma is as follows: I am attempting to create a database search using a PHP form. I have the form set up and want it to function even if some fields are left empty (the more fields filled, the more specific the response). To accomplish this, I am usi ...

phpjquery