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();
});
Related
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');
});
I have a slider that contains N elements. Each element will by translated by N pixels when the user click on the next button. When the element is out of the wrapper div, it disappears because it is overflowed by another element.
My plugin does not use any margins, just the transform property.
I would like to know if there is a way to know if my element is out of the div. :visible does not work for my problem because the element is already visible but overflowed.
If I understand correctly, one way to do it would be to compare the position of this element to the size (width/height or both) of his parent.
With Jquery you could do it this way:
<script>
//This is the position of the right side of the element
//relative to his parent
var rightPos = $("#element").position().left + $("#element").width();
//And bottom side
var botPos = $("#element").position().top + $("#element").height();
if (rightPos > $("#element").parent().width()) {
//The element is outside the right limit of the the parent block
} else if (botPos > $("#element").parent.height()) {
//It's outside the bottom limit of the parent block
}
</script>
If it's not the parent you could then adapt this code to compare the position to the width of the correct div, preferably by using the jquery offset() method instead of position().
By determine parent width and get child width then use if condition
if($('span').width() > divWidth){
alert('Overflowed!');
// do something!
}
jsFiddle Demo
if you update your question with your html then I can update with your codes.
You could give the wrapper div the CSS property of overflow: hidden
This would mean that any elements inside of it are not visible when they leave the bounds of the wrapper.
Otherwise you could check whether your element is outside of the wrapper div using jQuery to compare the position to that of the parent.
There is a nice tool for testing if an element is visible on the screen.
Detect if a DOM Element is Truly Visible
It looks at an object and checks each of its parents to see if it’s still visible to the user.
How can i calculate with JQuery Framework or Java Script the the size / the space between the top of current display resolution and the bottom position of a td element in HTML DOM?
A have a flexible display resolution a a specific html tag in my html DOM (in the current case a "td" tag).
Now it is important for my to calculate the size from top of the current display resolution to the htmls element.
How can i calculate this?
How about using .getBoundingClientRect?
var div = document.getElementById('test'),
rect = div.getBoundingClientRect();
console.log(rect.bottom);
JS Fiddle Demo Using a Table
In the demo I'm just printing out the bottom position inside the td elements. If you need to re-set it on window resize, you could just use a simple event listener that kicks off the function (i.e. window.addEventListener('resize', someFunction)...).
Beware, though - don't use client rect or offset functions more than you have to (not tied to frequent events and such) - they are expensive functions for your layout.
maybe something like this?
var elementOffset = $('#element').offset().top+$('#element').height();
offset().top is the distance in px between the top of the window and the top of an element.
In your case you want the distance between the top of the window and the bottom of an element, so you have to add the height of that element to the offset().top.
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.
What I want to do can be accomplished just by using:
slideDown("fast");
However, I don't like how it reveals the element, I would like for it to be 100% of the elements original height, and roll down. I'm wondering if there's an easy way of doing this? Other than perhaps changing the margin-top and such, then animating it back to normal.
Example of what I want to do:
http://jsfiddle.net/7dary/1/
However I would like to have it just do all of the calculations automatically, and it not show in the middle of the page if it's at the bottom of the page and I personally assign -200px or something to it.
Solution:
var $element = $("#itemToSlide"); // make sure its visible
var height = $element.height(); // get the height when its populated
$element.css({marginTop:height*-1}); // set it to 0 with an overflow hidden
// trigger the animate now or later in an event
$element.show().animate({marginTop:0},2200);
link: http://jsfiddle.net/MattLo/7dary/2/