...

View Full Version : IE is killing me [resolved]



jcdevelopment
01-09-2008, 08:42 PM
I have a div that controlls a list and each li contains a picture, and when i make another list that sits next to it it works fine in FF and then when you go too IE the second list that sits next to the first one drops completeley off the actual div. here is my code

html




<div id="mainContainer">
<!-- ONE <UL> for each "room" -->

<div style="float:left; clear:left;">
<p>New Uploads</p>
<ul id="New_Uploads_not_stored1" style="float:left; clear:left;">
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>

</ul>
<ul id="New_Uploads_not_stored2">
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>

</ul>
</div>

<div style="float:right;">
<p>Delete Column</p>
<ul id="New_Uploads_not_stored" style="float:left; clear:left;">
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>
</ul>
<ul id="New_Uploads_not_stored2">
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>
</ul>
</div>




heres the css




div#mainContainer{ /* Right column DIV */
width:600px;
loat:right;
height:inherit;
}

#mainContainer div{ /* Parent <div> of small boxes */
height:660px;
margin-bottom:10px;
margin-top:0px;
border:1px solid #999;
/* CSS HACK */
width: 280px; /* IE 5.x */
width/* */:/**/280px; /* Other browsers */
width: /**/280px;
}

#mainContainer div ul{
padding:1px;
}

#mainContainer div p{ /* Heading above small boxes */
margin:0px;
padding:0px;
padding-left:12px;
font-weight:bold;
background-color:#317082;
color:#FFF;
margin-bottom:5px;
}

#mainContainer ul{ /* Small box in right column ,i.e <ul> */
width:152px;
height:80px;
border:0px;
margin-bottom:0px;
overflow:hidden;
}



I know its not the cleanest code and i wish i could give a link but hopefully you can work with this and let me know why IE doesnt do this correctly.

If there is anything else please let me know

Excavator
01-09-2008, 09:11 PM
This is the first thing I saw:



loat:right;

Then I checked your snippet in the validator and it shows Failed validation, 77 Errors. I realize you're aware it's "not the cleanest code" but some things need to be done right to work.
============

These seem to be conflicting:

div#mainContainer{ /* Right column DIV */
width:600px;
loat:right;
height:inherit;
}

#mainContainer div{ /* Parent <div> of small boxes */
height:660px;
margin-bottom:10px;
margin-top:0px;
border:1px solid #999;
/* CSS HACK */
width: 280px; /* IE 5.x */
width/* */:/**/280px; /* Other browsers */
width: /**/280px;
}


Have a look at this instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#mainContainer{ /* Right column DIV */
width:600px;
float:right;
height:inherit;
background: #CCFF00;
}
#one {
float: left;
}
#two {
float: right;
}
#mainContainer p{ /* Heading above small boxes */
margin:0 0 5px 0;
padding:0 0 0 12px;
font-weight:bold;
background:#317082;
color:#FFF;
}
#mainContainer ul{ /* Small box in right column ,i.e <ul> */
width:152px;
height:80px;
background: #ccc;
border:none;
margin:0px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="mainContainer">
<!-- ONE <UL> for each "room" -->

<div id="one">
<p>New Uploads</p>
<ul>
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg" /></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg" /></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg" /></li>

</ul>
<ul>
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg" /></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg" /></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg" /></li>

</ul>
<!--end one--></div>

<div id="two">
<p>Delete Column</p>
<ul>
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg" /></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg" /></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg" /></li>
</ul>
<ul>
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg" /></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg" /></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg" /></li>
</ul>
<!--end two--></div>
<!--end mainContainer--></div>
</body>
</html>


Errors from your ul are still there. See my suggestion and links about validating in my sig below.

jcdevelopment
01-09-2008, 09:32 PM
well i can give you my whole code and you can take a look at it because i only had one error with my whole code, in fact thats better that way u can load it into a .html file and look




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Drag and Drop to the columns</title>





<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
background-color:#E2EBED;
}
#footer{
height:30px;
vertical-align:middle;
text-align:right;
clear:both;
padding-right:3px;
background-color:#317082;
margin-top:2px;
width:790px;
}
#footer form{
margin:0px;
margin-top:2px;
}
#dragDropContainer{ /* Main container for script */
width:900px;
height:800px;
border:1px solid #317082;
background-color:#FFF;
-moz-user-select:none;

}
#dragDropContainer ul{ /* General rules for all <ul> */
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
padding:2px;
}

