Equal height columns using Bootstrap and jQuery - javascript

I am using Bootstrap in a current Web project but I don't know how to dynamically set the same height of column elements.
I already know the .row-eq-height class but using that I loose the responsiveness of Bootstrap elements. I would like the #selection column to be at least as high as #map-container (or higher because it has a border and I don't want it to cut the content).
I already wrote few lines of jQuery:
var map_height = $('#map-container').height();
var selection_height = $('#selection').height();
if (selection_height < map_height) {
$('#selection').css('height',map_height);
}
<div class="row" id="selection-wrapper">
<div class="col-lg-7 col-xs-12" id="map-container">
<!-- Zone for map display -->
<div id="map"></div>
</div>
<div class="col-lg-5 col-xs-12">
<div class="text-container" id="selection">
// Content
</div>
</div>
</div>
Those lines work but I don't know how and when I should execute them as I would like to keep the equal height property all the time, even when the width of the container changes (which modifies the height of the #map-container).

function equal_height() {
var map_height = $('#map-container').height();
var selection_height = $('#selection').height();
if (selection_height < map_height) {
$('#selection').css('min-height',map_height);
}
}
$(document).ready(function(){
equal_height();
});
$(window).resize(function(){
equal_height();
});

Related

How to load different HTML Content based on different Screen Size whith JS

I intend for screen sizes greater then 600px to display a slider and for less than 600px to display the same content without the slider. I'm using Bootstrap 4 and Wordpress. For some reason my code isn't returning anything at all. Here is the code of the wordpress template:
<div class="container-fluid custom-bg-color" id="seccion-portafolio">
<div class="row">
<div class="col">
<div id="portafolio-variable-content">
</div>
</div>
</div>
</div>
<script>
(function () {
var viewportWidth = $(window).width();
if (viewportWidth > 600) {
$('#portafolio-variable-content').load('slider.php');
$('#portafolio-variable-content').html("<p>Another test</p>")
} else {
$('#portafolio-variable-content').load('no-slider-content.php');
}
}());
</script>

Javascript align vertical center many child divs within parent

Trying to dynamically resize the div (col with pad) with JavaScript so that it is vertically middle of the parent div (row).
The text blocks vary in size as do the images and there are many of these divs within the page.
I'm quite close to achieving this with the provided code, but the loop seems to be repeating more times than it should and sets the height incorrectly on the last pass, almost like it is halving the space over and over again.
Is there a way to make the JavaScript only run once?
<div class="row">
<div class="col pad">
<p>Text here</p>
</div>
<div class="col">
<img src="image.jpg">
</div>
</div>
$(window).load(function(){
$('.row').each(function() {
var parentDiv = $(this).height();
$('.pad').each(function() {
var childDiv = $(this).height();
var space = parentDiv - childDiv;
var half = space/2;
$(this).css('paddingTop', half + 'px');
alert(half);
});
});
});
I'm unable to use css to achieve this as col are floated.

Can't avoid a div step on another div

Here is the problem site.
Let me explain in case I will solve it, so everyone can know about it.
I have two divs with the following html code
<div id="dataview" class="data-views" style="width:100%; height:580px; padding:0; border:solid; margin-bottom:10px;">
<div class="row-fluid">
<div class="col-md-8">
<div class="timeline"></div>
</div>
<div class="col-md-4">
<div id="map" class="map"></div>
</div>
</div>
</div>
The two divs I am talking about are the "col-md-8" and "col-md-4"
If you try to resize the window, then the second div will move on the bottom of the first one, but it covers everything else behind it. I try to play with css, but without a success. Any suggestion?
Edit:
Screenshots from the problem
How it is on full window: screen1
How it is after resize: screen2
Edit 2: I think something as a sollution but it is to complicated for me. Maybe someone could help. If the size of the screen is less than col-md-8 (so the second div will move to the bottom), I will change the height of the div (data-views) to 580+(height of map).
I tried this:
<script>
$(window).resize(resizemap);
function resizemap() {
var winWidth = $(window).width();
if (winWidth < 995) <--on 995px the map doesn't fit and move on the bottom.
{
var Hmap = $("#map").height();
$('#dataview').css("height", 580+Hmap);
}
}
</script>
The problem is that instead of change the size of the whole div, it changes the height only of the timeline. And the map moves again.
I figure how to do it. Here is the result:
HTML:
<div id= "dataview" style = "height:590px;border:solid;">
<div class="data-views" style="width:100%;height:580px;padding:0;margin-bottom: 10px;">
<div class="row-fluid">
<div class="col-md-8">
<div class="timeline"></div>
</div>
<div class="col-md-4">
<div id="map" class="map"></div>
</div>
</div>
</div>
</div>
And here is the javascript:
<script>
$(window).resize(resizemap);
window.onload = resizemap;
function resizemap() {
var winWidth = $(window).width();
if (winWidth < 995)
{
var Hmap = $("#map").height();
$('#dataview').css("height", 590+Hmap);
}
}
</script>
The only problem is that if I resize the window with the maximize button of the browser, the dataview height stay the same.

Adding variable heights with multiplier in jQuery

The following code does what it should perfectly, however I need to add 30% more height to the containing element .boxy on top of the added variable heights.
I've tried searching for ways to add a percentage to the equation, but so far I've just found vague answers or non-applicable methodologies.
$(".exPand a").click(function (event) {
event.preventDefault();
var postHeight = $(this).closest('.boxy').find('.articleImageThumb').height();
var excHeight = $(this).closest('.boxy').find('.initialPostLoad').height();
$(this).closest('.boxy').animate({height: postHeight+excHeight}, 1000);
});
Live output:
<div class="boxy">
<div class="boxGrad"></div>
<div class="postmetadata"></div>
<div class="articleTitle"></div>
<div class="rightCtrls"></div>
<div class="ajaxBoxLoadSource"></div>
<div class="articleImageThumb"></div>
<div class="initialPostLoad"></div>
</div>
Just multiply by 1.3
$(this).closest('.boxy').animate({height: (postHeight * 1.3)+excHeight}, 1000);
Move the * 1.3 to the appropriate place depending on which height you want 30% of.

How can have a div which contain multiple multiple div it may 4-6-8 how can i fit them on page load using Jquery

How can have a div which contain multiple multiple div it may 4-6-8 how can i fit them on page load using Jquery.
<div id="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
I want to create a jquery function which can fit child div to parent div by arresting their height and width on page load.
I'm going to take a stab, and hope that what I think you want is what you actually want. I assume you want to insert a dynamic number of <div class="box"> elements into the <div id="main"> element when the page has loaded. If that is the case, this should work:
HTML
<div id="main"></div>
jQuery
function createBoxes(numberOfBoxes) {
var $box = $('<div/>').addClass('box');
var $container = $('#main');
for(var i = 1; i <= numberOfBoxes; i++) {
$container.append($box.clone().text(i));
}
}
$(function() { // calls createBoxes() when the DOM is ready
// shortened version of $(document).ready(function() {
createBoxes(4);
});
DEMO

Categories