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/
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();
});
Is it possible to have text fill the page depending on the window dimensions?
For example, I would like to have something like the following:
The text of the left of the screen fills the div that is it in. If I were to re-size the window the number of lines of "ExampleText" should change.
Unfortunately I don't have any code to show since I have no idea how to start this. I imagine that I'll have to use JS for some of it, but I'm not sure how to get JS to gather the dimensions of the window.
Many thanks.
You can get the height of the window in javascript with:
var h = window.innerHeight;
If you know the line-height of "ExampleText" (you may have already set it in the CSS or you can try getting it with document.getElementById('div_name').style.lineHeight), then divide the the window height by the line-height. That should give you the number of lines that'll fit in the window.
Alternatively, in CSS, you can set a div to height: 100% (assuming all parent elements have a 100% height) and then set an inner div to position:absolute;bottom:0; so the text starts counting from the bottom to the top. You'll have to deal with choosing to show scrollbars or not, since the text will inevitably be larger than the containing div.
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.
I have this jsfiddle http://jsfiddle.net/r3pek/wxffL/ where i'm trying to understand why does the scroll goes beyond de window size :/
If I remove the "height: 100%" from the rightpane class, I don't have a scroll; if I add it, I have a scroll but that goes beyond the window. Any way I can limit the scroll to the window?!
Thanks in advance!
EDIT:
Just a quick update...
I updated the fiddle to reflect the actual problem. I have an image that takes space as a header and it looks like that image size isn't accounted for. (I really suck at CSS :P )
You have to define a height for an element to scroll. That's why the scrollbar disappears when you remove the height. You're also adding padding to the div along with the 100% height. That adds to the element's height so it ends up being taller than the window. Reduce the height to something less than 100%, maybe 90% and play with it. That will allow you to keep the scrollbar and keep it inside the window. I have a fiddle set up for you here.
The total height (or "outer height") of an element equals inner height (which you can specify in css) + padding + border.
If you use height: 100% but then also add padding and/or borders then the total height will be bigger than 100%. There's a css property called box-sizing that can help you but it's not cross-broswer (you guessed it, IE<9).
If you drop the borders and paddings, it'll be fixed. But then to have borders and padding on outer elements... you'll need to get creative (or come back here with a specific question)
OK, I solved the problem, just not sure if it was the "right way". Anyway, here's how I did it:
added this right before the tag:
<script>
window.onload=setRightPaneHeight;
</script>
Then, I created the function that will calculate the right size for the "rightpane":
function setRightPaneHeight(){
var pic = document.getElementById("headerPic");
var pic_h = pic.offsetHeight;
var total_h = window.innerHeight;
var right_pane = document.getElementById("rightpane")
$(".rightpane").height(total_h - pic_h - 30);
}
That being done, now after the page loads, the right height is calculated for the rightpane DIV. And it works :)
Thanks for all the answers as they made me understand what the problem was!