#dragDropContainer li,#dragContent li,li#indicateDestination{ /* Movable items, i.e. <LI> */
list-style-type:none;
width:99px;
height:76px;
background-color:#EEE;
border:1px solid #000;
padding:2px;
margin-bottom:2px;
cursor:move;
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 */
border:1px dotted #600;
background-color:#FFF;
}


/* LEFT COLUMN CSS */
div#listOfItems{ /* Left column "Page Pictures" */
float:left;
padding-left:10px;
padding-right:10px;
height:660px;
/* CSS HACK */
width: 280px; /* IE 5.x */
width/* */:/**/280px; /* Other browsers */
width: /**/280px;

}
#listOfItems ul{ /* Left(Sources) column <ul> */
height:600px;


}
#listOfItems ul li{ /* Left(Sources) column <ul> */



}

div#listOfItems div{
border:1px solid #999;
}
div#listOfItems div ul{ /* Left column <ul> */

height:650px; /* Space at the left of list - the arrow will be positioned there */
}
#listOfItems div p{ /* Heading above left column */
margin:0px;
font-weight:bold;
padding-left:12px;
background-color:#317082;
color:#FFF;
margin-bottom:5px;
}
/* END LEFT COLUMN CSS */

#dragDropContainer .mouseover{ /* Mouse over effect DIV box in right column */
background-color:#E2EBED;
border:1px solid #317082;
}

/* Start main container CSS */

div#mainContainer{ /* Right column DIV */
width:600px;
float:right;
height:inherit;
}
#mainContainer div{ /* Parent <div> of small boxes */
height:660px;

margin-bottom:10px;
margin-top:0px;
border:1px solid #999;

/* CSS HACK */
width: 280px; /* IE 5.x */
width/* */:/**/280px; /* Other browsers */
width: /**/280px;

}
#mainContainer div ul{
padding:1px;

}

#mainContainer div p{ /* Heading above small boxes */
margin:0px;
padding:0px;
padding-left:12px;
font-weight:bold;
background-color:#317082;
color:#FFF;
margin-bottom:5px;
}

#mainContainer ul{ /* Small box in right column ,i.e <ul> */
width:152px;
height:80px;
border:0px;
margin-bottom:0px;
overflow:hidden;

}

