Develop Reference

CSS pointer-events: none while allowing hover

I'm trying to create an element of top my page which can be hovered. When hovered I want to change the opacity of the element and allow click through.
The thing is when I add the pointer-events: none to allow the click through, my hover is never triggered, which seems logic after all. I though I would be able to deal with it with JavaScript, but event mouseover or mouseenter is not compatible with pointer-events: none.
Here is my example with only CSS: If I add the pointer-events: none; it doesn't work. The element is the red banner, I want to be able to click the buttons underneath while being able to lower the opacity of it.
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
button.right {float:right;}
.bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease-in-out;
pointer-events:none;
}
.bandeau:hover {
opacity: 0.4;
}
<div class="container">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right">Contact us</button>
<button class="right">Log in</button>
</nav>
<div class="content"></div>
<div class="bandeau">
<span>I will be back !</span>
</div>
</div>
The other example with JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var bandeau = document.getElementById("bandeau");
bandeau.addEventListener('mouseenter', e => {
bandeau.style.opacity = '0.4';
bandeau.style.pointerEvents = 'none';
});
bandeau.addEventListener('mouseleave', e => {
bandeau.style.opacity = '1';
bandeau.style.pointerEvents = 'auto';
});
}, false);
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
button.right {float:right;}
#bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease-in-out;
}
<div class="container">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right">Contact us</button>
<button class="right">Log in</button>
</nav>
<div class="content"></div>
<div id="bandeau">
<span>I will be back !</span>
</div>
</div>
Is there a way to achieve this or is it impossible?

In your example you could do it easily on a hover on the whole nav element like
nav:hover + .content + .bandeau { opacity: 0.4; }
Or you can move the banner element to the because it's an absolute positioned element. Then a hover on the login button (with the .right class) will make it transparent:
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
button.right {float:right;}
.bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease-in-out;
pointer-events:none;
}
.right:hover + .bandeau {
opacity: 0.4;
}
<div class="container">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right">Contact us</button>
<button class="right">Log in</button>
<div class="bandeau">
<span>I will be back!</span>
</div>
</nav>
<div class="content"></div>
</div>
I know it's a bit different than a hover on the banner itself, but maybe this can give you some ideas :)

I found a solution based on a comment on the thread linked by #yanca.
I use document.elementFromPoint to chekc what cursor I should display (pointer or auto) based on the lement below the banner. Then I reuse document.elementFromPoint to transfer the click through
Here is the code :
document.addEventListener('DOMContentLoaded', function() {
var bandeau = document.getElementById("bandeau");
bandeau.addEventListener('mousemove', e => {
bandeau.style.display = "none";
var elemUnder = document.elementFromPoint(e.clientX, e.clientY);
bandeau.style.display = "block";
var stylesUnder = getComputedStyle(elemUnder);
bandeau.style.cursor = stylesUnder.cursor;
});
bandeau.addEventListener('click', e => {
bandeau.style.display = "none";
var elemUnder = document.elementFromPoint(e.clientX, e.clientY);
bandeau.style.display = "block";
elemUnder.click();
});
}, false);
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;cursor:pointer;}
button.right {float:right;}
#bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease;
}
#bandeau:hover {
opacity:0.4;
transition: 0.2s ease;
}
<div class="container">
<div id="body">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right" onclick="alert('click contact')">Contact us</button>
<button class="right" onclick="alert('click login')">Log in</button>
</nav>
<div class="content"></div>
<div>
<div id="bandeau">
<span>I will be back !</span>
</div>
</div>
Thanks for the help !!

Is it possible to change the style of an element when a specific div/element is scrolled into view?

Specifically, I want to change colors of sticky and fixed elements on my page dynamically as the user scrolls into specific sections. I know that this is possible with the pixel height on scroll, but I can't use this technique, because the background of my page consists of a stack of images. This causes the pixel height of the page to change dramatically on window resize due to the height needing to increase as the image gets wider
.
I guess it would be possible to do this with a bunch of media calls, but I'm trying to avoid this, and I'm not even sure it would work.
My main goal would be:
When a div is scrolled into view, the style (mainly color and font-weight) of the navigation bar and fixed footer change.
Also - This has to be in Vanilla JS.
If someone has a pure CSS solution, that's very acceptable as well, I just can't think of a way this would work.
Thank you!

