Is there way to check page height?
Like If I have container div and my contents goes of 100% height.
I need to check full height of that container div.
Like if it is 100% + more 400px I want to add something next to that div.
$('.container div').outerHeight();
codepen-http://codepen.io/nagasai/pen/XKZgyq
Add if condition for that value
var x = $('.container div').outerHeight();
Update x ,onresize check x value greater than x+400px
Page height is a native javascript property.
Just do a
window.innerHeight
to get the current window height which works well since it only includes from the bottom tool/search bar to the end of browser
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');
Im trying to get pagesection to fill the browserheight. I´ve tried to apply a 100 height to all elements, but it´s not working. It works good if I set a heigh: 100vh, but It´s not the way I want to take, so I wonder what Im doing wrong?
Site: Svenssonsbild.se/Konsthandel Second and third menu are anchorlinks to the spagesections.
Setting height:100% means 100% of the height of the parent element so you need to specify the height of the parent for it to work.
If you want to set your element to 100% of the height of the browser, you need to make sure all the parent elements up to the <body> tag have a percent height.
Setting the element's CSS height to 100vh is the intended way to do exactly what you're trying to do. 100vh specifies that the element should always be the full height of the viewport, so unless you've got some other requirement that you haven't described, that's what you should be doing -- you'll need to explain why "that's not the way I want to take" if there's more to your question.
Depending on your content it might be a good idea to set the min-height property instead of the height property since the content might need more space than the available viewport size offers. Or you can just evaluate the section's height and compare it to the viewport height. Using jQuery the following might work:
$('section').each(function(){
var height = ($(this).height() > $(window).height()) ? $(this).height() : $(window).height();
$(this).css('height', height + 'px');
});
You might need to adjust the selector to fit your needs.
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?
Is possible to do something like: when the browser is resized I dont' want to alterate width and height to any element of body.
I hava a large table in my page and when I resize I want to have the same width or height as when was loaded in full browser mode.
just give your table a fixed width and height. With min-width and min-height it will still resize untill it matches the defined minimum width and height
table
{
width:500px;
}
the width might not be a problem but you never know the height of a table, this can change a lot so with jQuery you can do the following:
var myTable = $('.table');
var myTableHeight = myTable.height();
myTable.css('height', myTableHeight);
EDIT:
Based on your comment this is what you could do. You leave the 200% but the first time the browser loads you get the width of the table and set it as fixed width. It will then always stay the same.
<script type="text/javascript">
$(document).ready(function() {
//once the document was completely loaded get the width of the table and se it as fixed width
var myTable = $('.table');
var myTableWidth = myTable.width();
myTable.css('width', myTableWidth);
});
</script>
Use CSS min-width and min-height.
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.