#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#listOfItems{
display:none;
}
body{
background-color:#FFF;
}
img{
width:99px;
height:76px;
border:0px;
padding:0px;
margin:0px;
}
#dragDropContainer{
border:0px;
width:100%;

}
</style>
<script type="text/javascript">
/**************************************************************************************************** ********




var boxSizeArray = [12,12,12,12,12]; // 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 = 3; // Pixels space between one <li> and next
// Same value or higher as margin bottom in CSS for #dragDropContainer ul li,#dragContent li


var indicateDestionationByUseOfArrow = false; // Display arrow to indicate where object will be dropped(false = use rectangle)

var cloneSourceItems = false; // 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 = '<h2>Placement of pictures in the rows:</h2> ' + saveString.replace(/;/g,';<br>');

}

function initDragDropScript()
{
dragContentObj = document.getElementById('dragContent');
dragDropIndicator = document.getElementById('dragDropIndicator');
dragDropTopContainer = document.getElementById('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('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('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;
</script>
</head>
<body>

<div id="dragDropContainer">



<div id="listOfItems">
<div>
<p>Page Pictures</p>
<ul id="Page_pictures_row1" style="float:left; clear:left;">
<li id="pic1"><img src="gfx/drag_column_picture/pic1.jpg">1</li>
<li id="pic2"><img src="gfx/drag_column_picture/pic2.jpg">2</li>
<li id="pic3"><img src="gfx/drag_column_picture/Pic3.jpg">3</li>
<li id="pic4"><img src="gfx/drag_column_picture/Pic4.jpg">4</li>
<li id="pic5"><img src="gfx/drag_column_picture/Pic5.jpg">5</li>
</ul>



<ul id="Page_pictures_row2" >
<li id="pic6"><img src="gfx/drag_column_picture/Pic6.jpg">6</li>
<li id="pic7"><img src="gfx/drag_column_picture/Pic7.jpg">7</li>
<li id="pic8"><img src="gfx/drag_column_picture/Pic8.jpg">8</li>
<li id="pic9"><img src="gfx/drag_column_picture/Pic9.jpg">9</li>
<li id="pic10"><img src="gfx/drag_column_picture/Pic10.jpg">10</li>
</ul>
</div>
</div>
<div id="mainContainer">
<!-- ONE <UL> for each "room" -->

<div style="float:left; clear:left;">
<p>New Uploads</p>
<ul id="New_Uploads_not_stored1" style="float:left; clear:left;">
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>

</ul>
<ul id="New_Uploads_not_stored2">
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>

</ul>
</div>

<div style="float:right;">
<p>Delete Column</p>
<ul id="New_Uploads_not_stored" style="float:left; clear:left;">
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>

</ul>
<ul id="New_Uploads_not_stored2">
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>

</ul>
</div>

</div>
</div>
<div id="footer">
<form action="aPage.html" method="post"><input type="button" onclick="saveDragDropNodes()" value="Save"></form>
</div>
<ul id="dragContent"></ul>
<div id="saveContent"></div>


<body>
</html>



I think thats all of it, i appreciate anyone taking a look at this...

Excavator
01-09-2008, 09:53 PM
Hmm, maybe you need to check again.
Did you look at the solution in my first post? Did you try it at all?


This is the validation results of the code you just posted:

Validation Output: 38 Errors
Line 461, Column 96: end tag for element "H2" which is not open.
…lacement of pictures in the rows:</h2> ' + saveString.replace(/;/g,';<br>');✉
The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occurred in a script section of your document, you should probably read this FAQ entry.

/...snip..../

Line 558, Column 20: ID "PIC11" already defined.
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>✉
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 552, Column 20: ID "PIC11" first defined here.
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li> Line 558, Column 71: required attribute "ALT" not specified.
…"><img src="gfx/drag_column_picture/Pic11.jpg"></li>✉
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Line 559, Column 20: ID "PIC12" already defined.
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>✉
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 553, Column 20: ID "PIC12" first defined here.
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li> Line 559, Column 71: required attribute "ALT" not specified.
…"><img src="gfx/drag_column_picture/pic12.jpg"></li>✉
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Line 560, Column 20: ID "PIC13" already defined.
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>✉
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 554, Column 20: ID "PIC13" first defined here.
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li> Line 560, Column 71: required attribute "ALT" not specified.
…"><img src="gfx/drag_column_picture/pic13.jpg"></li>✉
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.


/...snip.../


Line 573, Column 20: ID "NEW_UPLOADS_NOT_STORED2" already defined.
<ul id="New_Uploads_not_stored2">✉
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Line 557, Column 20: ID "NEW_UPLOADS_NOT_STORED2" first defined here.
<ul id="New_Uploads_not_stored2"> Line 574, Column 20: ID "PIC11" already defined.
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>✉
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
/... snip .../
Line 584, Column 104: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag.
…ck="saveDragDropNodes()" value="Save"></form>✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Line 584, Column 111: end tag for "FORM" which is not finished.
…eDragDropNodes()" value="Save"></form>✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.

Line 586, Column 25: end tag for "UL" which is not finished.
<ul id="dragContent"></ul>✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.

Line 590, Column 5: document type does not allow element "BODY" here.
<body>✉
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

Line 591, Column 6: "BODY" not finished but containing element ended.
</html>✉


All 3 of those lists float next to each other in IE6, IE7 and FF. No float drop...

jcdevelopment
01-09-2008, 09:56 PM
im sorry, are you using the w3c validator in the FF tool bar, or are you using a different one, sorry stupid question. I will check the suggestions that u posted also

update
[sorry i just checked the html im stupid, i will fixx all of the errors and keep and update]

Excavator
01-09-2008, 10:05 PM
http://validator.w3.org/
Validate often DURING development - Use it like a spellcheker

jcdevelopment
01-09-2008, 10:16 PM
ok, sorry about that, i have corrected all but 3, and those have nothing to do woth the div tags, they are just output info for me. So now im left with the same problem and i cant seem to figure out why in the hell it keeps completley leaving the div. Could it possibly be my JS?

Excavator
01-10-2008, 12:54 AM
Can you put up a test site? That would sure help!

jcdevelopment
01-10-2008, 03:47 PM
I would the only problem is that its a secured Intranet, and you have to have a password to view the site!

effpeetee
01-11-2008, 04:26 PM
I would the only problem is that its a secured Intranet, and you have to have a password to view the site!

I have put the original code here with some of my thumbs.:D

http://www.exitfegs.co.uk/TEST.html

Frank

jcdevelopment
01-11-2008, 04:33 PM
thanks effpeetee, i know you have pics but right now im concerened about this stupid folat problem, put this in the HTML now and over write the existing




<div id="dragDropContainer">

<div id="listOfItems">
<div>
<p>Page Pics</p>
<ul id="featured_pics">
<li id="pic1">Student A</li>
<li id="pic2">Student B</li>
<li id="pic3">Student C</li>
<li id="pic4">Student D</li>
<li id="pic5">Student E</li>
<li id="pic6">Student F</li>
<li id="pic7">Student G</li>
<li id="pic8">Student H</li>
<li id="pic9">Student I</li>
<li id="pic10">Student J</li>

</ul>
</div>
</div>
<div id="mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<p>Uploaded Pics</p>
<ul id="uploaded_pics" style="float:left; clear:left;">
<li id="node11">Student 1</li>
</ul>
<ul id="uploaded_pics2">
<li id="node12">Student 2</li>
</ul>
</div>
<div>
<p>Delete</p>
<ul id="delete" style="float:left; clear:left;">
<li id="node13">Student 4</li>
</ul>
<ul id="delete2">
<li id="node14">Student 3</li>
</ul>
</div>

</div>
</div>



I dont know why the JS is not working but as long as it works for me

effpeetee
01-11-2008, 05:08 PM
I've altered it and sent it across, but I do not know what to do with the final piece of (Jsript?) code.

Frank

Some small errors.

Validation Output: 3 Errors

1. Error Line 461, Column 96: end tag for element "H2" which is not open.

…lacement of pictures in the rows:</h2> ' + saveString.replace(/;/g,';<br>');



The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occurred in a script section of your document, you should probably read this FAQ entry.
2. Error Line 563, Column 5: document type does not allow element "BODY" here.

<body>



The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
3. Error Line 564, Column 6: "BODY" not finished but containing element ended.

</html>

CSS Validation:
URI : http://www.exitfegs.co.uk/TEST.html
12 body Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

body {
font-family : "Trebuchet MS", "Lucida Sans Unicode", Arial, sans-serif;
background-color : #e2ebed;
}

jcdevelopment
01-11-2008, 05:16 PM
ok, i tell you what, if you can do me a favor, im going to post all of my code, let me just give credit where credit is due, if you like this code please visit here (http://www.dhtmlgoddies.com), its one of the best sites. Ok now that i have gooten that out, replace all of the code with this, i really appreciate this.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Drag and Drop to the columns</title>
<meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)">
<META NAME="Generator" CONTENT="Alf Magne Kalleland (www.dhtmlgoodies.com)">
<meta name="KeyWords" content="Drag and drop script,DHTML drag and drop,drag,drop">
<meta name="Description" content="A library of DHTML and Ajax scripts">
<meta name="country" content="Norway">
<meta name="organization-Email" content="post@dhtmlgoodies.com">
<meta name="copyright" content="copyright 2005 - Alf Magne Kalleland">
<meta name="coverage" content="Worldwide">
<meta name="revisit_after" content="30days">
<meta name="title" content="A library DHTML and Ajax scripts - DHTMLgoodies.com">
<meta name="identifier" content="http://www.dhtmlgoodies.com/">
<meta name="language" content="English">
<meta name="robots" content="follow">
<meta name="googlebot" content="index, follow">



<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
background-color:#E2EBED;
}
#footer{
height:30px;
vertical-align:middle;
text-align:right;
clear:both;
padding-right:3px;
background-color:#317082;
margin-top:2px;
width:850px;
}
#footer form{
margin:0px;
margin-top:2px;
}
#dhtmlgoodies_dragDropContainer{ /* Main container for this script */
width:850px;
height:900px;
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:2px;
}

#dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{ /* Movable items, i.e. <LI> */
list-style-type:none;
width:86px;
height:63px;
background-color:#EEE;
border:1px solid #000;
padding:2px;
margin-bottom:2px;
margin-left:1px;
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 */
border:1px dotted #600;
background-color:#FFF;
}


/* LEFT COLUMN CSS */
div#dhtmlgoodies_listOfItems{ /* Left column "Available students" */

float:left;
padding-left:10px;
padding-right:10px;

/* CSS HACK */
width: 180px; /* IE 5.x */
width/* */:/**/160px; /* Other browsers */
width: /**/160px;

}
#dhtmlgoodies_listOfItems ul{ /* Left(Sources) column <ul> */
height:850px;

}

div#dhtmlgoodies_listOfItems div{
border:1px solid #999;
}
div#dhtmlgoodies_listOfItems div ul{ /* Left column <ul> */
margin-left:10px; /* Space at the left of list - the arrow will be positioned there */
}
#dhtmlgoodies_listOfItems div p{ /* Heading above left column */
margin:0px;
font-weight:bold;
padding-left:12px;
background-color:#317082;
color:#FFF;
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:650px;
float:left;
}
#dhtmlgoodies_mainContainer div{ /* Parent <div> of small boxes */
float:left;
height:850px;
margin-right:10px;
margin-bottom:10px;
margin-top:0px;
border:1px solid #999;

