Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts

    creating a simple table <div> using dom

    Hi

    I was wondering if someone could help me. I successfully implemented a number of sortable lists, using a table in html. However I wanted to table cells to be scrollable, which does not apparently work, I tried overflow: auto;, overflow: hidden; and overflow: scroll; in css and it did not work, the table cells kept moving to fit the draggable content. I checked on the internet and found that as stated, table cells cannot be made scrollable. Therefore I decided to do it all with div elements. However I want the div elements structured in a 5 x 3 format. Therefore I thought I would implement it in dom. However I am a newby to dom. I have created the following code, which is simple but repetitive, the function createTable simply creates the div elements (1,2,3,4,5...) and writes the class and id attributes to each. I then appended several of the elements into a div container I created, called divcontainer with a class right. There is also a div element already in the document, class and id = 'right'. I therefore tried to add the divcontainer to this. The function however is causing a page error and none of the dom div elements are loading.

    Any help appreciated. I would simply prefer to create the divcontainer and append the div elements. Should I take out the div element right already in the document and instead use something like document.body.appendChild(divcontainer) or something similar. Also the function call createTable() should I use window.onload = function(){} instead.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    
    <HTML>
    <HEAD>
    
      <META name="generator" content="Free Script Editor, see www.freescripteditor.com">
    
      <TITLE>Email Client</TITLE>
      <link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/>
      <script src="javascript/prototype.js" type="text/javascript"></script>
      <script src="javascript/scriptaculous.js" type="text/javascript"></script>
      <script src="javascript/dragdrop.js" type="text/javascript"></script>
      <script src="javascript/controls.js" type="text/javascript"></script>
      <script src="javascript/effects.js" type="text/javascript"></script>
      <script src="javascript/builder.js" type="text/javascript"></script>
    
    
      <script type="text/javascript">
      var xmlhttp = false;
    
      //check if we are using IE
      try {
           //If the javascript version is greater than 5.
           xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
           alert ("You are using Microsoft Internet Explorer.");
           }
      catch(e)
            {
            //if not, then use the older active x object.
            try  {
            //if we are using Internet Explorer
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            alert("You are using Microsoft Internet Explorer");
                  }
      catch (E)
             {
             xmlhttp = false;
             }
            }
            //If we are using a non-IE browser, crea a javascript instance of the object
            if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
               {
               xmlhttp = new XMLHttpRequest();
               alert ("You are not using Microsoft Internet Explorer");
               }
    
    
    
    
            function getmessage(inbox_id)
                     {
                     var object = document.getElementById('content');
                     var server = "getmessage.php?inbox_id=" +inbox_id;
                     xmlhttp.open("GET", server);
                     xmlhttp.onreadystatechange = function()
                             {
                             if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                {
                                object.innerHTML = xmlhttp.responseText;
                                }
                             }
                     xmlhttp.send(null);
                     }
    
                   function createTable()
                            {
                   var divright = document.getElementById('right');
    
                   var divcontainer = createElement('div');
                   divcontainer.setAttribute('class', 'right');
    
                   var div1 = document.createElement('div');
                   div1.writeAttribute('class', 'droparea');
                   div1.writeAttribute('id', 'sortList1');
    
                   var div2 = document.createElement('div');
                   div2.writeAttribute('class', 'droparea');
                   div2.writeAttribute('id', 'sortList2');
    
                   var div3 = document.createElement('div');
                   div3.writeAttribute('class', 'droparea');
                   div3.writeAttribute('id', 'sortList3');
    
                   var div4 = document.createElement('div');
                   div4.writeAttribute('class', 'droparea');
                   div4.writeAttribute('id', 'sortList4');
    
                   var div5 = document.createElement('div');
                   div5.writeAttribute('class', 'droparea');
                   div5.writeAttribute('id', 'sortList5');
    
                   var div6 = document.createElement('div');
                   div6.writeAttribute('class', 'droparea');
                   div6.writeAttribute('id', 'sortList6');
    
                   var div7 = document.createElement('div');
                   div7.writeAttribute('class', 'droparea');
                   div7.writeAttribute('id', 'sortList7');
    
                   var div8 = document.createElement('div');
                   div8.writeAttribute('class', 'droparea');
                   div8.writeAttribute('id', 'sortList8');
    
                   var div9 = document.createElement('div');
                   div9.writeAttribute('class', 'droparea');
                   div9.writeAttribute('id', 'sortList9');
    
                   var div10 = document.createElement('div');
                   div10.writeAttribute('class', 'droparea');
                   div10.writeAttribute('id', 'sortList10');
    
                   var div11 = document.createElement('div');
                   div11.writeAttribute('class', 'droparea');
                   div11.writeAttribute('id', 'sortList11');
    
                   var div12 = document.createElement('div');
                   div12.writeAttribute('class', 'droparea');
                   div12.writeAttribute('id', 'sortList12');
    
                   var div13 = document.createElement('div');
                   div13.writeAttribute('class', 'droparea');
                   div13.writeAttribute('id', 'sortList13');
    
                   var div14 = document.createElement('div');
                   div14.writeAttribute('class', 'droparea');
                   div14.writeAttribute('id', 'sortList14');
    
                   var div15 = document.createElement('div');
                   div15.writeAttribute('class', 'droparea');
                   div15.writeAttribute('id', 'sortList15');
    
                   divright.wrap("divcontainer");
    
    
                   divcontainer.appendChild(div1);
                   divcontainer.appendChild(div2);
                   divcontainer.appendChild(div3);
                                }
    
    
    
           window.onload = function()
                    {
                    Sortable.create('container1', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7' , 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                    Sortable.create('sortList1', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList2', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList3', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList4', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList5', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList6', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList7', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList8', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList9', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList10', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList11', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList12', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList13', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList14', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList15', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
    
                    }
    
    </script>
    
    </HEAD>
    
    <BODY>
    <div class="container" id="container">
    <!--header div - for message 'new', 'reply' -->
    <div class="header">
    
    
    
    </div>
    <!-- end of header div-->
    
    <!--Begin the div class left - this will hold the inbox emails for review-->
    <div class="left" id='container1'>
    
    <?PHP
    include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php');
    $str = "id";
    $i = 0;
    $inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i";
    $inbox_result = mysql_query($inbox_query);
    while($row = mysql_fetch_array($inbox_result))
      {//start while trainer query
      $inbox_id = $row['0'];
      $to = $row['1'];
      $subject= $row['2'];
      $sent = $row['3'];
      $message = $row['4'];
      $i++;
    
      echo "<div class='draggable' id='$str$i'>
    
     $inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$subject</a>
      </div>";
    }//end while inbox query
      ?>
     </div>
     <!--end left div-->
    
    <!--begin the right div - this is the right side of the screen frame for
    postponed email area-->
    <div class="right" id="right" onload="createTable()">
    
    
    </div>
    <!--end the right div element-->
    <!--begin the main content div - this will hold sent message-->
    <div class="content" id="content" overflow="auto">
    
    
    <!--end content div-->
    </div>
    </BODY>
    </HTML>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Change
    divcontainer.setAttribute('class', 'right');
    to
    Code:
     divcontainer.className= 'right';
    Also, there's no method named writeAttribute(), which is used through out in your code!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    macguyver (10-07-2010)

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi

    Thanks for the advice.

    Also writeAttribute() is part of the proto-type package.

  • #4
    New Coder
    Join Date
    Oct 2010
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi

    I changed all the writeAttribute() methods to setAttribute();

    Still this seems to generate problems. Is there a problem with the way I have written this, I am new to this, and don't quite see whats wrong. I create a div element divcontainer to hold the div elements which are to be alternative tables cells. I also add the divcontainer to a div element that is described inline in the document body. Is this wrong. Can I have the document already built and be trying to add elements as I am doing. Could it be a load problem.

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Should I set all the setAttribute('class', 'droparea') elements to className = '';

  • #6
    New Coder
    Join Date
    Oct 2010
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Change to
    Code:
     divcontainer.className= 'right';
    Also, there's no method named writeAttribute(), which is used through out in your code!
    thanks for your help, also the div.className('right') should have been div.className('tbl'); another class that I have for the table. It simply expands the "right" container with another container 100% in width and height;

  • #7
    New Coder
    Join Date
    Oct 2010
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I got it working

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    
    <HTML>
    <HEAD>
    
      <META name="generator" content="Free Script Editor, see www.freescripteditor.com">
    
      <TITLE>Email Client</TITLE>
      <link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/>
      <script src="javascript/prototype.js" type="text/javascript"></script>
      <script src="javascript/scriptaculous.js" type="text/javascript"></script>
      <script src="javascript/dragdrop.js" type="text/javascript"></script>
      <script src="javascript/controls.js" type="text/javascript"></script>
      <script src="javascript/effects.js" type="text/javascript"></script>
      <script src="javascript/builder.js" type="text/javascript"></script>
    
    
      <script type="text/javascript">
      var xmlhttp = false;
    
      //check if we are using IE
      try {
           //If the javascript version is greater than 5.
           xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
           alert ("You are using Microsoft Internet Explorer.");
           }
      catch(e)
            {
            //if not, then use the older active x object.
            try  {
            //if we are using Internet Explorer
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            alert("You are using Microsoft Internet Explorer");
                  }
      catch (E)
             {
             xmlhttp = false;
             }
            }
            //If we are using a non-IE browser, crea a javascript instance of the object
            if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
               {
               xmlhttp = new XMLHttpRequest();
               alert ("You are not using Microsoft Internet Explorer");
               }
    
                   function createTable()
                            {
                   var divright, div1, div2, div3, div4, div5, div6, div7, div8, div9, div10, div11, div12, div13, div14, div15;
    
    
    
                   divright = document.getElementById('right');
    
    
                   div1 = document.createElement('div');
                   div1.className = 'droparea';
                   div1.setAttribute('id', 'sortList1');
    
                   div2 = document.createElement('div');
                   div2.className = 'droparea';
                   div2.setAttribute('id', 'sortList2');
    
                   div3 = document.createElement('div');
                   div3.className = 'droparea';
                   div3.setAttribute('id', 'sortList3');
    
                   div4 = document.createElement('div');
                   div4.className = 'droparea';
                   div4.setAttribute('id', 'sortList4');
    
                   div5 = document.createElement('div');
                   div5.className = 'droparea';
                   div5.setAttribute('id', 'sortList5');
    
                   div6 = document.createElement('div');
                   div6.className = 'droparea';
                   div6.setAttribute('id', 'sortList6');
    
                   div7 = document.createElement('div');
                   div7.className = 'droparea';
                   div7.setAttribute('id', 'sortList7');
    
                   div8 = document.createElement('div');
                   div8.className = 'droparea';
                   div8.setAttribute('id', 'sortList8');
    
                   div9 = document.createElement('div');
                   div9.className = 'droparea';
                   div9.setAttribute('id', 'sortList9');
    
                   div10 = document.createElement('div');
                   div10.className = 'droparea';
                   div10.setAttribute('id', 'sortList10');
    
                   div11 = document.createElement('div');
                   div11.className = 'droparea';
                   div11.setAttribute('id', 'sortList11');
    
                   div12 = document.createElement('div');
                   div12.className = 'droparea';
                   div12.setAttribute('id', 'sortList12');
    
                   var div13 = document.createElement('div');
                   div13.className = 'droparea';
                   div13.setAttribute('id', 'sortList13');
    
                   div14 = document.createElement('div');
                   div14.className = 'droparea';
                   div14.setAttribute('id', 'sortList14');
    
                   div15 = document.createElement('div');
                   div15.className = 'droparea';
                   div15.setAttribute('id', 'sortList15');
    
    
    
    
    
                     divright.appendChild(div1);
                     divright.appendChild(div2);
    
    
                                }
    
    
            function getmessage(inbox_id)
                     {
                     var object = document.getElementById('content');
                     var server = "getmessage.php?inbox_id=" +inbox_id;
                     xmlhttp.open("GET", server);
                     xmlhttp.onreadystatechange = function()
                             {
                             if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                {
                                object.innerHTML = xmlhttp.responseText;
                                }
                             }
                     xmlhttp.send(null);
                     }
    
    
           function createSortables()
                    {
                    Sortable.create('container1', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7' , 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                    Sortable.create('sortList1', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList2', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList3', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList4', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList5', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList6', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList7', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList8', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList9', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList10', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList11', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList12', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList13', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList14', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList15', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
    
                    }
    
           window.onload = function()
                  {
                  this.createTable();
                  this.createSortables();
                  }
    
    
    </script>
    
    </HEAD>
    
    <BODY>
    <!--header div - for message 'new', 'reply' -->
    <div class="container" id="container">
    <div class="header">
    
    
    
    </div>
    <!-- end of header div-->
    
    <!--Begin the div class left - this will hold the inbox emails for review-->
    <div class="left" id='container1'>
    
    <?PHP
    include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php');
    $str = "id";
    $i = 0;
    $inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i";
    $inbox_result = mysql_query($inbox_query);
    while($row = mysql_fetch_array($inbox_result))
      {//start while trainer query
      $inbox_id = $row['0'];
      $to = $row['1'];
      $subject= $row['2'];
      $sent = $row['3'];
      $message = $row['4'];
      $i++;
    
      echo "<div class='draggable' id='$str$i'>
    
     $inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$subject</a>
      </div>";
    }//end while inbox query
      ?>
     </div>
     <!--end left div-->
    
    <!--begin the right div - this is the right side of the screen frame for
    postponed email area-->
    <div class="right" id="right">
    
    
    </div>
    <div class="content" id="content">
    </div>
    </div>
    <!--end the right div element-->
    <!--begin the main content div - this will hold sent message-->
    
    
    </BODY>
    </HTML>
    However does anyone know how to append elements horizontally rather than vertically. When I append an element, it is displayed vertically.

  • #8
    New Coder
    Join Date
    Oct 2010
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts

    problem solved

    I solved the problem. I also have a css problem, but I am sorting this. I managed to get dom working, I found a website where someone had a similar problem. The resolution was to have a seperate function that loaded the required functions on window.onload(); My code was at fault, due to loading issues.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    
    <HTML>
    <HEAD>
    
      <META name="generator" content="Free Script Editor, see www.freescripteditor.com">
    
      <TITLE>Email Client</TITLE>
      <link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/>
      <script src="javascript/prototype.js" type="text/javascript"></script>
      <script src="javascript/scriptaculous.js" type="text/javascript"></script>
      <script src="javascript/dragdrop.js" type="text/javascript"></script>
      <script src="javascript/controls.js" type="text/javascript"></script>
      <script src="javascript/effects.js" type="text/javascript"></script>
      <script src="javascript/builder.js" type="text/javascript"></script>
    
    
      <script type="text/javascript">
      var xmlhttp = false;
    
      //check if we are using IE
      try {
           //If the javascript version is greater than 5.
           xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
           alert ("You are using Microsoft Internet Explorer.");
           }
      catch(e)
            {
            //if not, then use the older active x object.
            try  {
            //if we are using Internet Explorer
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            alert("You are using Microsoft Internet Explorer");
                  }
      catch (E)
             {
             xmlhttp = false;
             }
            }
            //If we are using a non-IE browser, crea a javascript instance of the object
            if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
               {
               xmlhttp = new XMLHttpRequest();
               alert ("You are not using Microsoft Internet Explorer");
               }
    
                   function createTable()
                            {
                   var divright, divcontainer,  divcontent, divright1, divright2, divright3, divright4, divright5, div1, div2, div3, div4, div5, div6, div7, div8, div9, div10, div11, div12, div13, div14, div15;
    
    
    
                   divright = document.getElementById('right');
                   divright1 = document.getElementById('right1');
                   divright2 = document.getElementById('right2');
                   divright3 = document.getElementById('right3');
                   divright4 = document.getElementById('right4');
    
    
    
                   div1 = document.createElement('div');
                   div1.className = 'droparea';
                   div1.setAttribute('id', 'sortList1');
    
                   div2 = document.createElement('div');
                   div2.className = 'droparea';
                   div2.setAttribute('id', 'sortList2');
    
                   div3 = document.createElement('div');
                   div3.className = 'droparea';
                   div3.setAttribute('id', 'sortList3');
    
                   div4 = document.createElement('div');
                   div4.className = 'droparea';
                   div4.setAttribute('id', 'sortList4');
    
                   div5 = document.createElement('div');
                   div5.className = 'droparea';
                   div5.setAttribute('id', 'sortList5');
    
                   div6 = document.createElement('div');
                   div6.className = 'droparea';
                   div6.setAttribute('id', 'sortList6');
    
                   div7 = document.createElement('div');
                   div7.className = 'droparea';
                   div7.setAttribute('id', 'sortList7');
    
                   div8 = document.createElement('div');
                   div8.className = 'droparea';
                   div8.setAttribute('id', 'sortList8');
    
                   div9 = document.createElement('div');
                   div9.className = 'droparea';
                   div9.setAttribute('id', 'sortList9');
    
                   div10 = document.createElement('div');
                   div10.className = 'droparea';
                   div10.setAttribute('id', 'sortList10');
    
                   div11 = document.createElement('div');
                   div11.className = 'droparea';
                   div11.setAttribute('id', 'sortList11');
    
                   div12 = document.createElement('div');
                   div12.className = 'droparea';
                   div12.setAttribute('id', 'sortList12');
    
                   div13 = document.createElement('div');
                   div13.className = 'droparea';
                   div13.setAttribute('id', 'sortList13');
    
                   div14 = document.createElement('div');
                   div14.className = 'droparea';
                   div14.setAttribute('id', 'sortList14');
    
                   div15 = document.createElement('div');
                   div15.className = 'droparea';
                   div15.setAttribute('id', 'sortList15');
    
    
    
                     divright.appendChild(div1);
                     divright.appendChild(div2);
                     divright.appendChild(div3);
    
                     divright1.appendChild(div4);
                     divright1.appendChild(div5);
                     divright1.appendChild(div6);
    
                     divright2.appendChild(div7);
                     divright2.appendChild(div8);
                     divright2.appendChild(div9);
    
                     divright3.appendChild(div10);
                     divright3.appendChild(div11);
                     divright3.appendChild(div12);
    
                     divright4.appendChild(div13);
                     divright4.appendChild(div14);
                     divright4.appendChild(div15);
    
                     }
    
    
            function getmessage(inbox_id)
                     {
                     var object = document.getElementById('content');
                     var server = "getmessage.php?inbox_id=" +inbox_id;
                     xmlhttp.open("GET", server);
                     xmlhttp.onreadystatechange = function()
                             {
                             if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                                {
                                object.innerHTML = xmlhttp.responseText;
                                }
                             }
                     xmlhttp.send(null);
                     }
    
    
           function createSortables()
                    {
                    Sortable.create('container1', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7' , 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                    Sortable.create('sortList1', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList2', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList3', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList4', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList5', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList6', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList7', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList8', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList9', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList10', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList11', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList12', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList13', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList14', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
                     Sortable.create('sortList15', {tag: 'div', only: 'draggable', constraint: false,
                    containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
    
    
                    }
    
           window.onload = function()
                  {
                  this.createTable();
                  this.createSortables();
                  }
    
    
    </script>
    
    </HEAD>
    
    <BODY>
    <div class="container" id="container">
    <!--header div - for message 'new', 'reply' -->
    <div class="header">
    
    
    
    </div>
    <!-- end of header div-->
    
    <!--Begin the div class left - this will hold the inbox emails for review-->
    <div class="left" id='container1'>
    
    <?PHP
    include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php');
    $str = "id";
    $i = 0;
    $inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i";
    $inbox_result = mysql_query($inbox_query);
    while($row = mysql_fetch_array($inbox_result))
      {//start while trainer query
      $inbox_id = $row['0'];
      $to = $row['1'];
      $subject= $row['2'];
      $sent = $row['3'];
      $message = $row['4'];
      $i++;
    
      echo "<div class='draggable' id='$str$i'>
    
     $inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$subject</a>
      </div>";
    }//end while inbox query
      ?>
     </div>
     <!--end left div-->
    
    <!--begin the right div - this is the right side of the screen frame for
    postponed email area-->
    <div class="right" id="right">
    
    
    </div>
    <div class="right1" id="right1">
    </div>
    <div class="right2" id="right2">
    </div>
    <div class="right3" id="right3">
    </div>
    <div class="right4" id="right4">
    </div>
    <div class="content" id="content">
    </div>
    </div>
    
    
    <!--end the right div element-->
    <!--begin the main content div - this will hold sent message-->
    
    
    </BODY>
    </HTML>

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I solved the problem
    FYI: your DOCTYPE is incomplete which may lead to unexpected results in some browsers. I'd recommend you to use a Strict HTML one instead.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    macguyver (10-08-2010)

  • #10
    New Coder
    Join Date
    Oct 2010
    Posts
    40
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks the Doctype was wrong, I got it fixed and then had to do some CSS adjusting.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •