Need help in implementing dynamic grid layout - javascript

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>

Related

How to make sure Text always stays on top of Image (even when resizing)?

SITUATION:
I have the following result for my Website:
PROBLEM:
I would like to add content on top of the iPad image so that the content is always "inside" the iPad's screen (even when resizing the window).
QUESTION:
How can achieve that ? I googled for solutions, none helped me. Is there some property to make a div snap to an image ?
CODE:
HTML:
<section class="Contact" id="Contact">
<div class="row">
<div class="col span-1-of-2" >
<h2> Contact </h2>
</div>
<div class="col span-1-of-2 rightPage" >
<img src="Vendors/Images/iPadContact.png" alt="Contact on iPad">
</div>
</div>
</section>
CSS:
section {
height: 100vh;
overflow: hidden;
padding: 0%;
}
.rightPage {
margin-top: 0%;
height: 100vh;
width: 50vh;
}
img {
max-width: 100%;
max-height: 95%;
display: block;
margin-top: 2.5%;
margin-bottom: 2.5%;
margin-left: 0;
}
From what I understood you whant the text inside the iPad image. If that is the case try to set you'r image as background-image :
<section class="Contact" id="Contact">
<div class="row">
<div class="col span-1-of-2" >
<h2> Contact </h2>
</div>
<div class="col span-1-of-2 rightPage" >
Some Text ...
</div>
</div>
</section>
CSS.
.rightPage {
background-image: url("Vendors/Images/iPadContact.png");
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
max-width: 517px;
}
Add the right image width to max-width

Creating a responsive div with complex objects

I am creating an admin panel with charts/images, etc.
I am failing to make it responsive.
All images are svg's, I used charts.js framework to create the pie chart.
This is an example of a div I have
This is the html:
<div class="row">
<div class="col-md-6">
<div class="alerts-chart-wrapper">
<canvas id="alertsChart" style="float: left;"></canvas>
</div>
</div>
<div class="col-md-6">
<div class="row alert-row">
<div class="entitys-icons icon-1"> </div>
<div class="alert-entity-name"> Users </div>
<div class="entity-alerts-count">28</div>
</div>
...(3 more rows)
</div>
</div>
The css:
.alert-row {
padding: 0% 15% 3% 5%;
}
.entitys-icons {
background: url('/Areas/WebApp/app/main_page_assets/02_general_alerts_icons.svg');
background-repeat: no-repeat;
width: 33px;
height: 33px;
background-size: 77px;
float: left;
}
.entitys-icons.icon-1 {
background-position: 0 2px;
}
.alert-entity-name {
float: left;
font-size: 0.75em;
vertical-align: middle;
line-height: 35px;
padding-left: 2px;
}
.entity-alerts-count {
float: right;
vertical-align: middle;
line-height: 35px;
padding-left: 2px;
}
.alerts-chart-wrapper {
width: 100%;
}
Now the problem is the circle grows and shrinks depending on the resolution, but the rows arent.
Here is a screenshot of the problem when the width shrinks(the circle and th rows must be aligned):
What is the strategy to use here? I thought maybe i will use media's with fixed size, but the best solution for me is that the rows height will change accordingly.
Inside the head tag, configure the right viewport
<meta name="viewport" content="width=device-width,minimum-scale=1>
You have to use the other grid options to specify the sizes as the screen changes resolution.
http://getbootstrap.com/css/#grid
For mobile you'll want to use the .col-sm- prefix.
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="alerts-chart-wrapper">
<canvas id="alertsChart" style="float: left;"></canvas>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-6 alert-row">
<div class="entitys-icons icon-1"> </div>
<div class="alert-entity-name"> Users </div>
<div class="entity-alerts-count">28</div>
</div>
...(3 more **col**)
</div>
</div>
</div>

Resize divs related to parent divs with jQuery

So I have 4 divs. I want to change the size of the inner divs compared to parent divs.
I want to dynamically change the child div size related to parent's one.
Now I've added .top class, but I don't really know if its needed or if it will be useful.
Here is the fiddle I'm testing with
http://jsfiddle.net/y3597/171/
jQuery below
$(".top").each(function () {
$('.object').width($(".inner").parent().width());
});
CSS below:
.container1 { width: 200px; background: red; padding: 2px; }
.container2 { width: 225px; background: purple; padding: 2px; }
.container3 { width: 250px; background: blue; padding: 2px; }
.container4 { width: 275px; background: black; padding: 2px; }
/* top ? */
.inner { width: 150px; background: gray; }
.object { width: 100px; background: green; }
HTML below:
<div class="container1 top">
<div class="inner">
<div class="object">Text 1</div>
</div>
<div class="container2 top">
<div class="inner">
<div class="object">Text 2</div>
</div>
<div class="container3 top">
<div class="inner">
<div class="object">Text 3</div>
</div>
<div class="container4 top">
<div class="inner">
<div class="object">Text 4</div>
</div>
I think that you are trying to achieve this:
$(".top").each(function () {
$(this).find(".object").width($(this).width());
});
In your code jQuery will check for every element with .object class in DOM on each loop. When you use (this) you are refering to element that is currently "selected" in loop.
Better way to achive this is to set widths od children to 100%, so they will inherit the witdhs from parents.

Custom CSS grid layout

I'm trying to achieve a grid layout with four columns in which one of the columns contains 2 div one on top of another. The image below describes better my target:
A and B are the CSS classes i've applied on the divs but as you can see in this fiddle: http://jsfiddle.net/ULHWk/1/ it does not behave as i would desire. The widths and heights of the divs are fixed.
<div id="#container">
<div class="A"></div>
<div class="A"></div>
<div class="B">up</div>
<div class="B">down</div>
<div class="A"></div>
</div>
.A {
float: left;
width: 25%;
height: 100px;
background: #00ff00;
}
.B {
float: left;
width: 25%;
height: 50px;
background: #0000ff;
clear: both;
}
Any idea how can I update my css to avchieve the placement as in the image?
Solutions that make use of twitter bootstrap are also acceptable.
I cannot modify the html in any way, so i'm looking for a solution that would only require CSS.
Thanks!
Your just need to make some adjustement with the css :
.B {
float: left;
width: 25%;
height: 50px;
background: #0000ff;
}
.B:nth-child(4){
margin-left: -25%;
margin-top: 50px;
}
fiddle: http://jsfiddle.net/ULHWk/12/
Hope I help
Just wrap B with A and update B width to 100%;
<div id="#container">
<div class="A"></div>
<div class="A"></div>
<div class="A">
<div class="B">up</div>
<div class="B">down</div>
</div>
<div class="A"></div>
</div>
example
You have to wrap two div's with class B inside A.
<div id="container">
<div class="A"></div>
<div class="A"></div>
<div class="A">
<div class="B">up</div>
<div class="B">down</div>
</div>
<div class="A"></div>
</div>
Demo

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.

Categories