I have a container with a number of children that needs to be the same height, only in pairs of two tho.
for example the first and second element needs to be as high as the highest of the two and the third and forth need to be as high as whichever is highest, independent of the height of the first and second child.
My current code, which equals all children heights
$(document).ready(function(){
// Select and loop the container element of the elements you want to equalise
$('.parent').each(function(){
// Cache the highest
var highestBox = 0;
// Select and loop the elements you want to equalise
$('.child', this).each(function(){
// If this box is higher than the cached highest then store it
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
// Set the height of all those children to whichever was highest
$('.child',this).height(highestBox);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<div class='child'>some dynamic content</div>
<div class='child'>some dynamic content</div>
<div class='child'>some dynamic content</div>
<div class='child'>some dynamic content</div>
<div class='child'>some dynamic content</div>
<div class='child'>some dynamic content</div>
</div>
You're probably want to achieve grid-like behavior, it can be easily achieved without JavaScript using flexbox:
/* Purely for visual appearance */
.parent {
width: 300px;
}
.child {
background: linear-gradient(45deg, lightgreen, yellow);
padding: 5px;
box-sizing: border-box;
}
/* Actual logic */
.parent {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.child {
flex: 1 1 50%;
}
<div class='parent'>
<div class='child'>a bit of text</div>
<div class='child'>very large amount of content to make height largest across all rows</div>
<div class='child'>a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class='child'>a b c</div>
</div>
Hope something like below you are looking for. May be using flex is simplest way of getting it done. Here i tried with some jquery.
$(document).ready(function() {
// Cache the highest
var highestBox = 0;
var loop = 1
// Select and loop the elements you want to equalise
$('.child', this).each(function() {
if (loop % 2 != 0) {
// If this box is higher than the cached highest then store it
highestBox = $(this).height();
if ($(this).next('.child').height() > highestBox) {
highestBox = $(this).next('.child').height();
}
// Set the height of all those children to whichever was highest
$(this).height(highestBox);
$(this).next('.child').height(highestBox);
}
loop++;
});
});
.child {
width: 50%;
float: left;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='parent'>
<div class='child'>some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content</div>
<div class='child'>some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content
some dynamic content some dynamic content some dynamic content</div>
<div class='child'>some dynamic content</div>
<div class='child'>some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content</div>
<div class='child'>some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content</div>
<div class='child'>some dynamic content</div>
</div>
Related
How can I detect if multiple child divs are wider than their parent? In this case, when they are wider, the rightmost one is displayed below the leftmost one. I have tried using js to check for an overflow (as described here: javascript css check if overflow), but it doesn't work.
Ultimately, I want to keep the rightmost div below its sibling and change its padding, but only when they are wider.
The code is basically this:
<div class='parent'>
<span>title</span><br />
<div class='child'>
Some content.
</div>
<div class='child'>
More content that sometimes doesn't fit.
</div>
</div>
not sure, but have you tried it?
var children = YourParentDiv.children;
for (var i = 0; i < children.length; i++) {
var child_width=children[i].offsetWidth;
var parent_width = children[i].parentElement.offsetWidth;
if (child_width>parent_width)
{console.log('wider');}
}
This will compare the child width and the parent width of your divs
$('.parent').children('.child').each(function() {
let $this = $(this);
console.log($this.width(), ' ', $('.parent').width());
if ($this.width() > $('.parent').width()) {
//add the padding you want
$this.css('padding-top', '10px');
}
})
.parent {
width: 500px;
}
.child {
background-color: green;
width: 700px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='parent'>
<span>title</span>
<br />
<div class='child'>
Some content.
</div>
<div class='child'>
More content that sometimes doesn't fit.
</div>
</div>
I'm creating DIVs dynamically and appending them to a particular DIV.
My question is how do I always make the last created DIV to be above other DIVs within the appended (its parent) DIV?
So basically I want the last created DIV to be on the top level of the other.
DIV 4 - [created at 4:32pm]
DIV 3 - [created at 4:29pm]
DIV 2 - [created at 4:27pm]
DIV 1 - [created at 4:26pm]
the dynamic DIV css:
.dynamicDIV{
width:100%;
position: relative;
}
the append DIV css:
.parentDiv{
width: 100%;
margin-top: 5px;
}
I'm not referring to the z-index. I want to position it above the others.
var parentElement;
var newFirstElement;
parentElement.insertBefore(newFirstElement, parentElement.firstChild);
As I pointed out in my comment, .prepend() can be used here:
$('.parentDiv').prepend('<div class="dynamicDIV">New Div</div>');
but there is a second possibilty:
$('<div />').addClass('dynamicDIV').text('New Div').prependTo('.parentDiv');
This solution is a bit more maintainable.
Demo
Reference
.prepend()
.prependTo()
Use .prepend() on whatever element you want to be preceeded with the new one:
http://api.jquery.com/prepend/
When a DIV is at position: absolute, the last sibling in the DOM is over the others. This doesn't depend on the time you inserted it.
But you can override this behavior by using z-index: 1.
Look at this HTML code:
<style>
div.container > div {position: absolute; z-index: 0}
div#C {z:index: 7}
</style>
<div class="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
</div>
This code will display C hidding D, hidding B, hidding A.
CSS with display:flex and flex-direction:column-reverse; can help you:
body {/* parent container of div to shw in a reverse flow*/
display:flex;
flex-direction:column-reverse; /* row-reverse if on line*/
}
div {
width:50%;
border:solid;
margin:auto;
}
div:last-of-type:after {
content:'last in document !';
color:red;
}
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
anyway, in the DOM or for CSS selector, last will be last. reverse order only shows at screen.
I have a bootstrap row with 3 columns nested within a container which I'd like to give a height of 100% for each row, applying vertical scrolling if they overflow.
Current Layout
DOM
<body>
<div id="wrapper">
<nav...
</nav>
<div id="page-wrapper" class="container-fluid">
<div class="content" ui-view>
<!-- content starts here (loaded by angular)-->
<div class="row">
<div class="col-md-4 nopadding">
...
</div>
<div class="col-md-4">
<!-- example column content -->
<div class="list-group">
<a class="list-group-item" ng-repeat="..."></a>
</div>
</div>
<div class="col-md-4 nopadding">
...
</div>
</div>
<!-- content ends here -->
</div>
</div>
...
I tried a lot of things now, e.g. negative margins, absolute positioning, displaying the columns as table/table-cells. However everytime the content populates, the list groups expand to the height they need for displaying all items, pushing the whole site down.
Based on other examples, it should work this way (it does not, though -> has no effect):
body, html {
height: 100%;
}
.table-row { // applied to "row"
display: table;
> [class*="col-"] { // applied to columns
vertical-align: top;
float: none;
display: table-cell;
}
}
.overflow-auto { // applied to the list groups inside the columns
height: 100% !important;
display: block;
overflow-y: scroll;
}
Anyone got an idea about how to solve this?
Examples tried:
How to make bootstrap column height to 100% row height?
Twitter bootstrap 3 two columns full height
Setting 100% height to columns in Twitter Bootstrap
Bootstrap 3 - 100% height of custom div inside column
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
What I want to accomplish is after calling jQuery $().hide(), the animation to hide a child div on a current page and then show a new div in its place.
When I call the .hide(), the parent div resizes and I do not want that.
The parent has two divs in it, a text filled div, and the div in question so when I call the hide, only the text-only div remains. I want the height to remain the same because the new content is going to be the same height.
Here is what I have:
<div class="adminContent"> //Wrapper div, this should not change in height of 668px
<div class="adminTitle"> // Text only div, remains after .hide is called
Admin > Manage Class Roster
</div>
<div class="resetBody" id="manageClassBody1"> // Div that is being hidden/replaced
... // div contents
</div>
CSS
.adminContent {
background: #F7F7F7;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 668px;
}
How should I have it so that its height is static after I hide the child div? Thanks!
EDIT: I want to do an in place swap of the two divs with an animation to switch between the two. I looked at the replaceWith() provided by jQuery but I'm not sure how to use it for my needs.
I would suggest using the animation features of JQuery to accomplish your task.
I created a sample JSBin for you.
Example:
$(document).on("click", "#togglebtn", function() {
var divs = $('.resetBody, .resetBody2');
var hiddenDiv = divs.filter(":not(:visible)");
var visibleDiv = divs.filter(":visible");
visibleDiv.fadeToggle({
complete: function() {
hiddenDiv.fadeToggle();
}
});
});
.adminContent {
background-color: lightgreen;
padding: 10px;
}
.resetBody {
background-color: #880000
}
.resetBody2 {
background-color: lightblue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adminContent">//Wrapper div, this should not change in height of 668px
<div class="adminTitle">much text wow! much text wow! much text wow! much text wow! much text wow!
Admin > Manage Class Roster
</div>
<div class="resetBody">Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>
</div>
<div class="resetBody2" style="display:none">Div 2 is taller
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>
</div>
</div>
<div style="margin-top:10px;">
<button id="togglebtn">Toggle</button>
</div>
For an android project, I need to show a view (WebView), that dynamically loads content.
Content items will be <div class="content-item"> tags that are added by JavaScript to <div class="content-holder"> after page has loaded.
The design is such that:
List item
Content items will be layed out in fixed-width columns. Content items do not necessarily have same height.
Height of any column must not exceed screen height. If a column is full, additional content will be put in next column(create column if necessary). There will be no empty columns. Column must not break inside a content item.
Page shall be horizontally scrollable(many columns of fixed width), but not vertically (height does not exceed page).
Any ideas on how to implement using css, javascript?
http://jsfiddle.net/B4RPJ/
You can iterate through the content items, check if they fit in the column, and if they don't, create a new column and move the rest of the items to the new column ... like so:
$(".content-item").each( function() {
// iterate the content items and see if the bottom is out of the container
var bottom = $(this).position().top + $(this).height();
if ( bottom > $(this).parent().height() ) {
// shift it and following content items to new column
columnShift( $(this) );
}
} );
function columnShift( el ) {
var parent = el.parent();
var container = $(".content-container");
// create a new column
var newCol = $("<div class='content-holder'></div>");
// get the content items that don't fit and move them to new column
el.nextAll(".content-item").appendTo( newCol );
el.prependTo( newCol );
// widen the parent container
container.width( container.width() + parent.width() );
// add the new column to the DOM
parent.after( newCol );
}
with html
<div class="content-container">
<div class="content-holder">
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
</div>
</div>
with an arbitrary number of .content-item divs, containing an arbitrary amount of content
and css of
.content-holder {
float: left;
width: 300px;
height: 300px;
border: 1px solid #000000;
overflow: hidden;
margin: 5px;
padding: 10px;
}
.content-item {
max-height: 280px;
overflow: hidden;
}
I'm sure you can make the code more clever, but this should be a start