/* CSS HACK */
width:300px; /* IE 5.x */
width/* */:/**/300px; /* Other browsers */
width: /**/300px;

}
#dhtmlgoodies_mainContainer div ul{
margin-left:10px;

}

#dhtmlgoodies_mainContainer div p{ /* Heading above small boxes */
margin:0px;
padding:0px;
padding-left:12px;
font-weight:bold;
background-color:#317082;
color:#FFF;
margin-bottom:5px;
}

#dhtmlgoodies_mainContainer ul{ /* Small box in right column ,i.e <ul> */
width:152px;
height:80px;
border:0px;
margin-bottom:0px;
overflow:hidden;

}

#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;
}
img{
display:none;
}
#dhtmlgoodies_dragDropContainer{
border:0px;
width:100&#37;;
}
</style>
<script type="text/javascript">
/**************************************************************************************************** ********
(C) www.dhtmlgoodies.com, November 2005

Update log:

December 20th, 2005 : Version 1.1: Added support for rectangle indicating where object will be dropped
January 11th, 2006: Support for cloning, i.e. "copy & paste" items instead of "cut & paste"
January 18th, 2006: Allowing multiple instances to be dragged to same box(applies to "cloning mode")

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

**************************************************************************************************** ********/

/* VARIABLES YOU COULD MODIFY */
var boxSizeArray = [12,12,12,12,12]; // 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 = 3; // 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 = false; // Display arrow to indicate where object will be dropped(false = use rectangle)

