Basically I want to have columns of divs and when the user clicks on a div he/she can see more in the div because the height gets bigger. I set that up but it looks like I have a document flow problem. when I click on the div in the first column the divs underneath it does something funny. The one below goes to the next column like half way. That's not good I want it to just move down in the first columns and and have the other, lower divs follow. This actually happens in the second column. that's good but the problem is that when I click on the divs in the second column the first column makes the same space. The first column should do nothing. How would you fix this problem?
one way I was thinking was to have 2 columns floating left instead of each div and I think that will fix the document flow problem. but that would mess up the convenience of the floating left for the divs because the divs need to be in order.
$(function(){
$(".box").on("click", function(){
if(!$(this).hasClass("open")){
$(this).addClass("open");
$(this).animate({
height : "+=100"
})
}else{
$(this).animate({
height : "-=100"
})
$(this).removeClass("open")
}
})
})
html{
font-size: 18;
}
.wrapper{
width: 40em;
height: 60em;
background: #ccc;
}
.box{
float: left;
height: 8em;
width: 18em;
background: tomato;
margin-bottom: 2em;
}
.box:nth-child(even){
margin-left: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
Below is the effect that I want. It's not so good because now I'm going to have to do operations when I want to insert the div's data dynamically I don't know. 1 and 2 are supposed to be next to each other. It shows that on the screen but there separated far in the html. this might cause confusion later. If someone has a better way let me know.
$(function(){
$(".box").on("click", function(){
if(!$(this).hasClass("open")){
$(this).addClass("open")
$(this).animate({
height : "+=100"
})
}else{
$(this).animate({
height : "-=100"
})
$(this).removeClass("open")
}
})
})
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.wrapper{
width: 40em;
background: #ccc;
height: 40em;
}
.col1{
float: left;
width: 19em;
}
.col2{
float: right;
width: 19em;
}
.box{
background: tomato;
height: 5em;
margin-bottom: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper clearfix">
<div class="col1">
<div class="box">1</div>
<div class="box">3</div>
<div class="box">5</div>
</div>
<div class="col2">
<div class="box">2</div>
<div class="box">4</div>
<div class="box">6</div>
</div>
</div>
Add flex, remove float and the quirky misalignment is gone.
$(function(){
$(".box").on("click", function(){
if(!$(this).hasClass("open")){
$(this).addClass("open");
$(this).animate({
height : "+=100"
})
}else{
$(this).animate({
height : "-=100"
})
$(this).removeClass("open")
}
})
})
html{
font-size: 18;
}
.wrapper{
display: flex;
flex-wrap: wrap;
width: 40em;
background: #ccc;
}
.box{
height: 8em;
width: 18em;
background: tomato;
margin-bottom: 2em;
}
.box:nth-child(even){
margin-left: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
Update
To make them not push either side down (row by row) and create that white space gap, you can either use columns (see sample below) or you will need something like the Masonry
$(function(){
$(".box").on("click", function(){
if(!$(this).hasClass("open")){
$(this).addClass("open");
$(this).animate({
height : "+=100"
})
}else{
$(this).animate({
height : "-=100"
})
$(this).removeClass("open")
}
})
})
html{
font-size: 18;
}
.wrapper{
-webkit-columns: 18em 2; /* Chrome, Safari, Opera */
-moz-columns: 18em 2; /* Firefox */
columns: 18em 2;
background: #ccc;
}
.box{
display: inline-block;
height: 8em;
width: 18em;
background: tomato;
margin-bottom: 2em;
order: 1;
}
.box:nth-child(odd) {
order: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
<div class="box">1</div>
<div class="box">3</div>
<div class="box">5</div>
<div class="box">2</div>
<div class="box">4</div>
<div class="box">6</div>
</div>
Related
In the below code, I want to hide the scrollbar of the first block (div1) without using overflow property in all the browsers.
Any suggestions would be helpful.
Fiddle:
http://jsfiddle.net/mvn1ngby/12/
$('#div1').scroll(function(){
$('#div2').scrollTop( $('#div1').scrollTop() );
});
$('#div2').scroll(function(){
$('#div1').scrollTop( $('#div2').scrollTop() );
});
div.outer {
display:inline-block;
width:150px;
height:320px;
border:1px solid black;
overflow-y:auto;
}
div.outer > div {
height:3000px;
}
#div1 div {
width:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" id="div1">
<div>
</div>
</div>
<div class="outer" id="div2">
<div>
</div>
</div>
It is a hack but works.
The idea is to pull the area of the scroll-bar outside of the view port.
The "pull" size suppose to be with the width of the scroll bar, usually the wider one (on Windows)
$('#div1').scroll(function() {
$('#div2').scrollTop($('#div1').scrollTop());
});
$('#div2').scroll(function() {
$('#div1').scrollTop($('#div2').scrollTop());
});
div.outer {
display: inline-block;
overflow: hidden;
border: 1px solid black;
}
#div1>div,
#div2>div {
height: 3000px;
}
.scrollable {
width: 150px;
height: 320px;
overflow-y: auto;
}
#div1 {
margin-right: -25px;
padding-right: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="scrollable" id="div1">
<div></div>
</div>
</div>
<div class="outer">
<div class="scrollable" id="div2">
<div></div>
</div>
</div>
Try to add a new container div with css:
.container { width: 100%;}
And inside put the div1, div2
I’m having a little trouble with this template: basically, I’m trying to add functionality where if you click a box it will expand sliding the other ones off-screen, but instead sliding the div off-screen it’s disappearing completely.
Here is what I have so far: JSFiddle.
$(function() {
$(".box").click(function() {
var isopened = $(this).attr("isopen");
if (isopened == "true") {
$(this).css("position", "relative").css("width", $(this).attr("data-ow"));
$(this).attr("isopen", "false");
}
else {
$(this).attr("data-ow", $(this).css("width"));
$(this).css("position", "relative").css("width", "40%");
$(this).attr("isopen", "true");
}
});
});
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 100%;
max-height: 600px;
overflow: hidden;
}
.box {
height: 600px;
display: block;
width: 13.33333333%;
border: 1px solid white;
background-color: black;
float: right;
position: relative;
}
.box:first-of-type {
width: 29.0%;
background-color: orange;
}
.box:last-of-type {
width: 29.0%;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
What I ultimately want is when one of the boxes is clicked it expands and instead of the entire div being hidden only the part which is off-screen is hidden:
I think you might like this flexbox solution as you can do what you want without usign any jQuery/JS. Pure CSS and HTML:
body {
background-color: black
}
#container {
display: flex;
width: 100%;
height: 50vh;
}
#container > div {
flex: 1;
min-width: 0;
transition:min-width 0.2s ease;
outline:0;
}
#container > div:focus {
min-width: 50vw;
}
<div id="container">
<div tabindex="0" style="background-color:blue"></div>
<div tabindex="0" style="background-color:orange"></div>
<div tabindex="0" style="background-color:green"></div>
<div tabindex="0" style="background-color:white"></div>
<div tabindex="0" style="background-color:blue"></div>
</div>
I used tabindex to give me the ability to use the :focus selector.
I have a inline -block grid system, I want to do something like add re-order the element and add it back to the grid. The js part is ok, how ever when the element added back, it won't apply the css. I made a simple case to show you the error
Open the link and try clicking show error button you will see the element mess up
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<style>
#grid{
text-align: justify;
font-size: 0.1px;
}
#grid .item{
display: inline-block;
background: #eee;
width: 23%;
height: 100px;
margin-bottom: 2.5%;
}
#grid:after{
content: '';
display: inline-block;
width: 100%;
}
#grid .placeholder{
display: inline-block;
width: 23%;
}
</style>
<script>
$(function(){
$('button').click(function(){
var item = $('#grid').children('.item');
item.prependTo('#grid');
});
});
</script>
<div id="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
<button>show the error</button>
</body>
</html>
https://jsfiddle.net/6ap0ksy8/2/
Screen shots
You have a whitespace problem!
When you run your script, it will 'refresh' the HTML without whitespace.
You should remove all whitespaces so it will look like the errored version. After that, you have to set a margin to the left and right, so that it always looks good.
Your code (with Javascript):
#grid{
text-align: justify;
font-size: 0.1px;
}
#grid .item{
display: inline-block;
background: #eee;
width: 23%;
height: 100px;
margin-bottom: 2.5%;
}
#grid:after{
content: '';
display: inline-block;
width: 100%;
}
#grid .placeholder{
display: inline-block;
width: 23%;
}
<div id="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
Without whitespace, using margin + Javascript:
$(function(){
$('button').click(function(){
var item = $('#grid').children('.item');
item.prependTo('#grid');
});
});
#grid{
text-align: justify;
font-size: 0.1px;
}
#grid .item{
display: inline-block;
background: #eee;
width: 23%;
height: 100px;
margin-bottom: 2.5%;
/*added margin*/
margin-left: 5px;
margin-right: 5px;
}
#grid:after{
content: '';
display: inline-block;
width: 100%;
}
#grid .placeholder{
display: inline-block;
width: 23%;
/*added margin*/
margin-left: 5px;
margin-right: 5px;
}
<div id="grid">
<div class="item"></div><--
--><div class="item"></div><--
--><div class="item"></div><--
--><div class="item"></div><--
--><div class="item"></div><--
--><div class="item"></div><--
--><div class="placeholder"></div><--
--><div class="placeholder"></div>
</div>
<button>show the error</button>
Obviously, the best solution is to actually fix your CSS to avoid this kind of ugly 'hack'.
$(function(){
$('button').click(function(){
var item = $('#grid').children('.item');
item.prependTo('#grid');
$('.item').after(" "); // add white space
});
});
the white space added will compensate for the white space trimmed by jquery
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.
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?