We Keep Coding

Adjust Divs height related to another Div

I have four divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. means, if one grows because text is placed into it, the other one should grow to match the height.
Here is my :Fiddle
Please resize the width of answer
Thank you.

here is your solution you should use display:flex
jsfiddle.net/94uvouzw/7/

$(document).ready(function(){
var height;
var maxHeight = 0;
$(".test").each(function(){
height = $(this).height();
if(height > maxHeight) {
maxHeight = height;
}
});
$(".test").css("height",maxHeight);
});
By using jQuery
Demo Fiddle

Resize and center dynamic content inside a div

I'm trying to resize and center dynamic content inside a div onLoad and on window resize to suit my liquid layout.
Posting a link < http://jsfiddle.net/h52tqaz2/">fJSFiddle > due to easy understanding.
Why doesn't it center all DIVs onLoad (but it centers when resize)?
How can I make this scale according to the height of the window as well as according to the width of the window by maintaing its aspect-ratio?
NOTE: The dynamic content are not the same size.

Use ready instead of onload :
$(document).ready(center_images);
$(window).resize(center_images);
function center_images() {
var parent_width = $('.container').width();
$('.content').each(function() {
var content_width = $(this).width();
var margin = (parent_width-content_width)/2;
$(this).css('left', margin);
});
}
Check JSFiddle Demo

Apply viewport width size to a div on hover using Jquery

I have three divs lined up horizontally. Each get their width size from a JQuery update size function. But, instead of loading like this, I want them to load at 300px and animate to viewport size on hover (similar to how the opacity animates on hover).
Here's what I have so far:
http://werdnaworks.com/test/

On each <div>s hover animate() both width and opacity. But you also have to set the parent width equal to total <div>s width so you can keep them inline.
var $div = $('div'),
divW = $div.width(),//300px
divLen = $div.length,
windowW = window.innerWidth;
$('body').width(divW*divLen);
$div.hover(function(){
$(this).stop().animate({width:windowW, opacity:1},'fast');
$('body').stop().animate({width:windowW+(divW*divLen-1)},'fast');
},function(){
$(this).stop().animate({width:divW, opacity:0.5},'fast');
$('body').stop().animate({width:divW*divLen},'fast');
});
Please see this fiddle.
You may also want to automatically scroll to the <div> being hovered. You can do so with animate scrollLeft.
$div.hover(function(){
var offsetLeft = $(this).offset().left;
$(this).stop().animate({width:windowW, opacity:1},'fast');
$('body').stop().animate({width:windowW+(divW*divLen-1), scrollLeft:offsetLeft},'fast');
},function(){
$(this).stop().animate({width:divW, opacity:0.5},'fast');
$('body').stop().animate({width:divW*divLen},'fast');
});
Check this fiddle

CSS: Increase parent width if height of p overlays

I have an image which is 100% of the window. Inside I have an absolutely positioned div (with the class caption) which displays a header and some text. This caption has a min-width of 36%. My website if fully responsive.
I am using media queries to reposition the caption on tablets and mobiles. However, sometimes the text inside the item is too large - the height of the caption is greater than the image.
I am using the following code to fix this using javascript, but it feels a big buggy (and it does not work when the user resizes the browser):
window.onload = function(){
setWidth();
};
var count = 0;
function setWidth() {
$('.item').each(function() {
if ( $(this).find('.caption')[0].scrollHeight > $(this).height() && count <= 100) {
$(this).find('.caption').css('width', $(this).find('.caption').width() + 10);
count++;
setWidth();
}
});
}
Is there a way I could achieve the same effect using just css. Something where max-height on the caption is 100%, the min-width is 36% and the width will change accordingly as the height of the caption changes.

Difficult to see whether CSS is feasible without markup for your example. As for the JavaScript, you want to attach your resize function to the window.onresize event, this will call whenever the window is resized.
See example on JSFiddle
window.onresize = updateDimensions;
function updateDimensions(e) {
document.getElementById('width').innerHTML = window.innerWidth;
document.getElementById('height').innerHTML = window.innerHeight;
}
updateDimensions();

set height div javascript

I'm adjusting the height of the box with no problems, now I would like to adjust the height of the box grabbing the top handle and adjust height but upwards. What would be a good way of doing this? thanks
(current downwards code)
var mY = event.clientY;
var originalHeight = parseInt(document.getElementById('somediv').style.height);
if(click == 1){ // down
var sY = event.clientY;
var finalHeight = originalHeight +sY-mY;
document.getElementById('somediv').style.height=finalHeight + 'px';
}else{ // up
resize upwards instead of downwards....
}

An element's position is defined by its top-left corner - you'll have to move it up at the same time as you extend it from the bottom.

Resizing a DIV "up" is not as easy as resizing it "down". The reason is that when you specify a HEIGHT, the DIV will expand "down" as its normal flow. The top left corner of the DIV will remain static.
Allowing the DIV to be resized "UP" will give you a lot of issues. In order to do this, you will need to set the HEIGHT, then the POSITION of the DIV to currentHeight - previousHeight. You will notice it will jitter a lot when doing this.
Also, anything above your DIV will need to be displayed accordingly.

You should look into jQuery and the jQuery Dimensions plugin.