var cloneSourceItems = false; // 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>';

}

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++){



i have to continue it, my text was tto long, so just add the next post to the code.

jcdevelopment
01-11-2008, 05:17 PM
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;
</script>
</head>
<body>
<p style="width:500px; text-align:center;">Take the uploaded pictures in the middle column and drop them into the existing first column hold your pictures. Then discard any pictures you no longer want into the third column.</p>
<div id="dhtmlgoodies_dragDropContainer">

<div id="dhtmlgoodies_listOfItems">
<div>
<p>Page Pics</p>
<ul id="featured_pics">
<li id="pic1">Student A</li>
<li id="pic2">Student B</li>
<li id="pic3">Student C</li>
<li id="pic4">Student D</li>
<li id="pic5">Student E</li>
<li id="pic6">Student F</li>
<li id="pic7">Student G</li>
<li id="pic8">Student H</li>
<li id="pic9">Student I</li>
<li id="pic10">Student J</li>

</ul>
</div>
</div>
<div id="dhtmlgoodies_mainContainer">
<!-- ONE <UL> for each "room" -->
<div>
<p>Uploaded Pics</p>
<ul id="uploaded_pics" style="float:left; clear:left;">
<li id="node11">Student 1</li>
<li id="node12">Student 2</li>
<li id="node13">Student 2</li>
<li id="node14">Student 2</li>
<li id="node15">Student 2</li>
<li id="node16">Student 2</li>
<li id="node17">Student 2</li>
</ul>
<ul id="uploaded_pics2">
<li id="node18">Student 2</li>
<li id="node19">Student 2</li>
<li id="node20">Student 2</li>
<li id="node21">Student 2</li>
<li id="node22">Student 2</li>
<li id="node23">Student 2</li>

</ul>
</div>
<div>
<p>Delete</p>
<ul id="delete" style="float:left; clear:left;">
<li id="node24">Student 4</li>
<li id="node25">Student 4</li>
<li id="node26">Student 4</li>
<li id="node27">Student 4</li>
<li id="node28">Student 4</li>
</ul>
<ul id="delete2">
<li id="node29">Student 3</li>
<li id="node30">Student 4</li>
<li id="node31">Student 4</li>
<li id="node32">Student 4</li>
<li id="node33">Student 4</li>
</ul>
</div>

</div>
</div>
<div id="footer">
<form action="aPage.html" method="post"><input type="button" onclick="saveDragDropNodes()" value="Save"></form>
</div>
<ul id="dragContent"></ul>
<div id="dragDropIndicator"><img src="images/insert.gif"></div>
<div id="saveContent"></div>


<SCRIPT LANGUAGE="JavaScript" SRC="http://kona.kontera.com/javascript/lib/KonaLibInline.js"></SCRIPT>
</body>
</html>




Thanks effpeetee!!

now if you look at this in IE, the folat is not working and in FF its exactly what i need. Any help would be great guys!!

effpeetee
01-11-2008, 05:49 PM
I've done that and sent it over but I still do not know what to do with this.:confused:

for(var Life=0;no<notEasy.ever;no++){
notEasy[no].onmousedown = getOverIt;

I have just left it out for the time being.

Frank

http://www.exitfegs.co.uk/TEST.html

jcdevelopment
01-11-2008, 05:51 PM
oh, haha, thats just my signature, sorry its something stupid i did, thanks for posting it, i owe you one.

What i need is the IE version to look like the FF one. I have made basically two columns and floated them correctly but IE wont do it right.

Excavator
01-11-2008, 06:02 PM
Good morning jcdevelopment,
Have you ever seen this page? (http://www.positioniseverything.net/explorer.html) Good list of bugs there ... could be you've invoked one.

jcdevelopment
01-11-2008, 06:14 PM
Oh man, thank god, i cant thank you enough Excavator. I went there and i realized that it was a display inline problem. Thank you guys so much for all of your help!!

jcdevelopment
01-11-2008, 06:37 PM
im sorry to double post, but i have one last little question

i know there is a way for only IE to read or ignore a line of code, and i think it has to do with these




/**/



but im not sure how or what to do.
I want FF to read one thing and have IE read another like so




FF to read {display:inline-block;}

IE to read {display:inline;}



thanks for help once again!!!

effpeetee
01-11-2008, 07:09 PM
http://www.webmasterworld.com/forum83/4161.htm

This may help.

PS.

My IE7 has stopped working. Any ideas on how to re-install. Stupid MS wont let me erase it and wont let me install it again because it says it's already there. CATCH 22 WINDOZEY style.

Frankl

jcdevelopment
01-11-2008, 07:27 PM
thanks, that will work i will look more into it, as far as re-installing IE, that im not sure of. I can only do so many things to a computer and i have never run into that problem. Good luck though..

[UPDATE]

Ok i looked through the link you sent me and it really doesnt help, i do though now know more about display:inline. I just need to hide the inline from FF and let FF see inline-block.

Any Suggestions?

effpeetee
01-11-2008, 09:01 PM
http://www.javascriptkit.com/dhtmltutors/csshacks.shtml

This should help you.:thumbsup:

I got around the IE7 problem by accepting Googles version. I guessed that they would have no trouble installing their one.

No problem, Straight in it went.:D

Frank

jcdevelopment
01-11-2008, 09:14 PM
thank you, that worked alot better!!

effpeetee
01-11-2008, 09:17 PM
http://exitfegs.co.uk/Sources.html

There are loads of sources here.

Frank

jcdevelopment
01-11-2008, 09:25 PM
thank you, i have book marked it, although you have a few broken links, just a suggestion...

effpeetee
01-11-2008, 10:29 PM
thank you, i have book marked it, although you have a few broken links, just a suggestion...
Yes! Some of the thoughtless folk have the temerity to alter their site without my permission. I shall need to send a Gunboat or two.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum