Develop Reference

Both parent and child links open

I have a parent <a> with an href attribute. I have a child <p> and I want a small box to be opened when I click on child element.
The problem is when I click on the child element, it opens the small box but after a second the parent link opens up too. I don't want the parent link to be opened when I click on child element. I added event.stopPropagation() but it doesn't change anything. I also added z-index property but no changes either.
In my JS Fiddle demo you can see a live example; but here is my code so far:
.parent {
background-color: blue;
display: inline-block;
width: 400px;
height: 300px;
z-index: 1;
}
.child {
color: black;
background-color: yellow;
display: inline-block;
width: 100px;
height: 50px;
z-index: 2;
}
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
.child:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
font-size: 10px;
z-index: 20;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<a class="parent" href="https://www.google.com/">
<p class="child" title="This is mobile tooltip" tabindex="0" (click)="$event.stopPropagation();">Click</p>
</a>
JS Fiddle demo
PS: I cannot use jQuery.
Thanks.

Let me explain What I did was create a variable that changed whenever it hovered on the element or off the element. Next Whenever the user clicked on it I just ran a check to see if the mouse was not hovering on the element and executed a code if was on the element I ran a other code
var mouse = false;
function mouseStatus(n) {
mouse = n;
}
function parent() {
if (mouse == false) {
console.log('parent');
window.open('www.google.com');
}
}
function child() {
console.log('child');
}
.parent {
background-color: blue;
display: inline-block;
width: 400px;
height: 300px;
z-index: 1;
}
.child {
color: black;
background-color: yellow;
display: inline-block;
width: 100px;
height: 50px;
z-index: 2;
}
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
.child:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
font-size: 10px;
z-index: 20;
}
<a class="parent" onclick="parent()">
<p class="child" title="This is mobile tooltip" onmouseover="mouseStatus(true);" onmouseout="mouseStatus(false);" onclick="child()">Click</p>
</a>

call a function instead :
onEvent(event) {
event.stopPropagation();
return false;
}
calling the function with
(click) ="onEvent($event)"

JQuery Resizable : How to make multiples divs resizing independently

