I have a div element whose auto height, lets say, is 300px.
On a button click, I set it's height to 500px.
I would like to animate it's height back to its default height.
The only solution I know is to clone the div, store its height and use it accordingly.
A jsfiddle example
var elem = $("div").clone().height("auto").appendTo("body");
$('div').animate({"height": elem.height()});
elem.remove();
Is there a better way to do it? I dont want to clone as I have huge number of elements on my actual page.
Update:
I have created another fiddle. How would you get default height of element if its not yet set on load?
you could store the height of the original when you set it's height to a static value, perhaps as a data attribute of the element.
so:
$('button').click(function() {
$('div').data('origHeight',$('div').height());
//Your code to set the height
});
then:
$('div').animate({"height": $('div').data('origHeight')});
How about save "old height" to some attribute?
like this.
$('#someDiv').attr('old-height',$('#someDiv').height());
what do you say?
Related
I have a div tag on my page.
<div id="filterDropdowns"></div>
I made html markup in my javascript and then inserted into div.
var markup = "";
markup = //Here makup is created through some logic.
$("#filterDropdowns").html(markup); //Inserted html
Everything is working fine.After this, when i trying to get the height of "filterdropdown", it's always 0. I have tried many ways to get the height but i am unable to get the height. I have tried jquery method like innerheight,outerHeight and javascript method as well but it always zero. How i can get the height?
try this for get height via jQuery :
alert($("#filterDropdowns").find("div").height());
height: auto; wont work. The div created by your logic, add height:inherit; to that div and also give a constant height to you #filterDropdowns It needs a height. If parent is 0 the child cannot inherit the height. So either specify a height in your div created your logic or inherit the parents height.
This code will give you the height:
$("#filterDropdowns").height()
Simple as that. No matter how the content was inserted. Dynamically or not.
However, please consider the following:
1) Make sure you check the height of the element really after you had already inserted its content. If you check the height before adding the content then, well, an empty element's height is most likely 0 (unless it is styled somehow).
2) Make sure the element is visible at the time you are checking the height, otherwise the result of the height method might be at least inaccurate.
3) If the contents of the element is positioned absolutely or floating then the height of the element will actually remain 0.
<div id="filterDropdowns" style="height:auto"></div>
try this
Try to this solution
var currentHeight = 0;
$(window).load(function() {
currentHeight = $('#filterDropdowns').outerHeight();
console.log("set current height on load = " + currentHeight)
});
Try this
html:
<div id="filterDropdowns" style="display:inline-block;height:auto"></div>
js:
$("#filterDropdowns").height()
Try jquery's .attr() function.
then, Write $('#filterDropdowns').attr('height','yourvalue');
How do I get the height of the following statement - angular.element('content') ?
I don't want to place it on the DOM, just get the height. Can I do this?
If I have to place it on the DOM first, how would I then get it?
I don't want to place it on the DOM, just get the height.
You see, this is a thing, we can't talk about height of the content independently of DOM, because what gives text a dimensions is the fact that it is a part of DOM, with some styles applied, being affected by other elements maybe, etc.
So if you need to get a height of the text you need to do following:
create empty element, e.g. div and append text content in it:
var div = angular.element('<div>content</div>');
append this element into DOM, probably setting styles which makes it "invisible"
div[0].style.cssText = 'position: absolute; top: -1000px;';
document.body.appendChild(div[0]);
calculate height
var height = div[0].offsetHeight;
remove element if you don't need it anymore.
document.body.removeChild(div[0]);
angular.element is just an alias for the jQuery function. So to answer your question, no, you cannot get the height of an element without placing it in the DOM. You can't even get the height of an element, if you add it to the DOM but don't show it.
If you want to get the height of an element, you can simply add it to the DOM, get the height and remove it again. This proccess happens so fast users won't notice it.
I've a trouble with the style of nav element in my web application.
As you're able to see, if to focus on element nav#menu.horizontal-menu - I can see the actual width/height of that element in Chrome.
BUT! When I try to obtain that element in JavaScript by the id - menu (as you can see the tag declaration of nav tag in the bottom part of screen):
There is no both width or height values of it...
I rather understand, that it may be because of:
`nav#menu.horizontal-menu` != `nav`
But, it's only my suggestion... I've tried then to use both functions:
getElementsByClassName()
querySelector()
But... also no success as you can see in screens, what's wrong and how to get so needed actual width and height options from element?
Thanks!
I think you are looking for this answer:
How do I retrieve an HTML element's actual width and height?
.style.width only checks what is filled in in the style attribute of the element. OffsetWidth would probably work...
That's because there are no width and height styles defined for it.
To calculate the rendered width and height, use a.offsetWidth and a.offsetHeight. Those are the values that DevTools are showing on hover.
Have you tried:
var width = document.getElementById('foo').offsetWidth;
var height = document.getElementById('foo').offsetHeight;
For cross-browser compatibility I'm recommending you to use jQuery
Have you noticed that by using jquery's slideDown(), even on elements with dynamic content, you always get the perfect height of the effected element. Which is, for me at least, impossible to do by simply animating the css height value. Mostly because there is no way for me to know how did the height of an element (with a display:none) changed, during a dynamic content (AJAX) update.
And since i've been working on some custom controls, i do need that capability to calculate things the way slideDown() does.
If you are inserting a new dinamically loaded content, it means you have that element in memory, so you can refer to it and know its height. You only have to read its height (or maybe outerHeight) and slide by that amount.
EDIT
Just give a height of 0 to the hiden item and overflow:hidden, so that the content inside it won't be sohwn, and it will retain its height.
http://jsfiddle.net/jgyLm/9/
You can try this after appending the dynamic content to the element.
$(element).height();
$(element).outerHeight();//if you need margin to be included pass true to outerHeight method
I would like to do a jquery function that when window resize, it search div with css-class name "taskbox" and set the max-height to the parent div height - current offset for the taskbox to be able to be smaller than the available space but do not extend it.
I'm not certain exactly what you're trying to do, but to get all the elements that contain an element that has the taskbox class you can use:
$(":has(.taskbox)").height(300);
This will adjust the height of all those elements. To adjust the height of all the taskboxes based on the height of the parent element on window resize you can do something like this:
$(window).resize(function() {
var parent = $(".taskbox");
$(".taskbox").each(function() {
$(this).height($(this).parent().height() - 50);
});
});
Keep in mind that the parent elements will need to have height specified in order for this to work well. You can get the height of the window with:
$(window).height();
You might try looking for an existing solution (jQuery has an immense plug-in community):
At the very least this will get you started.