locked
can't get asp controls and a jquery carousel to work RRS feed

  • Question

  • User1195647972 posted

    Hi    firstly i am not an experienced programer or web developer so my code is basic.

    I have a simple carousel which works however  when i try to add a text box or any other asp control  i cannot seem to recognise the control  so that i can add code to an event like click a cmd button.

    ultimately i want to select the an image in the carousel and trigger an event that will update the text box with a value relating to the image.

    can someone please give me some code that either shows me how its done or some simple easy to understand pointers.  my web page code is below

    <%@ Page Language="VB" AutoEventWireup="false" CodeBehind="jqs.aspx.vb"   %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

       <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>3D Carousel</title>

     <link rel="stylesheet" type="text/css" href="CSS/carousel.css" media="screen"/>

     <link rel="stylesheet" type="text/css" href="CSS/style.css" media="screen"/>

     

       

        <link rel ="stylesheet" href ="CSS/reset.css" type="text/css" media="screen" /> 

        <link rel="stylesheet" type="text/css" href="CSS/carousel.css" media="screen" />

        <link href="lightbox/css/lightbox.css" rel ="stylesheet" />

        <link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'/>

            

        <script src="js/modernizr.min.js"></script>

        <script src="js/respond.min.js"></script>

     <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>

     <script type="text/javascript" src="Scripts/jquery.carousel.min.js"></script>

     <script type="text/javascript" src="Scripts/jquery.mousewheel.js"></script>

    <script type="text/javascript">

        jQuery(document).ready(function ($) {

            $('#carousel').carousel({

                width: 870,

                height: 350,

                itemWidth: 120,

                horizontalRadius: 270,

                verticalRadius: 85,

                resize: false,

                mouseScroll: false,

                mouseDrag: true,

                scaleRatio: 0.4,

                scrollbar: true,

                tooltip: true,

                mouseWheel: true,

                mouseWheelReverse: true

            });

        });

    </script>

    </head>

    <body>

    <form id="form1" runat="server">

          <div id="wide-wrapper">  

        <div id="header">

        <img src="css/example_assets/name.jpg" width="280" height="50" alt="3d carousel"/>

       </div>

    <ul id="carousel">

    <li>

    <img src="images/coal.jpg"  alt=""/>

    <div class="tooltip">Image description</div>

    </li>

    <li>

    <img src="images/coal.jpg"  alt=""/>

    </li>

    <li>

    <img src="images/coal.jpg"  alt=""/>   

    </li>

    <li>

    <img src="images/coal.jpg" alt=""/>

    <div class="tooltip"><br/><br />Tooltips support <i>HTML</i> text.</div>

                

    </li>

    <li>

    <img src="images/coal.jpg"  alt=""/>

                 

    </li>

    </ul>

        </div>

         <div id="next area>

                  <p>

                &nbsp;</p>

            <p>

                &nbsp;</p>

            <p>

                &nbsp;</p>

            <p>

                <asp:Label ID="Label1" runat="server" Text="The value of the variable is :"></asp:Label>

            </p>

            <p>

                &nbsp;</p>

            <p>

                &nbsp;</p>

            <p>

                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            </p>

            <p>

                &nbsp;</p>

            <p>

                &nbsp;</p>

            <p>

                &nbsp;</p>

            <p>

                <asp:Button ID="Button1" runat="server" Text="Button" />

            </p>

        </div>

        </form>

       </body>

    </html>

    many thanks

    Tony

    Monday, August 29, 2016 7:18 PM

All replies

  • User-1142886626 posted

    Hi tonyrich,

    You might also consider using the Developer Tools(F12) within your browser and checking to see if any errors are present in the Console and check whether you are calling the below script before calling the jQuery.

    Code below is for your reference:

    <head>
        <meta charset='UTF-8'>
          <title>jQuery Carousel</title>
          <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
          <link href='stylesheets/jquery.carousel.css' rel='stylesheet' type='text/css'>
          <link href='stylesheets/sample.css' rel='stylesheet' type='text/css'>
          <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js' type='text/javascript'></script>
          <script src='javascripts/jquery.carousel.js' type='text/javascript'></script>
          <script src='javascripts/sample.js' type='text/javascript'></script>
          <script src='javascripts/rainbow.js' type='text/javascript'></script>
      </head>
      <body>
        <div class='content'>
          <section class='examples'>
            <div class='carousel dissolve'>
              <div class='previews'>
                <div class='preview'>
                  <img height='540' src='samples/sample-01.jpg' width='960'>
                </div>
                <div class='preview'>
                  <img height='540' src='samples/sample-02.jpg' width='960'>
                </div>
                <div class='preview'>
                  <img height='540' src='samples/sample-03.jpg' width='960'>
                </div>
                <div class='preview'>
                  <img height='540' src='samples/sample-04.jpg' width='960'>
                </div>
                <div class='preview'>
                  <img height='540' src='samples/sample-05.jpg' width='960'>
                </div>
              </div>
              <div class='controls'>
                <a class='next' data-action='next' href='#'>›</a>
                <a class='prev' data-action='prev' href='#'>‹</a>
                <div class='pages'>
                  <a class='page' data-page='0' href='#'></a>
                  <a class='page' data-page='1' href='#'></a>
                  <a class='page' data-page='2' href='#'></a>
                  <a class='page' data-page='3' href='#'></a>
                  <a class='page' data-page='4' href='#'></a>
                </div>
              </div>
            </div>
          </section>
        </div>
      </body>
    

    Best regards,

    Ailleen

    Tuesday, August 30, 2016 2:56 AM