Looking for a way to connect two divs with a line upon clicking. The goal is to match content in two separate columns, similar to a "match the following" concept. I've exhausted all my options and would prefer not to use external tools or HTML5 canvas. Is it possible to achieve this using just jQuery, CSS, and HTML? Would appreciate any guidance. Thanks!
One idea that comes to mind is creating a design with three lines - horizontal (starting from one element), vertical (going up or down), and then horizontal again (connecting to another element). To achieve this, you can set up two small columns without borders and dynamically add corresponding borders using jQuery's .css method.
If you want to animate these lines, consider starting with divs of size 0 and gradually increasing the size to reveal the borders.
Check out this basic example on jsFiddle: http://jsfiddle.net/3xPpc/ HTML:
<div class="big-col">
<div class="big-row blue"></div>
<div class="big-row green"></div>
<div class="big-row blue"></div>
<div class="big-row green"></div>
</div>
...
CSS: .big-col { float: left; }
.small-col {
float: left;
}
.big-row {
width: 200px;
height: 100px;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
...
To implement the borders on click event using jQuery, simply add the necessary code for border styles.
If you're looking for a way to connect the divs on the same row or column, here's an example of how you can achieve that. There's room for improvement and making it more flexible and elegant with some additional work. The basic idea involves checking the top and left positions of the clicked elements and adding extra divs to draw connecting lines.
if (pos_1.top == pos_2.top) {
// same row
if (Math.abs(pos_1.left - pos_2.left) == 100) {
// adjacent
var bar = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top - 2 + div_1.height() / 2) + "px", "height" : "5px", "width" : "50px", "left" : ((pos_1.left > pos_2.left ? pos_2.left : pos_1.left) + 50) + "px" });
$("body").append(bar);
} else {
// same row not adjacent
var bar1 = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top + 50) + "px", "height" : "20px", "width" : "5px", "left" : (pos_1.left - 2 + div_1.width() / 2) + "px"});
var bar2 = bar1.clone().css({"left" : (pos_2.left - 2 + div_2.width() / 2) + "px"});
var bar3 = $("<div></div>").addClass("connectbar").css({ "top" : (pos_1.top + 65) + "px", "left" : ((pos_1.left > pos_2.left ? pos_2.left : pos_1.left) + 25) + "px", "width" : "200px", "height" : "5px" });
$("body").append(bar1).append(bar2).append(bar3);
}
}
I have implemented a countdown using which smoothly animates the numbers down and fades to opacity 0. Update. I have also created a demo on jsFiddle here: http://jsfiddle.net/Mw4j2/ // The .static class is added when the animation // complet ...
Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...
I have a JSON object that I need to convert to a string and then perform substring replacements using JQuery var data = JSON.stringify(object); data = data.replace("meat", "vegetables"); console.log(data); However, when I attempt to run this code, I enco ...
I have encountered an issue with my Accordion code. When I test it, the word 'not' is displayed twice, while 'hve' is not displayed at all. $('.st-accordion li a').click(function() { if ($(this).parent().not('activeac ...
Having some difficulty figuring out a solution to this issue. Attempting to modify certain CSS properties using jQuery. The problem arises when one div has an ID, changing the property there works as expected. However, the other div only possesses a class ...
I'm working on a layout with a fixed gradient div that contains all my content. However, I want the content to be scrollable instead of fixed. How can I make this happen? Here is the current structure: <body> <div class="wrappe ...
Below is the example of an HTML structure: <span id="17">yes here</span> <div class="PricevariantModification vm-nodisplay"></div> <div class="PricesalesPrice vm-display vm-price-value"> <span class="a"></span> ...
Currently utilizing the pagination feature in Bootstrap 4 as outlined here. While I am able to smoothly navigate between my pages, I have noticed that the navigation buttons do not adjust properly to changes in screen size. For instance, with a total of 1 ...
Check out my website at Everything was working smoothly with the background for the top menu, but suddenly it stopped working. The strange thing is, I only made adjustments to the position settings of some unrelated elements. ...
When using Bootstrap 3.2 and applying navbar-right to two different dropdown menus, they tend to overlap slightly. The code snippet below is taken directly from the Dropdown examples on the official Bootstrap website, but with the modification of having tw ...
Check out the preview site at . It's a test version before launching on a separate domain. Hello, I need to customize the error response for a CRM contact form integrated into Wordpress with the help of StackOverflow. The form is connected via JavaSc ...
At narrower widths, I am facing an issue with my Bootstrap 4 containers. The container for the image (on JSFiddle line 28) is overlapping with the container for navigation (on JSFiddle line 16). I need a solution to prevent this overlap. <div class="co ...
In my controller, I am successfully passing my Model to the view using the following code: Models.Models.AELeadInfo lead = new Models.Models.AELeadInfo(); lead.firstName = "name"; lead.lastName = "lastname"; lead.add1 = "add1"; lead.add2 = "add2"; lead.ci ...
I have observed that the css border-bottom property is not functioning properly in Chrome. Upon testing in IE 10 and Mozilla, I found that it works fine on these browsers. However, it only works in Chrome when the full screen mode is not being utilized. ...
I'm looking to create a dynamic div that appears and disappears based on the user's scroll position. Here is what I have so far: $(document).scroll(function() { var y = $(this).scrollTop(); if (y > 200) { $('.float-contai ...
We are currently facing an issue with the responsive divs in our project. Instead of clearing other div elements on the page, they are overlapping. Our project is built using bootstrap 4.3.1 and we would appreciate any assistance. Feel free to visit this ...
I originally used jQuery for this task, but I now want to switch to regular JavaScript as I'll be incorporating it into phonegap. I aim to avoid relying on different JS frameworks every time I make a server request, which could potentially improve per ...
I have a situation where one of my web pages contains a DIV element with text inside, set at 1.1em size. Here's an example: <div id="displaydiv"> <b>Hello World</b> </div> On another page, I have the same DIV element but ...
I need some help with a JavaScript function that I want to use in a form for submitting or canceling. The issue I'm facing is that it's supposed to cancel the form submission when "cancel" is clicked, but currently it only displays the warning me ...
I am currently working on a JS/JQ function that allows users to toggle between following and unfollowing a question. Depending on where the user clicks, they may encounter a link with text "Follow" or "Unfollow", or a button labeled "FOLLOW" or "UNFOLLOW ...