We Keep Coding

How can I match bootstrap column heights with pure jQuery?

I know there is a library called match-height.js that already does this for you but I'm trying to do it from scratch. I have row with 2 columns, the first one has a centered (horizontally and vertically) black square. The second column has a heading and a paragraph. I just want to match the heights of the columns with the class "about-wrapper".
HTML:
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS:
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
jQuery:
$(document).ready(function(){
$("#about-logo-wrapper").height = $("#about-text-wrapper").height;
});

You're using height() wrong. It's a function, not a property, and it takes a parameter when you want to use it to set height...
$(document).ready(function(){
$("#about-logo-wrapper").height($("#about-text-wrapper").height());
});
See the documentation for more info...
http://api.jquery.com/height/

I think you need first to check which height is greater: either left cell or right one:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ?
$("#about-text-wrapper").height() :
$("#about-logo-wrapper").height();
then set this height to about-wrapper
$(".about-wrapper").height(h);
Look at snippet in full page mode:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ? $("#about-text-wrapper").height() : $("#about-logo-wrapper").height();
$(".about-wrapper").height(h);
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
#about-text-wrapper {
border: 3px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS:

How to add padding to each dynamically added sibling?

I have to make a hierarchical system as
list
item1
item2
item3
My HTML is as follows :
<div class="first">
<div class="second">
<span class="third">Hello World</span>
</div>
<div class="second">
<span class="third">Hello World2</span>
</div>
<div class="second">
<span class="third">Hello World3</span>
</div>
</div>
How can I edit my CSS to give a padding to everytime a second div is added dynamically (using Javascript).
My CSS is :
.first{
display: inline-block;
width: 300px;
height: 300px;
border: 1px solid red;
}
.second{
width: 100px;
height: 20px;
border: 1px solid green;
}
Link to Code
I can edit the html and CSS entirely. Thanks in Advance.

You can use padding:10px; to your .second css class.
.second{
width: 100px;
height: 20px;
padding:10px;
border: 1px solid green;
}
If you want a hierarchy, you might want to change your html to something like this
<div class="first">
<div class="second">
<span class="third">Hello World</span>
<div class="second">
<span class="third">Hello World2</span>
<div class="second">
<span class="third">Hello World3</span>
</div>
</div>
</div>
</div>
and then add
.second{
width: 100px;
height: 20px;
border: 1px solid green;
margin-left:20px;
}
Notice the margin-left:20px;.

If you are using Jquery you can add the code below which will add padding for each div.
$(document).ready(function(){
$("div").each(function(index, item){
$(item).css('padding-left', (index * 10 ) + "px");
});
});

Try this code once may help for you.
$(document).ready(function(){
var l = $('.second').length;
for(var i=0; i<=l;i++){
.second:nth-child(i).css('padding',i+10);
i = i+10;
}
});

Issue getting fadeIn element to raise

