Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Forums (http://www.go4expert.com/forums/web-design-forum/)
-   -   Why doesn't it reser ? (http://www.go4expert.com/forums/doesnt-reser-t16532/)

Naash 13Mar2009 20:04

Why doesn't it reser ?
 
My attachment is a timetable where names can be dropped to any of the white cells.

It has got 3 buttons :

1) NEXT - Takes user to next week

2) CURRENT - Takes user to present week

3) RESET - All the white cells should be emptied of the dragged names.

I have made a function dragDropResetForm for resetting the white cells (starts at line no. 447 in my latest attachment)
Code:

  function dragDropResetForm()
    {
        var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
        var uls = mainContainer.getElementsByTagName('UL');
        for(var no=0;no<uls.length;no++)
            dhtmlgoodies_listOfItems.appendChild(uls[no]);           
   
    }

dhtmlgoodies_mainContainer ---> white cells
dhtmlgoodies_listOfItems ---> name list (last column)

Obviously, it doesn't run.
Plz help !

shabbir 13Mar2009 20:40

Re: Why doesn't it reser ?
 
Attachment removed. Try to post the code in the post

Naash 14Mar2009 14:49

Re: Why doesn't it reser ?
 
As you say !

Code:

<html>
<head>
        <style type="text/css">
        body{
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;        /* Font to use */
                background-color:#FFF;
        }
        #footer{
                height:30px;
                vertical-align:middle;
                text-align:center;
                clear:both;
                padding-right:3px;
                background-color:#317082;
                margin-top:2px;
                width:840px;
        }
        #footer form{
                margin:0px;
                margin-top:2px;
        }
        #dhtmlgoodies_dragDropContainer{        /* Main container for this script */
                width:0px;
                height:0px;
                border:1px solid #317082;
                background-color:#FFF;
                -moz-user-select:none;
        }
        #dhtmlgoodies_dragDropContainer ul{        /* General rules for all <ul> */
                margin-top:0px;
                margin-left:0px;
                margin-bottom:0px;
                padding:0px;
        }
       
        #dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{        /* Movable items, i.e. <LI> */
                list-style-type:none;
                height:15px;
                padding:0px;
                margin-bottom:0px;
                cursor:pointer;
                font-size:0.9em;
        }

        li#indicateDestination{        /* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */

                background-color:#FFFFFF;
        }
               
        /* LEFT COLUMN CSS */
        div#dhtmlgoodies_listOfItems{        /* Left column "Available students" */
               
                float:left;
                padding-left:0px;
                padding-right:0px;
               
                /* CSS HACK */
                width: 90px;        /* IE 5.x */
                width/* */:/**/90px;        /* Other browsers */
                width: /**/90px;
                               
        }
        #dhtmlgoodies_listOfItems ul{        /* Left(Sources) column <ul> */
                height:400px;       

        }
               
        div#dhtmlgoodies_listOfItems div{
                border:0px solid #999;               
        }
        div#dhtmlgoodies_listOfItems div ul{        /* Left column <ul> */
                margin-left:0px;        /* Space at the left of list - the arrow will be positioned there */
        }
        #dhtmlgoodies_listOfItems div p{        /* Heading above left column */
                margin:40px;       
                font-weight:bold;
                padding-left:9px;
                background-color:#FFFFFF;       
                color:#FFFFFF;
                margin-bottom:5px;
        }
        /* END LEFT COLUMN CSS */
       
        #dhtmlgoodies_dragDropContainer .mouseover{        /* Mouse over effect DIV box in right column */
                background-color:#E2EBED;
                border:1px solid #317082;
        }
       
        /* Start main container CSS */
       
        div#dhtmlgoodies_mainContainer{        /* Right column DIV */
                width:90px;
                float:left;       
        }
        #dhtmlgoodies_mainContainer div{        /* Parent <div> of small boxes */
                float:left;
                margin-right:0px;
                margin-bottom:10px;
                margin-top:1px;
                border:1px solid #999;

                /* CSS HACK */
                width: 90px;        /* IE 5.x */
                width/* */:/**/90px;        /* Other browsers */
                width: /**/90px;
                               
        }
        #dhtmlgoodies_mainContainer div ul{
                margin-left:0px;
        }
       
        #dhtmlgoodies_mainContainer div p{        /* Heading above small boxes */
                margin:0px;
                padding:0px;
                padding-left:0px;
                font-weight:bold;
                background-color:#FFFFFF;       
                color:#FFF;       
                margin-bottom:0px;
        }
       
        #dhtmlgoodies_mainContainer ul{        /*White cells ,i.e <ul> */
                width:90px;
                height:90px;       
                border:0px;       
                margin-bottom:0px;
                overflow:hidden;
                background-color:#FFFFFF;       
               
        }
       
        #dragContent{        /* Drag container */
                position:absolute;
                width:150px;
                height:20px;
                display:none;
                margin:0px;
                padding:0px;
                z-index:2000;
        }

        #dragDropIndicator{        /* DIV for the small arrow */
                position:absolute;
                width:7px;
                height:10px;
                display:none;
                z-index:1000;
                margin:0px;
                padding:0px;
        }
        </style>
        <style type="text/css" media="print">
        div#dhtmlgoodies_listOfItems{
                display:none;
        }
        body{
        background-color:#FFF;
        margin-left: 20px;
        margin-top: 0px;
        margin-right: 20px;
        margin-bottom: 50px;
        }
        img{
                display:none;
        }
        #dhtmlgoodies_dragDropContainer{
                border:0px;
                width:0%;
        }
        </style>       
       
       
        <script type="text/javascript">               
        /* VARIABLES YOU COULD MODIFY */
        var boxSizeArray = [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6];        // Array indicating how many items there is rooom for in the right column ULs
       
        var arrow_offsetX = -5;        // Offset X - position of small arrow
        var arrow_offsetY = 0;        // Offset Y - position of small arrow
       
        var arrow_offsetX_firefox = -6;        // Firefox - offset X small arrow
        var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow
       
        var verticalSpaceBetweenListItems = 1;        // Pixels space between one <li> and next       
                                                                                        // Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li
       
                                                                                       
        var indicateDestionationByUseOfArrow = true;        // Display arrow to indicate where object will be dropped(false = use rectangle)

        var cloneSourceItems = true;        // Items picked from main container will be cloned(i.e. "copy" instead of "cut").       
        var cloneAllowDuplicates = true;        // Allow multiple instances of an item inside a small box(example: drag Student 1 to team A twice
       
        /* END VARIABLES YOU COULD MODIFY */
       
        var dragDropTopContainer = false;
        var dragTimer = -1;
        var dragContentObj = false;
        var contentToBeDragged = false;        // Reference to dragged <li>
        var contentToBeDragged_src = false;        // Reference to parent of <li> before drag started
        var contentToBeDragged_next = false;        // Reference to next sibling of <li> to be dragged
        var destinationObj = false;        // Reference to <UL> or <LI> where element is dropped.
        var dragDropIndicator = false;        // Reference to small arrow indicating where items will be dropped
        var ulPositionArray = new Array();
        var mouseoverObj = false;        // Reference to highlighted DIV
       
        var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
        var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;

       
        var indicateDestinationBox = false;
        function getTopPos(inputObj)
        {               
          var returnValue = inputObj.offsetTop;
          while((inputObj = inputObj.offsetParent) != null){
                  if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
          }
          return returnValue;
        }
       
        function getLeftPos(inputObj)
        {
          var returnValue = inputObj.offsetLeft;
          while((inputObj = inputObj.offsetParent) != null){
                  if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
          }
          return returnValue;
        }
               
        function cancelEvent()
        {
                return false;
        }
        function initDrag(e)        // Mouse button is pressed down on a LI
        {
                if(document.all)e = event;
                var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
                var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
               
                dragTimer = 0;
                dragContentObj.style.left = e.clientX + sl + 'px';
                dragContentObj.style.top = e.clientY + st + 'px';
                contentToBeDragged = this;
                contentToBeDragged_src = this.parentNode;
                contentToBeDragged_next = false;
                if(this.nextSibling){
                        contentToBeDragged_next = this.nextSibling;
                        if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling;
                }
                timerDrag();
                return false;
        }
       
        function timerDrag()
        {
                if(dragTimer>=0 && dragTimer<10){
                        dragTimer++;
                        setTimeout('timerDrag()',10);
                        return;
                }
                if(dragTimer==10){
                       
                        if(cloneSourceItems && contentToBeDragged.parentNode.id=='allItems'){
                                newItem = contentToBeDragged.cloneNode(true);
                                newItem.onmousedown = contentToBeDragged.onmousedown;
                                contentToBeDragged = newItem;
                        }
                        dragContentObj.style.display='block';
                        dragContentObj.appendChild(contentToBeDragged);
                }
        }
       
        function moveDragContent(e)
        {
                if(dragTimer<10){
                        if(contentToBeDragged){
                                if(contentToBeDragged_next){
                                        contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
                                }else{
                                        contentToBeDragged_src.appendChild(contentToBeDragged);
                                }       
                        }
                        return;
                }
                if(document.all)e = event;
                var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
                var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
               
               
                dragContentObj.style.left = e.clientX + sl + 'px';
                dragContentObj.style.top = e.clientY + st + 'px';
               
                if(mouseoverObj)mouseoverObj.className='';
                destinationObj = false;
                dragDropIndicator.style.display='none';
                if(indicateDestinationBox)indicateDestinationBox.style.display='none';
                var x = e.clientX + sl;
                var y = e.clientY + st;
                var width = dragContentObj.offsetWidth;
                var height = dragContentObj.offsetHeight;
               
                var tmpOffsetX = arrow_offsetX;
                var tmpOffsetY = arrow_offsetY;
                if(!document.all){
                        tmpOffsetX = arrow_offsetX_firefox;
                        tmpOffsetY = arrow_offsetY_firefox;
                }

                for(var no=0;no<ulPositionArray.length;no++){
                        var ul_leftPos = ulPositionArray[no]['left'];       
                        var ul_topPos = ulPositionArray[no]['top'];       
                        var ul_height = ulPositionArray[no]['height'];
                        var ul_width = ulPositionArray[no]['width'];
                       
                        if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){
                                var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length;
                                if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--;
                                if(noExisting<boxSizeArray[no-1] || no==0){
                                        dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px';
                                        var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI');
                                       
                                        var clonedItemAllreadyAdded = false;
                                        if(cloneSourceItems && !cloneAllowDuplicates){
                                                for(var liIndex=0;liIndex<subLi.length;liIndex++){
                                                        if(contentToBeDragged.id == subLi[liIndex].id)clonedItemAllreadyAdded = true;
                                                }
                                                if(clonedItemAllreadyAdded)continue;
                                        }
                                       
                                        for(var liIndex=0;liIndex<subLi.length;liIndex++){
                                                var tmpTop = getTopPos(subLi[liIndex]);
                                                if(!indicateDestionationByUseOfArrow){
                                                        if(y<tmpTop){
                                                                destinationObj = subLi[liIndex];
                                                                indicateDestinationBox.style.display='block';
                                                                subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]);
                                                                break;
                                                        }
                                                }else{                                                       
                                                        if(y<tmpTop){
                                                                destinationObj = subLi[liIndex];
                                                                dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px';
                                                                dragDropIndicator.style.display='block';
                                                                break;
                                                        }       
                                                }                                       
                                        }
                                       
                                        if(!indicateDestionationByUseOfArrow){
                                                if(indicateDestinationBox.style.display=='none'){
                                                        indicateDestinationBox.style.display='block';
                                                        ulPositionArray[no]['obj'].appendChild(indicateDestinationBox);
                                                }
                                               
                                        }else{
                                                if(subLi.length>0 && dragDropIndicator.style.display=='none'){
                                                        dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px';
                                                        dragDropIndicator.style.display='block';
                                                }
                                                if(subLi.length==0){
                                                        dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px'
                                                        dragDropIndicator.style.display='block';
                                                }
                                        }
                                       
                                        if(!destinationObj)destinationObj = ulPositionArray[no]['obj'];
                                        mouseoverObj = ulPositionArray[no]['obj'].parentNode;
                                        mouseoverObj.className='mouseover';
                                        return;
                                }
                        }
                }
        }
       
        /* End dragging
        Put <LI> into a destination or back to where it came from.
        */       
        function dragDropEnd(e)
        {
                if(dragTimer==-1)return;
                if(dragTimer<10){
                        dragTimer = -1;
                        return;
                }
                dragTimer = -1;
                if(document.all)e = event;       
               
               
                if(cloneSourceItems && (!destinationObj || (destinationObj && (destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')))){
                        contentToBeDragged.parentNode.removeChild(contentToBeDragged);
                }else{       
                       
                        if(destinationObj){
                                if(destinationObj.tagName=='UL'){
                                        destinationObj.appendChild(contentToBeDragged);
                                }else{
                                        destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj);
                                }
                                mouseoverObj.className='';
                                destinationObj = false;
                                dragDropIndicator.style.display='none';
                                if(indicateDestinationBox){
                                        indicateDestinationBox.style.display='none';
                                        document.body.appendChild(indicateDestinationBox);
                                }
                                contentToBeDragged = false;
                                return;
                        }               
                        if(contentToBeDragged_next){
                                contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
                        }else{
                                contentToBeDragged_src.appendChild(contentToBeDragged);
                        }
                }
                contentToBeDragged = false;
                dragDropIndicator.style.display='none';
                if(indicateDestinationBox){
                        indicateDestinationBox.style.display='none';
                        document.body.appendChild(indicateDestinationBox);
                       
                }
                mouseoverObj = false;
               
        }
       
        /*
        Preparing data to be saved
        */
        function saveDragDropNodes()
        {
                var saveString = "";
                var uls = dragDropTopContainer.getElementsByTagName('UL');
                for(var no=0;no<uls.length;no++){        // LOoping through all <ul>
                        var lis = uls[no].getElementsByTagName('LI');
                        for(var no2=0;no2<lis.length;no2++){
                                if(saveString.length>0)saveString = saveString + ";";
                                saveString = saveString + uls[no].id + '|' + lis[no2].id;
                        }       
                }               
               
                document.getElementById('saveContent').innerHTML = '<h1>Ready to save these nodes:</h1> ' + saveString.replace(/;/g,';<br>') + '<p>Format: ID of ul |(pipe) ID of li;(semicolon)</p><p>You can put these values into a hidden form fields, post it to the server and explode the submitted value there</p>';
               
        }
       
       
                                /* Reset the form */
        function dragDropResetForm()
        {
                var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
                var uls = mainContainer.getElementsByTagName('UL');
                for(var no=0;no<uls.length;no++)
                        dhtmlgoodies_listOfItems.appendChild(uls[no]);                       
       
        }
                       
        function initDragDropScript()
        {
                dragContentObj = document.getElementById('dragContent');
                dragDropIndicator = document.getElementById('dragDropIndicator');
                dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer');
                document.documentElement.onselectstart = cancelEvent;;
                var listItems = dragDropTopContainer.getElementsByTagName('LI');        // Get array containing all <LI>
                var itemHeight = false;
                for(var no=0;no<listItems.length;no++){
                        listItems[no].onmousedown = initDrag;
                        listItems[no].onselectstart = cancelEvent;
                        if(!itemHeight)itemHeight = listItems[no].offsetHeight;
                        if(MSIE && navigatorVersion/1<6){
                                listItems[no].style.cursor='hand';
                        }                       
                }
               
                var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
                var uls = mainContainer.getElementsByTagName('UL');
                itemHeight = itemHeight + verticalSpaceBetweenListItems;
                for(var no=0;no<uls.length;no++){
                        uls[no].style.height = itemHeight * boxSizeArray[no]  + 'px';
                }
               
                var leftContainer = document.getElementById('dhtmlgoodies_listOfItems');
                var itemBox = leftContainer.getElementsByTagName('UL')[0];
               
                document.documentElement.onmousemove = moveDragContent;        // Mouse move event - moving draggable div
                document.documentElement.onmouseup = dragDropEnd;        // Mouse move event - moving draggable div
               
                var ulArray = dragDropTopContainer.getElementsByTagName('UL');
                for(var no=0;no<ulArray.length;no++){
                        ulPositionArray[no] = new Array();
                        ulPositionArray[no]['left'] = getLeftPos(ulArray[no]);       
                        ulPositionArray[no]['top'] = getTopPos(ulArray[no]);       
                        ulPositionArray[no]['width'] = ulArray[no].offsetWidth;
                        ulPositionArray[no]['height'] = ulArray[no].clientHeight;
                        ulPositionArray[no]['obj'] = ulArray[no];
                }
               
                if(!indicateDestionationByUseOfArrow){
                        indicateDestinationBox = document.createElement('LI');
                        indicateDestinationBox.id = 'indicateDestination';
                        indicateDestinationBox.style.display='none';
                        document.body.appendChild(indicateDestinationBox);

                       
                }
        }                                       
               
        window.onload = initDragDropScript;
       

var count=0;
function clickCount(f) {
    count += 1;
    return count;
}

var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
 
function makeDate(x) {
      var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
      now = new Date();
      now = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0); // midnight
      var theDay = new Date(now.getTime()+(x*24*60*60*1000));
      return days[theDay.getDay()] +  ' ' + theDay.getDate() + '-' + (theDay.getMonth()+1) + '-' + theDay.getFullYear();
}


       
function updateFields(n) {
   
    for(var i=0; i <= 6; i++) {
        document.getElementById("date"+i).innerHTML = makeDate(i+n);
    }
   
  /* document.getElementById("date1").innerHTML = makeDate(n);*/
}

 function resetPage(){
  document.getElementById("userForm").reset();
 }
 

</script>
       
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>

<body>
<div align="center">
  <table width="75%" >
    <tr>
      <td height="56" colspan="2"><div align="center">
        <p class="style2"><img src="imagesCAYG1FYC.jpg" width="105" height="40" align="left"><span class="style3"><img src="CRISLOGO.JPG" width="69" height="40" align="right"></span></p>
        <p class="style2"><span class="style3">INCIDENT MANAGEMENT SYSTEM</span></p>
      </div></td>
    </tr>
   
  </table>

<div id="dhtmlgoodies_dragDropContainer">

<div align="left">
  <table width="700" height="300" border="1"  align="left">
    <tr bgcolor="#99CCFF"><td width="66"><div align="left">Day/ Time</div></td>
    <td width="92" id="date0"><script type="text/javascript">document.write(makeDate(0));</script></td>
    <td width="92" id="date1"><script type="text/javascript">document.write(makeDate(1));</script></td>   
        <td width="92" id="date2"><script type="text/javascript">document.write(makeDate(2));</script></td>   
        <td width="92" id="date3"><script type="text/javascript">document.write(makeDate(3));</script></td>   
        <td width="92" id="date4"><script type="text/javascript">document.write(makeDate(4));</script></td>   
        <td width="92" id="date5"><script type="text/javascript">document.write(makeDate(5));</script></td>
        <td width="92" id="date6"><script type="text/javascript">document.write(makeDate(6));</script></td>
    <td  width="90">Names</td>
    </tr>
    <tr>
      <td height="30" bgcolor="#99CCFF"><p>6:00am-</p>
      <p>2:00pm</p></td>
      <td bgcolor="#FFFFFF">
                                                                            <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2"></ul>
                                  </div>
        </div>
      </td>
      <td bgcolor="#FFFFFF">
                              <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2"></ul>
                                  </div>
        </div>             
      </td>
      <td bgcolor="#FFFFFF">
                  <div id="dhtmlgoodies_mainContainer">
                    <!-- ONE <UL> for each "room" -->
                    <div>
                        <ul id="box2">
                      </ul>
                    </div>
        </div>
                                   
        </td>
      <td bgcolor="#FFFFFF">
          <div id="dhtmlgoodies_mainContainer">
            <!-- ONE <UL> for each "room" -->
            <div>
                <ul id="box2">
              </ul>
            </div>
        </div>
                       
        </td>
      <td bgcolor="#FFFFFF">
              <div id="dhtmlgoodies_mainContainer">
                <!-- ONE <UL> for each "room" -->
                <div>
                    <ul id="box2">
                  </ul>
                </div>
        </div>
                               
        </td>
      <td bgcolor="#FFFFFF">
          <div id="dhtmlgoodies_mainContainer">
            <!-- ONE <UL> for each "room" -->
            <div>
                <ul id="box1">
              </ul>
            </div>
        </div>
      </td>
      <td bgcolor="#FFFFFF">               
                                          <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                          </ul>
                                  </div>
        </div> 
      </td>
      <td rowspan="4" bgcolor="#FFCCCC">
          <div id="dhtmlgoodies_listOfItems">
            <div>
              <ul id="allItems">
                <li id="node1">A</li>
                <li id="node2">B</li>
                <li id="node3">C</li>
                <li id="node4">D</li>
                <li id="node5">E</li>
                <li id="node6">F</li>
                <li id="node7">G</li>
                <li id="node8">H</li>
                <li id="node9">I</li>
                <li id="node10">J</li>
                <li id="node11">K</li>
                <li id="node12">L</li>
                <li id="node13">M</li>
                <li id="node14">N</li>
                <li id="node15">O</li>
              </ul>
            </div>
        </div>       
      </td>
    </tr>
    <tr>
      <td bgcolor="#99CCFF"><p>09:30am-</p>
      <p>6:00pm</p></td>
      <td bgcolor="#FFFFFF">
                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                          </ul>
                                  </div>
        </div> 
                       
        </td>
      <td bgcolor="#FFFFFF">
                                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                          </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                          </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                          </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                          </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                          </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                    <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                          </ul>
                                  </div>
        </div> 
      </td>
    </tr>
    <tr>
      <td bgcolor="#99CCFF"><p>02:00pm-</p>
      <p>10:00pm</p></td>
      <td bgcolor="#FFFFFF">
                                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                          </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                          </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                                       
                        </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                            <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2"></ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                            <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                                       
                        </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                                       
                        </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                                       
                        </ul>
                                  </div>
        </div> 
      </td>
    </tr>
    <tr>
      <td height="107" bgcolor="#99CCFF"><p>8:00pm-</p>
      <p>7:00am</p></td>
      <td bgcolor="#FFFFFF">
                                                                        <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                                       
                        </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                            <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                                       
                        </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                            <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                                </ul>
                                                       
          </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                            <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                                       
                        </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                            <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                                </ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                            <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2"></ul>
                                  </div>
        </div> 
      </td>
      <td bgcolor="#FFFFFF">
                                                                            <div id="dhtmlgoodies_mainContainer">
                                        <!-- ONE <UL> for each "room" -->
                                        <div>
                                                <ul id="box2">
                                          </ul>
                                  </div>
        </div> 
      </td>
    </tr>
                         
</table>
 <ul id="dragContent"></ul>
<div id="dragDropIndicator"><img src="arrow.gif"></div>


<div id="footer">
<table align="center">
    <tr>
        <td><input type="button" onclick="history.go(0)" value="CURRENT PAGE"></td>
        <td><a href="#"><button type="button" onclick="updateFields(7 * clickCount());return false;">NEXT</button></a></td>
        <td><div id="dragContent"></div><input type="button" onclick="dragDropResetForm();return false" value="RESET"></td>
    </tr>
</table>
</div>


</body>
</html>



All times are GMT +5.5. The time now is 00:35.