animating div size after content written with .innerHTML

[Rennat]

I have a link that load a section of my page into a div, the div height is set to 0px and overflow is set to hidden.

I have had no problems getting the section to load from an external file, I would just like the containing div to animate getting larger after the content loads so it appears as though the content was just hidden by 'overflow: hidden' the entire time.

Is this possible without knowing the final div height beforehand?

I figured it would be possible if I could test if the content of the div was being hidden in javascript, although an hour of googling and trolling various forums has yielded nothing but a similar question asked on Experts-Exchange (which I'd rather not subscribe to just to find out the accepted response was "not possible")

Thank you in advance,
- Rennat

[xwero]

I have a link that load a section of my page into a div, the div height is set to 0px and overflow is set to hidden.

I have had no problems getting the section to load from an external file, I would just like the containing div to animate getting larger after the content loads so it appears as though the content was just hidden by 'overflow: hidden' the entire time.

Is this possible without knowing the final div height beforehand?

I figured it would be possible if I could test if the content of the div was being hidden in javascript, although an hour of googling and trolling various forums has yielded nothing but a similar question asked on Experts-Exchange (which I'd rather not subscribe to just to find out the accepted response was "not possible")

Thank you in advance,
- Rennat

If you use the jquery library you can easily animate divs. It even got a few functions for it http://docs.jquery.com/Effects

[iam_clint]

if you want to write your own its not too hard


make a function

function resize(size) {

}

then set a timeout

var t = window.setTimeo ut("resize(100 , 0)", 100);

function resize(size, current) {
if (current <= size) {
i = current + 5;
document.getEle mentById("thedi v").style.heigh t = i;
t = window.setTimeo ut("resize(100 , "+i+")", 100);
}
}


this is just an example.. try it for yourself and let us know if you have any problems... or post back the portions of the example that confuse you.

[MikeFoster]

Hi Rennat,

I have something called xSlideCornerTo which will do what you want. Here is a demo that uses it. Here is the source and docs.

For reference I have other animation demos.

I'm not just trying to get you to use my code - but I think it might be helpful to just see how I've implemented it. It should give you some ideas.

[MikeFoster]

Btw... you mentioned not knowing the size of the element you want to animate. I think you'll have to determine that size before you can animate it. But there are ways of doing this too. :)

[Rennat]

If you use the jquery library you can easily animate divs. It even got a few functions for it
http://docs.jquery.com/Effects

Thank you, this is not what I origionally expected but using "slideDown" does achieve the result I was looking for.

Thank you as well "iam_clint" for replying, although the function "resize" would not work for me because the content loaded into the div is dynamic and I do not know how large the div will need to get to fully display (without excess whitespace) its generated content.

jQuery works well for this situation. Although I would like to know for sure if it is possible to do what I had origionally wanted to do:

PSUEDO CODE:
function scaleToFit() {
	if(overflow == true) { // <-- test for overflow
		//scale larger by some number
		setTimeout(scaleToFit, 20);
	}
}

Is the line commented "test for overflow" possible in javascript?

[Rennat]

Thank you also for replying "MikeFoster " it seems you replied as I was typing my previous message.

I looked around on the links you gave, very impressive. But I think in this situation jQuery will work.

[iam_clint]

<script>
var speed = 10; // Delay between increments.
var inc = 10; // Increment amount -- also changes speed
function ScaleToFit(id) {
var obj= document.getElementById(id);
resize(obj.scrollWidth, obj.scrollHeight, 0, id);
}
function resize(width, height, current, id) {
var obj = document.getElementById(id);
if (current <= width) {
i = current + inc;
obj.style.width = i;
}
if (current <= height) {
i = current + inc;
obj.style.height = i;
}
if (current <= width || current <= height) {
var t = window.setTimeout("resize("+width+", "+height+", "+i+", '"+id+"')", speed);
} else { obj.style.height = height; obj.style.width = width; }
}
</script>
<input type="button" onclick="ScaleToFit('testdiv');" value="Scale To Fit">
<div id="testdiv" style="overflow: hidden; width: 0; height 0;">
<table border="1"><tr><td><img src="http://www.hamiltonspectator.com/images/hs/hs1582327_1.jpg"></td></tr></table>
</div>

heres a sample I wrote up for you..... don't ever say i didn't give you anything.

this sample should be fully functional note the table in the div is only for the border so you can see it working.


and yes just change the content of the div with innerHTML and it will still work. dynamic or not.

just call the function the way my button does when ever your ready to resize ScaleToFit("id of the div or span whatever your using");

i would try to stay away from jquery and other downloaded javascript you get more pride and knowledge by making your own how you want it. and by doing this you will know how exactly the code works so if you want to change anything its simple for you.


by the way http://cross-browser.com/x/examples/xsequence.php looks very cool :) but thats not hard todo either.

[MikeFoster]

Nice solution, Clint!

Thanks :)

[Rennat]

Thank you very much clint, I haven't had time to work with it yet but I am excited about actually knowing what is going on in the javascript. jQuery does what I want but this looks like it will be more straight foreward and seem like less of a workaround.

I'm still very new to javascript but have a lot of experience with XHTML CSS and PHP, I didn't even know about ".scrollheight" . Like I said I haven't played with it yet but I imagine it gives the height of the content in the div not the height of the div itself which is exactly the piece I've been missing to do this.

Also this project was the first time I've used "setTimeout " I had not assigned it to a variable as you did in the example. I'm going to assume now that it is a good idea to assign it a variable, but I don't see you using the variable "t" anywhere else. What are the benefits of assigning it instead of just calling "setTimeout ()"?

Thank you again,
-rennat

[Rennat]

I've finally come up with what seems acceptable to me. Thank you everyone who replied to this thread. I apologize for being a javascript noob.

here is the result, since I have a patchwork of tutorials and other hearsay in multiple files I will refrain from posting a [ CODE] for each one and just post a link to the testing file:

http://www.tannern.com/4/test4.html

It's still a work in progress and will probably change more by the time anyone actually looks at it. But thank you very much, this was my first post on these boards and judging from previous experience I wasn't really expecting the level of help I received. I am impressed and will try to help in other sections of this forum where I might have useful input.

-tanner

P.S. - If you notice any "best practices" that I have broken in my code, please give me a heads up.

[iam_clint]

running a variable as set timeout is just a habbit by setting it to a var you can stop the timeout or interval that is runnin on that var.


as to scrollheight and scrollwidth -- these will show you how tall the scroll bars would be... so i just kinda figured overflow hidden would have a scroll bar but hidden because it runs off the page and wam what did you know it got the true height and width of the content i like the design of your page with the drop downs that looks like jquery, if you need any more help please post and we will try to get ya fixed up.


by the way i play vanguard :P what server you on, I play on woefeather currently a level 19 monk.

[Rennat]

I play on targonor, lvl 24 Dread Knight. Unfortunately I haven't gotten to play as often as I like recently. But the game is amazing nevertheless.