Your code is pretty confusing, and you're doing a lot of work yourself
that jQuery is designed to do. It appears you're really only using
jQuery for the draggable function, which is a shame.
The addEvent function is a good example of where you can leverage
jQuery to do a lot of work really simply.
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);
}
Should become
function addEvent(){
jQuery('#insideParent').append('<div id="myDiv"><a href="#"
style="border:0"><img src="images/demo_img/penguin2.jpg" style="border:
0"/></a>');
}
Which will do exactly what your function currently does, but faster,
and more efficiently.
Also, you should avoid using inline events in situations like this, as
you're not really gleaning any benefit from declaring the an inline
onclick event on an a tag.
It seems like you've got some handle on what javascript can do, but I
get a sense that you're not really clear on how to best utilize the
jQuery library. I'd suggest taking a look at learningjquery.com, which
is an invaluable resource to getting your feet wet with the framework.
On Feb 26, 2:18 pm, "merihsaka...@yahoo.com" <merihsaka...@yahoo.com>
wrote:
> Hi all,
>
> 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..
