struggling to combine jquery with asp.net
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>
</p>
<p>
</p>
<p>
</p>
<p>
<asp:Label ID="Label1" runat="server" Text="The value of the variable is :"></asp:Label>
</p>
<p>
</p>
<p>
</p>
<p>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Button" />
</p>
</div>
</form>
</body>
</html>
many thanks
Tony