I want to add one div between two or at first or last.
I msending you my code tell me in that what should i write.
<%@ 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">
<script type="text/javascript" src="../JscriptText/JScriptTxt.js"> </script>
<script type="text/javascript">
$("#btnPage").live("click", function () {
// $("[id*=div]").hide();
// $("[id*=div]").show();
$("id*=div" + $("#txtPage").val()).show();
});
</script>
<script type="text/javascript" src="../JscriptText/JScript1Add.js"></script>
<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 style="width:500px; height:500px; border:10px soild #ffffff;">
<div id="div1"><img src="../CoverImage.jpg" width="500" height="650"` alt="Product1"/></div>
</div>
<div style="width:500px; height:500px; border:10px soild #ffffff;background-color:Aqua;">
<div id="div2" 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 id="div4" style="width:500px; height:500px; border:10px soild #ffffff; background-color:Lime">
<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>
<input type = "text" id = "txtPage" />
<input type = "button" id = "btnPage" value = "Go"/>
<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>--%>
<div id="container"><img class="movable" src="../1.png" width="70" height="70" alt="prd5"/></div>
<input type = "button" id = "btnAdd" value = "Add" />
</center>
</form>
</body>
</html>
Look at above code there are three div tag inside one s=div tag.
if I click on add that div must be added between them.
