making control in user control visible=false on mouse over

Question

Hi Everybody,

<div class="pages2" id="more" runat="server">

    <a href="" onmouseover="mover()" onmouseout="mout()">More</a><!--<![endif]-->
    <ul style="background-color: #626669; padding: 0 6px 0 6px; margin: 28px 0 0 0px">
        <asp:DataList ID="DataList2" runat="server">
            <ItemTemplate>

            </ItemTemplate>
            <ItemStyle Wrap="True" />
        </asp:DataList>
    </ul>

</div>

I have this datalist in a user control i want when i keep mouse over "More", it should be invisible. it is working on .aspx page not on user control. How to do this. This control is placed on master page.

Please Help.

Answer 1

Have you tried debugging the javascript mover() and mout() function? I am guessing you are looking for elements with the wrong id's since the id's are probably different inside a user control.

Answer 2

Probably it will be an issue with getElementById. In a naming container you cannot get the element by simply giving its id. You have to use ClientID to get the generated id of the element at runtime.

Something like

document.getElementById ( "<%= DataList2.ClientID %>");

See Control.ClientID Property

and

Control ID Naming in Content Pages

Answer 3

I would agree that it's probably an issue with trying to get the id of the element since the element's id changes at runtime when you put it inside a user control. You can run your code then do a view source in the browser and see exactly what the id is generating to at runtime.

Answer 4

Thank you very much Rahul