I am working in JavaScript and am unable to use any libraries such as J Query or CSS animations.
I have a Div with an undefined height that auto resizes based on the content that it contains.
The content is changed dynamically through setting the innerHTML value. This works well but the Div size change is jumpy and unappealing. I would like to animate the change in height.
I have seen much code covering this topic but all of the solutions were based on libraries or CSS animations.
Here are my thoughts on how to accomplish the animated dynamic change in height
//get the current height of the div holder
var heightStart = document.getElementById("divHolder").clientHeight;
//the new height, currently I don't know to obtain this
var heightEnd = 1000;
//start a timer to animate the height change
var timer = setInterval( function() {
//clear timer if old height reached new height
if ( heightStart >= heightEnd ){
clearInterval(timer);
}
//set new height
element.style.height= heightStart ;
//incrementing height gradually
heightStart = heightStart + ( heightStart * 0.1 );
} , 50);
So the problem I am having is how to know what the new height would be as it will always be different depending on screen size and the content.
I was thinking I could set the height of the div to a fixed height equal to the heightStart. Then set overflow to none. Then set the new innerHTML content. So the Div wont auto change to fit the new content. I would then use the animate function above to gradually increase the height until the content is fully viewable.
The problem would be is that I don't know how to figure out when the auto height, or when all the content has been displayed height, has been reached.
Thoughts?
Thanks.
First, your heightStart should be assigned before apply new content. and after the new content come in. You can get it's size to heightEnd.
var heightStart = document.getElementById("divHolder").clientHeight;
// APPLY NEW CONTENT HERE
document.getElementById("divHolder").innerHTML = NEW_CONTENT
document.getElementById("divHolder").style.height = 'auto';
var heightEnd = document.getElementById("divHolder").clientHeight;
document.getElementById("divHolder").style.height = heightStart;
document.getElementById("divHolder").style.overflow = 'hidden';
Related
I am currently implementing a tool for a project, and I am having some difficulties to remove some extra space at the bottom of the main container.
Basically, the container that contains the drawings-list and the map, resizes itself on window resize event. The bottom bar is fixed, so it does not affect anything.
$(window).on('resize', function () {
resize();
});
function resize() {
var height = $(window).height();
var width = $(window).width();
var mapHeight = height-260; // 260 for fixed elements
var mapWidth = width-360; // 360 for left hand side list
$('.map-drawings-container ul').height(mapHeight);
$('#map_parent_container > .map').height(mapHeight);
$('.drawings-list').height(mapHeight);
}
When the page is first loaded, it renders properly. Then when shrinking it, we can see a space that seems to be equal to the difference between the original page height and the current one.
Changing the size of the html and body element does NOT fix the issue.
Using the Google Chrome Dev tool, I am not able to select that grey background.
Changing margin-bottom to a negative value on the main container does not remove that space either.
Any clue on how to get this space removed?
Thanks
Sure you don't have an element inside that extends beyond the body with a min-height set on it. This would push the sticky footer down when the body shrinks below that min-height creating the extra space?
Look for all elements with a min-height and try shrinking them.
When the page is first loaded, it renders properly. Then when
shrinking it, we can see a space that seems to be equal to the
difference between the original page height and the current one.
May problem is: resizing the page so try that:
$(window).resize(function(){
var height = $(window).height();
var width = $(window).width();
var mapHeight = height-260; // 260 for fixed elements
var mapWidth = width-360; // 360 for left hand side list
$('.map-drawings-container ul').height(mapHeight);
$('#map_parent_container > .map').height(mapHeight);
$('.drawings-list').height(mapHeight);
});
I have a div with height = 40 px. I load inside it a html string which may have a random content's height.
I'm trying to animate my container's height to the new content's height (according to jQuery animate height to auto):
var jqObj = $('<div/>').html($.parseHTML(htmlString)).hide();
$('.mainCont').html(jqObj.html());
jqObj.fadeIn('slow');
var height = $('.mainCont').css('height', 'auto').height(); // get real height
$('.mainCont').animate({height: height+'px'}, 2000);
but I don't see any animation, only single jump to desired height. How to fix it ?
edit
I see that $('.mainCont').css('height', 'auto').height() makes that situation. But without it I can't get the new content's height
jQuery can only animate numbers, but you're setting the style height to auto then you're trying to animate it to an integer, and jQuery doesn't know how to animate from the string auto as it means nothing.
Set the height to a number before animating
$('.mainCont').css('height', '0px').animate({height: height}, 2000);
I've set it to zero, I'm guessing you want something other than the number you're getting, otherwise you're animating from the current height to the current height, which means no movement.
I need to get the height and width of a dynamically generated div inside a loop.
Details
I'm dynamically setting the left and top values of a positioned absolute div. This div is in a loop, thus its width, height and position change at an interval n.
(It's basically a div that appears at random places on a page every n seconds.)
The challenge I'm facing is that this div needs to be inside the parent at all times, <body> tag in this case. I have it set to position:relative and even overflow:hidden though it won't help.
Here's a fiddle to make things easier.
Fiddle 1 outside the loop , Fiddle 0 insdie the loop
You will see that because the x and y values are randomly generated the div overflows.
I have found that in order to keep the div in the body it's height and width must be retrieved and calculated with the parent to get the difference in size.
So I can use it the css like
var heightdiff = parentHeight - divHeight;
var widthdiff = parentWidth - divWidth;
in the css via jQuery
top: Math.floor((Math.random()*heightdiff)+0;
left: Math.floor((Math.random()*widthdiff)+0;
Perhaps I'm making a simple mistake but I've tried everything I can think of. To recap all I need to do is to get the height and width of div.
I modified your script :
http://jsfiddle.net/yMT56/1/
Why using document as base ?
var docw = $(document).width();
var doch = $(document).height();
Use body
var docw = $('body').width();
var doch = $('body').height();
Or better, div's parent (requires you to append your div to a container before) :
var docw = $newdiv.parent().width();
var doch = $newdiv.parent().height();
The problem here is that the div has no content and so on no width and height at the moment you calculate it. So I created it at the beginning (notice i added <body> tag in the html part : i don't know how fiddlejs handles this case) :
$newdiv = $('<div/>').css({
'position':'absolute',
'display':'block'
}).html("Hi there, this should appear with in the body.<br/> Just wait it will overflow").appendTo( 'body' );
//parent size, in this case body
var docw = $('body').width();
var doch = $('body').height();
//calculating div size, before it's set, wrong!!
var divh = $newdiv.height();
var divw = $newdiv.width();
I also added a Math.max control to be sure results won't be negatives, especially in case div is larger than his parent.
//positions for x and y
var posx = Math.max((Math.random() * (wdiff) +1).toFixed(), 0);
var posy = Math.max((Math.random() * (hdiff) +1).toFixed(), 0);
And, at the end, only put position for the div :
$newdiv.css({
'left':posx+'px',
'top':posy+'px'
}).fadeIn(2000).fadeOut(2000, function(){
Maybe with that solution, a first div will be displayed before loop starts. A solution would be to use visibility:hidden property, to hide div but always be able to got his width and height.
I have been trying to figure out how to make a ticker like facebook.
the ticker automatically hides when you zoom past 110% and thats because the ticker would start to cover the whole layout.
I was wondering how they have done this? how does it detect when to hide the ticker? does it grab the resolution in javascript?
Whatever they are doing, it is done through Javascript. You can get the width and height of the browser window and also any element in the DOM.
You can use pure Javascript, but jQuery makes this a doddle:
// Get the pixel width and height of the window
var window_height = $(window).height(); // not required, but for clarity
var window_width = $(window).width();
var ticker_width = $('div#ticker_wrapper').width();
// ON rezise, do something
$(window).resize(function() {
// Do a caculation
var new_width = (window_width/100)*10; // 10% width
// Adjust the width of the ticker to suit
$('div#ticker_width').css('width', new_height);
});
I'm after a simple javascript function that will detect the total height of my web page which is dynamic and apply it to the height of a div which is the page background. Would it be possible to implement it?
The div is called bg...
Any ideas? Thanks in advance
Try:
var height = body.offsetHeight ? body.offsetHeight : html.offsetHeight;
document.getElementById ('divID').style.height = height + 'px';
Here an useful documentation:
http://www.quirksmode.org/dom/w3c_cssom.html
Im using currently following code to do that:
var getBodyHeight = function () {
var d = document,
bd = d.body,
dd = d.documentElement,
max = Math.max(
bd.scrollHeight,
bd.offsetHeight,
bd.clientHeight,
dd.offsetHeight,
dd.scrollHeight,
dd.clientHeight
);
return max;
};
This is what I use to figure out the height of content in iFrame for the purpose of adjusting it properly.
var body = document.body,
html = document.documentElement,
height = 0;
height = body.offsetHeight;
if(height === 0){
height = html.offsetHeight;
}
The reason for checking the body first is that the height of html is actually the height of the iFrame, which could be bigger than the content itself. However, in certain cases such as when body has no height, then it falls back to use height of html instead.
For your case, you might want to experiment with a similar scheme. I'm not sure why you have to use a div to set background so I can't really suggest a better alternative (if any).
Solution based on the comment below:
What you can do is the following. Have a div inside the main container with position absolute, width/height 100% and z-index -1. Then it will always be the correct size no matter how large the contain grow or shrink. With this approach, you will have to make sure that container always has size. This is a pure CSS solution, which might be simpler than using Javascript to adjust.
var height = screen.height;
var width = screen.width;
var resolution = width+"x"+height;
alert(resolution);
it gives the resolution of the screen.i know you want page height and width but it will help you later in web development. i am using it as most important part for my web!