Search code examples
c#javascriptasp.netcontentplaceholderbxslider

Asp.net content place holder using javascript

I have a annoying issue involving javascript/jquery and asp:ContentPlaceHolders that I can't seem to solve and I've been trying all day.

I have an ASP.NET website with C#. The front page - Default.aspx, has a master page - MasterPage.master. I also have a control - bslider.ascx

I am trying to implement the image slider shown at http://bxslider.com/

The code in my control looks like this

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript">
    $(document).ready(function () {
        $('#slider1').bxSlider();
    });    
</script>

<div id="slider1">
    <div>Slide one content</div>
    <div>Slide two content</div>
    <div>Slide three content</div>
    <div>And so on...</div>
</div>

The relevant code in Default.aspx is as follows:

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <div class="sliderContainer">
        <uc4:BSlider ID="slider1" runat="server" />  
    </div>
</asp:Content>

The relevant code in MasterPage.master is as follows:

<body>
<form id="form1" runat="server">
    <div id="ContentContainer">
        <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
            <uc3:headerLeft ID="Header2" runat="server" /> 
        </asp:contentplaceholder>
    </div>
</form>
</body>

However this does not work, it displays the content of the inner divs but one after another. I have tested this in a standard .html web page and it worked so it must be to do with the ASP.NET side of things.

Can anyone help with this issue?

Thanks in advance.

Solution

  • I have solved the problem! It was a conflict between the JQuery library and the BxSlider library.

    It was fixed with the following code:

    <script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    jQuery.noConflict();
    $('#slider1').bxSlider();
});    
</script>

    Kicking myself for not realising that it was a conflict issue. I hope this helps anyone else stuck in a similar situation to me.