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
Related
I am trying to get the height of a div tag on window resizing but I get always the same height. The event resizing is triggered correctly.
var resizeNews = this.resizeNews = function() {
$('.top-news__pillar').each(function (index){
console.log($(this).outerHeight());
if($(this).outerHeight() > maxHeightPillar) maxHeightPillar = $(this).outerHeight();
});
/if I don't set the height below the height correctly change when resizing/
$('.top-news__pillar').each(function (index){
$(this).outerHeight(maxHeightPillar);
});
}
$(window).on('resize',resizeNews);
Try .outerHeight() instead of .height()
Try this code.
$(document).ready(function() {
$(window).resize(function() {
var bodyheight = $('.top-news__pillar').height();
console.log(bodyheight);
}).resize();
});
Yes, you will get always same height why because if you specify your top-news__pillar element height in fixed unit like px instead of responsive unit like `%.
Even if you resize also your element height will be same. If you mention the element height in % you can see the height change when you resize the window.
I have a blog with new responsive template. I want to check all divs inside the posts to get any that has width bigger than window size and change the width of ONLY those divs to have max-width: windowsize.
Truth is the blog has 350+ posts and I don't have time to edit every single post to remove the ones with divs with fixed width going offscreen.
I'm not very good with jQuery and js, but I got this code and got this far:
var div = $(".post div").width();
var win = $(window).width();
if (div > win ) {
$(" ONLY THE DIV THATS BIGGER? ").css('max-width', ' WINDOW-WIDTH? ');
}
But it's changing the size of ALL divs. Any ideas?
[SOLUTION - for my needs, anyway]
As much as all your jQuery codes were amazing, I couldn't get any of them to work on the divs I wanted (but I'm sure they'll help people seeing this post in the future), so I just went for basic CSS and it fits my needs. I was afraid of ruling ALL DIVS inside posts width:100% because it would affect the nested ones, so I just used:
.post-body > * {
max-width:100% !important;
}
It calls ONLY all direct children of my post, which is already the same size of the window on mobile, and sets the rule max-width to prevent going off the screen. Perfect!
Thank you for your help!
first of all you might want to start using a loop to go through all the divs thats being inside the variable "div" also dont try to immediately go after the width statement but get all the divs
so your code:
var div = $(".post div").width();
var win = $(window).width();
if (div > win ) {
$(" ONLY THE DIV THATS BIGGER? ").css('max-width', ' WINDOW-WIDTH? ');
}
should become something like this:
var div = $(".post div");
var win = $(window).width();
for(var i=0; i<div.length;i++){
if(div[i].width() > win){
$(div[i]).css('max-width','WINDOW-WIDTH?');
}
}
also if you want to find out what exactly div is use this code:
var div=$(".post div");
console.log(div);
try
var win = $(window).width();
$(".post div").each(function () {
if ( $(this).width() > win ) {
$(this).css('max-width', win );
}
});
The problem of overflow does not come from this. In fact, it comes from the div class linkwithin_inner where the width has been set to a fixed width of 680px !important.
You should change the width to 100% in the CSS found on that page.
.linkwithin_inner {
width: 100% !important;
}
and the problem will be solved out.
You'd need to filter out the divs that are wider than the window and then set max width to only those, like below.
var winWidth = $(window).width();
$(".post div").filter(function(){
return $(this).width() > winWidth
}).css({"max-width": winWidth + "px"});
Hers is a demo along the same lines
Basically you want to loop though all divs which are found by this `$(".post div")'
Which boils down to:
$(".post div").each(function () {
$(this).width("50px");
});
And here you have a working fiddle:
https://jsfiddle.net/gkLmx6d1/2/
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
I have a problem with a vertical scrolling photo gallery,
I want vertical images to resize but horizontal images are fine the way they are.
Horizontal images are 900px in width and vertical images would be too tall for confortable screen viewing so I want two 440px width vertical images and a central margin of 20px to fit below one horizontal.
The website is on Cargocollective so I can't use PHP, only Jquery, Javascript and CSS
And I can only add on the HTML.
Anyone has a solution?
A way to detect the ratio of the images and then resize only if height>width
Thanks
$('img').each(function(i,obj){
if($(obj).height() > $(obj).width()){
//portrait, resize accordingly
}else{
//landscape display; the default you want.
}
});
in jQuery 1.7 and above, we can access the property of each image without using the $.each iterator.
$('img').prop('height', function(){
if($(this).height() > $(this).width()){
//portrait, resize accordingly
}else{
//landscape display; the default you want.
}
});
A variation of OhGodwhy's answer making sure image is loaded when height/width is being calculated.
$('#myElement img').load(function(){
if($(this).height() > $(this).width()){
//portrait, resize accordingly
var width = $(this).width();
var height = $(this).height();
var newWidth = 400;
var newHeight = newWidth * (height / width);
$(this).width(newWidth).height(newHeight);
}else{
//landscape display; the default you want.
}
});
I am trying to animate the div to its full height when a button is pressed and come back to its original height if the button is clicked again. The full height of the div is auto as it contains text with different word counts. I tried doing the below codes but it does not work properly.
The CSS :
.category_brief{
text-align:justify;
height:100px;
overflow:hidden;
}
Example 1 : This code does not animate the div when opening to full height , but animates while coming back to old height.
$(".slide").toggle(function(){
$('.category_brief').animate({height:'100%'},200);
},function(){
$('.category_brief').animate({height:100},200);
});
Example 2 : The output of this code is the same as of Example 1
var toggle = true, oldHeight = 0;
$('.slide').click(function(event) {
event.preventDefault();
var $ele = $('.category_brief');
var toHeight = ((toggle = !toggle) ? oldHeight : newHeight);
oldHeight = $ele.height();
var newHeight = $ele.height('auto').height();
$ele.animate({ height: toHeight });
});
Example 3 : This code animates the div to its full height but does not toggle.
var slide = $('.slide');
var slidepanel = $('.category_brief');
// On click, animate it to its full natural height
slide.click(function(event) {
event.preventDefault();
var oldHeight, newHeight;
// Measure before and after
oldHeight = slidepanel.height();
newHeight = slidepanel.height('auto').height();
// Put back the short height (you could grab this first
slidepanel.height(oldHeight);
slidepanel.animate({height: newHeight + "px"});
});
If possible please provide a bit explanation also as i am a newbie..
Update : Solved by the idea from #chazm..
#chazm : thanks for the idea. I got it working by combining 1st and 3rd example ... Here is the code in case anyone needs it .
var slidepanel = $('.category_brief');
$(".slide").toggle(function(){
var oldHeight, newHeight;
// Measure before and after
oldHeight = slidepanel.height();
newHeight = slidepanel.height('auto').height();
// Put back the short height (you could grab this first
slidepanel.height(oldHeight);
slidepanel.animate({height: newHeight + "px"})
},function(){
$('.category_brief').animate({height:100},300);
});
Working with 'auto' height it always quite tricky. I think there are different issues in your examples.
1) Browser can't define correct 100% height. Possible solutions - define height to all its parents. Either set it to 100% (till html tag) or set closest parent as relative (because height is calculated from closest relative parent). If you want to animate div to 100% of the entire page - think of the absolute positioning
2)The same as above i assume
3)When this code supposed to toggle back it can't determine that it should become lower that it is now. Not absolutely sure why though. Probably because 'auto' height from 100% is set to something wrong. You may check in firebug what value it has on the computed tab after that function is toggled back. Probably it will give you a clue
Try to combine 2) and 3). The idea - if toggle is true (it shoud be lowered) then set newHeight = slidepanel.height('100').
The solution depends on your implementation needs. If you know that at first the div should be 100px etc in height and when you click, it maximizes to an unknown height, the following solution would work. If you had a structure similar to
<div class="outer">
<div class="wrapper">Content of unknown length here</div>
</div>
and css
div.wrapper { position:relative; height:100px; overflow:hidden; }
div.outer { position:absolute; height:auto; }
then you'd get a div that is 100px in height, with the content that doesn't fit in 100px cut off. Now when you press the desired button, you could get the height of the wrapper div, since it is a long as it's content is (even though you only see the top 100px) and set the outer div's height according to it. Like so
var newHeight = $('div.wrapper').height();
$('div.outer').animate({height:newHeight},200);
Which would then animate the outer div to display the whole contents. When you click the button again, you could just do
$('div.outer').animate({height:'100px'},200);
And you would again have only the 100px height.