Align the position of two divs with matching IDs (#thumb-1 equals #project-1) using JavaScript or jQuery, but without the use of jQuery UI

I am currently working on creating a portfolio gallery and have put together the following HTML structure:

<article class="work-gallery">
        <ul>
            <li id="project-1"><img src="http://placehold.it/50x00"></li>            
            <li id="project-2"><img src="http://placehold.it/50x50"></li>
            <li id="project-3"><img src="http://placehold.it/50x50"></li>           
        </ul>
</article>
        <div class="projects">
            <div id="detail-1" class="project-content project-1">Test</div>
            <div id="detail-2" class="project-content project-2">Test</div>
            <div id="detail-3" class="project-content project-3">Test</div>            
        </div><!-- end .projects -->

My goal is to automatically match the x/y coordinates of #project-1 to #detail-1, #project-2 to #detail-2, and so on when the page loads.

Here's the JavaScript code I have written for this purpose:

$(document).ready(function () {
    var thumb = $('.work-gallery li'),
        thumbId = thumb.attr('id'),
        thumbIdNumber = thumbId.substring(thumbId.indexOf('-') + 1, thumbId.length),
        thumbProject = $('#detail-' + thumbIdNumber);
    thumbProject.css({'top': thumb.position.top});
});

However, I'm facing an issue in specifying the ID of the thumb variable in the last statement. If anyone has alternative suggestions or solutions on how to achieve this effect, I would greatly appreciate it.

javascriptjqueryhtmlcssmatch

Answer №1

Seems like this solution would do the trick.

$(document).ready(function () {
    $('.work-gallery li').each(function(){
        var elem = $(this),
            thumbId = elem.attr('id');
        $('#detail-' + thumbId.split('-')[1]).css({top: elem.position().top});
    });
});

JSFiddle link 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

How can you incorporate TypeScript's dictionary type within a Mongoose schema?

When using TypeScript, the dictionary type format is: { [key: string]: string; } However, when I try to define a custom schema in mongoose, it doesn't work as expected. const users = new Schema({ [key: string]: String, }); I also attempted t ...

javascriptnode.jsmongodbtypescriptmongoose

Encountered a runtime error while trying to insert a list item <li> into a paragraph <p> element

Take a look at this code snippet: <%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication18._Default" %> <!DOCTYPE html> <html> <body> <p id="someId"></p& ...

javascripthtmlasp.netweb

Dividing a sentence by spaces to isolate individual words

Recently, I encountered a challenging question that has me stuck. I am working on creating an HTML text box where the submitted text is processed by a function to check for any links. If a link is detected, it should be wrapped in anchor tags to make it cl ...

javascripthtmlanchorhyperlink

Stylish Interactive Menu Item

Having a fixed navigation at the bottom of my website has presented me with an issue. The hover effect, specifically the background slide, triggers before I even place my mouse over the text. Currently, the background slides up when my mouse enters the .it ...

htmlcssnavigation

What is the best way to adjust the size of a button using CSS within a ReactJS

I am facing an issue where I need to create a button with a specific width, but the template I'm using already has predefined styles for buttons. When I try to customize the button's style, nothing seems to change. Below is the code snippet: Her ...

javascriptcssreactjs

Monitoring the flow of data between Angular JS resources and the promise responses

In my application, there is a grid consisting of cells where users can drag and drop images. Whenever an image is dropped onto a cell, a $resource action call is triggered to update the app. My goal is to display a loader in each cell while the update cal ...

javascriptangularjsasynchronousangular-promiseangular-resource

Activating list anchor upon click

I have a list that looks like this: <!-- List --> <ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling"> <li class="nav-item"> <a class="nav-link active" id="link1" href="{{ ...

javascripthtmljquerycssbootstrap-5

What steps can I take to modify the class of a button once it has been clicked using JQuery?

Currently, I am experimenting with Jquery to dynamically change the classes of bootstrap buttons when they are clicked. However, I have encountered a limitation while using toggleClass. The issue is that I am only able to toggle between two classes, whic ...

javascriptjquerycssbootstrap-4

The 1st DIV element nudges the content within the 2nd DIV Element, causing it to stretch beyond the screen with 100%

I have gone through several other questions, but I am struggling to integrate the solutions into my problem. My main content DIV is set to 100% height and works perfectly fine until I add another element outside of the DIV towards the top of the browser. ...

csshtml

Removing element from database using php/ajax

My PHP script dynamically generates rows of <div> elements with 5 items per row. My next goal was to create a select form with dynamically generated options for deleting the selected item. However, I encountered an issue where the dynamically genera ...

phpjqueryajax

The Selenium driver's execute_script method yields no result

One of the tasks I have is to determine if a specific element is within view. If it is, I want the script to return True; otherwise, False: driver.execute_script('window.pageYOffset + document.querySelector(arguments[0]).getBoundingClientRect().bottom ...

javascriptpythonselenium-webdriver

The function getElementbyId is not recognized

My JavaScript code is supposed to change the color of a button, but I'm running into an issue where it says that getting the button is not a function. Strangely enough, the same function (with the same capitalization and case) works perfectly just a f ...

javascript

Is it possible to retrieve the value of a particular field from a table?

My goal is to create a table that displays data about various users awaiting admin approval. Each row represents a specific user, and when the approve button on a particular row is clicked, I want to open a new window displaying detailed user information f ...

javascripthtmlobject

v-autocomplete not displaying full list of items in selection dropdown

I have a question regarding sending an array with values ranging from 1 to 100 on the v-autocomplete item props. However, when scrolling through the list, only numbers up to 40-50 are visible. <template> <v-app> <v-container> ...

javascriptvue.jsautocompletefrontendvuetify.js

Omit the tag from the submission section

Currently, I am utilizing a <p> tag as a submit button/area by setting a specific id in jquery. <p id="xyz"></p> My requirement is to insert an input field inside this <p> tag to include a particular value that will be submitted u ...

jqueryhtmlcsstagssubmit

Tips to prevent modal impacts on underlying elements?

When I click on a button, a modal pops up. However, the background contents seem to spread out and sometimes scroll automatically when the modal appears. I have searched for a solution to this issue but have been unsuccessful. Can anyone please help me ide ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ways to prevent mouse selection in an input field without disabling or making it read-only

Imagine this scenario: <input type="text"> The task at hand is to prevent text selection within the <input> field. ...

javascripthtml

Filtering elements in a table using jQuery

Can anyone provide a solution to display students without a class and hide the rest (where td Class-name is empty) using only jQuery or JS? I tried looking in the documentation but got lost. Any help would be appreciated. Example: table image The table ...

javascriptjquery

When I incorporate the h-100 class, my content expands beyond the container on mobile devices

Struggling with implementing bootstrap 4.0? I'm attempting to utilize h-100 to ensure that the background stretches to the bottom of the user's screen. I've experimented with clearfix, fluid-containers, and more in an effort to make it work ...

htmlcssbootstrap-4containersgrid-layout

Control the start and stop of an Express.js app in Node.js using PHP

I'm currently developing a web service using express.js in the node.js npm environment. In order to deliver this project to my client, I need to create a controller file that allows me to start and stop the server without having to use the command pr ...

javascriptphpnode.jsexpressnpm