Ok, so I have relative div, and inside it I have two absolute divs, rights and left. Under relative div I want sticky footer, or something like that, but relative div has not children's height, because children is absolute. I know that, I should use javaScript (because of absolute divs it's impossible with css, clearfix), but what is the best way to keep parent's height like children using JavaScript? I do not prefer to set div's height permanently, because it could be uncomfortable with future content changes.
Maybe someone has some ids how to set parent's height like children's without setting height permanently and when it's impossible to use clearfix trick?
I will be really grateful for every suggestion.
You can get the height of your parent container using .outerHeight() or .height(). Then you can use the .on() function to fire the SetHeight function on screen resize and load.
function SetHeight(div){
var x = $(div).outerHeight();
// to get the height
$(div).children().css('height', x);
// set the childrens height
}
$(window).on('load resize', function(){
// fire the function
SetHeight('#my_div');
});
Related
I have a div that slides up from the bottom of my pagewhen a button is clicked. i do this using a css transition and changing the css "top" attribute of the div. works fine if the div size never changes. So for example if the div is 400px high, i just move it up 400px and it's now in position. cool.
BUT... what if the div has dynamically generated content and will be a different height every time? how can i figure out how much to move the div up in order to be 100% showing?
so in pseudo code i want something like
function movemydiv() {
var howMuchToMoveIt = ??? (somehow getting the dynamic containers height)
document.getelementbyId("mydiv").style.top = bottomOfScreen - howMuchToMoveIt
any tips on most straightforward way to do this??
You can use either clientHeight or offsetHeight to measure the height of your div.
Both clientHeight and offSetHeight include padding , but offsetHeight will also take into account borders and horizontal scrollbars (if rendered) - see MDN link.
So your js would be something like:
var howMuchToMoveIt = document.getElementById('mydiv').clientHeight;
The var will then contain the height of your element.
Hope this helps
I used this code.
Math.abs($('.hd-termometro').offset().top - $('.ft-termometro').offset().top);
to try to get the distance between 2 divs. I do it with this code, but my page automatically refreshes and the second div is zero. There is another method to calculate the distance ?.
I did this in jquery. perhaps angular another method exists.
Usually i do this in order to resize the middle to push the footer at the bottom of my page.
For this i take the window.height and i remove the height of my header and footer element. Then i bind a listener to a resize event of the object window to recomptue the height whenever it's needed.
If we want to make it general this would mean to take the height of the parent component and substract the 1st and the last and add a $watch on the whole height of the parent element.
However height and width properties in javascript (and even jquery) are tricky. They don't compute the whole height taken by the element. Margins and border are excluded.
So in orde to get the right thing you have to wrapped your element with an inner padding
<section id="header">
<div id="header-content">[content]</div>
</section>
With header having a padding property on it (if you need) and header-content having the border (if you need it). Then you can get the height of your header by looking for height element.
This has not really anything to do with angular, the only thing is the $watch part to detect changes. But if it's for header/footer like me, you can just use raw javascript to listen for window resize.
Do it in a function so that you can reuse it
function getDistance() {
var div1 = $('.hd-termometro');
var div2 = $('.ft-termometro');
return div2.offset().top - (div1.offset().top + div1.height())
}
Using it for the first time
$scope.distance = getDistance();
Update scope when distance changes
$(window).resize(function(){
$scope.distance = getDistance();
});
I want to make the div container can automatically resize its div-size (height) along side with the content, instead of going out of the area when the text is more than container area. Can anyone help me out to fix this instead of editing up the css for div-container? When I tried to change the div-size even it fits up the content, but while it is more than the div-area, I have to edit it manually again through CSS code.
Is it possibly to make it automatically? or maybe using JavaScript function?
CSS
div#div_id{
height : auto;
min-height: 100% !important;
}
Set your div height to auto. It will take height automatically as per your contents.
The behaviour you want is just what a div - or other so-called block-level-element - naturally does unless you give it a defined height. So just remove any fixed heights you apply to the container and you're done.
In case you want your div to be of a certain minimum/maximum height, use min-height/max-height instead of height for that.
JS Fiddle: http://jsfiddle.net/meYnS/3/
Lets say I have an element .outer with 100px width and position:relative;. It has an inner element which has position:absolute; and left:95px;. I.e. the child element exceeds the width of the parent element.
Now, in JQUery, if I try to get the width of the parent using $('.outer').outerWidth(); it return 100.
But how can I get the full width of the outer element (which is obviously greater than 100, because of the absolutely positioned child element)?
Is there a built-in way or do I have to do a manual calculation (i.e. adding each child width to parent width to figure out the full width)?
You can use the properties scrollWidth, scrollHeight.
If you are using jQuery,
$('.outer').get(0).scrollWidth
You've set the width at 100px and the child element is positioned absolute, so it will not affect the width of the its parent. The parent's width is still truly 100px.
jQuery does not provide an access to the javascript property scrollWidth, so you have to access a DOM element using jQuery.
jQuery.get() is a method for you to achieve a DOM element.
therefore, the solution using jQuery is $('.outer').get(0).scrollWidth
If you use origin javascript, the solution would be document.getElementsByClassName('outer')[0].scrollWidth
I have a DIV with some text inside. But the height of the DIV starts at 0px, it also has an 'overflow:hidden'. After that i'm using an animation system to increase the height of the DIV. But i can't give the DIV a fixed height because the length of the text inside the DIV varies.
Is there a way to tell what the height of the DIV will be when its big enough to fit all content inside it?
I have done a horrible hack but see if this is good enough.
Basically you get the content height by setting the height to auto, then resetting it to zero and finally using your animation function, like this :
var tempHeight = $(".sample").css({"height" : "auto"}).height();
$(".sample").css({"height" : "0px"}).animate({
height : tempHeight
},1000);
Where .sample is the reference to the div with the variable text content. Check out the demo for a better understanding.
Pure Javascript Version :
document.getElementById("sample").style.height = "auto"; //The id of this div is 'sample'
var tempheight = document.getElementById("sample").offsetHeight;
document.getElementById("sample").style.height = "0px";
/*
Custom Animation function, Use tempheight to get the full content
*/
DEMO For The Jquery Version
Maybe you can try this:
Put the text inside another DIV like...
<div>
<div>some text</div>
</div>
Then animate the outer div (which as an hidden overflow) according to the height of the inner div (which has not an hidden overflow).
Hope this helps
Depending on what you're doing/using you don't need to know the height because setting it to "auto" will ensure it expands to fill the content.
However, you could also not set the heights to 0 until you know the height by using javascript to get it. For example in jQuery:
$("div").each(function()
{
$(this).attr("data-height", $(this).height()).css({"height": "0", "overflow": "hidden");
});
Now each div has an attribute called "data-height" that has the value of it's original height. You can then use this to expand the div when you need to.
Just before animating the showing of the div, clone the div and get rid of the height:0px constraint (change the height to auto, for example). Then grab the height of that cloned div for use in your animation.
In jQuery, this would look something like:
var myDiv = $('div');
var myDivClone = div.clone().insertAfter(myDiv).css('height','auto');
var myDivHeight = myDivClone.outerHeight();
myDivClone.remove();
myDiv.animate({height: myDivHeight}, 250);
Note the importance of actually cloning the element in question as opposed to just creating a new one and filling it with the same contents. You need to recreate the element exactly (other than the height modification you do afterwards), including classes, etc.
ALSO note the importance of injecting it into the DOM immediately after myDiv. This is so that the same CSS will affect it as affects myDiv at time of height calculation. The only potential exception to this is if you're using a :last-child selector in your CSS, and the clone ends up becoming the last child of the parent element. But that kind of issue should be easy enough to get around.
how about dropping the text in a off screen div first and getting the dimensions from that?
if(el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth)
{
//keep making element bigger
el.style.height = parseInt(el.style.height) + 2 + "px"
}
You could stick this snippet inside some sort of recursive function or while loop. Essentially you are checking to see if there is more content outside of the viewable area that a scroll-bar would show.