Javascript can't find ID of div inside user control

Question

I have coda slider that i put inside a user control (ascx file) and it is working perfectly on a test page.

But when I put the same user control in a content place holder in a test page that is based on a master page it stops working correctly. It appears that the javascript function can't correctly identify the ID of the DIV now that it inside of a content place holder. I have read some other links but they seem to be slightly different situations and I have tried using document.getElementById, but not sure if I am on the right track or just messing up with the syntax. and I have also tried putting ct100_cpMC_ in front of the id.

<%@ Page Title="TestPage - Test User Control" Language="C#" MasterPageFile="MasterPage.master" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="_TestPage" %>

<%@ Register Src="~/UserControls/WhatCustomersAreSaying.ascx" TagPrefix="uc1" TagName="WhatCustomersAreSaying" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
  <link rel="stylesheet" type="text/css" media="screen" href="css/coda-slider.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/jquery.coda-slider-3.0.min.js"></script>

<script>
     $(function () {

         $('#slider-id').codaSlider({
               autoSlide:true,
               autoHeight:false
         });
     });
</script> 
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cpMC" Runat="Server">

    <uc1:WhatCustomersAreSaying runat="server" ID="WhatCustomersAreSaying" />

</asp:Content>

Inside my user control is a DIV with the ID of "slider-id" that the javascript function needs to find.

As I mentioned before, I am not sure if I need to use document.getElementById and how, or if there is a simpler way by prepending something to ID within quotes $('#slider-id') so the javascript function knows the ID it is looking for is within a content place holder.

Answer 1

I had a friend help me and this is what worked. I knew I needed the (document).ready but did not have the syntax correctly. This is what fixed my problem,

<script>

$(document).ready(function ($) {
         $('#slider-id').codaSlider({
             autoSlide:true,
             autoHeight:false
         });
     });
</script>