Using jQuery to retrieve the location of an element with a specific class

I am working on a slider that adds a class (.current-item) to each active tab and removes it when it's inactive. I am looking to incorporate the LavaLamp effect for the menu, but I am having trouble getting the position of each element with the current-item class.

So far, I have tried the following code:

var my = $("li.current-item");

var myposition = my.position();

function setCurr(el) {

        $back.css({'top': myposition.top });

        curr = el;

};

However, this code only works for the first item. Once the slider removes the class from one item and adds it to the next, the positioning does not update.

You can view the live version here: http://asgg.ro/slider-html/ The script source is located at the bottom of the page.

As a beginner in jQuery, I could really use some guidance! Thank you in advance.

jquerycss

Answer №1

let elementPosition = $('.element_class').offset();

let xPosition = elementPosition.left;
let yPosition = elementPosition.top;

These lines of code will retrieve the X and Y coordinates of the element in relation to the viewport. I hope this information proves useful.

Answer №2

Attempt

function updateCurrentElement(el) {
    var currentElement = $("li.current-item");
    var currentPosition = currentElement.position();
    $backdrop.css({'top': currentPosition.top });
    currentElement = el;
};

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

Obtain the data of the highlighted row in a telerik grid directly from the client side

I am attempting to retrieve the value of a GridBoundColumn with DataField="id" using JavaScript on the client side. When the user clicks on the image button within a row, I need to extract the id for that specific row and then invoke a web method by passin ...

javascriptjqueryasp.nettelerik

Using brackets in a CSS background-image URL will cause it to malfunction and not display the

Try using the brackets editor tool available here. I attempted to add an image to a div with the class "portrait" by linking the style.css file from index.html, but it doesn't seem to be working. Other guides and tutorials have successfully utilized ...

phphtmlcss

Shuffling arrays with JavaScript and jQuery for a touch of randomness

Looking to add some variability to your font choices? I've got an idea for you! How about randomizing three arrays for fonts, font size, and font weight? Then, we can display the results of these arrays in a div with the class name "randomFont." Each ...

javascriptjqueryarraysrandom

Is there a way to display list items in rows of three?

I just bought this theme and I'm looking to customize it so that only three items appear in a row on the homepage instead of four. Can this be achieved with CSS or JQuery? Here is the link to the theme: Here is the link Is it possible to use CSS to c ...

jquerycsswordpress

How to retrieve 'data' attributes from an object that was dynamically loaded?

I'm currently facing an issue with accessing the data attributes of a dynamically loaded file using AJAX. For instance, I load a file containing: <div id="blah" class="hello" data-something="or_other" /> Then, I use jQuery to access the data: ...

jqueryajax

Having trouble updating attribute through ajax requests

How can I set attribute values using ajax-jquery? Here are some snippets of code: HTML_CODE ========================================================================== <div class="col"> <ul class="nav nav-pills justify-content-end& ...

javascripthtmljqueryajax

After the scaffold generator, the Twitter-bootstrap buttons now feature text in a subtle gray

I seem to be facing a similar issue to what was discussed in this thread about Twitter Bootstrap displaying buttons with greyed text. The problem I am encountering is with a btn-info button that has a dropdown - after clicking on an item in the dropdown, t ...

cssruby-on-rails-3twitter-bootstrap

Encountering a problem with serializing forms using jQuery

Currently, I am working on form serialization in order to send the file name to the server. However, I have encountered an issue where the serialization values are empty and I am expecting the file name to be included. Within my form, there is an HTML fil ...

javascriptjqueryhtml

validating jQuery on multiple form fields

When dealing with validation in jQuery on multiple fields where the form field names/ids vary for each form, what is the most effective approach? For example: <form> <p>Select Colour</p> <select name="M100" id="M100"> ...

jquery

The issue of jQuery sliding banner not working properly when trying to clear the interval on mouseover

I recently created a dynamic banner using jQuery that slides images smoothly. However, I encountered an issue when attempting to implement the .mouseover() function to pause the sliding whenever the mouse hovers over an image. Unfortunately, this feature ...

jqueryslidebannerclearinterval

Update the content retrieved through ajax periodically

Looking to set up a periodic update for this ajax fetch function, say every 10 seconds. I've tried a few approaches but none seem to work as expected. That's why I'm reaching out here for help. So, any idea how I can refresh the content ev ...

phpjqueryhtmlajax

Ensure that the image inside a resizable container maintains the correct aspect ratio

I often encounter a situation where I need to showcase a series of thumbnails/images that adhere to a specific aspect ratio within a flexible container. My current approach involves using a transparent, relatively positioned image to enforce the correct as ...

htmlcss

Are there any methods to improve the coding, align images to the center, and ensure that elements stay in their designated positions?

Is there a way to tidy up the code, center images, and keep everything in place? This is the look I desire: The main outer box should remain centered on the browser page. Pause, play, and stop buttons should float to the left of the box. My image sh ...

htmlcss

Unable to set the height of WebDataRocks as a percentage

I've recently started using WebDataRocks and I'm having trouble getting the height to fill the window. Despite what the documentation says (), which states, "The height of the pivot table in pixels or percent (500 by default)". The code snippet ...

csspivotwebdatarocks

Once the image is loaded, cropped, and displayed on the canvas, what is the best way to implement image rotation functionality for the user before converting it to base64?

My process involves cropping images to a square shape and drawing them onto a canvas. if(img.height >= img.width) { ctx.drawImage(img, 0, 0, 110, 110 * img.height / img.width); } else { ctx.drawImage(img, 0 , 0, 110 * img.width ...

javascriptjqueryhtmlcsscanvas

What is the best jQuery event or method to use for attaching functionality to a dynamic button before it is clicked?

My goal is to connect a jQuery plugin to a button that is dynamically generated. I have attempted the following without success: $('.myButton').on('click', function() { $(this).file().choose(function(e, input) { // ... ...

jqueryjquery-pluginsbindjquery-events

Using the .html() function in combination with AJAX

Having some trouble with the .ajax() method as I attempt to retrieve an image thumbnail using it. The issue is with the .html() method - while .attr('src', URL) works fine, it doesn't seem to work when dealing with the image tag in my HTML. ...

jquery

Is it possible to hide element Y in jQuery when the mouse is not hovering over elements X or Y?

I have a unique setup where I have multiple images displayed side by side, and when I hover over one image, a tooltip specific to that image appears with additional information. The tooltip content is fetched using ajax, but let's not focus on that. ...

jqueryhoverhideelement

How can I make two lines equal in length by stretching them?

Looking to replicate the design shown in the image below using CSS: https://i.stack.imgur.com/cZiFT.png It's crucial for me that both lines are of equal length: https://i.stack.imgur.com/8phWR.png I attempted to recreate it with the following code ...

css

The functionality to apply a color class to a navbar item when clicked is malfunctioning

I'm attempting to create a navigation bar using text that toggles the visibility of different divs. I want the selected option to appear in red, indicating it has been chosen, while deselecting any other options. I am new to JavaScript and thought add ...

javascriptjqueryhtmlonclickaddclass