Welcome to WebmasterWorld Guest from 3.227.249.234

Forum Moderators: travelin cat

Message Too Old, No Replies

Change iframe size by getting name of contained doc

All code posted on the Net change iframe size by the inside-document size

     

joeyslaptop

8:36 pm on Mar 30, 2006 (gmt 0)

Inactive Member
Account Expired

 
 


I am still an egghead when it comes to JS and styles and stuff. If javascript was the same as AppleScript, I could solve this problem... but, alas.

What I want to do is resize my iframe depending on the document contained in the iframe. However, the only help I have been able to find is how to change the iframe size based on the contained-document's dimensions. In plain "english script", this is what I want.

<script english 101>
on load or change of document of iframe "magicframe"

get the name of the current document in iframe "magiciframe"
if the name of the document is not "page2.html" then
set the size of iframe "magiciframe" to {height=12, width=100}
else
set the size of iframe "magicframe" to {height=42, width=150]
end if
end load
</script>

here is what my iframe looks like currently.

<iframe src="page2.html" name="magiciframe" align="center" width="150" height="42" frameborder="0" framebordercolor=transparent scrolling="no" bgcolor="transparent" ALLOWTRANSPARENCY="true">

OBJECT: basically, I want to change the size of the iframe by the name of the document inside the iframe, not by the size of the document inside the iframe. Any help or alternate suggestions are welcome.

I also thought of doing something like this:
<iframe style="wand" name="magiciframe" src="page2.html" align="center" bgcolor="transparent" ALLOWTRANSPARENCY="true">

then have style like this:

iframe.hat { height:42;
width:150;
}
iframe.rabbit {height:12;
width:100;
}

and a script like this (although the language is kind of applescripty, the same logic would apply I assume):

<script>
on load or change of document of iframe "magicframe"

get the name of the current document in iframe "magiciframe"
if the name of the document is not "page2.html" then
set style "wand" to rabbit
else
set style "wand" to hat
end if
end load
</script>

If the scripty language is too weird, then ignore it and just read my objective.

10:36 pm on Apr 3, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 9, 2003
posts:3416
votes: 0


Welcome to WebmasterWorld [webmasterworld.com], joeyslaptop!

Not a very complex problem once you get the hang of javascript. If you are comfortable with applescript, it should be a piece of cake to learn javascript.

CSS:

<style type="text/css">
/* <![CDATA[ */
iframe.rabbit {
width: 100px;
height: 200px;
}
iframe.hat {
width: 200px;
height: 50px;
}
/* ]]> */
</style>

Javascript:

<script type="text/javascript">
// <![CDATA[
function resizeIframe(iframe_id){
var the_iframe = document.getElementById(iframe_id);
var the_iframe_src = the_iframe.src;
if(the_iframe_src == 'page2.html'){
the_iframe.className = 'rabbit';
} else {
the_iframe.className = 'hat';
}
alert(the_iframe.className);
}
// ]]>
</script>

HTML:

<iframe class="rabbit" name="magiciframe" id="magiciframe" src="page1.html" align="center" bgcolor="transparent" ALLOWTRANSPARENCY="true"></iframe>
<a href="#" onclick="resizeIframe('magiciframe');return false;">resize</a>