Hi,

here's the situation :

a html page, with an iframe which resize itself to display the whole called file without scrolling bar.
one of the iframe's html file got hidden <div>.
clicking the menu will toggle show/hide these hidden <div>.

here's the trouble :
the iframe get its height with <div> hidden on the loading,
when i click to show the <div> part, the iframe keeps its base height and scrooling bars appears.

is there any way to resize the iframe when i show/hide the <div> ?

Code or a link to the page in question would help.

You might need to resize the iframe with javascript at the same time the div gets clicked. Are you using javascript to show/hide the div? If so you should be able to add code in the same function that handles the show/hide to change the size of the iframe.

Hard to say for certain without seeing some code.

Code or a link to the page in question would help.

Yes sure !
http://friedd.free.fr/leperiscope/
click on "kaolin" on the left menu.

Are you using javascript to show/hide the div?

yes i do,

<script type="text/javascript">
function toggle(id) {
    document.getElementById(id).style.display = (document.getElementById(id).style.display == "block")?"none":"block";
}
</script>

and

onMouseDown="javascript:toggle('element1')"

on the words that show/hide the <div>

you should be able to add code in the same function that handles the show/hide to change the size of the iframe

as i don't really know javascript, i would love you to tell me what should i add to the code to do that !!

I did this really quick, but try:

<script type="text/javascript">
function toggle(id) {
    document.getElementById(id).style.display = (document.getElementById(id).style.display == "block")?"none":"block";
    
    if (document.getElementById(id).style.display == "block") {
        document.getElementById("main").height +=20px;
    else
        document.getElementById("main").height -=20px;
}
}
</script>

The 20px is a guess. I think that will add 20px (or whatever is necessary) when the div is shown and will subtract that 20px when the div gets hidden again.

I'm not 100% sure this will work, but give it a try.

The height calculation ( +=20px; )

should be (+=20) + "px";

thanks guys, this can be a temporary solution, but i'll soon add a database in one of the <div> to show upcoming events.
so i'm looking for something that'll dynamically resize the iframe with the good amount of px.

anything else ?

Oops Chris. See what I get for typing too fast.

Fred if you want a better solution I'd suggest something other than using an iframe. If you're pulling info from a database there's no reason first load it onto a different file and then pull that file into an iframe.