We Keep Coding

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>

Need help in implementing dynamic grid layout

Please refer this fiddle here to understand the problem I'm trying to explain. I want such a layout wherein divs will utilize all the available space. There are 8 divs here which are resizable. When I minimize divs A and B, an empty space is seen below these divs. I want divs D and E to occupy that empty space.
How can I achieve this? There are some jQuery plugins available like gridstack out there but their resizing feature is somewhat different. Without using any available jQuery plugin, is it possible to achieve mentioned effect? If you have any useful resources please share. Thanks in advance.
Edit
One solution could be to have 3 columns in .container but this solution might not work if div is resized horizontally.

Change your div structure to the following I think that will help you.
$(document).ready(function() {
$('.tile').resizable({
handles: 'e, s, se',
containment: '.container'
});
});
.tile
{
height: 180px;
width: 100%;
float: left;
background-color: rgb(232, 232, 232);
border: 1px solid red;
margin: 0% 0% 3% 0%;
min-height: 20px;
max-height: 360px;
max-width: 540px;
min-width: 180px;
text-align: centre
}
.verticalspace{
width:180px;
float:left;
margin: 0% 0% 0% 1%;
}
.container{
overflow: hidden
}
<div class="container">
<div class= "verticalspace">
<div class="tile">A</div>
<div class="tile">E</div>
</div>
<div class= "verticalspace">
<div class="tile">B</div>
<div class="tile">F</div>
</div>
<div class= "verticalspace">
<div class="tile">C</div>
<div class="tile">G</div>
</div>
<div class= "verticalspace">
<div class="tile">D</div>
<div class="tile">H</div>
</div>
</div>
this kind of structure will stay close even if somediv above it is collapsed also

You could try a 3 col solution (And use javascript to properly order the items in each column):
.col {
background: whitesmoke;
width: 165px;
float: left;
}
.item {
height: 150px;
width: 150px;
margin: auto;
background: grey;
margin-top: 15px;
}
.custom {
height: 265px;
}
.custom2 {
height: 30px;
}
<div class="container">
<div class="col">
<div class="item"></div>
<div class="item custom"></div>
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
<div class="item custom2"></div>
<div class="item"></div>
</div>
<div class="col">
<div class="item custom2"></div>
<div class="item"></div>
<div class="item custom"></div>
</div>
</div>

How to wrap more than one div around a div

I have a div (Slideshow) and I want to wrap around it small divs (Items). The Slideshow div will be static and the Items will be rendered automatically using a Repeater Control.
I made this image to better illustrate what I need to achieve.
I saw this Question and I thought I could use the same logic, let the Repeater items get rendered normally and then change the markup using JavaScript and use some sort of a CSS Grid layout to style the first 4 items for example on the left and the right and the rest will be beneath them but I'm not sure how to do it plus if there's a more simple solution I thought it could be cleaner than using the concept I saw in the question I referred.
Update1: Changed the picture to show the exact desired output

You could generate a Masonary layout. This plug in may be helpful, https://github.com/desandro/masonry
You could do this with bootstrap columns as well. For the first row, with the slideshow, you have 3 columns. The outer left and right columns will have 2 nested rows. http://getbootstrap.com/examples/grid/. This is what Im most familiar with so I'll show you how I would implement a solution for the first row and how to implement a second row with 4 columns.
<div class="row">
<!-- Outer Left Column -->
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
</div>
<div class="col-xs-12">
Slide Show
</div>
<!-- Outer Right Column -->
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
<div class="row">
<div class="col-xs-12">
Item
</div>
</div>
</div>
</div>
<!-- Row With Four Items -->
<div class="row">
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
<div class="col-xs-3">
Item
</div>
</div>
Checkout the angular material layout system as well. This will be harder to implement though because it requires Angular. https://material.angularjs.org/latest/#/layout/grid

