Javascript align vertical center many child divs within parent - javascript

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.

Related

How to find the height of the individual slides of a carousel

I have a carousel in which there are three slides the markup is something like this below
<div id="corpsite-carousel">
<div class="slide">
<!-- slide 1 content -->
</div>
<div class="slide">
<!-- slide 2 content -->
</div>
<div class="slide">
<!-- slide 3 content -->
</div>
<div class="controls">
</div>
</div>
So there are three slides and each has a varying length of content(which includes text and images), after implementation, I see each slide to have its own height based on the content inside it which makes it a very bad user experience (as by changing the slides the sliding bullet controls change up and down). I am trying to set the height of the slides to the slide whose height is the highest.
I am trying using the following jquery code to find the height of each slide
$(document).ready(function(){
var slides = $('#corpsite-carousel .cmp-carousel__item');
var heightsArr
console.log(slides);
slides.each(funiction(i){
var height = $(this).innerHeight();
console.log(height)
})
})
but the console shows me the height of the first slide which is correct but the rest 2 slides heights are not correct(i checked in the dom after sliding and checked the height of each slide) I think this is because the slide 2 and 3 are not available yet on the screen. what should be the approach or the best method to set the height of the slides.
Maybe a little sleight of hand - something like this?
$(document).ready(function(){
maxHeight = 0 ;
var slides = $('#corpsite-carousel .cmp-carousel__item');
var heightsArr
console.log(slides);
slides.each(function(i){
maxHeight = Math.max( maxHeight, quickMeasure($(this)));
})
})
function quickMeasure(el) {
var previousCss = el.attr("style");
el.css({
position: 'absolute', // Optional if #myDiv is already absolute
visibility: 'hidden',
display: 'block'
});
theHeight = $(el).height();
el.attr("style", previousCss ? previousCss : "");
return theHeight
}

Equal height columns using Bootstrap and jQuery

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();
});

Dragging a div a fixed distance from bottom to top

I am creating a project where I want to be able to drag a div (a drawer) that is (mostly) positioned off the bottom of the screen a fixed distance on the Y axis. The distance I want to move is the height of the div (drawer - minus the drawer handle).
It was pretty easy to get this working from top to bottom, but reversing it is posing to be quite a challenge. I feel like it might just be a simple math error.
I have put together a fiddle to better illustrate the issues I'm having.
http://jsfiddle.net/q8DE6/2/
Here's my code:
HTML
<div id="panelWrapper">
<div id="panel" class="panel">
<p> The height of this drawer is dynamic, and will slide the appropriate amounted based on the height of the content. </p>
<p> Any type of content can be included in here. The body of the drawer and the drawer pull tab can also be styled as you see fit, just modify the css/styles.css file. </p>
<!--necessary div for slide tab, modify as needed, but don't delete -->
<div class="slide">
<a id="drawerSlide" href="#" class="drawer-slide">
<table id="sTab" class="slideTab">
<tr>
<td id="stText1"></td>
<td id="stImg">Pull here.</td>
<td id="stText2"></td>
</tr>
</table>
</a>
</div>
</div><!--/panel -->
</div><!--/panelWrapper -->
<div id="content">
<div id="header">
<div id="menuBar">
<h3>Header Bar Text.</h3>
</div>
</div>
<div id="container">
</div>
<div id="footer">
<p>Footer Area.</p>
</div>
</div><!--/content -->
Slide Function:
JS:
function drawerSlide(slideDir) {
switch (slideDir) {
case 'bottomToTop':
//drawer styling
$('.panel, .slide').addClass('botToTop');
$('.panel').addClass('panelTB');
$('.slide').addClass('slideBotToTop');
$('#sTab').addClass('slideTab');
$('.panel p').filter(":first").css('padding-top','50px');
//hide overflown Y axis content. Hopefully this won't cause any conflicts with your existing code/page.
$('body').css('overflow-y','hidden');
botStartPos = $(window).height() - 50;
offset = $('#panel').offset();
panelHeight = $('#panel').outerHeight();
topEndPos = botStartPos - panelHeight +50;
yPos = botStartPos;
// if you need a different drawer starting point, adjust the starting position here (50).
panelHeight = parseFloat(panelHeight) - 50;
console.log("botStartPos:" + botStartPos);
console.log("topEndPos:" + topEndPos);
console.log("yPos:" + yPos);
$('.panel').css('top', botStartPos);
$('#panel').draggable({
axis: "y",
containment: [0, botStartPos, 0, topEndPos] //0, botStartPos, 300, topEndPos
},
{
drag: function( event, ui ) {
if (yPos > botStartPos || yPos < topEndPos) {
return false;
}
else {
offset = $(this).offset();
yPos = offset.top;
console.log(yPos);
}
}
});
}
}
$(document).ready(function() {
drawerSlide("bottomToTop");
});
I'm thinking the issue might be with the way I'm using the offset.top command to move the drawer, but I'm stumped as to how to do it correctly.
Right now what is happening, is when you click/hold the handle, it "jumps" up the fixed distance, instead of being able to drag it. Also, you can't drag down to put the drawer away, but you can drag up once again and it "jumps" down the fixed distance. Not really what I'm after.
The desired result I'm looking for is one of a typical "drawer" behavior. When the user clicks and holds on the handle, they can "pull" the drawer up the fixed distance, and then "push" it back down the same fixed distance, so the handle never falls off screen.
My guess is it that it's a math problem with the containment function. I still don't fully understand it well, so the problem may lie within the coordinates I'm using?
Any advice would be most appreciated. :)

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.

jQuery Cycle plugin - Automatic height for containers

I'm using the cycle plugin on some divs, like this:
<div class="sections">
<div class="Section"> <img /> text </div>
<div class="Section"> <img /> text </div>
<div class="Section"> <img /> text </div>
</div>
all the .section divs have variable height, based on their contents.
How can I make cycle not to resize the container div (sections) to the largest child height? Instead I want the container to resize on every animation to the current child height.
ok, I managed to do it by hooking a function on 'after' event:
function onAfter(curr, next, opts, fwd) {
var $ht = $(this).height();
//set the container's height to that of the current slide
$(this).parent().animate({height: $ht});
}
found the info here:
http://forum.jquery.com/topic/jquery-cycle-auto-height
set containerResize option to 0 and try. More option details here.
I've done it a little bit different:
$('.cycle-list').cycle({
containerResize: 0,
before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
var container = $(this).parent();
container.css('height', Math.max(container.height(), $(nextSlideElement).height()));
},
after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
$(this).parent().css('height', $(this).height());
}
});
My items had different height as well. In the before, it makes sure the container is big enough for the bigger of the 2 slides. In the after, it just resizes to the next slide.
This way it never over-flows because your container is too small.
note: this is for cycle 1

Categories