CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JkT
JkT

Reputation: 103

How to position the following elements in a box using JQuery?

Hello I have the following code and need to be able to position both elements within the box (#third) that is contained within a container. Please provide code for the positioning of both elements. I need to position the following elements (see the following lines) 

append('$${t}^x\sqrt{t}^x$$'); and 
append('<label>Filename:</label> <input type="text" name="file"  id="file" />');

<!-- saved from url=(0022) -->
<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest /MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

<script>

function allowDrop(ev) {

    ev.preventDefault();
}

function drag(ev) {

    ev.dataTransfer.setData("text", ev.target.id);
}

//ev.target.id this gives us the id of the symbol being dragged

function drop(ev) {

    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    //ev.target.appendChild(document.getElementById(data));

    switch(data)
    {

       case("drag8"):

          $('#second').append('$${t}^x\sqrt{t}^x$$');
          $('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)"></div>');
          $('#third').append('$${t}^x\sqrt{t}^x$$');

          $('#third').append('<label>Filename:</label> <input type="text" name="file"  id="file" />');

          break;

       default:
    }
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"second"]);
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"third"]);

}
</script>


<style>

#header {
    width: 100%;
    background-color: white;
    height: 30px;
}

#container {
    width: 600px;
    height:1500px
    background-color: #ffffff;
    margin: auto;
}
#first {
    width: 100px;
    border: 2px solid black;
    float: left;
    height: 400px;

}
#second {
    width: 300px;
    border: 2px solid black;
    top:0;
    float: right;
    height: 100px;

}

#third {

    position: absolute;
    top: 180px;
    border: 2px solid black;
    right:430px;
    width: 200px;
    height: 100px;

} 

#third .power1{

  width: 20px;
  height: 10px;
  float: left;
  border: 2px solid black;
}

#clear {
    clear: both;
}


</style>

</head>
<body>


<div id="header"></div>
<div id="container">
   <div id="first">
   <span id="drag8" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$${t}^x\sqrt{t}^x$$</span>
    </div>
    <div id="second" ondrop="drop(event)" ondragover="allowDrop(event)">    </div>
<div id="clear"></div>
</div>

</body>

Upvotes: 2

Views: 55

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

Merge the 3 appends

 $('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)">$${t}^x\sqrt{t}^x$$<label>Filename:</label> <input type="text" name="file"  id="file" /></div>');

Upvotes: 1

Related Questions