I'm designing a vertical scroll-bar plugin for jquery. my plugin accepts a height value as option and if the div height exceeds the given height the scroll-bar will be visible. now the problem is I need to get the real height of the div content.
<div id="scroll">
Contents Here
</div>
jquery:
$.fn.vscrollbar = function (options) {
.
.
.
var contentHeight=this.contents().height() //that is not working correctly
if(contentHeight > options.height){
this.css({overflow : 'hidden'}).height(options.height);
}
.
.
.
})(jQuery);
I can get the height of div before applying 'overflow:hidden' but the problem is I want this to work even if it has overflow:hidden style from the begining.
You should have a hidden div on the page, of the same width but overflow auto. As soon as your plugin is called/instantiated, take the height of that hidden div and do what you want.
One way I know should work is having a content element inside of the overflow and get the height of that since it should retain its height value.
The .css() method should work
$(this).css('height');
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 want to make the div container can automatically resize its div-size (height) along side with the content, instead of going out of the area when the text is more than container area. Can anyone help me out to fix this instead of editing up the css for div-container? When I tried to change the div-size even it fits up the content, but while it is more than the div-area, I have to edit it manually again through CSS code.
Is it possibly to make it automatically? or maybe using JavaScript function?
CSS
div#div_id{
height : auto;
min-height: 100% !important;
}
Set your div height to auto. It will take height automatically as per your contents.
The behaviour you want is just what a div - or other so-called block-level-element - naturally does unless you give it a defined height. So just remove any fixed heights you apply to the container and you're done.
In case you want your div to be of a certain minimum/maximum height, use min-height/max-height instead of height for that.
One of the divs which i want to display dynamically has to fit to screen. The problem is that if the earlier displayed div has height more than the screen height, when the dynamic div is displayed in the bottom of the page(after scrolling) there is some part of the earlier div still remaining. I dont want any trace of the earlier while displaying the dynamic div. Also i have to achieve this only by using javascript.
to place an div or any element one above another use position:absolute,top:0; left:0 and width and height to 100%
get the div out of your other divs, but still in the body and make it not visible "display:none;"
Give it some attributes, like Mardzis said, height : 100%; width : 100%; z-index:9999;
Then, when you want to display it, just do .show() or .hide() (with jquery if you use it) or .getElementById('#yourDivId').style.display = "none"; .... & so on...
I found a workaround for this.Put focus on the child div and disable scrolling.
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.
When I set an image to the innerHTML of a DIV container, the width and height of the DIV is still not changed. The div has border:solid style and the border is like "outside" the image...
So the image is shown fully, but it streches outside the div borders, but still shows anyway. Is this a problem ?
Should I use the DOM method instead, will it be better ?
Thanks
have you set the overflow css property of your div ?
http://www.w3schools.com/Css/pr_pos_overflow.asp