Check this solution out and see if you can adopt it to your project: http://jsfiddle.net/1b0hoked/.
HTML:
<div id = "wrapper">
<div id = "slideshow"></div>
</div>
CSS:
*, :before, :after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
#wrapper {
counter-reset: item-counter;
text-align: right;
margin: 0 auto;
display: table;
outline: 1px solid gray;
position: relative;
}
#slideshow {
width: 210px;
height: 210px;
line-height: 210px;
text-align: center;
border: 2px solid red;
position: absolute;
top: 5px;
left: 50%;
margin-left: -105px;
}
#slideshow:before {
content: "Slide Show";
vertical-align: middle;
font: bold 16px/1 Sans-Serif;
color: red;
}
.item {
height: 100px;
width: 100px;
text-align: center;
line-height: 96px;
border: 2px solid #aaa;
}
.item:before {
counter-increment: item-counter;
content: "item " counter(item-counter);
vertical-align: middle;
font: bold 12px/1 Sans-Serif;
color: #aaa;
}
.item {
float: left;
margin: 5px;
}
.item:nth-of-type(4n + 1) {
clear: left;
}
.item:nth-of-type(3) {
float: right;
margin-top: -105px;
}
.item:nth-of-type(4) {
float: right;
clear: right;
margin-left: -105px;
}
.item:nth-of-type(2) {
clear: left;
}
JS/jQuery:
$(function() {
var numToAdd = 50;
while(--numToAdd >= 0) {
$("</p>").addClass("item").appendTo("#wrapper");
}
});

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.

How to get exact width of flexbox by getComputedStyle?

I have a problem to get exact width of flexbox after rendering contents.
I am working on a Windows 8 application (mean ie10 specific).
Here is the code:
[HTML]
<html>
<head>
<title>flexbox test</title>
</head>
<body>
<div class='container'>
<div class='viewport'>
<div class='canvas'>
<div class="item"> A </div>
<div class="item"> B </div>
<div class="item"> C </div>
<div class="item"> D </div>
<div class="item"> E </div>
<div class="item"> F </div>
<div class="item"> G </div>
<div class="item"> H </div>
<div class="item"> I </div>
<div class="item"> J </div>
</div>
</div>
</div>
<hr style="width: 600px; text-align: left;">
<div class="outbox"></div>
<script>tester();</script>
</body>
</html>​
[CSS]
.container {
width: 400px;
height: 200px;
border: 1px solid black;
}
.container .viewport {
width: inherit;
height: inherit;
position: absolute;
overflow: auto;
}
.container .viewport .canvas{
display: -ms-flexbox;
-ms-flex: 0 0 auto;
-ms-flex-pack: start;
-ms-flex-flow: row none;
-ms-flex-align: start;
-ms-flex-item-align: start;
-ms-flex-line-pack: start;
position: relative;
}
.container .viewport .canvas .item {
width: 100px; height: 100px;color: #fff;
background-color: black;
margin: 10px;
}
[JAVASCRIPT]
(function tester(){
var canvas = document.querySelector('.canvas');
var style = document.defaultView.getComputedStyle(canvas, null);
function addToOutbox(str){
var outbox = document.querySelector('.outbox');
outbox.innerText = 'Width: ' + str;
}
addToOutbox(style.width);
})();
I was expecting width to be something else as there is a scroll bar.
Outer container width is 400px, middle one is inheriting width and height with overflow: auto and inner most is expandable.
There are eight items in flexbox with width and height 100px each. So I was expecting the flexbox width abot 900px (i.e. 100px*8 + margin-left and margin-right for each item) but still getting 400px only which is parent dimensions. Am I missing something?
Here is the link to JS Fiddle: http://jsfiddle.net/pdMSR/ [Open with ie10 only]

The element really is 400px. The flex items that are positioned past 400px are actually overflowing.
It sounds like what you are really trying to get is the scrollWidth. If you pass in canvas.scrollWidth to your addToOutbox function you'll get what you are looking for.