I have 2 different div which names are is "insideParent" and
"insideParent2" .
And when I click the Add Element button the new div is creating
inside
the insideParent.
the problem is when I create a new div , the second div's position is
changing.. Its going down..
Also when I clicked the "Remove Element" button, Its going up.
Is there a way to do it static.
Not : this two div is draggable and All my codes are below..
<script type="text/javascript" src="js/dragYeni/new/
jquery-1.2.6.js"></
script>
<script type="text/javascript" src="js/dragYeni/new/ui.core.js"></
script>
<script type="text/javascript" src="js/dragYeni/new/
ui.draggable.js"></
script>
<style type="text/css">
#parentElem
{
border-style: dotted;
border-color: #9FADB0;
width: 122px;
height: 200px;
border: 1px solid #fffff;
top: 42px;
left: 72px;
position: absolute;
overflow: hidden;
color: #000;
}
#insideParent
{
color: #fff;
}
.frameClass
{
border: 1px dotted #999;
}
</style>
<script type="text/javascript">
function addEvent(image_path) {
var ni = document.getElementById('insideParent');
var divIdName = "myDiv";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<a href=\"#\" style=\"border:0px\" > <img
src=\"images/demo_img/penguin2.jpg\" border=\"0\"/> </a>";
ni.appendChild(newdiv);
}
function removeElement() {
var d = document.getElementById('insideParent');
var olddiv = document.getElementById('myDiv');
d.removeChild(olddiv);
}
</script>
<div class="img-container" id="parentElem">
<div class="scale-image" id="insideParent"></div>
<div class="scale-image2" id="insideParent2"><img
src="images/demo_img/penguin.jpg" border="0"/></div>
div>
<a href="javascript:;" onclick="addEvent('<img src=\'images/demo_img/
penguin.jpg\' name=\'img1665\' id=\'img1665\' width=\'100%\' border=
\'0\'>');" ><b>Add Element</b></a>
<a href="javascript:;" onclick="removeElement();"><b>Remove Element</
b></a>
<script type="text/javascript">
jQuery(document).ready(
function(ev, ui)
{
jQuery('#insideParent').draggable({
zIndex: 1000,
ghosting: false,
opacity: 0.7,
containment : 'parent'
});
jQuery('#insideParent2').draggable(
{
zIndex: 1000,
ghosting: false,
opacity: 0.7,
containment : 'parent'
}
);
}
);
</script>
Thank you..
No comments:
Post a Comment