How About Using This?
These are VanillaJS SpyScroll
https://github.com/cferdinandi/gumshoe
https://github.com/ederssouza/vanillajs-scrollspy
From Codepen zchee/pen/ogzvZZ
HTML
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="home" class="section"></div>
<div id="portfolio" class="section"></div>
<div id="about" class="section"></div>
<div id="contact" class="section"></div>
SCSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color: rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color: rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
ul {
margin: 15px 0 0 0;
li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
}
}
.active {
font-family: 'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family: 'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
}
#portfolio {
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
JS
(function() {
'use strict';
var section = document.querySelectorAll(".section");
var sections = {};
var i = 0;
Array.prototype.forEach.call(section, function(e) {
sections[e.id] = e.offsetTop;
});
window.onscroll = function() {
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
for (i in sections) {
if (sections[i] <= scrollPosition) {
document.querySelector('.active').setAttribute('class', ' ');
document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
}
}
};
})();

Waypoints not working properly with my sidenav

I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`

when i click again the it display none and height back to 0px but the element inside shows and does not display none or leave the page

This menus, when you clicked they drop down and displayed the specific menu block and click the menu again i displayed it none and click white space on the page or other menu the specific menu that you open will closed.
But...
The Problem is when the specific menu is 'onclick' and displayed block, height = 390px and when i click again the it display none and height back to 0px but the element inside shows and does not display none or leave the page... why??
Code:
*<!--html markup-->
<header class="top">
<nav class="nav">
<ul class="nav-menus">
<li id="menu_1">
a
<section id="a" class="dropMenus"><h1>A</h1></section>
</li>
<li id="menu_2">
b
<section id="b" class="dropMenus">B</section>
</li>
<li id="menu_3">
c
<section id="c" class="dropMenus">C</section>
</li>
<li id="menu_4">
d
<section id="d" class="dropMenus">D</section>
</li>
</ul>
</nav>
.nav-menus .dropMenus{
position: absolute;
display: none;
top: 90px;
left: 0;
width: 100%;
background: rgba(255, 170, 0, 0.1);
z-index: 1;
box-shadow: 2px 2px 2px #888;
}
//javascript
var boxArray = ['a', 'b', 'c', 'd'];
window.addEventListener('mouseup', function drop(event){
for(var i=0; i < boxArray.length; i++){
var box = document.getElementById(boxArray[i]);
var maxH = '390px';
if(event.target != box && event.target.parentNode != box){
if(box.style.height == maxH && box.style.display === 'block'){
box.style.display = 'none';
box.style.height = '0px';
} else {
box.style.height = maxH;
}
}
}
});
Heres the output
![PAGE LOADED][1]
[1]: http://i.stack.imgur.com/5oEef.png
![MENU CLICKED AND DROP DOWN][2]
[2]: http://i.stack.imgur.com/eWsGH.png
![MENU CLICKED BACK UP BUT PROBLEM OCCURRED][3]
[3]: http://i.stack.imgur.com/qVwjQ.png

I have taken liberty of updating your code.
JSFiddle
function updateUI(element) {
var dropMenus = document.getElementsByClassName('dropMenus');
var el = document.getElementById(element);
var show = el.style.display == 'none' ? true : false;
for (var i in dropMenus) {
if (!isNaN(i)) {
dropMenus[i].style.height = '0px';
dropMenus[i].style.display = 'none';
}
}
if (show) {
el.style.height = '390px';
el.style.display = 'block';
}
}
body {
margin: 0;
border: none;
padding: 0;
}
.top {
margin: 0 auto;
overflow: hidden;
}
.nav {
margin: 0 auto;
border: none;
padding: none;
width: 100%;
height: 90px;
float: left;
background: #e69900 url(http://dot.spindev.ph/wp-content/themes/fun/images/planner/imgright.png) no-repeat;
background-size: 1366px 90px;
font: 18px sans-serif, 'arial';
}
.nav li {
display: inline;
}
.nav li a {
text-decoration: none;
}
.nav > .logo a {
text-decoration: none;
float: left;
font-size: 30px;
margin: 30px 50px 20px 50px;
color: #fff;
}
.nav > .nav-menus a {
margin-top: -15px;
padding: 30px 24px 25px 24px;
float: left;
color: #fff;
transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
-o-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
-webkit-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
-moz-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
}
.nav > .nav-menus a:hover {
background: rgba(179, 119, 0, 0.4);
border-bottom: 10px solid #ffbb33;
color: #fff;
}
.nav-menus .search {
float: right;
margin-right: 20px;
}
.nav-menus > .nav-icon {
padding: 2px 5px;
border: 1px solid #000;
float: left;
display: none;
}
.nav-menus > .nav-icon > div {
width: 20px;
height: 4px;
background: #333;
margin: 3px 0px;
border-radius: 4px;
}
.nav-menus .dropMenus {
position: absolute;
display: none;
top: 90px;
left: 0;
width: 100%;
background: rgba(255, 170, 0, 0.1);
z-index: 1;
box-shadow: 2px 2px 2px #888;
}
<header class="top">
<nav class="nav">
<header class="logo">
it's more fun
</header>
<ul class="nav-menus">
<div class="nav-icon">
<div></div>
<div></div>
<div></div>
</div>
<li id="menu_1">
philippines
<section id="philippines" class="dropMenus">
<h1>A</h1></section>
</li>
<li id="menu_2">
things to do
<section id="thingsToDo" class="dropMenus">B</section>
</li>
<li id="menu_3">
top destinations
<section id="topDestinations" class="dropMenus">C</section>
</li>
<li id="menu_4">
planning your trip
<section id="planningYourTrip" class="dropMenus">D</section>
</li>
<li class="search">search</li>
</ul>
</nav>
</header>

Create line connecting two DIVs

I am creating a relationship editor. The user create some elements and is able to link them creating a relationship (bidirectional). I've created the first part (users creating elements). Now I need to create lines connecting two DIVs when users double click an element, for example.
I know that may have a couple of ways to do it, but actually I have no idea how to start it. What would be a starting point?
$(function() {
$("#BtInsert").button()
.click(function() {
var pad = "000000"
var cor = "" + Math.floor(Math.random() * 16777215).toString(16);
cor = "#" + pad.substring(0, pad.length - cor.length) + cor;
var newDIV = document.createElement('div');
$(newDIV).addClass("base")
.appendTo($("#container"))
.html('N')
.dblclick(function() {
alert('Want to start to create a line from this div to another double click');
})
.draggable({
containment: "parent"
})
.css({
left: Math.floor(Math.random() * ($("#container").width() - $(".base").width())),
top: Math.floor(Math.random() * ($("#container").width() - $(".base").width()))
})
.css("background-color", cor);
})
});
#BtInsert {
top: 405px;
width: 400px;
position: absolute;
}
body {
margin: 0px;
padding: 0px;
}
#container {
border: solid 1px #CCC;
width: 400px;
height: 400px;
padding: 0;
margin: 0;
top: 0;
left: 0;
background-color: whitesmoke;
}
.base {
height: 50px;
width: 50px;
top: 30px;
left: 30px;
border-radius: 25px;
box-shadow: 2px 2px 2px #888888;
vertical-alignment: middle;
line-height: 50px;
text-align: center;
margin-bottom: 5px;
font-family: Calibri;
font-weight: bold;
font-size: 2em;
color: white;
background-color: #CCC;
cursor: pointer;
-webkit-transition: width 3s, height 3s, border-radius 3s, line-height 3s, box-shadow 3s;
transition: width 3s, height 3s, border-radius 3s, line-height 3s, box-shadow 3s;
float: left;
position: absolute;
z-index: 0;
}
.base:hover {
z-index: 1000;
color: #333;
width: 80px;
height: 80px;
border-radius: 50px;
line-height: 80px;
box-shadow: 4px 4px 4px #888888;
-webkit-transition: width 1s, height 1s, border-radius 1s, line-height 1s, box-shadow 1s;
transition: width 1s, height 1s, border-radius 1s, line-height 1s, box-shadow 1s;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
</div>
<a href="#" id="BtInsert">
Insert an element
</a>
JS Fiddle

Its better to use SVG instead of HTML for this kind of representations. you will have more flexibility in drawing shapes in SVG.
You can take a look at http://d3js.org/ or http://raphaeljs.com/
See this examples:
http://bl.ocks.org/enoex/6201948
http://blog.stephenboak.com/2012/06/15/d3-flow-vis-tutorial.html
-> https://web.archive.org/web/20130108020533/http://blog.stephenboak.com:80/2012/06/15/d3-flow-vis-tutorial.html
it's doing something similar to what you want.