I have four boxes that are displayed in a single row (in a larger viewport). The boxes then fadeIn will going up the page. My issue is I cannot figure out how to get these boxes to go up the page without affecting the parent div and the sections of code below it (#contact-social). I want the other to divs to stay in their finished place that they are supposed to be in (after the boxes have went up the page).
How can I only change the positioning of the boxes as they go up the page without affecting anything else?
The position I have in my
function contactBox() {
$('.contact-connect-box').delay(600).animate({
'opacity' : 1,
'margin' : "0px 20px"
}, 800);
};
contactBox();
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
.contact-connect-box {
width: 22%;
margin: 60px 20px 0 20px;
display: inline-block;
border: 1px solid black;
vertical-align: top;
opacity: 0;
}
#contact-social {
width: 100%;
height: 200px;
background: #F5F5F5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
<div class="contact-connect-box">
<h2 class="contact-connect-title">fda</h2>
<div class="contact-connect-description">fdsaf</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdsa</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">fdsaf</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fdsaf
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdf</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">fds</div>
<div class="contact-connect-link">fdsfe</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
<div id="contact-social">
</div>

To prevent other elements move - making a margin top smaller, you should also increase the bottom margin respectively...
Or, instead of animating the margin, add a CSS class that will transition your styles :
function contactBox() {
$('.contact-connect-box').addClass("fadeShow");
};
setTimeout(contactBox, 600);
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
.contact-connect-box {
width: 22%;
margin: 60px 20px 0 20px;
display: inline-block;
border: 1px solid black;
vertical-align: top;
opacity: 0;
transition:2s; -webkit-transition:2s; /* ADD THIS */
}
.contact-connect-box.fadeShow{ /* AND ALL OF THIS */
opacity:1;
transform:translateY(-30px); -webkit-transform:translateY(-30px);
}
#contact-social {
height: 200px;
background: #F5F5F5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
<div class="contact-connect-box">
<h2 class="contact-connect-title">fda</h2>
<div class="contact-connect-description">fdsaf</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdsa</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">fdsaf</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fdsaf
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdf</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">fds</div>
<div class="contact-connect-link">fdsfe</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
<div id="contact-social">
</div>

DIV's reorder by themselves upon expand - how do I keep the same order?

I've got a grid of items that upon click expand to show a table below it. It works fine, but it reorders the DIV's positions as per my illustration below.
I need them to keep their respective position in their "columns".
Here's the illustration to make it clear:
And here is my HTML code:
<div
class="item-component"
ng-controller="CollapseCtrl"
ng-repeat="component in components.components | filter : components.filterByFilter | filter : searchText"
>
<div class="component-wrapper" ng-click="isCollapsed = !isCollapsed">
Item - click to expand
</div>
<div class="codes-wrapper" collapse="isCollapsed">
<table class="table table-striped table-condensed">
Expanded content here
</table>
</div>
</div>
And here is the .item-component class:
.item-component {
width: 33.33333333333333%;
float: left;
padding-left: 15px;
}
How would I achieve the "expected result" in my illustration?

Use display:inline-block instead of float:left on your .item-component
Living Demo
.item-component {
width: 33.33333333333333%;
display: inline-block;
padding-left: 15px;
}
Or, you can take a look at BootStrap and do it by using the :before element maintaning the float:left as you had it before.
You would also need to wrap each row:
.col{
float:left;
width: 32.33%;
min-height: 50px;
background: #ccc;
padding: 20px;
box-sizing: border-box;
}
.row{
display:block;
}
/* This do the trick */
.row:before{
content: " ";
display: table;
box-sizing: border-box;
clear: both;
}
Living example
Update
If you don't want the gap you will have to look for another HTML markup. You will have to print first each column with each rows.
This is the needed html markup:
<div class="col">
<div class="row" id="demo">1</div>
<div class="row">4</div>
<div class="row">7</div>
</div>
<div class="col">
<div class="row">2</div>
<div class="row">5</div>
<div class="row">8</div>
</div>
<div class="col">
<div class="row">3</div>
<div class="row">6</div>
<div class="row">9</div>
</div>
And the needed css:
.col{
float:left;
width: 32.33%;
}
.row{
display:block;
padding: 20px;
box-sizing: border-box;
background: #ccc;
min-height: 50px;
}
#demo{
height: 150px;
background: red;
}
Living demo

