Ok.
Actually In my Application I m using Three Div Tag.
And I an considering one Div as one page.
I m adding Textbox and Button in aspx page.
By inserting page number in Textbox ,I want to move to that page number By click on button.
I m adding code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="lastfirst.aspx.cs" Inherits="lastfirstdemo.Account.lastfirst" %>
<!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">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="../StyleSheet1.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../StyleSheet2.css" />
<script type="text/javascript" src="../Jquery/JScript2.js"></script>
<script type="text/javascript" src="../Jquery/JScript3.js"></script>
<script type="text/javascript" src="../Jquery/JScript4.js"></script>
<script type="text/javascript" src="../Jquery/JScript5.js"></script>
<script type="text/javascript">
$('#s5').cycle({
fx: 'scrollHorz',
timeout: 500,
next: '#next1',
prev: '#prev1',
timeout: 0,
pager: '#nav',
nowrap: 1
});
$('#prev').click(function () {
return false;
});
$('#next').click(function () {
return false;
});
$('#first').click(function () {
return false;
});
$('#last').click(function () {
return false;
});
</script>
<link rel="stylesheet" type="text/css" media="screen" href="../JqueryMove/StyleSheet1.css" />
<script type="text/javascript" src="../JqueryMove/JScript1.js"></script>
<script type="text/javascript" src="../JqueryMove/JScript2.js"></script>
<script type="text/javascript">
$(init);
function init() {
$('.movable').draggable({
cursor: 'move',
containment: '#s5',
cursor: 'move',
snap: '#s5',
stop: handleDragStop
});
}
function handleDragStop(event, ui) {
var offsetXPos = parseInt(ui.offset.left);
var offsetYPos = parseInt(ui.offset.top);
alert("Drag stopped!\n\nOffset: (" + offsetXPos + ", " + offsetYPos + ")\n");
}
</script>
</head>
<body>
<form id="TagForm" runat="server">
<center style="padding-top:20px">
<div id="s5">
<div id="div1" style="width:500px; height:500px; border:10px soild #ffffff;">
<div><img src="../CoverImage.jpg" width="500" height="650"` alt="Product1"/></div>
</div>
<div id="div2" style="width:500px; height:500px; border:10px soild #ffffff;background-color:Aqua;">
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
</div>
<div id="div3" style="width:500px; height:500px; border:10px soild #ffffff; background-color:Silver;">
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id </div>
</div>
</div>
<div class="nav1" style="padding-top:10px">
<center> <asp:Button ID="prev1" runat="server" Text="Prev" Width="70px" />
<asp:Button ID="next1" runat="server" Text="Next" Width="71px" /></center>
</div>
<div id="nav">
<%--<asp:Button ID="first1" runat="server" Text="First" />
<asp:Button ID="last1" runat="server" Text="Last" />--%></div>
<%-- <div id="nav">
<input type="text" name="inputbox" OnBlur="validate(this.form)" />
<input type="button" name="button" Value="Click" onClick="testResults(this.form)" />
</div>--%>
</center>
</form>
</body>
</html>
See above code ..
In that Div having id div1,div2,div3 considered as a Single page in my applicatio.
That means div1 as page1,div2 as page2 and div3 as page3
