Hi Tam,
I was just getting ready to send Erwan, the example below of
resizing iframes:).
The basic requirement is that you place a span around each iframe,
give it a size, size your Iframe to 100%: it will follow your span
size changes.
Below is an example of this and a bit more....
Francis
main.html
<HTML>
<BODY onLoad=init()>
<span id=mySVG1span style='width:400;height:400'><iframe
src=mySVG1.html id=svgFrame1 name=svgFrame1
style='width:100%;height:100%' ></iframe></span>
<span id=mySVG2span style='width:400;height:400'><iframe
src=mySVG2.html id=svgFrame2 name=svgFrame2
style='width:100%;height:100%' ></iframe></span>
<script>
var MySVG1frame
var MySVG2frame
function init()
{
MySVG1frame=parent.frames.svgFrame1
MySVG2frame=parent.frames.svgFrame2
//---give frames main object---
MySVG1frame.init()
MySVG2frame.init()
}
//---fired from frames---
function talkToMe(msg)
{
alert(msg)
}
</script>
</BODY>
</HTML>
mySVG1.html
<HTML>
<BODY>
<embed name="svgEmbed1" src="mySVG1.svg"
style="width:100%;height:100%" type="image/svg+xml">
<script>
//---fired on main load---
var main
var MySVG2frame
var MySVG1doc
function init()
{
main=parent.frames.top
MySVG2frame=main.MySVG2frame
MySVG1doc=document.embeds["svgEmbed1"].getSVGDocument()
}
//---click on svg circle
function crossTalk()
{
MySVG2frame.helloWorld()
}
//---click on svg text----
function resizeOtherFrame()
{
main.mySVG2span.style.width=450
main.mySVG2span.style.height=350
}
//---called from svg2---
function helloWorld()
{
text1=MySVG1doc.getElementById("text1")
text1.firstChild.setData("hello from SVG2")
main.talkToMe("SVG2 says hello")
}
</script>
</BODY>
</HTML>
mySVG1.svg
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"; >
<svg id="mySVG1" >
<circle id="circle1" cx="200" cy="200" r="100" fill="red"
onclick="crossTalk()" />
<text id="text1" style="font-family:arial;font-size:20;fill:black"
x="120" y="50" onclick="resizeOtherFrame()">SVG1</text>
</svg>
mySVG2.html
<HTML>
<BODY>
<embed name="svgEmbed2" src="mySVG2.svg"
style="width:100%;height:100%" type="image/svg+xml">
<script>
//---fired on main load---
var main
var MySVG1frame
var MySVG2doc
function init()
{
main=parent.frames.top
MySVG1frame=main.MySVG1frame
MySVG2doc=document.embeds["svgEmbed2"].getSVGDocument()
}
//---click on svg circle
function crossTalk()
{
MySVG1frame.helloWorld()
}
//---click on svg text----
function resizeOtherFrame()
{
main.mySVG1span.style.width=450
main.mySVG1span.style.height=250
}
//---called from svg1---
function helloWorld()
{
text1=MySVG2doc.getElementById("text1")
text1.firstChild.setData("hello from SVG1")
main.talkToMe("SVG1 says hello")
}
</script>
</BODY>
</HTML>
mySVG2.svg
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"; >
<svg id="mySVG2" >
<circle id="circle1" cx="200" cy="200" r="100"
fill="blue" onclick="crossTalk()" />
<text id="text1" style="font-family:arial;font-
size:20;fill:black" x="120" y="50" onclick="resizeOtherFrame
()">SVG2</text>
</svg>
-- In [email protected], "tamsvg" <[EMAIL PROTECTED]>
wrote:
> Hi all,
>
> I'm trying to set the width and the height of my iframe when my
html
> page is loading. So the size of the iframe should have the size of
the
> inside svg. But how can I call my svg from the html to get the
size?
> This does not work:
>
> HTML:
> *****
> <html>
> <head>
> <script type="text/javascript">
>
> function setSize()
> {
> var svgframe = self.frames.svgobject;
> var svg = svgframe.document.getElementById('svg');
>
> var svgobject = document.getElementById('svgobject');
> svgobject.setAttribute('width',svg.getAttribute('width'));
> svgobject.setAttribute('height',svg.getAttribute('height'));
> }
> </script>
>
> </head>
> <body onload="setSize()">
> <p>
>
> <iframe src="grafik.svg" id="svgobject" name="svgobject"
width="455"
> height="500" type="image/svg+xml"></embed>
>
> <iframe src="form.html" border="0" width="200" align="center"
> height="200" id="form" name="form" type="text/html"></embed>
>
> </p>
> </body>
> </html>
>
> SVG:
> ****
> <?xml version="1.0"?>
> <svg id="svg" width="200" height="200">
> ...
> </svg>
>
>
> What is wrong here?
> tam
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
