Resize divs related to parent divs with jQuery - javascript

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.

Related

Change background image of one element to the same image of the other element on click

I'm currently working on a nail polish website and am very new to Jquery. I need to implement a "try it on" page where people can select a colour they like and the nails of the image change to that specific colour.
Basically like this: http://chinaglaze.com/Try-On/index.html
I've tried pulling the html, scripts etc from this link to try figure out how it's been done. However, I have absolutely no idea how to implement this and get it working on my site.
I've been doing a a lot of research and cannot find the answer.
Okay so the hand is a div with a .png background image implemented via css (the nails are transparent). The buttons next to the hand are plain images. Basically when someone selects the specific button image, it must then pull to the div as a background image and repeat. Thus showing through as the nail colour.
I'm not sure if this makes any sense?
Here is a sample snippet for how to set colour of one item on another on click.
(Since you have not provided any HTML i have used a sample mark up)
In the link you have provided they might be using image instead.
$(".item").click(function() {
$("#change").css("background",$(this).css("background"));
});
#change {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.item {
height: 100px;
width: 100px;
display: inline block;
float: left
}
#green {
background: green;
}
#red {
background: red;
}
#blue {
background: blue;
}
#yellow {
background: yellow
}
#black {
background: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="change">
Select a color
</div>
<div class="item" id="green">
</div>
<div class="item" id="red">
</div>
<div class="item" id="blue">
</div>
<div class="item" id="yellow">
</div>
<div class="item" id="black">
</div>
Here is the solution, used the code from above answer and created a working [JSFiddle][1] with few changes
$(".item").click(function() {
$(".screen").css("background",$(this).css("background"));
});
.screen {
border: 1px solid #ccc;
}
#change
{
background:url("http://chinaglaze.com/images/tryon/hand_1.png") 0px 0px no-repeat;
width: 300px;
height: 516px;
}
.item {
height: 100px;
width: 100px;
display: inline block;
float: left;
}
#green {
background: green;
}
#red {
background: red;
}
#blue {
background: blue;
}
#yellow {
background: yellow
}
#black {
background: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="screen">
<div id="change">
Select a color
</div>
</div>
<div class="item" id="green">
</div>
<div class="item" id="red">
</div>
<div class="item" id="blue">
</div>
<div class="item" id="yellow">
</div>
<div class="item" id="black">
</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>

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.

Make floated element in column layout ride up to meet element above

Say I have 3 div elements that all have width:50% but have undefined heights. Now say these elements all have the attribute float:left.
Due to the width:50% attribute, the three elements are now in a two column layout, the first element sits left of the second, and the third sits below both the first.
Now, if the first div is 50px tall, and the second div is 200px tall, the third div sits below the line created by the taller div, and thus a big white space of 150px is created between div 1 and div 3.
How can one prevent the white space from occurring?
PS, the divs are being generated dynamically!
Here's a jsfiddle
make the Second element float right
See that Working Fiddle
HTML:
<div class="First"></div>
<div class="Second"></div>
<div class="Third"></div>
CSS:
div
{
float: left;
width: 50%;
}
.First
{
height: 50px;
background-color: red;
}
.Second
{
height: 90px;
background-color: yellow;
float: right;
}
.Third
{
height: 50px;
background-color: green;
}
Edit: If you have an unknown number of div's,
something like this HTML (alter the sizes as you want)
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
Just use this CSS:
div
{
width: 48%;
margin: 1%;
background-color: #09F;
}
div:nth-child(odd)
{
float: left;
}
div:nth-child(even)
{
float: right;
}
Check out this Working Fiddle

Rendering two div in a div horizantally

I have a parent div having two child divs which are in horizantal ,Now I want to add other div such that the pagination should come.
Here is the code.
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
Here, If i add other div to 'parent',It will append at last,but should not be shown and pagination should come.
Using floats, I am making the div's horizantal.I have to show only two div's,After that pagination should come.
This is just a DEMO:
HTML:
<div id="parent">
<div id="wrapper">
<div id="left">window 1</div>
<div id="right">window 2</div>
</div>
</div>
<div id="paginator"><span id="prev">Previous</span><span id="next">Next</span></div>
CSS:
#parent {
width: 850px;
overflow: hidden;
padding: 10px;
height: 320px;
border: 1px solid #f00
}
#wrapper div {
width: 400px;
border: 1px solid #ccc;
height: 300px;
display:inline-block;
margin: 10px
}
#paginator {
margin: 10px;
display: block
}
#paginator span {
width: 30px;
padding: 5px;
margin: 10px;
background: #1f1f1f;
color: #fff;
}
JQUERY:
$(function() {
$('#next').click(function() {
$('#wrapper').append($('<div>window 3</div><div>window 4</div>')); // you can add div using other way
$('#wrapper').animate({
marginLeft: '-=860px'
},
500, 'linear');
});
$('#prev').click(function() {
$('#wrapper').animate({
marginLeft: '+=860px'
},
500, 'linear');
});
});
Not sure I understand your question, but I'll give it a shot...
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
<div style="clear:both"></div>
<div id="pagination"></div>
... is this what you mean to do?

Categories