I made a simple web application which allow you to add dynamic divs to a container div.
You can see how the app is looking here :
Before resizing
As you can see, when you click the link "Image" in the left menu, it add a new div in the div container with the black background.
Theses dynamics divs add by this way can be dragged and resized by jQuery with the jQuery ui draggable and resizable method.
the draggable function works well, but not the resizable. It seem like the divs are dependents, and when you try to resize it, it depends of the size of the others dynamics divs.
Here is the illustration of what I try to explain :
After resize
Like you can see, I tried to resize the div2, but because I add the div1 first, the div1 been resized too.
I want to make all div independent so I can resize it even if it overlap another div.
Here is my codes :
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
ajoutImg.onclick = function () {
var moveDiv = document.createElement("div");
moveDiv.className = 'encadrer';
var titre = document.createElement("p");
var para = document.createElement("p");
titre.textContent = "Titre";
titre.className = 'centrerTitre';
moveDiv.appendChild(titre);
para.textContent = prompt("Texte de l'image :");
para.className = 'centrerPara';
moveDiv.appendChild(para);
bg.appendChild(moveDiv);
$(function () {
$(".encadrer")
.draggable({ containment: "parent" })
.resizable({
containment: "parent",
handles: "all"
});
});
};
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 640px;
width: 360px;
background-color: #000000;
}
.menu {
border: 1px solid black;
padding-left: 15px;
padding-right: 15px;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.encadrer {
display: table-cell;
border: 1px solid white;
vertical-align: middle;
}
.centrerTitre {
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.centrerPara {
font-size: 16;
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
/*----- Resizable ------*/
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
z-index: 99999;
display: block;
}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0px;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0px;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0px;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0px;
height: 100%;
}
.ui-resizable-nw {
cursor: nw-resize;
height: 7px;
width: 7px;
top: -5px;
left: -5px;
}
.ui-resizable-se {
cursor: se-resize;
height: 7px;
width: 7px;
right: -5px;
bottom: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
height: 7px;
width: 7px;
top: -5px;
right: -5px;
}
.ui-resizable-sw {
cursor: sw-resize;
height: 7px;
width: 7px;
left: -5px;
bottom: -5px;
}
/*----------------------*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<div id="menu" class="menu">
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
I don't really know how to use the snippet system but you can see the code by this way :p
Sorry for the bad English and the var names.

I did some css and js changes to fix your problem:
Replace $(".encadrer") to $(moveDiv) because you don't want to call the plugin for all elements (.encadrer) in each time the user add an image.
The main problem was with the position of the images which was relative I changed it to absolut.
I removed the display:table-cell and vertical-align:middle. If you want to center the image you should do this using by following How to center absolute element in div.
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
ajoutImg.onclick = function () {
//var moveDiv = document.createElement("div");
//moveDiv.className = 'encadrer';
//var titre = document.createElement("p");
//var para = document.createElement("p");
//titre.textContent = "Titre";
//titre.className = 'centrerTitre';
//moveDiv.appendChild(titre);
//para.className = 'centrerPara';
//moveDiv.appendChild(para);
var name = prompt("Texte de l'image :");
var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>');
$(bg).append(container);
container
.draggable({ containment: "parent" })
.resizable({
containment: "parent",
handles: "all"
});
};
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 640px;
width: 360px;
background-color: #000000;
}
.menu {
border: 1px solid black;
padding-left: 15px;
padding-right: 15px;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.encadrer {
/*display: table-cell;
vertical-align: middle;*/
border: 1px solid white;
position:absolute !important;
}
.centrerTitre {
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.centrerPara {
font-size: 16;
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.inner {
display: inline-block;
vertical-align: middle;
text-align:center;
width:100%;
}
.encadrer:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<div id="menu" class="menu">
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
Update
To get the content center inside the .encadrer you need to:
Wrap the content with div
Follow the tutorial go to: Vertically-> Is it inline or inline-* elements (like text or links)?-> Is it multiple lines? -> see the second demo. You can see the final result here

How can I make these added divs slide in from the right?

Here's a super simple example I made of creating new divs when you click the spawn button.
http://jsfiddle.net/3fLn9v4e/
jquery
$(document).ready(function()
{
$('.spawndivs').click(function(){
var my_div = document.createElement('div');
my_div.className = 'movingdiv';
document.getElementById('container').appendChild(my_div);
});
$('#reset').click(function(){
$('#container').empty();
});
});
How can I make these divs smoothly slide in from the right hand side up to their resting position when they are created?

You don't need extra js to animate your divs.
Just use keyframes like this:
$(document).ready(function()
{
$('.spawndivs').click(function(){
var my_div = document.createElement('div');
my_div.className = 'movingdiv';
document.getElementById('container').appendChild(my_div);
});
$('#reset').click(function(){
$('#container').empty();
});
});
body{margin:0px;}
.spawndivs
{
display: inline-block;
width: 100px;
height: 50px;
background-color: gray;
float: left;
cursor: pointer;
text-align: center;
margin-bottom:5px;
}
.container
{
display: block;
background-color: blue;
height: 50px;
width: 100%;
margin-bottom:5px;
}
.movingdiv
{
height: 30px;
width: 50px;
background-color: red;
display: inline-block;
margin: 10px;
animation-duration: 3s;
animation-name: slidein;
}
#keyframes slidein {
from {
margin-left: -200px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
to {
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
}
#reset-box{width:100%;clear:left;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spawndivs">
<p>spawn!</p>
</div>
<div id="container"></div>
<div id="reset-box"><button id="reset">Reset</button></div>
jsFiddle link: http://jsfiddle.net/AndrewL32/3fLn9v4e/2/

You can use .animate which allow you to perform some animation of an element.
JS
$(document).ready(function()
{
$('.spawndivs').click(function(){
var my_div = $('<div></div>');
my_div.addClass('movingdiv');
my_div
.appendTo('#container')
.animate({
left: "+=20",
opacity: 1
});
});
$('#reset').click(function(){
$('#container').empty();
});
});
And add a position: relative in your .movingdiv css class.
CSS
.movingdiv
{
position: relative;
opacity: 0;
height: 30px;
width: 50px;
background-color: red;
display: inline-block;
margin: 10px;
}
You can see the fiddle

Show Specific Paragraph within a Div - jQuery

I am trying to show a specific Paragraph when a specific div is clicked upon. I cannot get the jQuery to function the way I would like it to.
I want that if the ".Virus" div is clicked on, it shows the contents "v", if ".screenRepair" div is clicked on then it shows the ".screenInfo" contents
Any help would be appreciated.
HTML:
<div class="outerService">
<div class="service">
<div class="virus" style="width: 230px; height: 208px;">
<center>
<h3 style="width:200px; text-align:center">Computer Virus</h3>
<img src="images/Services/virus.jpg" alt="virus" height="140px"/>
</center>
</div>
<div class="information">
<p class="v">This is information</p>
<p class="screenInfo">hello</p>
</div>
<div class="screenRepair" style="width: 230px;">
<center>
<h3 style="width:auto; text-align:center">Screen Replacement</h3>
<img src="images/Services/smashedScreen.jpg" alt="BrokenScreen" height="140px"/>
</center>
</div>
</div>
</div>
CSS:
.outerService {
width: 90%;
margin-left: auto;
margin-right: auto;
height: auto;
border: 1px solid blue;
}
.service {
display: table;
height: auto;
max-width: 1044px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
}
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width: 250px;
height: 208px;
float: left;
max-height: auto;
text-align: center;
margin-left: 10px;
border: 1px solid #000;
}
#vInfo {
float: none;
width: 50%;
text-align: justify;
border: 1px solid #000;
display: none;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.information {
margin-left: 10px;
border: 3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
display: none;
}
.information p {
text-align: justify;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
jQuery
$(document).ready(function () {
$(".virus").click(function () {
$(".information .v").show();
});
});

With your current CSS you can try something like this:
$(document).ready(function() {
var $info = $( '.information' );
$(".virus").click(function() {
$info.show().find( 'p:not(.v)' ).hide().siblings().show();
});
$(".screenRepair").click(function() {
$info.show().find( 'p:not(.screenInfo)' ).hide().siblings().show();
});
});
Or you can slightly change your CSS and try to hide every P within .information instead of hiding .information itself.
Hope this helps.

change information div properties in your css (remove display:none)
.information {
margin-left: 10px;
border:3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
}
and add this lines to your css
.information .v {
display:none;
}
.screenInfo{
display: none;
}

Use Toggle if you want to show and hide div
Try something like this:
jQuery(document).ready(function(){
jQuery('#virus').live('click', function(event) {
jQuery('#information').toggle('show');
});
});
its working here is the JS Fiddle

$(document).ready(function() {
$(".virus").click(function() {
$(".information").show().find('p').show().next('.screenInfo').hide();
});
$(".screenRepair").click(function() {
$(".information").show().find('p').show().prev('.v').hide();
});
});
JSFiddle

Try something like this:
$(".service img").click(function () {
$(".information .v").toggle($(this).closest('div').hasClass('virus'));
$(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});
.hasClass() returns boolean true/false.
.toggle(true) results to show the hidden object while .toggle(false) results in hiding the object.
As suggested in the comments you need to hide all the infos rather than .information div. otherwise you need to show this one before showing any other info div.
Some other edits can be done like:
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width: 250px;
height: 208px;
float: left;
max-height: auto;
text-align: center;
margin-left: 10px;
border: 1px solid #000;
display: none; /*<-----add this to hide the info divs.*/
}
.information {
margin-left: 10px;
border: 3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
display: none;
}
and then you can add one more line:
$(".service img").click(function () {
$(".information").show(); //<----show it before showing any other div.
$(".information .v").toggle($(this).closest('div').hasClass('virus'));
$(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});
May be you want to look into this:
$(".service > div:not(.information)").click(function () {
$(".information").hide().show(); //<----show it before showing any other div.
$(".information .v").toggle($(this).hasClass('virus'));
$(".information .screenInfo").toggle($(this).hasClass('screenRepair'));
});

Try this
$(document).ready(function () {
$(".virus").click(function() {
$(".information").show();
$(".v").show();
$(".screenInfo").hide();
});
$(".screenRepair").click(function() {
$(".information").show();
$(".screenInfo").show();
$(".v").hide();
});
});

see in live
$(document).ready(function() {
$('.virus').click(function() {
$('.information').show();
$('.v').show();
});
});
.information {display:none;} .information p{display:none;}

Why .hasClass function isnt working?

So My code do when i click on name(class ='frnd'), then in result open one window and it is drag-able but when i again click on (class =frnd) then their open again new windows, for example if i click on Simon there popup new windows and after one click it is drag-able and than once more i click on name(class ='frnd' (Simon)) its popup one more window again. Problem: I dont want that if the window is already open, it wont open again same window Simon.
For avoid this problem i was trying this code in js
if(!($("#windows").hasClass('.5647383'+id))){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
I don't know why isnt working thiscondition if($("#windows").hasClass('.5647383'+id)).
$(document).ready(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
var usr=$(this).text();
var exst = document.getElementsByClassName('.5647383'+id);
if($("#windows").hasClass('.5647383'+id)){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
});
$('#windows').on('click','.cls', function(){
$(this).parent().parent().hide();
});
$(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
$('#windows').on('click','.'+id,function(){
$(this).parent().draggable({
handle: ".hwindow",
containment:"body"
});
});
});
});
});
body {
margin: 0;
background-color: #999;
height: 700px;
}
.frnd {
text-align: center;
width: 50px;
height: 20px;
display: inline-block;
background-color: #9B59B6;
margin: 5px;
border: 4px solid #3498DB;
color: #F1C40F;
cursor: pointer;
float: right;
}
.mwindow {
position: fixed;
width: 220px;
height: 220px;
border: 5px solid #16a085;
background-color: #fff;
display: block;
margin: 5px;
border-radius: 10px;
}
.mwindow:hover {
z-index: 9999;
}
.hwindow {
width: 210px;
height: 25px;
background-color: #FF4500;
padding: 5px;
display: block;
margin: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.cls {
display: inline-block;
float: right;
cursor: pointer;
font-size: 20px;
font-weight: bold;
}
.msgbody {
position: relative;
height: 185px;
background-color: #FF4500;
//z-index:9999;
}
.ctarea {
position: absolute;
width: 210px;
resize: none;
outline: none;
top: 133px;
font-size: 15px;
padding: 5px;
min-height: 40px;
opacity: 0.9;
border: none;
border-top: 2px solid #ff0000;
}
#mstd {
position: absolute;
width: 220px;
height: 133px;
background-color: #bb4500;
opacity: 1;
overflow-x: hidden;
}
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<li id="7" class="frnd">Maxi</li>
<li id="8" class="frnd">John</li>
<li id="9" class="frnd">Henry</li>
<li id="10" class="frnd">Max</li>
<li id="11" class="frnd">Simon</li>
<div id="windows"></div>

Elements by their ID attribute are selected using the hashmark symbol, so
'.' + id should be '#' + id.
The dot symbol (.) selects elements by their class name.
http://codepen.io/anon/pen/qdaXgX
EDIT
You had a number of other problems, look at the reviewed code:
http://codepen.io/anon/pen/bdwaWx

The problem is hasClass() doesn’t use a period prefix for classes — that’s selector syntax. So:
var hwindow_div = $('.5647383'+id) will find your .hwindow div,
hwindow_div.hasClass('5647383'+id) checks whether it has the class.
A simple example.
PS. while it’s a separate problem, #marekful is correct about the #id syntax.