i have a div, div1 with a height according to the text, div2 is the same. Now i need div3 to be: div1 + div2
I have this code, but it ain't workin.
var lengthnews1 = ((document.getElementById("div1").offsetHeight)+"px");
var lengthnews2 = ((document.getElementById("div2").offsetHeight)+"px");
var x = document.getElementById("div3");
x.height = (lengthnews1 + lengthnews2);
you are trying to add two strings, not numbers. Fetch both heights, add them and then add the "px" :
var lengthnews1 = ((document.getElementById("div1").offsetHeight));
var lengthnews2 = ((document.getElementById("div2").offsetHeight));
var x = document.getElementById("div3");
x.height = (lengthnews1 + lengthnews2) + "px";
You can verify the working code at this fiddle
You need to remove the "px" from lengthnews1 and lengthnews2 variables so you can add the two values together for var x, once added you can then add the "px".
You need to set the height using x.style.height
Also you need to concat with "px" only once, ie (lengthnews1 + lengthnews2) + "px"
Related
How to add to the outerHeight() function additional pixels?
So we have a variable, that gets .pg-sect `s outerHeight:
var $section = $('.pg-sect').outerHeight();
And what I want is to add to the height we got additional 70 px. What would the code look alike?
var $section = $('.pg-sect').outerHeight() + 70px;
Okay, let me clarify:
I'd like to add a condition: whether the scrolling area equals to the area of .pg-sect - 100 px before an outerHeight, we do something. And the question is how to get these - 100px of the elements outerHeight
var $section = $('.pg-sect').outerHeight();
//Here you're just assigning a value rather than modifying the element itself
var $section = $('.pg-sect').outerHeight() + 70;
To modify the element:
var $section = $('.pg-sect').outerHeight() + 70;
$('.pg-sect').outerHeight($section);
I'm a completely nooby on Jquery.
I'm trying to calculate and obviously didn't work.
$(document).ready(function() {
var x = $('.a').height();
var y = $('.b').height();
$('.c').height(y - x + x);
});
I'm close to make it work? :))
https://jsfiddle.net/kav5y0vf/
Instead of:
var x = $('.a').height();
Use
var x = $('.a').outerHeight();
height() returns height of element with no padding, whereas outerHeight() does.
jsfiddle below:
https://jsfiddle.net/kav5y0vf/2/
Change this line
$('ul.logad li.o').height(y - x + x);
To
$('ul.logad li.o').css('height', (y - x + x) + 'px');
Don't know why you need this but y-x+x = y
I tried
document.getElementById('first').style.top = document.getElementById('second')
.style.top + 80;
but that doesn't seem to work. How can this be accomplished?
Yes, you can do it with parsing the position and rebuilding a string with the new value and unit part string.
var match = document.getElementById('second').style.top.match(^(\d+(?:\.\d+)?)(.*)$);
document.getElementById('first').style.top = (parseFloat(match[1]) + 80) + match[2];
Nina Scholz's answer is a really wonderful way to do this. More often, in the wild, you may see two other methods. Either by using getComputedStyle and its getPropertyValue method, or most commonly by using offsetTop and offsetLeft
Get Computed Style Example
Computed Style Example
let div1 = document.getElementById('one');
let div2 = document.getElementById('two');
// we use getComputedStyle to get the top and left of div1
// we use slice to remove 'px' from the property value.
div1Top = getComputedStyle(div1).getPropertyValue('top').slice(0,-2);
div1Left = getComputedStyle(div1).getPropertyValue('left').slice(0,-2);
//we can now manipulate the value any way we please
//and set the values to the second div.
div2.style.top = (div1Top + 30) + 'px';
div2.style.left = div1Left + 'px';
Offset Top and Left Example
Offset Example
let div1 = document.getElementById('one');
let div2 = document.getElementById('two');
div2.style.top = (div1.offsetTop + 30) + 'px';
div2.style.left = div1.offsetLeft + 'px';
Offset is more commonly used because, as you can tell, it's more readable while simultaneously being more concise.
Fiddle <---See Fiddle
Here I want to return the relative distance of two divs with their parent div. It seem that .offsetTopcannot return a correct answer. The result I expected is marked as green lines, the distance in 2 and 3.
And it's strange that why the border of their parent div was also included in the of .offsetTop?
Thanks!
What if you gave .paper{ position:relative }, then the children would have coords offsets relative to it?
http://codepen.io/snypelife/pen/AqtIC
Can't you just subtract the parent's offset top as well:
var re = document.getElementById("result");
var num2 = document.getElementById("2");
var num2Parent = num2.parentNode;
var num3 = document.getElementById("3");
var num3Parent = num3.parentNode;
re.innerHTML="position:<br/>box1 = "+ (num2.offsetTop - num2Parent.offsetTop)+"<br/>box2 = "+ (num3.offsetTop - num3Parent.offsetTop) ;
I would say that I'm great with HTML and CSS, it's when I start to touch JavaScript that I struggle; I can understand some of it but I couldn't write it for my life! I'm trying to learn though, any ways; I've put together this jQuery script with the goal to vertically center a div between a relative positioned top div, and an absolute positioned bottom div. It's not working out for me, lol.
Because I'm trying to learn how to work with jQuery and create my own scripts, I'd like to try and get this working. However, if there is a better way to accomplish my goal, I would greatly appreciate your input in that way as well!
<script type="text/javascript">
$(document).ready(function() {
$(window).ready(function(){
vertical_height()
});
$(window).resize(function(){
vertical_height()
});
function vertical_height(){
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
var mid_height = $(".midcontent").height();
var foot_height = $(".footer").height();
var pos_height = Math.round(head_height+foot_height);
var neg_height = Math.round((head_height-foot_height)/2);
var fin_height = Math.round(doc_height-(pos_height-neg_height));
$('.midcontent').css({
"marginTop","-"+fin_height+"px",
"marginBottom","-"+fin_height+"px"
}
}
});
</script>
.headcontent is the top div.
.midcontent is the middle div that I'd like to center.
.footer is the bottom div.
Here's your code, tidied into something that will run :
$(function() {
function vertical_height() {
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
//var mid_height = $(".midcontent").height();//not used
var foot_height = $(".footer").height();
var pos_height = head_height + foot_height;
var neg_height = (head_height - foot_height) / 2;
var fin_height = doc_height - (pos_height - neg_height);
$('.midcontent').css({
"marginTop": "-" + fin_height + "px",
"marginBottom": "-" + fin_height + "px"
});
}
$(window).resize(vertical_height).trigger('resize');
});
Now you can concentrate on getting the algorithm right.
As it stands, combining and simplifying expressions, I get :
var fin_height = doc_height - head_height*3/2 - foot_height*3/2;
which doesn't look right to me but I could be wrong.
EDIT
To avoid overlap, try this version :
var $$ = {}; //jQuery object cache.
$$.w = $(window);
$$.h = $(".headcontent");
$$.m = $(".midcontent");
$$.f = $(".footer");
function vertical_height() {
var w = $$.w.height(),
h = $$.h.outerHeight(true),
m = $$.m.outerHeight(),
f = $$.f.outerHeight(true),
fin_height = Math.max(0, (w - h - m - f) / 2);
$$.m.css('marginTop', Math.floor(fin_height)).css('marginBottom', Math.ceil(fin_height));
$$.h.text(fin_height);
};
$(window).on('resize', vertical_height).trigger('resize');
DEMO
Notes
position:absolute removed from the footer's CSS
jQuery objects now cached in $$ to give the resize handler less work to do.
Calculation now based on window height not document height.
The three divs now measured with .outerHeight(false) to include vertical padding and borders.
Overlap is prevented by Math.max(0, ...), which ensures fin-height can't go negative.
The statement $$.h.text(fin_height); is for debugging and can be removed.
EDIT 2
The following code will "debounce" the resize event.
Replace :
$(window).on('resize', vertical_height).trigger('resize');
with :
var do_resize;
$(window).on('resize', function(){
clearTimeout(do_resize);
do_resize = setTimeout(vertical_height, 100);
}).trigger('resize');
Just a little tip when calculating something, never round until you get to your final number.
h = Header Height
f = Footer Height
m = Middle Height
d = Document Height
s = Height of the space above or below the div
Here we assume the height of the document is equal to that of all the other elements combined. Since there is a space above and below the middle div that is equal we have two spaces.
d = h + f + m + 2s
d - h - m -f = 2s
(d - h - m - f) / 2 = s
Let's put this into some javascript
$(document).ready(function() {
$(window).resize(vertical_height());
function vertical_height() {
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
var mid_height = $(".midcontent").height();
var foot_height = $(".footer").height();
var fin_height = Math.round((doc_height - head_height - mid_height - foot_height) / 2);
$('.midcontent').css("margin-top", fin_height)
}
});
For the css we only need to add a top margin as this will push it away from the header because I am assuming the absolutely positioned footer will be stuck to the bottom.
Here is a working fiddle: http://jsfiddle.net/nBUnt/14/