Tips for creating a line to connect corresponding div elements using JQuery

I am working on an HTML project with jQuery and I want to create a feature that allows users to select a panel from one column and have it move to another column. While I know how to make the selection functionality work, I am struggling with drawing connecting lines between the panels. The idea is that when a user selects the first panel, a horizontal line will connect to the middle of the columns with a circle. Then, when the user selects panel 2, a vertical line in the middle will move up or down (depending on the position of panel 2 relative to panel 1) and draw a second horizontal line to connect panel 2.

For reference, you can check out an example of the desired end result here

https://i.sstatic.net/qKHcc.jpg

jqueryhtmlcss

Answer №1

If you're looking for a JQuery library to achieve this effect, I'm not sure if one exists. However, you can always create SVG lines to connect different elements on your page. Check out the example below!

.left-block {
  width: 100px;
  height: 20px;
  top:10px;
  left:10px;
  border:1px solid #777;
  position: absolute;
}

.right-block {
  width: 100px;
  height: 20px;
  top: 200px;
  left: 300px;
  border: 1px solid #777;
  position: absolute;
}

.circle-block {
  width: 20px;
  height: 20px;
  top: 10px;
  left: 190px; 
  position: absolute;
  border: 1px solid #777;
  border-radius: 20px;
}

.lines {
  height: 210px;
}
<div class="left-block"></div>
<div class="right-block"></div>
<div class="circle-block"></div>

<svg class="lines">
  <line x1="104" y1="13" x2="183" y2="13" stroke="black"/>
  <line x1="193" y1="23" x2="193" y2="203" stroke="black"/>
  <line x1="193" y1="203" x2="293" y2="203" stroke="black"/>
</svg>

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

Issue with JQuery CSS Height not functioning properly in Chrome and Safari browsers

Our website displays a list of items in table format. The number of items varies daily, affecting the height of the table. A vertical bar next to the table should resize based on the table's height each day. The HTML structure we use is as follows: ...

jquerycssipad

Tips for displaying content when clicking on the opener containing tables or div elements

This is a snippet of JavaScript code $(document).ready(function () { $(".show-content").hide(); $(".opener").click(function () { $(this).parent().next(".show-content").slideToggle(); return false; ...

javascripthtml

Adding JQuery elements to the map pane

I recently decided to upgrade one of my projects to use the Google Maps API v3 instead of v2. In v2, I used the following code to append a div to the map pane: $("#marker_popup").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE)); Is there a straightforward ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Invoke the jquery plugin upon completion of the HTML load via Ajax

For my current project, I needed to style input radio buttons and decided to use the jquery uniform plugin. However, the radio buttons are displayed after some Ajax content is loaded onto the page. Since I do not have permission to edit the form or Ajax ...

javascriptjqueryajaxknockout.js

Remove the entry with attribute ajax from the database

I am facing an issue while attempting to delete using <li id='{$row['id']}'>. Although it successfully removes the item from the frontend, it fails to delete the record from the MySQL database. I am wondering if it is feasible to ...

phpjquerymysqlajax

The CSS in Django seems to be malfunctioning on various pages, particularly on header elements

My CSS file is linked in 'main/static/css/style.css' and my pages are located in 'main/templates/main/pages.html'. However, the CSS does not seem to be working properly for some pages; for example, the h2 tag is not taking on the specif ...

pythonhtmlcssdjango

Extract Data from JSON Array using Jquery

I am working with a JSON array retrieved from a web API, and I need to extract specific values from it. For instance, how can I retrieve all the rides in the first place and access rides[1]. UserID or Images? { "Status":1, "Rides& ...

jqueryjson

Is there a way in JQuery to apply the CSS of one element to another selected element?

I'm curious if there is a JQuery function available that can be used to transfer the exact CSS styles from one element to another. I want all the CSS properties to be applied without any additional inheritance. For example: <div id="d1"> &l ...

javascriptjqueryhtmlcss

Animating with JavaScript

I have a members button on my website that triggers a dropdown animation when clicked. However, the issue is that the animation occurs every time a page is loaded, even if the button is not clicked. I want the dropdown to only open when the button is click ...

javascriptjqueryhtmlanimation

Is the gridviewscroll script missing when performing an asynchronous postback on the page?

After making an asynchronous postback, the page loses the gridviewscroll script even though I registered the script on the code behind. This issue occurs when clicking "add new row" in an ASP.NET grid view that is inside an update panel. I have experiment ...

jqueryasp.netgridviewupdatepanelpostback

Having trouble importing XML data from an external file with jQuery

Attempting to import external XML with the code below is proving unsuccessful $( document ).load( "data.xml", function( response, status, xhr ) { console.log( xhr.status + " " + xhr.statusText ); }); Both data.xml and js files are in the ...

javascriptjqueryxml

Looking to create applications for Android and iOS that can integrate with a module designed in Adobe Captivate

I have created an interactive e-learning module using Adobe Captivate, which has been published in both HTML5 and SWF formats. The module includes some interactive elements/actions that can be accessed by clicking on them. It works perfectly fine in a web ...

androidioshtmlflashadobe-captivate

Tips on adjusting a position that shifts with changes in window size

Working on a website for my grandpa, I'm planning to include a small biker character that runs across the screen. When hovered over, he stops and advises "wear a helmet." The animation works well, but there's an issue with the positioning when th ...

javascripthtmlcssanimation

"Enhance your PHP-MySQL data tables by implementing the Datatable Server Processing script using ssp.class.php

My goal is to build a data grid using the Datatables jQuery plugin and handle server-side processing with the provided ssp.class.php. While it initially worked, I encountered an issue when trying to retrieve data from multiple tables. To solve this, I util ...

phpjquerymysqldatatablesssp

When using PHP, JavaScript, and HTML, you can trigger an image upload immediately after choosing a file using the

I currently have a small form with two buttons - one for browsing and another for uploading an image. I feel that having two separate buttons for this purpose is unnecessary. Is there a way to combine the browse and upload functions into just one button? ...

phpjavascripthtmlfileupload

`Text-overflow ellipsis should function consistently across both Firefox and Chrome browsers`

A design has been created to showcase captions for articles and their respective statuses. The article name box has a fixed width, with text-overflow:ellipsis applied to trim excessively long names. Additionally, a light grey dotted line is added at the en ...

htmlcssgoogle-chromefirefoxellipsis

Tips for adjusting the search bar's position on a mobile device when it is activated by the user

I need help with an open source project where I am developing a search engine using Angular. When using smaller screen sizes, the search bar is positioned in the middle but gets hidden behind the keyboard terminal when clicked on. Can anyone advise on ho ...

javascriptcsshtmlangulartypescript

Issue with jquery .click function not triggering after CSS adjustment

In the process of creating a fun game where two players take turns drawing on a grid by clicking <td> elements. Currently, I have implemented the functionality to toggle the background color of a <td> element from black to white and vice versa ...

javascriptjquerycssajax

When utilizing a hexadecimal notation for the background color, the lower border may vanish

While attempting to add a 1px solid border around an anchor tag with a dark background color in hexadecimal format, I discovered that the bottom border was not showing up! After investigating for a while, I realized that the issue was caused by the backgr ...

csshexborderbackground-color

How can I make a Bootstrap 5 container adjust to the height of the screen?

I am currently working with Bootstrap 5 and facing an issue while displaying a calendar on the screen. The height of the container appears to be around 25% longer than the screen height. I have tried setting the height to "100%" and "80%" in the CSS, but i ...

htmlcssbootstrap-5