Using javascript function to updates styles in ASP.Net - asp.net

Question

Okay so I have a Silverlight 4 app sitting on a page with a couple banners. Depending on some variables within the Silverlight app I need to show one of the banners and re-position the Silverlight app so that it lines up with the bottom of the banner. To accomplish this I have been using HtmlPage.Window.Invoke("MethodToShowTheBannerIWant"). Each banner has it's own function that attempts to show the correct banner and position the app to line up properly. Something like
function ShowFirstBanner() {
FirstBannerStyle.style.display = 'block';
SilverlightAppStyle.style.marginTop = '120px';
SilverlightAppStyle.style.height = '495px';
}
Each banner looks like
<table id="FirstBannerStyle" style="position:absolute;top:0px;left:0px;display:none;height:50px;" width=100% border="0" cellpadding="0">
<tr>
<td><img src="http://www.bannerimageurl.jpg" usemap="#Map2" border="0"></td> </table>
with a map in the like this
<map name="Map2"><area shape="poly" coords="763,19,769,91,985,92,981,69" href="http://www.xxxxxxx.com/cal.htm" target="_self" />
<area shape="rect" coords="11,73,88,89" href="http://www.xxxxxxx.com/index.htm" target="_self">
<area shape="rect" coords="121,70,186,88" href="http://www.xxxxxxx.com/courses.htm" target="_self">
<area shape="rect" coords="217,70,327,90" href="http://www.xxxxxxx.com/ts.htm">
<area shape="rect" coords="365,70,521,91" href="http://www.xxxxxxx.com/po.htm">
<area shape="rect" coords="556,71,618,91" href="http://www.xxxxxxxx.com/au.htm" target="_self">
<area shape="rect" coords="655,72,726,91" href="http://www.xxxxxxx.com/CU/index.htm" target="_self">
</map>
and the Silverlight app area looks like this
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost" style="height:100%;text-align:center">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/XXX.XXX.XXX.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<param name="InitParams" value=<%=System.Configuration.ConfigurationManager.AppSettings.GetValues(0).FirstOrDefault()%>/>
<param name="windowless" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
<div id="InvisibleFrame"></div>
</form>
The issue I am having is that this process works great in IE8, but doesn't work at all in IE9 or Firefox. When my code hits the HtmlPage.Window.Invoke("ShowFirstBanner") it gets stuck right there and never moves past that line, but does not display any error message and instead will just sit indefinitely waiting for that command to complete. If I comment out the code withing the function it makes the call and continues as normal. So something related to how I'm updating the styles Firefox and IE9 doesn't like. Anyone have an idea for a way to do this that will work in all browsers?

Answer 1

Where are "FirstBannerStyle" and "SilverlightAppStyle" defined in your JavaScript?
You need to grab the element by its ID:
document.getElementById('FirstBannerStyle').style.display = 'block';
or if you're using jQuery:
$('FirstBannerStyle').show()