Organisation structure to cascade (top to bottom) divs with jscript

Organisation structure to cascade (top to bottom) divs with jscript - javascript

I am not a developer and this is my first post asking for help for a direction to what techniques should I look at first so pleas be gentle. At least I want to understand if the approach is correct for the objective.
In a final view I would like this to make an organisational structure from a database. Where each employee has at least 1 direct manager to form a tree, and his card is populated with additional data as-well.
The problem I face at the current stage, is that I don't understand how could I expand level2 divs (sub-department) both simultaneously. Without expanding other ones below.
$(document).ready(function(){
$(".level1_div").click(function(){
$(".level2_div").slideUp();
$(".level3_div").slideUp();
$(".level4_div").slideUp();
$(this).next().show("slow");
});
$(".level2_div").click(function(){
$(".level4_div").slideUp();
$(this).next().slideToggle("slow");
});
$(".level3_div").click(function(){
$(this).next().slideToggle("slow")();
});
});
.wrapper {
background-color: lightblue;
padding: 5px;
margin: auto;
display: table;
font-size: 8px;
margin-top:50px;
border:1px solid #000000;
border-radius:6px;
}
.level1_div {
color: gainsboro;
margin-top:2px;
background-color:#666666;
width:300px;
padding:1px;
border:2px solid #000000;
border-radius:4px;
position:relative;
}
.level2_div {
color: gainsboro;
width:295px;
margin-left:5px;
margin-top:2px;
margin-bottom:2px;
border:2px solid #000000;
padding:1px;
display:none;
border-radius:4px;
background-color:#666666;
}
.level3_div {
color: gainsboro;
width:290px;
margin-left:10px;
margin-top:2px;
margin-bottom:2px;
border:2px solid #000000;
padding:1px;
display:none;
border-radius:4px;
background-color:#666666;
}
.level4_div {
color: gainsboro;
width:285px;
margin-left:15px;
margin-top:2px;
margin-bottom:2px;
border:2px solid #000000;
padding:1px;
display:none;
border-radius:4px;
background-color:#666666;
}
.postitle {
color: gainsboro;
width:55%;
display:inline-block;
margin:1px;
}
.department {
color: gainsboro;
display:inline-block;
width:55%;
margin:1px;
}
.fullname {
color: gainsboro;
width:113px;
display:inline-block;
margin:1px;
float:right;
}
.category {
color: gainsboro;
width:113px;
display:inline-block;
margin:1px;
float:right;
}
.search {
color: black;
background-color:silver;
width:100px;
margin:1px;
margin-left:10%;
position:relative;
border-radius:5px;
padding: 2px;
border:0.5px solid #000000;
display:inline-block;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<!-- Start your code here -->
<div class="wrapper">
<div class="search"> Search people... </div>
<div class="search"> Search skill... </div>
<div class="level1_div">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level3_div">
<div class="department"> Branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level4_div">
<div class="department"> Sub-branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level1_div">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>
<div class="level1_div">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>
<div class="level1_div">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>
<div class="level1_div">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>
</div>
<!-- End yo</p>code here -->
</body>
</html>

Does this suits you?
Basically I've changed a little bit the tree structure in order to be recursive, having in the process less CSS and JS. Instead of having, .level1, .level2, .leveln classes, we now have a .node class
.node {
width: 100% !important;
padding-top: 2px;
position: relative;
}
.node-content {
color: gainsboro;
background-color: #666666;
border: 2px solid #000000;
border-radius: 4px;
width: 100%;
padding: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.node-children {
padding: 0 0 0 2px;
}
<div class="node" collapsed="true">
<div class="node-content">
Content goes here
</div>
<div class="node-children">
Nested Nodes goes here
</div>
</div>
Here is the final version
$(document).ready(function() {
$('.node[collapsed] .node').slideUp();
/**
* Instead of using:
* > $('.node').click(function...)
*
* We can use:
* > $('.wrapper').on('click', '.node', function...)
*
* This will allow any .node element inside .wrapper to listen
* to the event (event if it wasn't in the DOM when this event
* was binded)
**/
$('.wrapper').on('click', '.node', function(event) {
var $self = $(this),
$children = $self.find('> .node-children > .node'),
$neighbours = $self.parent().children('.node').not($self),
$others = $self.parent().find('.node').not($self);
if ($self.attr('collapsed')) {
$self.removeAttr('collapsed');
$others.attr('collapsed', true).not($neighbours).slideUp();
$children.show("slow");
} else {
$self.attr('collapsed', true);
$children.slideUp();
}
return false;
});
});
// IGNORE THE CODE BELLOW!! (it's just binding a button to add new .node elements to the tree)
$(document).ready(function () {
$('<button>', {
type: 'button',
text: 'Add new .node',
id: '#addNodes'
})
.prependTo('body')
.click(function () {
$('<div class="node" collapsed="true">' +
'<div class="node-content">' +
'<div class="department"> Branch </div>' +
'<div class="fullname"> Full name</div>' +
'<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>' +
'<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>' +
'</div>' +
'<div class="node-children">' +
'<div class="node" collapsed="true">' +
'<div class="node-content">' +
'<div class="department"> Sub-branch </div>' +
'<div class="fullname"> Full name</div>' +
'<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>' +
'<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>' +
'</div>' +
'<div class="node-children">' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>').appendTo('.wrapper');
$('.node[collapsed] .node').hide();
});
});
.wrapper {
background-color: lightblue;
width: 300px;
padding: 5px;
margin: auto;
display: table;
font-size: 8px;
margin-top: 50px;
border: 1px solid #000000;
border-radius: 6px;
}
.node {
width: 100% !important;
padding-top: 2px;
position: relative;
}
.node-content {
color: gainsboro;
background-color: #666666;
border: 2px solid #000000;
border-radius: 4px;
width: 100%;
padding: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.node-children {
padding: 0 0 0 2px;
}
.postitle {
color: gainsboro;
width: 55%;
display: inline-block;
margin: 1px;
}
.department {
color: gainsboro;
display: inline-block;
width: 55%;
margin: 1px;
}
.fullname {
color: gainsboro;
width: 113px;
display: inline-block;
margin: 1px;
float: right;
}
.category {
color: gainsboro;
width: 113px;
display: inline-block;
margin: 1px;
float: right;
}
.search {
color: black;
background-color: silver;
width: 100px;
margin: 1px;
margin-left: 10%;
position: relative;
border-radius: 5px;
padding: 2px;
border: 0.5px solid #000000;
display: inline-block;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<!-- Start your code here -->
<div class="wrapper">
<div class="search"> Search people... </div>
<div class="search"> Search skill... </div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
</div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Sub-branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 2</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 3</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 4</span>
</div>
<div class="node-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 2</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 3</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 4</span>
</div>
<div class="node-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 2</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 3</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 4</span>
</div>
<div class="node-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="node" collapsed="true">
<div class="node-content">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 2</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 3</span>
</div>
<div class="node-children">
<div class="node" collapsed="true">
<div class="node-content">
<span>Level 4</span>
</div>
<div class="node-children">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

This one keeps your original structure and doesn't allow node self collapsing when clicked.
$.fn.nextAfter = function (selector) {
var i,
len,
$next = $(),
$elements = this.nextAll();
for (i = 0, len = $elements.length; i < len; i++) {
if ($elements.eq(i).filter(selector).length > 0) {
$next = $next.add($elements.eq(i));
} else {
break;
}
}
return $next;
};
$(document).ready(function() {
$(".level1_div").click(function() {
if ($(this).attr('collapsed') === 'true') {
$(".level1_div").attr('collapsed', true);
$(".level2_div").attr('collapsed', true).slideUp();
$(".level3_div").attr('collapsed', true).slideUp();
$(".level4_div").slideUp();
$(this).nextAfter('.level2_div').show("slow");
$(this).attr('collapsed', false);
}
});
$(".level2_div").click(function() {
if ($(this).attr('collapsed') === 'true') {
$(".level2_div").attr('collapsed', true);
$(".level3_div").attr('collapsed', true).slideUp();
$(".level4_div").slideUp();
$(this).nextAfter('.level3_div').show("slow");
$(this).attr('collapsed', false);
}
});
$(".level3_div").click(function() {
if ($(this).attr('collapsed') === 'true') {
$(".level3_div").attr('collapsed', true);
$(".level4_div").slideUp();
$(this).nextAfter('.level4_div').show("slow");
$(this).attr('collapsed', false);
}
});
});
.wrapper {
background-color: lightblue;
padding: 5px;
margin: auto;
display: table;
font-size: 8px;
margin-top: 50px;
border: 1px solid #000000;
border-radius: 6px;
}
.level1_div {
color: gainsboro;
margin-top: 2px;
background-color: #666666;
width: 300px;
padding: 1px;
border: 2px solid #000000;
border-radius: 4px;
position: relative;
}
.level2_div {
color: gainsboro;
width: 295px;
margin-left: 5px;
margin-top: 2px;
margin-bottom: 2px;
border: 2px solid #000000;
padding: 1px;
display: none;
border-radius: 4px;
background-color: #666666;
}
.level3_div {
color: gainsboro;
width: 290px;
margin-left: 10px;
margin-top: 2px;
margin-bottom: 2px;
border: 2px solid #000000;
padding: 1px;
display: none;
border-radius: 4px;
background-color: #666666;
}
.level4_div {
color: gainsboro;
width: 285px;
margin-left: 15px;
margin-top: 2px;
margin-bottom: 2px;
border: 2px solid #000000;
padding: 1px;
display: none;
border-radius: 4px;
background-color: #666666;
}
.postitle {
color: gainsboro;
width: 55%;
display: inline-block;
margin: 1px;
}
.department {
color: gainsboro;
display: inline-block;
width: 55%;
margin: 1px;
}
.fullname {
color: gainsboro;
width: 113px;
display: inline-block;
margin: 1px;
float: right;
}
.category {
color: gainsboro;
width: 113px;
display: inline-block;
margin: 1px;
float: right;
}
.search {
color: black;
background-color: silver;
width: 100px;
margin: 1px;
margin-left: 10%;
position: relative;
border-radius: 5px;
padding: 2px;
border: 0.5px solid #000000;
display: inline-block;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<!-- Start your code here -->
<div class="wrapper">
<div class="search"> Search people... </div>
<div class="search"> Search skill... </div>
<div class="level1_div" collapsed="true">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">
<div class="department"> Sub-Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level3_div" collapsed="true">
<div class="department"> Branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level4_div" collapsed="true">
<div class="department"> Sub-branch </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level1_div" collapsed="true">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">Level 2</div>
<div class="level3_div" collapsed="true">Level 3</div>
<div class="level4_div" collapsed="true">Level 4</div>
<div class="level1_div" collapsed="true">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">Level 2</div>
<div class="level3_div" collapsed="true">Level 3</div>
<div class="level4_div" collapsed="true">Level 4</div>
<div class="level1_div" collapsed="true">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">Level 2</div>
<div class="level3_div" collapsed="true">Level 3</div>
<div class="level4_div" collapsed="true">Level 4</div>
<div class="level1_div" collapsed="true">
<div class="department"> Department </div>
<div class="fullname"> Full name</div>
<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span> </div>
<div class="category"> <span>Location </span> | <span>Type </span> | <span> Mobile </span> </div>
</div>
<div class="level2_div" collapsed="true">Level 2</div>
<div class="level3_div" collapsed="true">Level 3</div>
<div class="level4_div" collapsed="true">Level 4</div>
</div>
<!-- End yo</p>code here -->
</body>
</html>

Related

How can I resize a div according to zoom?

I am having following UI.
Everything works good when zoom is 100%. But when user zooms in the UI get disturbed and is seen as following:
The card within the div does not resize. I want all the cards to take the width of the div titled E. Setting card width to 100% is creating issue for other divs. As cards get stretched for div having with bigger than div E.
div E display once card. There may be multiple card visible on horizontal scroll. Similarly, div R shows 3 cards at once. It may contain more cards. When zooming, some content of the card visible gets hidden in div E. Similarly, the last of 3 cards in div R is also gets partially hidden.
Here is the codepen link and below the code:
#div_A {
background-color: #B14C08;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_B {
background-color: #157668;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_C {
background-color: #E61B00;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_D {
background-color: #0078D4;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_E {
background-color: #0D283D;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
.holder {
min-height: 240px;
padding: 0 2px 0 2px;
}
.holder .card_holder {
padding: 0;
max-width: 290px;
}
.holder .xyz {
overflow-x: auto;
min-height: 240px;
}
.shortdetail {
display: flex;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.content {
width: 287px;
position: relative;
animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}
.card {
width: 100%;
height: 80px;
padding: 0px;
border: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
background-color: white;
position: relative;
overflow: hidden;
}
.shortdetail {
margin: 5px;
flex-direction: row;
z-index: 2;
position: relative;
}
.profileinfo {
width: 100%;
margin: 0px 10px;
color: #5a5a5a;
line-height: 1.2;
font-style: initial;
}
.profileinfo .row {
margin: 0;
}
.profileinfo .col-8,
.col-4 {
padding: 0;
}
.profileinfo label {
margin-bottom: 0px;
}
.name {
font-size: 13px;
font-weight: 600;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="col-8">
<div class="row rounded-top" style="background-color :#405755; color: white; font-weight: 600;">
<span class="col" style="padding: 5px; padding-left: 8px; font-size: 14px;">List</span>
</div>
<div class="row border border-primary" style="padding: 5px 0 5px 0;">
<div class="row" style="margin: 0px; margin-bottom:3px; width: 100%;">
<div class="col-3 holder">
<div class="rounded-top" id="div_A">
Div A <button>Prev</button> <button>Next</button>
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-9 holder">
<div class="rounded-top" id="div_B">
Div B
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 holder">
<div class="rounded-top" id="div_C">
Div C
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 holder">
<div class="rounded-top" id="div_D">
Div D
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 holder">
<div class="rounded-top" id="div_E">
Div E
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Do not fix width or height with px, try with % and see

When using Isotope Filter Item Shown in Column

I Have Problem With Script.....I am a beginner for Web Developing and i found some filter plugin in internet, when i use that to my Website(Demo) ,i have some issue...example.
enter image description here
This is What I want.....But when i use filter query my items were shown in single column. like this
enter image description here
Html
$(function() {
var $grid = $('#container');
$grid.isotope({
itemSelector: '.item'
});
var filters = []; // A convenient bucket for all the filter options,
// just so we don't have to look them up in the DOM every time.
// (a global array is maybe sort of not the most elegant
// way you could deal with this but you get the idea.)
// Search event handlers
$('.quicksearch').on('keyup', function() {
// debounce removed for brevity, but you'd put it here
filters[0] = this.value;
runFilter();
});
$('#filter-select').on('change', function() {
filters[1] = this.value;
runFilter();
});
// and so on if more filters needed
// The filter itself
var runFilter = function() {
$grid.isotope({
filter: function() {
if (filters[0]) {
// at least some search text was entered:
var qsRegex = new RegExp(filters[0], 'gi');
// if the title doesn't match, eliminate it:
if (!$(this).find('.content-title').text().match(qsRegex)) {
return false;
}
}
if (filters[1]) {
// a category was selected; filter out others:
if (!($(this).hasClass(filters[1]))) {
return false;
}
}
// etcetera, for any other filters
// successfully passed all conditions, so:
return true;
}
});
}
});
body {
background-color: #333642;
margin: 0;
}
.item {
display: block;
}
.red .content {
background-color: tomato;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.blue .content {
background-color: dodgerblue;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.green .content {
background-color: green;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.comedy .content {
background-color: #131417;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.content-title {
background-color: gray;
border-radius: 0 0 8px 8px;
text-align: center;
padding: 8px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<div id="filters">
Color:
<select id="filter-select">
<option value="">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="comedy">Comedy</option>
</select><br> Title: <input type="text" class="quicksearch">
</div>
<div class="container" id="container">
<div class="row">
<div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>fy Title 1</h3>
</div>
</div>
<div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 2</h3>
</div>
</div>
<div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 3</h3>
</div>
</div>
<div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 4</h3>
</div>
</div>
<div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 5</h3>
</div>
</div>
<div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 6</h3>
</div>
</div>
<div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 7</h3>
</div>
</div>
<div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 8</h3>
</div>
</div>
<div class="green item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 9</h3>
</div>
</div>
<div class="red item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 10</h3>
</div>
</div>
<div class="comedy item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 11</h3>
</div>
</div>
<div class="blue item col-6 col-xl-6 col-lg-6 col-md-6">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 12</h3>
</div>
</div>
</div>
</div>
<script src="js/filter.js"></script>
</body>
</html>

Removed 'id="container"' then working fine
$(function() {
var $grid = $('#container');
$grid.isotope({
itemSelector: '.item'
});
var filters = []; // A convenient bucket for all the filter options,
// just so we don't have to look them up in the DOM every time.
// (a global array is maybe sort of not the most elegant
// way you could deal with this but you get the idea.)
// Search event handlers
$('.quicksearch').on('keyup', function() {
// debounce removed for brevity, but you'd put it here
filters[0] = this.value;
runFilter();
});
$('#filter-select').on('change', function() {
filters[1] = this.value;
runFilter();
});
// and so on if more filters needed
// The filter itself
var runFilter = function() {
$grid.isotope({
filter: function() {
if (filters[0]) {
// at least some search text was entered:
var qsRegex = new RegExp(filters[0], 'gi');
// if the title doesn't match, eliminate it:
if (!$(this).find('.content-title').text().match(qsRegex)) {
return false;
}
}
if (filters[1]) {
// a category was selected; filter out others:
if (!($(this).hasClass(filters[1]))) {
return false;
}
}
// etcetera, for any other filters
// successfully passed all conditions, so:
return true;
}
});
}
});
body {
background-color: #333642;
margin: 0;
}
.item {
float: left;
width: calc(50% - 20px);
padding: 10px;
}
.red .content {
background-color: tomato;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.blue .content {
background-color: dodgerblue;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.green .content {
background-color: green;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.comedy .content {
background-color: #131417;
padding: 10px;
color: white;
border: none;
border-radius: 8px 8px 0px 0px;
text-align: center;
}
.content-title {
background-color: gray;
border-radius: 0 0 8px 8px;
text-align: center;
padding: 8px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<div id="filters">
Color:
<select id="filter-select">
<option value="">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="comedy">Comedy</option>
</select><br> Title: <input type="text" class="quicksearch">
</div>
<div id="container" class="container">
<div class="row">
<div class="red item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>fy Title 1</h3>
</div>
</div>
<div class="blue item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 2</h3>
</div>
</div>
<div class="green item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 3</h3>
</div>
</div>
<div class="red item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 4</h3>
</div>
</div>
<div class="comedy item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 5</h3>
</div>
</div>
<div class="comedy item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 6</h3>
</div>
</div>
<div class="green item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 7</h3>
</div>
</div>
<div class="blue item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 8</h3>
</div>
</div>
<div class="green item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 9</h3>
</div>
</div>
<div class="red item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 10</h3>
</div>
</div>
<div class="comedy item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 11</h3>
</div>
</div>
<div class="blue item">
<div class="content mt-4">
<h1>content</h1>
</div>
<div class="content-title">
<h3>My Title 12</h3>
</div>
</div>
</div>
</div>

Show/Hide Transition for multiple elements

I am trying to implement a show/hide function on one of my web pages. basically, there is a page on my website which shows 'Jargon' and the definitions. the user clicks on the title and the definition should then be displayed.
I have tried 2 different techniques, one works but is very harsh with no transition, it is basically open or closed:
jQuery(function($){
var acc = document.getElementsByClassName("jarg-container");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
});
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
height: 4.5em;
width: 45% !important;
margin: 0 2.5% 2em;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container .jargon-desc {
height: 0;
display: none;
}
.jarg-container.active .jargon-desc{
height:100%;
display:block;
}
.jarg-container.active {
height: 100%;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.active h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
The other I like but when one opens, they all open:
$('.jargon-header').on('click', function(){
$('.jargon-desc').toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition:all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
Ideally, I would like a combination of the 2... where all elements open individually and the use the transition effect that the second code uses...
any help combining the 2 would be amazing

To to achieve both the transition and only moving one element at a time, you can use the this keyword. When a function is called, in this case the function() inside of your click listener, it will bind this to that context. This allows you to select the element that was clicked by simply using $(this).
This may not be the most detailed explanation, so here is a bit more information on the topic.
$('.jargon-header').on('click', function() {
// Use this to select the element that was clicked
$(this)
// Then just select the next description
.next('.jargon-desc')
// And toggle the class on that description
.toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition: all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>

Display bootstrap wells on left and right side of the page

I use bootstrap wells to resemble cards. I currently have two different types of cards, the "normal" ones which will be in the middle of the screen, and the "special" ones which will be on the left and right side.
Template I'm trying to replicate:
Issues:
1.) It seems like the wells in bootstrap don't want to go to the very left or right of a page. They seem to always be contained in an invisible div/border and won't go anywhere else unless absolute positioning is used. I can't use absolute positioning because the middle content overlaps it if zoomed in. It gets rid of the responsive aspect of bootstrap which needs to stay.
2.) Without the use of absolute positioning, making new "special" cards on the side will add extra vertical space which will sink the middle content down the page
body {
background-color: #5C67B6;
}
html,
body {
height: 100%;
padding-top: 70px;
}
.btn-purple {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -140px;
}
.btn-info {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
right: 10%;
margin-left: 140px;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.customClass {
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.turbo {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well {
min-height: 320px;
max-height: 320px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.well:hover {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well p {
margin-bottom: 50px;
}
.header {
display: inline-block;
width: 100%;
border: 1px solid red;
}
.playerOne {
float: right;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
.playerTwo {
float: left;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
#media only screen and (max-width: 900px) {
.playerOne {
width: 650px;
}
.playerTwo {
width: 633px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="playerOne">
Special Cards
</div>
<div class="playerTwo">
Special Cards
</div>
</div>
<center>
<div class="input-group" style="width: 500px; padding-bottom: 2cm;">
<input type="text" class="form-control" placeholder="Search cards!">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</center>
<div class="content">
<div class="container content-sm customClass">
<div class="row">
<center>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a aria-label="Previous" href="#"><span aria-hidden="true">«</span></a>
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
<a aria-label="Next" href="#"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
</center>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well turbo">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
</div>
</div>
</div>
I've tried using a flexbox and putting the wells in there which seemed to work until i zoomed in and noticed it was no longer responsive and overlapped the other content.
What is the best and most efficient way of adding wells to the left and right side of the page without adding unnecessary whitespace and maintaining responsiveness?

You can try with below example to get the same use col-xx-offset-xx bootstrap's classes
I posted a working example
You can use container-fluid instead of container.
.box {
border: 1px solid;
width: 100%;
height: 100px;
margin: 0px 0px 10px 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
</div>
Working codepen - codepen

I've no idea how to do it with fixed sizes, css is hard.
body {
padding-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">header row</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-lg-6">
<div class="well">
sample text
</div>
<div class="row">
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>

Div elements won't keep desired aspect ratio

I want to create memory game. I want to place 6 cards in 4 rows. Problem is that DIV element that is "behind" card are visible and ruin whole design (z-index3 or .back class inside my code).It's working if i put display.none back .class but problem that blocks picture of card.
Here is code that I am using
HTML
<body>
<div id="picbox">
<span id="boxbuttons">
<span class="button" id="rezz">
Rezultat
<span id="counter">0</span>
</span>
<span class="button" id="ttime">00 : 22</span>
<span class="button">
<a onclick="ResetGame();">Reset</a>
</span>
<span class="button">
<a onclick="MutedSound();">Mute sound</a>
</span>
</span>
<div id="boxcard" align="center">
<div class="flipper" id="flipper10">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
</div>
<div class="flipper" id="flipper11">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
</div>
<div class="flipper" id="flipper12">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
</div>
<div class="flipper" id="flipper13">
<div class="front"></div>
<div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
</div>
<div class="flipper" id="flipper14">
<div class="front"></div>
<div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
</div>
<div class="flipper" id="flipper15">
<div class="front"></div>
<div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
</div>
<div class="flipper" id="flipper16">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
</div>
<div class="flipper" id="flipper17">
<div class="front"></div>
<div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
</div>
<div class="flipper" id="flipper18">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
</div>
<div class="flipper" id="flipper19">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
</div>
<div class="flipper" id="flipper110">
<div class="front"></div>
<div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
</div>
<div class="flipper" id="flipper111">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
</div>
<div class="flipper" id="flipper20">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
</div>
<div class="flipper" id="flipper21">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
</div>
<div class="flipper" id="flipper22">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
</div>
<div class="flipper" id="flipper23">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
</div>
<div class="flipper" id="flipper24">
<div class="front"></div>
<div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
</div>
<div class="flipper" id="flipper25">
<div class="front"></div>
<div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
</div>
<div class="flipper" id="flipper26">
<div class="front"></div>
<div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
</div>
<div class="flipper" id="flipper27">
<div class="front"></div>
<div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
</div>
<div class="flipper" id="flipper28">
<div class="front"></div>
<div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
</div>
<div class="flipper" id="flipper29">
<div class="front"></div>
<div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
</div>
<div class="flipper" id="flipper210">
<div class="front"></div>
<div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
</div>
<div class="flipper" id="flipper211">
<div class="front"></div>
<div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
</div>
</div>
</div>
<div id="window-resizer-tooltip"><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
font: 18px Verdana;
color: #FFF;
background: #CCC;
}
#picbox {
margin: 0px auto;
width: auto;
}
#boxcard {
/*perspective*/
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
display: table;
margin: 0px auto;
width: auto;
z-index: 1;
display: table;
margin: 0px auto;
width: auto;
}
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
}
.front, .back{
float: left;
width: 100px;
height: 120px;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
z-index:2;
background: #B1B1B1;
/* position:absolute;*/
/*backface-visibility*/
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
display: inline-block;
position:relative;
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotate(180deg);
z-index:3;
}
#boxbuttons {
text-align: center;
margin: 20px;
display: block;
}
#boxbuttons .button {
text-transform: uppercase;
background: #EE872A;
padding: 5px 10px;
margin: 5px;
border-radius: 10px;
cursor: pointer;
}
#boxbuttons .button:hover {
background: #999;
}
JS
function OpenCard(){
$(this).toggleClass('flipped');
}
$(".flipper").click(OpenCard);
JSFiddle Link

It's taking the whole background of image so you better keep each image in a specific div confined to that image only.

We Keep Coding

JavaScript is the programming language of the Web.

Organisation structure to cascade (top to bottom) divs with jscript - javascript

Related

How can I resize a div according to zoom?

When using Isotope Filter Item Shown in Column

Show/Hide Transition for multiple elements

Display bootstrap wells on left and right side of the page

Div elements won't keep desired aspect ratio

Categories

Resources