By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,713 Members | 1,250 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,713 IT Pros & Developers. It's quick & easy.

animating div size after content written with .innerHTML

P: 6
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
Feb 24 '07 #1
Share this Question
Share on Google+
12 Replies

P: 99
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
Feb 24 '07 #2

iam_clint
Expert 100+
P: 1,208
if you want to write your own its not too hard


make a function

function resize(size) {

}

then set a timeout

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

function resize(size, current) {
if (current <= size) {
i = current + 5;
document.getElementById("thediv").style.height = i;
t = window.setTimeout("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.
Feb 24 '07 #3

P: 19
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.
Feb 24 '07 #4

P: 19
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. :)
Feb 24 '07 #5

P: 6
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:
Expand|Select|Wrap|Line Numbers
  1. PSUEDO CODE:
  2. function scaleToFit() {
  3.     if(overflow == true) { // <-- test for overflow
  4.         //scale larger by some number
  5.         setTimeout(scaleToFit, 20);
  6.     }
  7. }
  8.  
Is the line commented "test for overflow" possible in javascript?
Feb 24 '07 #6

P: 6
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.
Feb 24 '07 #7

iam_clint
Expert 100+
P: 1,208
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. var speed = 10; // Delay between increments.
  3. var inc = 10; // Increment amount -- also changes speed
  4. function ScaleToFit(id) {
  5. var obj= document.getElementById(id);
  6. resize(obj.scrollWidth, obj.scrollHeight, 0, id);
  7. }
  8. function resize(width, height, current, id) {
  9. var obj = document.getElementById(id);
  10. if (current <= width) {
  11. i = current + inc;
  12. obj.style.width = i;
  13. }
  14. if (current <= height) {
  15. i = current + inc;
  16. obj.style.height = i;
  17. }
  18. if (current <= width || current <= height) {
  19. var t = window.setTimeout("resize("+width+", "+height+", "+i+", '"+id+"')", speed);
  20. } else { obj.style.height = height; obj.style.width = width; }
  21. }
  22. </script>
  23. <input type="button" onclick="ScaleToFit('testdiv');" value="Scale To Fit">
  24. <div id="testdiv" style="overflow: hidden; width: 0; height 0;">
  25. <table border="1"><tr><td><img src="http://www.hamiltonspectator.com/images/hs/hs1582327_1.jpg"></td></tr></table>
  26. </div>
  27.  
  28.  
  29.  
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.
Feb 24 '07 #8

P: 19
Nice solution, Clint!

Thanks :)
Feb 24 '07 #9

P: 6
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
Feb 25 '07 #10

P: 6
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.
Feb 25 '07 #11

iam_clint
Expert 100+
P: 1,208
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.
Feb 25 '07 #12

P: 6
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.
Feb 25 '07 #13

Post your reply

Sign in to post your reply or Sign up for a free account.