Iframe trouble... Please help

[raymond.78]

Hi, I am working on a widget for my company and I cannot get my iframe to size dynamically.. no matter what I try. I can get it to change height for the different sizes, but not the width. And if I choose to size it dynamically... it pushes the iframe to the far right. This is being done on widgetbox.com btw which is why you may see <!--html tag not allowed-->. Any help at all will be appreciated, here is my code:


<!--html tag not allowed-->

<script type='text/javascript' src='checkfield.js'></script>
<!--head tag not allowed-->

window.onload = function() {

loadintoIframe();

}
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="javascript">



var strBackgroundColor = "#FFFFFF";
var strLink1URL = "";
var strLink2URL = "";
var linkColor = "0000FF";
var strStyle = 'normal';

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma.
var iframeids = ["WeatherPane"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide = "yes"

var getFFVersion = navigator.userAgent.substring( navigator.userAgent.indexOf( "Firefox" )).split( "/" )[1]
var FFextraHeight = parseFloat( getFFVersion ) >= 0.1 ? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers


// Call this function to load in a url into an IFrame and dynamically shrink the window to fit accordingly
function loadintoIframe( iframeid, url )
{
if( document.getElementById ) document.getElementById(iframeid).src=url
}


function updateColor( userColor )
{
var selectColor = document.getElementById( "${config.new_color}" );

selectColor.options.length = 0;

updateWidgetWeather();
}


function addLoadEvent(func)
{
var oldonload = window.onload;

if (typeof window.onload != 'function')
{

window.onload = func;
}
else {
window.onload = function() {

if (oldonload) {oldonload();}
func();
}
}
}

addLoadEvent(updateWidgetWeather);


function updateWidgetWeather()
{
var strInnerHTML = "";

var selectedColor = "${config.new_color}";
var iAppWidth = 300;
var iAppHeight = 250;


var selectedSize = "${config.widget_size}";
var selectedheight = "${config.widget_size}";

var WeatherPane = document.getElementById( "WeatherPane" );

switch( selectedColor )
{

case "black":
strBackgroundColor = "000000";
linkColor = "FFFFFF";
strStyle = "whteYell";
break;

case "gold":
strBackgroundColor = "C39E6E";
linkColor = "FFFFFF";
strStyle = "whteYell";
break;

case "silver":
strBackgroundColor = "86888B";
linkColor = "FFFFFF";
strStyle = "whteYell";
break;

case "green":
strBackgroundColor = "336633";
linkColor = "FFFFFF";
strStyle = "whteYell";
break;

case "orange":
strBackgroundColor = "FF6600";
linkColor = "FFFFFF";
strStyle = "whteYell";
break;

case "red":
strBackgroundColor = "993333";
linkColor = "FFFFFF";
strStyle = "whteYell";
break;

case "blue":
strBackgroundColor = "346797";
linkColor = "FFFFFF";
strStyle = "whteYell";
break;

}

switch( selectedSize )
{

case "15":
iAppWidth = 160;
iAppHeight = 600;
if( selectedColor == "random")
{
strStyle = "dark2";
}
break;


case "12":
iAppWidth = 240;
iAppHeight = 420;

if( selectedColor == "random")
{
strStyle = "dark2";
}
break;


case "7":
iAppWidth = 120;
iAppHeight = 60;


break;


case "9":
iAppWidth = 300;
iAppHeight = 250;

if( selectedColor == "random")
{
strStyle = "dark2";
}
break;


case "8":
iAppWidth = 180;
iAppHeight = 150;

}


strBackgroundImage ="http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/" + selectedColor + "_" + iAppWidth + "x" + iAppHeight + "_bg.jpg";

var iLogoColor = 1;

if(selectedSize == 7)
{
iLogoColor = 0;
}

var iFrameSrcURL = "http://netweather.accuweather.com/adcbin/netweather_v2/sample21.asp?partner=netweather&theme=" + selectedColor + "&tStyle=" + strStyle + "&logo=" + iLogoColor + "&linkcolor=" + linkColor + "&metric=${config.units}&lang=${config.choose_language}&location=${config.zip_code}&size=" + selectedSize + "&appWidth=" + iAppWidth + "&appHeight=" + iAppHeight + "&Image=" + strBackgroundImage + "&target=_Blank&Color=" + strBackgroundColor + "";
//WeatherPane.src = iFrameSrcURL;
WeatherPane.height = iAppHeight + 20;
<!--WeatherPane.width = iAppWidth + 200;-->

loadintoIframe( "WeatherPane", iFrameSrcURL );
}



</script>


<style type="text/css">
#WeatherPane {position:relative;
right: 10px;
}
</style>

<!--head tag not allowed-->


<div style="background-color:${config.favorite-color};
border:solid ${config.border_color} 4px;padding:4px;font-family:Arial;-moz-border-radius:8px;border-radius:8px;">

<!--<a href=http://www.accuweather.com class="nounderline"><center><b><font size =+1 color="">AccuWeather™</font></b></center></a>-->


<iframe id="WeatherPane" scrolling="No" frameborder="0" marginleft="0" marginright="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" style="overflow:visible; width:100%;"></iframe>  

[magicyte]

Here. Try doing this: instead of doing what you did, do this: document.getElementById('youriframesidhere').style.width = "240";

change the code to fit your needs.

-magicyte