iFrame auto resize using JS?

[homerUK]

hey,

quick question... is there any way that an iFrame can be resized using a JS function?

eg: my user is typing and once they reach the end of the iFrame box (which is editable) the scroll bars would normally appear....

is there any way to stop the scroll bars, and force the iFrame to simply expand downwards (height) to allow the user to keep typing??

I know it's possible with a textarea, but I need to use an iFrame......

Any suggestions welcome!! thanks!! :p

[GoHF]

Please give us the code of the page INSIDE the Iframe and give us the Name (or Id) of the IFrame. That way I'll code the answer to your problem a lot easier.

[chrismiceli]

if it is an iframe, did you try to resize it like this?

document.iframename.width= whatever;
document.iframename.height = whatever;

??

[GoHF]

I think his problem is resizing everytime he is writing. Like, the iframe is 3 lines tall. he writes 4 lines. Instead of scroll-bars, he wants the iframe to resize to 4 lines tall. Same for 5, 6, etc. lines. Every new line = resize.
What he probably doesn't know here is how to capture the correct events to know when to resize and how to get the values the iframe should resize to.

Anyway, without knowing what html he has loaded on the IFrame, it's hard pinpointing the correct scripts. If he is using the BODY tag as editable its one way, if he is using another tag as editable its another way.

Btw homerUK, how the hell are you editing text without a Textarea? are you aiming at IE only? :)

[homerUK]

hey everyone...

yeah, I am only aiming at IE5.5 + users at the mo.. that's all the client wants...!

You were right, I need the resizing to be dynamic... ie: like you said, if it were 4 lines long, then when you write the 5th line, the iFrame is resized......

here is the iframe code I am using


<iframe style="height = 350px; width: 100%; font-family: arial; font-size: smaller" id="frame1" onfocus="theframe='frame1'"></iframe>


I think I might need some sort of document "onkeypress" or something like that? or a document listener? not sure.......

thanks for the help guys!! :thumbsup:

[homerUK]

btw... the iFrame is meant to act like a textarea....

ie: I have an init function called on body load which sets the iFrame to designmode=ON......

[GoHF]

According to MSDN (Microsoft's Developer Network):

"You cannot execute script when the value of the designMode property is set to On."

Anyway, I changed the overflow to visible, but the Iframe itself won't change size. As no script can be run while in designMode, there is no way to change the size of the Iframe until you exit designMode. This would make you have to always click outside the IFrame... bothersome :)

Have you tried using a div? you can put single objects into design mode (contentEditable = true), not only a whole document.

Here, follow this link:
http://msdn.microsoft.com/workshop/browser/editing/activateeditor.asp#activating_from_scr_and_html

And here's a nice example of what I just said:
http://msdn.microsoft.com/workshop/samples/browser/webediting/onepageeditor.htm (the editable region auto-resizes, just like you want =)

[homerUK]

aaah man, that example is perrrrfect!!!

Thanks!! I love this forum!! :o


:thumbsup: :thumbsup: :thumbsup:

THANKS!!!!

[GoHF]

Np =) I learned a lot myself while digging through MSDN for the answer, and now I have all the answers I needed for my backOffice aplications too. Time to make my sites even more user-editable ;)