You can do it in the following way.
HTML:
<div class="container">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<br class="clear" />
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<br class="clear" />
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div>
CSS:
.col {
float: left;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
JS:
$('.col').click(function() {
if ($(this).is('.clicked')) {
$(this).removeClass('clicked');
} else {
$(this).addClass('clicked')
}
});
Live demo: http://jsfiddle.net/S7r3D/1/
ETA: the problem with this solution is that it moves entire row down. I don't really see how to nicely achieve what you want...You could try to overflow the other divs, but it depends on your needs. Is such solution acceptable?
ETA2: actually I made it perfect I think! Have a look here: http://jsfiddle.net/S7r3D/3/
The crucial change was rearranging divs and putting them in columns instead.
HTML:
<div class="container">
<div class="fleft">
<div class="col">1</div>
<div class="col">4</div>
<div class="col">7</div>
</div>
<div class="fleft">
<div class="col">2</div>
<div class="col">5</div>
<div class="col">8</div>
</div>
<div class="fleft">
<div class="col">3</div>
<div class="col">6</div>
<div class="col">9</div>
</div>
<div>
CSS:
.col {
clear: both;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
.col.clicked {
height: 300px;
background-color: red;
}
.fleft
{
float: left;
}
JS: /* same as above */

Create three container divs, and afterwards, put {1, 4, 7} into div1, {2, 5, 8} into div2, and {3, 6, 9} into div3.
Otherwise you will have it very difficult to control their positioning.

placing divs in same line

I have 2 divs. One with N number of squares and another div with 1 square. I want that all squares should be inlined. i.e., the squares of div of "section-loaded" come in 3 lines and half of 4th line, one after the other, then the square of "section-toload" should come in the same 4th line and not down below. Here is the fiddle -
http://jsfiddle.net/UPA4V/
<div class="fix_width650px">
<div class="section-loaded">
<div class = "square"></div>
<div class = "square"></div>
<div class = "square"></div>
<div class = "square"></div>
.
.
.
</div>
<div class="section-toload">
<div class = "square"></div>
</div>
</div>
CSS-
.square{
width: 150px;
height: 150px;
padding: 5px;
text-align: center;
display: inline-block;
position: relative;
}
.section-loaded{
display: inline-block;
float: left;
}
.section-toload{
display: inline-block;
float: left;
position: relative;
overflow: hidden;
}

It would work if you instead setting sections as float, set squares as float.
only css you need:
.square{
width: 150px;
height: 150px;
float:left;
}

try this.
Live demo here
HTML
<div class="fix_width650px">
<div class="section-loaded">
<div class = "square"></div>
<div class = "square"></div>
<div class = "square"></div>
<div class = "square"></div>
</div>
<div class="section-toload">
<div class = "square sqgreen"></div>
<div class = "square sqgreen"></div>
<div class = "square sqgreen"></div>
</div>
</div>
CSS
.square{
width: 150px;
height: 150px;
padding: 5px !important;
text-align: center;
display: inline-block;
position: relative;
float:left;
border:2px dotted red;
margin:5px;
}
.sqgreen{
border:4px dotted green !important;
}
.fix_width650px
{
width:650px;
}

I don't think you can do that.
As 'setion-loaded' is taking more than 1 line, that means the width of this section becomes 100% and whatever the next is goes on new line i.e. 'section-toload' goes on new line.
What you can do is have all squares in one section and apply extra class 'loaded' if they are loaded and the class 'toload' of they are to be loaded.
<div class="section">
<div class="square loaded"></div>
<div class="square loaded"></div>
<div class="square loaded"></div>
<div class="square loaded"></div>
...
...
...
<div class="square toload"></div>
</div>
CSS -
.square {
float: left;
width: 150px;
/** other styles **/
}

You can't, because the shape of the section-loaded box will always be rectangular, while you want to inject your section-toload square inside it, in an arbitrary position.
You can dot it with squares only, or if you need sections, encapsulate each square in one section, like this:
Live demo: http://jsfiddle.net/2QLmJ/
HTML
<div class="fix_width650px">
<div class="section loaded">
<div class = "square"></div>
</div>
<div class="section loaded">
<div class = "square"></div>
</div>
<div class="section loaded">
<div class = "square"></div>
</div>
<div class="section loaded">
<div class = "square"></div>
</div>
<div class="section toload">
<div class = "square"></div>
</div>
</div>
CSS
.square{
width: 150px;
height: 150px;
padding: 5px;
text-align: center;
border: 1px solid #000;
}
.toload .square{
border: 1px solid red;
}
.section{
margin: 5px;
display: inline-block;
float: left;
}

Remove float-left from both the divs and add display:table-cell and vertical-align:bottom
.section-loaded{
display: table-cell;
}
.section-toload{
display: table-cell;
position: relative;
overflow: hidden;
vertical-align:bottom
}
DEMO

if you want something like this .
.square
{
width: 150px;
height: 150px;
padding: 5px;
text-align: center;
float:left;
position: relative;
border:1px solid red;
}
.section-loaded{
display: block;
width:486px;
float: left;
}
.section-toload{
display: block;
float: left;
position:absolute;
overflow: hidden;
}
<div class="fix_width650px" style="height:326px;">
<div class="section-loaded">
<div class = "square">square1</div>
<div class = "square">square2</div>
<div class = "square">square3</div>
<div class = "square">square4</div>
</div>
</div>
<div class="section-toload" style="position :relative;">
<div class = "square">section-toload</div>
</div>