Search content within the blog

Wednesday, April 8, 2009

Onmouseover Changing header background color of accordian control

ASPX page code
<ajax:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
TransitionDuration="250" RequireOpenedPane="true" Width="100%" SuppressHeaderPostbacks="true">
<Panes>
<ajax:AccordionPane ID="AccordionPane1" runat="server">
<Header>
Login
</Header>
<Content>
Content 1 goes here
</Content>
</ajax:AccordionPane>
<ajax:AccordionPane ID="AccordionPane2" runat="server">
<Header>
Change password
</Header>
<Content>
Content 2 goes here
</Content>
</ajax:AccordionPane>
</Panes>
</ajax:Accordion>

Add the following script
here 'ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender' is used to access the accordian control.general way of accessing accordian control through jquery is as follows
$find('your accordian controls client id_AccordionExtender');
AccordionExtender is coomon so only change the client id while accessing your accordian control.

<script type="text/javascript">
function pageLoad()
{
//alert('in');
AddMouseOverToAccordion();
}


function AddMouseOverToAccordion()
{
var acc = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
//alert(acc.get_Count());
for(paneIdx = 0; paneIdx < acc.get_Count(); paneIdx++)
{
var k = null;
var j = null;
j= acc.get_Pane(paneIdx).header;
k = Function.createDelegate(this, this._onTitleHover);
$addHandler(j, "mouseover", k);

k = Function.createDelegate(this, this._onTitleHoverOut);
$addHandler(j, "mouseout", k);
}
}
function _onTitleHoverOut(e) {
e.target.style.background = "#2E4d7B";
e.target.style.color = "white";
}

function _onTitleHover(e) {
e.target.style.background = "#FFF8DC";
e.target.style.color = " #4B0082";
}

</script>

No comments:

Post a Comment