jquery in asp.net masterpage

Hi, I am using jquery in an asp.net form with a master page. Initially I could only get the jquery to work in a plain document not using a master page. But looking at the source when the page was running i noticed that where I had put the following source in the content section on the child page:

<input id="btnAnimate" type="button" value="Animate" />
        <asp:Panel ID="Panel1" runat="server">
        Some sample text in this panel        
        </asp:Panel>

it had changed the Panel id to
 <asp:Panel ID="ctl00_ContentPlaceHolder1_Panel1" runat="server">

so to get this to work I had to rename the object in the header content to reflect this.

<script type="text/javascript">
        $(document).ready(function() {
            $("#btnAnimate").click(function() {
            $("#ctl00_ContentPlaceHolder1_Panel1").animate(
            {
                width: "350px",
                opacity: 0.5,
                fontSize: "16px"
            }, 1800);
            });
        });
 </script>

My issue is why is this happening. As the ID is being changed dynamically when the page is run, how can I guarantee that the prefix placed will always be ctl00_ContentPlaceHolder1_ as I am not setting this. How does this get set and can I controll this. Also further issues arrise such as when using different browsers.

Many thanks in advance for any advice
Simon CrippsOwnerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Typical ASP issue

1. use classes instead OR
2. use $("<%= Panel1.ClientID %>").animate
0
Michel PlungjanIT ExpertCommented:
So

<input id="btnAnimate" type="button" value="Animate" />
        <asp:Panel ID="Panel1" class="animatePanel" runat="server">
        Some sample text in this panel        
        </asp:Panel>

then have

<script type="text/javascript">
        $(document).ready(function() {
            $("#btnAnimate").click(function() {
            $(".animatePanel").animate(
            {
                width: "350px",
                opacity: 0.5,
                fontSize: "16px"
            }, 1800);
            });
        });
 </script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Simon CrippsOwnerAuthor Commented:
many thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.