...
PDA

creating a simple table <div> using dom

macguyver
10-07-2010, 04:45 PM
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.



<!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>
abduraooft
10-07-2010, 05:07 PM
Change divcontainer.setAttribute('class', 'right');
to
divcontainer.className= 'right';


Also, there's no method named writeAttribute(), which is used through out in your code!
macguyver
10-07-2010, 05:18 PM
Hi

Thanks for the advice.

Also writeAttribute() is part of the proto-type package.
macguyver
10-07-2010, 05:29 PM
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.
macguyver
10-07-2010, 05:31 PM
Should I set all the setAttribute('class', 'droparea') elements to className = '';
macguyver
10-07-2010, 05:44 PM
Change to
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;
macguyver
10-07-2010, 08:16 PM
I got it working

<!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.
macguyver
10-07-2010, 10:55 PM
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.



<!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>
abduraooft
10-08-2010, 07:54 AM
I solved the problem
FYI: your DOCTYPE (http://www.alistapart.com/articles/doctype/) is incomplete which may lead to unexpected results in some browsers. I'd recommend you to use a Strict HTML one instead.
macguyver
10-08-2010, 08:40 PM
Thanks the Doctype was wrong, I got it fixed and then had to do some CSS adjusting.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum