Develop Reference

Make hovered tooltip disappear when clicking button

I am trying to create a tooltip for whatever that needs it on my website, e.g. a button, text, etc. So far I have something like this:
https://jsfiddle.net/f06q3cLg/
.content {
display: grid;
width: 100vw;
height: 100vh;
place-content: center;
}
.content .parent {
border: 1px red solid;
padding: 10px;
position: relative;
}
.content .parent:hover .tooltip-wrapper {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:hover:before {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:active .tooltip-wrapper {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:active:before {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
left: 50%;
transform: translateX(-50%);
opacity: 0;
}
.content .parent .tooltip-wrapper {
position: absolute;
display: grid;
left: 0;
width: 300px;
height: 100%;
opacity: 0;
pointer-events: none;
}
.content .parent .tooltip-wrapper.bottom {
top: calc(100% + 8px);
}
.content .parent .tooltip-wrapper .tooltip {
max-width: 300px;
width: fit-content;
padding: 8px;
position: absolute;
display: inline-block;
background: blue;
border-radius: 5px;
padding: 8px;
color: white;
font-size: 11px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
line-height: 1.3;
text-align: left;
}
/* Keyframes */
#keyframes fadeInTooltip {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOutTooltip {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<div class="content">
<div class="parent">
Hover me
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip</span>
</div>
</div>
</div>
As such, it works somewhat fine. My issue is that I would like the tooltip to disappear when I click the button. Now it vanishes, and then comes back with a 0.4s delay as the hover effect actually has. Ideally the tooltip should disappear as long as my mouse is still on the button, but when I remove it and re-enters the button, then the tooltip should re-appear.
I'm not sure if this is even achievable with pure CSS, but any JS would also do.

The problem is that :active is only applied as long as the mouse is down.
mdn: :active:
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
What you could do (if you want to stay CSS only) is to use tabindex="0" on the <div class="parent"> and :focus instead of :active. But you need to verify that using tabindex="0" here won't hurt usability.
Ideally the tooltip should disappear as long as my mouse is still on the button, but when I remove it and re-enters the button, then the tooltip should re-appear.
That won't work with :focus either. I'm pretty sure that this behavior can only be achieved with JS. If it is possible with CSS only it likely would be a pretty hacky solution.
But from the perspective of a user, this seems to be counterintuitive that the tooltip won't appear after clicked.
A JavaScript solution that does what you want could look like this.
It is a simplified version of the tooltip to only show the relevant parts.
Every element having a tooltip has an attribute data-has-tooltip.
// event delegation for all mouse down event:
// this ensures that the code also works for elements that have been added to the DOM after that script was executed.
document.addEventListener('mousedown', (evt) => {
// check if the mousedown happened in an element with a tooltip
const element = evt.target.closest('[data-has-tooltip]');
if (element) {
// if the user already clicked on the element ignore the click
if (!element.classList.contains('active')) {
// add the active class to the element so that hover won't show the toolip
element.classList.add('active');
function removeActiveOnLeave() {
// remove the active class
element.classList.remove('active');
// remove the mouseleave event listener again
element.removeEventListener('mouseleave', removeActiveOnLeave)
}
// add an event listener for mouseleave to remove the active class
element.addEventListener('mouseleave', removeActiveOnLeave)
}
}
});
.parent {
display: inline-block;
border: 1px solid red;
padding: 0.5rem;
margin: 0.5rem;
}
.tooltip-wrapper {
display: none;
}
.parent:hover .tooltip-wrapper {
display: block;
}
.parent.active:hover .tooltip-wrapper {
display: none;
}
<div class="content">
<div class="parent" data-has-tooltip>
Hover me A
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip A </span>
</div>
</div>
</div>
<div class="content">
<div class="parent" data-has-tooltip>
Hover me B
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip B</span>
</div>
</div>
</div>

HTML
<div class="content">
<div class="parent" onClick="myFunction()">
Hover me
<div class="tooltip-wrapper">
<span class="tooltip" id="tooltip">This is mytooltip</span>
</div>
</div>
</div>
Javascript
function myFunction(){
var tooltip=document.getElementById("tooltip");
if (tooltip.style.display=="none") {
document.getElementById("tooltip").style.display="block";
} else {
document.getElementById("tooltip").style.display="none";
}
}

Manipulating 'display' property.
const parent = document.querySelector('.parent');
const toolTip = document.querySelector('.tooltip');
parent.addEventListener('click', () => {
if(toolTip.style.display !== 'none') {
toolTip.style.display = 'none';
}else {
toolTip.style.display = 'grid';
}
});

A solution using jQuery 3.4.1:
$(".parent").click(function () {
$(".tooltip-wrapper").css("display", "none");
});
The only downfall with that solution is once you click and re-hover in the same session, the SCSS :hover doesn't work properly.
No need to stress, just add the following if you want that functionality:
$(".parent").hover(function () {
$(".tooltip-wrapper").css("display", "block");
});
Try it out in the attached snippet:
$(".parent").click(function () {
$(".tooltip-wrapper").css("display", "none");
});
$(".parent").hover(function () {
$(".tooltip-wrapper").css("display", "block");
});
.content {
display: grid;
width: 100vw;
height: 100vh;
place-content: center;
}
.content .parent {
border: 1px red solid;
padding: 10px;
position: relative;
}
.content .parent:hover .tooltip-wrapper {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:hover:before {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:active .tooltip-wrapper {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:active:before {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
left: 50%;
transform: translateX(-50%);
opacity: 0;
}
.content .parent .tooltip-wrapper {
position: absolute;
display: grid;
left: 0;
width: 300px;
height: 100%;
opacity: 0;
pointer-events: none;
}
.content .parent .tooltip-wrapper.bottom {
top: calc(100% + 8px);
}
.content .parent .tooltip-wrapper .tooltip {
max-width: 300px;
width: fit-content;
padding: 8px;
position: absolute;
display: inline-block;
background: blue;
border-radius: 5px;
padding: 8px;
color: white;
font-size: 11px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
line-height: 1.3;
text-align: left;
}
/* Keyframes */
#keyframes fadeInTooltip {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOutTooltip {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="parent">
Hover me
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip</span>
</div>
</div>
</div>
OR, you can see it working in this Fiddle. with your initial
SCSS.
You can uncomment the second function to see the hover working again after clicking.

Make contents of a div into a movable resizable button

I have made a button that basically will go on top of a leaflet map. It uses animate.css and wow.js to animate certain things and it works ok. It is made up of a div, an image, text and a span. What I need to do is make the whole thing into a div or something that I can resize and move without changing all the CSS etc. If I want to add an extra 2 or 3 buttons it will be a lot of hassle. I need to be able to move and resize depending on the screen resolution. I want to be able to use media queries to change just one thing like the size and position of the div but maintain the functionality.
I have tried putting everything into a new div but no joy!
I have included a fiddle http://jsfiddle.net/eLron3d2/1/
The HTML is :
<div id="start_box" class ="animated bounceIn">
<img id="target" class="targetimg" src="https://www.faces2places.co.uk/img/target.png" onclick="golive()"></img><button id="startbutton" type="button" class="btn-target animated bounceInLeft"></button>
<span id="status" class="btn-target-name animated fadeIn delaydn">START</span>
</div>
The CSS is :
#start_box {
position: fixed;
top: 10px;
/* right: 20px; */
left: 10px;
z-index: 2;
border: 2px solid;
border: radius:20px;
border-radius: 5px;
padding: 0px;
box-shadow: 0px 0px 0px 0px;
width: 80px;
height: 80px;
background-color: white;
border-color: #969696;
}
.targetimg {
position:relative;
top: 4px;
left: 8px;
border-radius: 2.5px;
display:flex;
width:60px;
height:60px;
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.btn-target {
background-color: white !important;
position: fixed;
width: 72px;
height: 16px;
top: 67.5px;
left: 2.2px;
color: #000000;
border: 2px solid #969696;
border-radius: 5px 5px 5px 5px
}
.btn-target-name {
color:green;
font-family: 'Passion One', cursive;
display: block;
width: 76px;
top: 70.5px;
font-size: 12px;
font-weight:0;
text-align: center;
position: fixed;
}
.delaydn {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: 1s;
}
.goliveactive {
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: spin;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
And the JS is
window.live = false;
window.directions = true;
function golive() {
if (window.live === false) {
$("#target").addClass("goliveactive");
$('#status').css('color', '#ff3258');
$('#status').text('FINISH');
window.live = true;
} else if (window.live = true) {
$("#target").removeClass("goliveactive ");
$('#status').css('color', 'green');
$('#status').text('START');
window.live = false;
}
}

Ok, I have done it like so
http://jsfiddle.net/eLron3d2/2/
I wrapped everything into a button and changed pretty much everything to % not fixed sizes. I can change the size and position of it in the .target css
It works pretty good apart from I would like to change the font size to automatically change to fit but that one thing is easy to do with media queries, at least I don't have to change everything. The only thing is, the font does'nt load and show properly in jsfiddle but works on all browsers I have checked it with.
The HTML for 2 buttons is
<button class="btn target animated fadeIn"><span id="btn1" class="btnimage animated rubberBand" onclick="golive()"></span><span class="btn1textbox animated bounceInLeft"></span><span id="status" class="btn1text animated delaydn fadeIn">START</span></button>
<button class="btn target animated fadeIn delaybox"><img class="driverimg animated fadeIn" src="http://www.faces2places.co.uk/img/jules.jpg" onclick="alert('FUCKME')"></img><span class="btn1textbox animated bounceInLeft delaybox"></span><span id="status" class="btn1text animated delaydn2 fadeIn">JUSTIN.C</span></button>
The CSS is
.btn {
position: relative;
display: block;
margin-bottom:12px;
color: white;
font-size: 16px;
cursor: pointer;
border: 2px solid;
padding: 0px;
box-shadow: 0px 0px 0px 0px;
width:80px;
height:80px;
background-color: white;
border-color: #969696;
border-radius: 5px 5px 5px 5px
}
.target {
left:100px;
width:80px;
height:80px;
top:100px;
}
.btn1textbox {
position: absolute;
left: 5%;
top: 92%;
display: inline-block;
color: white;
border: 2px solid;
width: 86.5%;
height: 16%;
background-color: white;
border-color: #969696;
border-radius: 5px 5px 5px 5px
}
/* Darker background on mouse-over */
.btn:hover {
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.btnimage {
position: relative;
background:url(https://www.faces2places.co.uk/img/target.png) no-repeat center;
display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;
top:-4px;
}
.btndriver {
position: relative;
display: inline-block;
width:100%;
height:100%;
background-size: 80% 80%;
}
.btn1text {
font-family: 'Passion One', cursive;
color:green;
position: relative;
display: inline-block;
width:100%;
height:100%;
top: -12px;
font-size: 13px;
}
.goliveactive {
animation-duration: 30000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: spin;
}
.delaydn {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: .8s;
}
.delaybox {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: .5s;
}
.delaydn2 {
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: 1.3s;
}
button:focus {outline:0;}
.driverimg {
position:relative;
top:-1;
border-radius: 2.5px;
display:inline-block;
width:100%;
height:100%;
}
and the JS is
new WOW().init();
window.live = false;
window.directions = true;
function golive() {
if (window.live === false) {
$("#btn1").addClass("goliveactive");
$('#status').css('color', '#ff3258');
$('#status').text('FINISH');
window.live = true;
} else if (window.live = true) {
$("#btn1").removeClass("goliveactive ");
$('#status').css('color', 'green');
$('#status').text('START');
window.live = false;
}
}

On click form label moves up but when a user clicks out of the input field the label doesn't go back to normal

Basically, I am creating a form where the user clicks into a field and the label repositions to the top of the field.
I can get the label to move up when a user clicks into the field but when a user clicks out the field, the label doesn't go back to this correct position.
$(".js-form-item").on("click", function() {
$(this).addClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
Thanks for your help in advance!
Cheers

Basically, you're not checking when shouldvthe label goes back to its default position. Logically that would be if the input field is empty the label goes back to its position. By attaching a blur event listener to the input field that has a class of .form-item__input then we can achieve the behaviour you want. So check this out:
$(".js-form-item").on("click", function () {
$(this).addClass('form-item--input-filled');
});
$(".form-item__input").on("blur", function () {
if($(this).val() === '') {
$(this).parent('.js-form-item').removeClass('form-item--input-filled');
}
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text, .form-email, .form-password, .form-number, .form-select, .form-tel, .form-date, textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input, .form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px,-5px,0) scale3d(0.7,0.7,1);
}
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
The label will get back to its default position only if the input field is empty, so if the input field has some value the label will stay on top.

In your case I think you don't need to track click outside the element, because you need an event when your input loses focus. For that you can add .blur() listener to your input and remove the class which you added previously.
https://api.jquery.com/blur/

Use .blur() and it will solve your issue.
$(".js-form-item").on("click", function() {
$(this).addClass('form-item--input-filled');
});
$(".js-form-item > input").on("blur", function() {
$(this).parent().removeClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
But in my opinion you should use .focus() rather than your .click() function
$(".js-form-item > input").on("focus", function() {
$(this).parent().addClass('form-item--input-filled');
});
$(".js-form-item > input").on("blur", function() {
$(this).parent().removeClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
Hope this solved your issue.

Your code is ok, only change it similar this. It will works stylish!. simple and short:
$(".js-form-item").on("click", function() { $(this).addClass('form-item--input-filled'); })//exactly your code
.on("focusout",
function(){
$(this).removeClass('form-item--input-filled');
}
);
Extra descriptions:
I have used focusout event that works fine always. I have tested it on my mobile and all things is fine.

Prevent event handlers in an iframe from affecting the parent window/page (jump/scroll to top)

I would like to prevent a toggle event inside an iframe from causing the parent page to jump up to the top when clicked.
The child page does not do that by itself thanks to the following code below. However, when I interact with it while inside an iframe; the same child page causes the parent with the iframe to jumps up to the top when I click on the toggle button in the child page.
I used:
return false;
evt.preventDefault();
evt.stopPropagation();
And they work fine if I was looking at the child page by itself. However, the code has no effect in preventing the parent page from jumping to the top.
Child page code (Application Matrix PHP):
.documentBody
{
color: #808080;
padding: 0px 20px 0px 20px;
vertical-align: top;
}
.documentBody a
{
color: #0075a0;
text-decoration: none;
}
.documentBody a:hover
{
color: #0092c8;
}
.boxBodyArticulatedTrucks {
display: block;
height: 208px;
margin: auto;
background: url( "../assets/user-interface/articles/box/body/background/articulated-trucks.png" ) no-repeat center center;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.boxBodyArticulatedTrucks:hover
{
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.questionForm
{
/*width: 587px;*/
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 20px;
}
.questionFormBody
{
/*background-color: #fbfbfb;
border: solid 1px #eeeeee;*/
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
display: none;
}
.btnAccordion
{
border: solid 1px #eeeeee;
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
padding-top: 20px;
background: url( "../assets/user-interface/articles/accordion/icons/down-arrow.png" ) no-repeat center right 20px #fbfbfb;
}
<div id="articulatedTruck">
<div class="documentBody">
<div class="btnAccordion">
Articulated Truck
</div>
</div>
<div class="questionForm">
<div id="questionFormBody0" class="questionFormBody">
<div style="padding-top: 26px; padding-bottom: 10px;">
1. What is the application(s)?
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#chkArticulatedTruck').change(function () {
$('#articulatedTruck').toggle(this.checked);
parent.setArticleSize();
return false; // Prevent page from jumping to the top
}).change(); // Ensure visible state matches initially
});
</script>
Parent page code:
<iframe id="article" src="./applications/application-matrix.php" width="627px" height="500px" frameborder="0" scrolling="no"></iframe>

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.