- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Make Div larger than another by certain amount with jquery
Okay so here’s my problem, essentially I have two divs stacked on top of one another, using z-index. I did this because the back one is slightly opaque, and the front one will have content. Basically what I want is something like equal fluid height, but instead of having them equal, i want the back one to be greater by 20px in every direction.
This is what I’ve used to make things equal:
(function ($) {
$(document).ready(function() {
equalHeight($("#back"),$("#content"));
});
function equalHeight(one,two) {
var tallest = 0;
tallest=one.height();
if (tallest < two.height()) {
tallest=two.height();
}
one.height(tallest);
two.height(tallest);
}
}(jQuery));
And this is what have used to make something bigger than another:
$('#back').height(function (index, height) {
return (height + 40);
});
What i keep running into though is that it makes both divs bigger but equal.
Any ideas?
ps- new-ish to jquery, so if you have an answer please explain so I can learn.
Thanks in advance!
This might give you some ideas: http://codepen.io/alenabdula/pen/viwCb
If you are using absolute positioning could you not use calc
? in the CSS rather than JS/JQuery?
width:calc (100% + 40px)
etc.
Just wondering.
Hmm…seems you can: http://codepen.io/Paulie-D/pen/CdJHf/
Found a solution, I think I was over thinking it a bit, I don’t know if the css calc would work, but I’ll look into it, but thanks for all the help, and here was my solution:
$(window).ready(function(){
var height = $("#content").height();
var finalHeight = (240 + height);
$("#background").css("height", finalHeight);
});