Question

Ok I have created a JavaScript page where the user can add text, they can set the colour, bold italics, as well as size and font. Size and drop options are selected through drop down boxes.

It looks a bit messy atm, as I am not worried about the looks, just the functionality.

When they add an element which appears in the widget, they can drag the element into position onto an image I have created which is displayed on the screen. Whenever the user is happy with the position of the text, they click save which generates the coordinates and updates the table X and Y coordinates field, At this point, a new row is generated and they can repeat the process of adding a new element. Whenever they are happy, they click save and it will send to a database to store it to be retrieved later.

My problem is everytime I add a new text field, it pushes the element down by a certain amount.

I rectified this by adding a decrementing variable which takes the elementCount (which autoincrements every time they add a new label element) and multiply it by a set amount to decrement by

decr -= (elementCount* 16);

This works fine for the medium text size, however when you start adding different text sizes and font combinations, it will change how much the element gets pushed down so it gets worse and worse every other element you add.

The new element is added like this

        elementCount++;

      var Text = textArray[textArray.length-1];
       var Font = fontArray[fontArray.length-1];
       var Color = colorArray[colorArray.length-1];
        var Bold = boldArray[boldArray.length-1];
        var Size = sizeArray[sizeArray.length-1];
        var Italics = italicsArray[italicsArray.length-1];
        var X = xCordArray[xCordArray.length-1];
        var Y = yCordArray[yCordArray.length-1];

         var newdiv = document.createElement('div');
     newdiv.innerHTML = "<span><font color='" + Color + "' size = '" + Size + "' face='" + Font + "'><label class = 'drag2' id = 'text" + firstCount + "'> " + Text + "</label></font></span>";
    document.getElementById(divName).appendChild(newdiv);


        var decr= 32;
        decr-= (elementCount* 16);
        Y = parseInt(Y) + test;
        X = parseInt(X) + 24;


           document.getElementById("text" + elementCount).style.left = X + "px";
           document.getElementById("text" + elementCount).style.top = Y + "px";

The drag and drop JavaScript code was based on this tutorial

http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

Is there any way to make it so when you dynamically add a new element , it doesn’t automatically push it down the screen by a bit each new element you add. I have tried soo many different options to fix this over the past few days and have had no luck.

Thanks in advance for any help

Edit CSS for the text element

   .text1{
position: relative;
left: 0px;
top: 0px;

}

Answer 1

I changed to absolute positioning and placed it inside a relative positioned container and works perfectly now!!