Why doesn't it reser ?

Discussion in 'Web Design, HTML And CSS' started by Naash, Mar 13, 2009.

  1. Naash

    Naash New Member

    Joined:
    Jan 22, 2009
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    0
    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 !
     
    Last edited by a moderator: Mar 13, 2009
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,336
    Likes Received:
    377
    Trophy Points:
    83
    Attachment removed. Try to post the code in the post
     
  3. Naash

    Naash New Member

    Joined:
    Jan 22, 2009
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    0
    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>
    
    
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice