Change className with AnimationExtender

I have been trying to use ScriptAction to change the class

<ajaxToolkit:AnimationExtender ID="webAni" runat="server" TargetControlID="webBut">
<Animations>
<OnClick>
<Sequence>
<ScriptAction Script="document.getElementById('webBut').className='servSel';" />
<StyleAction AnimationTarget="infoHolder" Attribute="display" Value="block" />
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>

This does not work.

I also tried <ScriptAction Script="alert(document.getElementById('webBut').className);" /> to see if it returns name of class. No box appears. Oh and also tried using $get('webBut').className='servSel';

Any ideas? What am i doing wrong?

Rick

I figured it out. The page has a masterpage and the id was changed.

Center div when using AnimationExtender

 I'm trying to center a div that pops up when I click on a button. It works fine and fades in/out but I need to center it on the screen. Can anyone point me in the right direction. Here is a snippet of my code. 

 <ajaxToolkit:AnimationExtender id="OpenHelp" runat="server" TargetControlID="btnHelp"> <Animations> <OnClick> <Sequence> <StyleAction Attribute="display" Value="" AnimationTarget="divScanHelp" /> <FadeIn AnimationTarget="divScanHelp" Duration=".3"/> </Sequence> </OnClick> </Animations> </ajaxToolkit:AnimationExtender> <ajaxToolkit:AnimationExtender id="CloseHelp" runat="server" TargetControlID="btnClose2"> <Animations> <OnClick> <Sequence> <FadeOut AnimationTarget="divScanHelp" Duration=".3"/> </Sequence> </OnClick> </Animations> </ajaxToolkit:AnimationExtender> <div id="divScanHelp" class="ScannerHelp" style="width: 330px; height: 224px; display: none;"> <table border="0" width="100%" cellpadding="2" cellspacing="1"> <tr><td align="right"><asp:ImageButton ID="btnClose2" runat="server" OnClientClick="return false;" CausesValidation="false" ImageUrl="./graphics/Icon_Close_Small.gif" ToolTip="Close" /></td></tr> <tr><td valign="middle" align="center" style="margin-top: 8px;"><img src="./graphics/scan-label.gif" border="0" width="300" height="194" style="border: 1px solid #c0c0c0;"></td></tr> </table> </div>

Add a Script animation to your OnClick sequence to invoke a javascript function that centers the div.

Use the _layout method of the ModalPopupBehavior class (ModalPopupBehavior.js in the toolkit) as a guide for developing your own center function. If you have relatively-positioned containers in your div's ancestry, look at my other post titled "For those having trouble with relatively-positioned ModalPopupExtenders."

Hope this helps.