Extending div's height beyond its max height from javascript - javascript

I have a div in an user control, whose max height is set to 400px in css. This user control is used in many of aspx pages in my application.
I am trying to increase the div height to 500px dynamically in JavaScript for only one page, but it doesn't work. The div in user control always takes only the 400px (max height set in css) and not the height set by JavaScript.
Is there a way to change the div height over max height from JavaScript?
Thanks

You'll need to set the max-height property before you can set the height to be greater than it.
So, rather than this:
function setHeight()
{
var e = document.getElementById("myDiv");
e.style.height = "500px";
}
You'll do this:
function setHeight()
{
var e = document.getElementById("myDiv");
e.style.maxHeight = "500px";
e.style.height = "500px";
}

Related

Height of an element that is not rendert

I found this question to get the height of an element that has not height Attribute. But is it possible to get or calculate the height before it is rendert?
for example I have this Code:
var element = createElement("div");
element.style.width = "20px";
element.innerHTML = "XXXXXXXXXXXXXXXXXXXXXXXXX";
If I know the fontsize and other stuff like padding etc. , is it possible to get the height it would have if it gets rendert?
I need this because I need to know how heigh the element is before it gets rendert to change things that happens after that.

Why can't I get the container width without the scrollbar?

I have a container (masonry grid) with some images. I have a function to calculate the the width of the container and an other function to calculate the width of each image. But the function to get the container width, doesn't work as excpected, because the width contains the scrollbar. Therefore the calculation of the images width is also incorrect.
//Function to calculate the width of the container
getContainerWidth() {
const postContainer = document.getElementsByClassName(
'container'
);
if (postContainer.length > 0) {
let containerWidth = postContainer[0].clientWidth;
containerWidth = `${containerWidth}px`;
this.setState({
containerWidth: containerWidth,
});
}
}
I have already tried verious functions (offsetWidth, clientWidth, scrollWidth...) but none of them worked for me. I have also tried to get the width of the scrollbar and subtract it from the container width. This worked, but I need a solution which works on different Browsers.
If the browser width is for example 1920px. Then the container-width is also 1920px, but it should be 1905px (1920 - scrollbar).
Get the ClientWidth
The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.
Example
var width = element.clientWidth;

Sticky Footer + 100% Height + Margin Between Them

My overall goal is make a margin between content with 100% height and a sticky footer; one that shows the body background through it.
As of now, I'm using jQuery to figure out the height of the document and subtract the height of the footer plus a margin, then apply that new size to a DIV with the ID of "content".
I then use jQuery's resize() function to also size the div if the size of the viewport changes so if a user resizes his or her browser window, or zooms in, the size of the DIV will update automatically.
Unfortunately, when I switch directions in zooming (i.e. zoom out after zooming in, and vice versa), the Javascript doesn't recognize the viewport resizing, leaving me with a too-long or too-short background on the content. In addition, this resizing does not recognize content. I'm considering setting a min-height in the CSS, but if there's a way to do it in Javascript, I'm all ears.
I will accept pure CSS-and-HTML solutions, as it seems like it should be possible, but I have exhausted myself looking for for an answer.
My current Javascript (running jQuery library 1.7.2):
$(document).ready(function(){
var height1 = $(document).height(); // height of full document
var height2 = 100; // height of footer plus margin
var height_diff = height1 - height2 +"px";
document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV.
});
$(window).resize(function () {
var height1 = $(document).height(); // height of full document
var height2 = $("#footer").height(); // height of footer
var height_diff = height1 - height2 +"px";
document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV.
});
Any direction is greatly appreciated.
EDIT
Got it, all without Javascript. http://jsfiddle.net/Rpdr9/610/
I made something on fiddle.
Looks to me like that is what you want.
Check it out: http://jsfiddle.net/XbXDn/
Orange color: content
grey color : footer
The important thing is to also give your body and html the height:100%; property.
As you will see, the content div auto grows (even over 100%) as you add more text,
though the 25em margin between content and footer is always kept.
I deliberately took a huge margin between content and footer, just so you can see it works :)

Resize DIV but maintain aspect ratio when window is resized

I have a DIV element in my page, that I want to resize when the window is resized, but maintain a square aspect ratio. I want to set the width to be 50% of the browser width, and the height to be equal to the width. How can I do this?
If the solution requires Javascript that's fine but I'd prefer not to use jQuery.
Use width:50% in css and window.onresize event for resize. Have a look
http://jsfiddle.net/536UJ/
You can set the width to be 50% of the window in css;
you just need to adjust the height-
window.onresize=function(){
var who= document.getElementById('divtoresize');
who.style.height=who.offsetWidth+'px';
}
I'm not sure you can make one property (height) equal to other property (width) in CSS... well, at least in CSS 2.
But you of course can do this in JavaScript.
<div id = "myDiv"></div>
<script>
document.onresize = function() {
var element = document.getElementById('myDiv'); // the element
var size = Math.floor(window.innerWidth / 2) + 'px'; // 50% window width
element.style.width = size; // set the width
element.style.height = size; // set the height
};
</script>
Note that the window.innerWidth property is not present in IE. There, you'll have to use document.documentElement.clientWidth.

jquery (or js general) splitter with dynamic height

There are some ready JavaScript (jQuery) splitters, but they require panels height to be set. The problem is, that my website doesn't support fixed height, it just can't. Other thing is that this container can change it's height dynamicly, so I'd like to this splitter to adjust to the panels height.
Is there a script or a way to avoid that?
My idea was to set container's height the bigger panel's height, like:
var lheight = $("#LeftPanel").height();
var rheight = $("#RightPanel").height();
if(lheight > rheight){
$("#container").css("height", lheight+"px");
} else {
$("#container").css("height", rheight+"px");
}
but this doesn't seems to be a nice way for me.
Do you have any suggestions?
You can pass a new value to .height(), like this:
var h = Math.max($("#LeftPanel").height(), $("#RightPanel").height());
$("#container").height(h);
In this case we're just using Math.max() to get the taller one, and setting the height to that.

Categories

Resources