Closed Thread Icon

Topic awaiting preservation: DIV layers not showing up after appendChild in IE (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=8324" title="Pages that link to Topic awaiting preservation: DIV layers not showing up after appendChild in IE (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: DIV layers not showing up after appendChild in IE <span class="small">(Page 1 of 1)</span>\

 
meccaman
Nervous Wreck (II) Inmate

From:
Insane since: Aug 2002

posted posted 09-27-2002 19:56

I basically have two container DIVs filled with childNodes that are divs. I am moving any selected divs from one container to the other (think of the Available columns/Selected Columns GUI in SQLServer's DTS Data Driven Query Task Properties, where you have four buttons between the two lists move all to, move selected to, move all from, move selected from) Hopefully, you get my drift. Anyway, I have everything moving correctly, the actual content are just names and they are being sorted alphabetically, and that works fine. Now the problem, I also am displaying the lines with the even line = grey, odd line = white look. I do this on both containers the source container works fine, the destination container however does not display the contents until the first element (initially the only visible one) is click then the GUI is rendered with everything displayed. I've also noticed that if I move say 10 items to the destination container and I'm working with a newly loaded page, only the first item moved is rendered. I click it, then the other nine appear sorted and colored correctly. Now say I remove (pick a number), everything looks fine. Now say I add an amount greater than 10, only the top ten are displayed until I click one of them, now they are all displayed and from that point on, that number will be displayed correctly without a click (Does that make sense?). I've been pulling my hair out over this because the two containers use the same source to sort and color, and the source container works correctly, but the destination container doesn't.
When I don't set colors for the destination, it works fine, but as soon as I go to set the className to the appropriate class it doesn't display right away, only after I click an item in the container. Hopefully my problem makes sense. Let me know an I'll try to better clarify.

-meccaman

I wish I could give a URL for the actually page but I can't, however here is the javascript source:

code:
function _sortList(destination) {
var dest = document.getElementById(destination);
var itemStr = "";

for (x = 0; x < dest.childNodes.length; x++) {
itemStr += dest.childNodes.item(x).id;

if (x < dest.childNodes.length - 1) {
itemStr += ",";
}
}

var itemArr = itemStr.split(',');
var itemNode = null;
var replacedNode = null;

itemArr.sort();

for (x = 0; x < dest.childNodes.length; x++) {
if (dest.childNodes.item(x).id == itemArr[x]) continue;

itemNode = document.getElementById(itemArr[x]);
replacedNode = dest.replaceChild(itemNode, dest.childNodes.item(x));
dest.appendChild(replacedNode);
x--;
}

itemArr = null;
itemNode = null;
replaceNode = null;
dest = null;
}

function _correctLineItems(obj) {
var line = document.getElementById(obj);

for (x = 0; x < line.childNodes.length; x++) {
if (x % 2 == 0) {
line.childNodes.item(x).className = "ptitEvenLineItem";
} else {
line.childNodes.item(x).className = "ptitOddLineItem";
}
}

line = null;
}

function _updateListCount(obj, num) {
var count = document.getElementById(obj + "_count");

count.innerText = num;
count = null;
}

function onClickMoveFromTo(source, destination, doAll) {
var src = document.getElementById(source);
var dest = document.getElementById(destination);
var item = src.childNodes.item(0);
var nextItem = null;

while (item != null) {
nextItem = item.nextSibling;

if (parseInt(item.selected) == 1 &#0124; &#0124; doAll) {
if (parseInt(item.selected) == 1) {
item.style.backgroundColor = '';
item.style.color = 'black';
item.selected = 0;
}

dest.appendChild(src.removeChild(item));
}

item = nextItem;
}

var srcCount = src.childNodes.length;
var destCount = dest.childNodes.length;

src = null;
dest = null;

_sortList(destination);
_correctLineItems(source);
_correctLineItems(destination);
_updateListCount(source, srcCount);
_updateListCount(destination, destCount);
}



Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 09-27-2002 21:58

That sounds reeeeally complicated. I got lost. Any chance of seeing an example?

meccaman
Nervous Wreck (II) Inmate

From:
Insane since: Aug 2002

posted posted 09-27-2002 23:48

Slime I sent the code to you via email bc I don't have a site that I can use.

meccaman
Nervous Wreck (II) Inmate

From:
Insane since: Aug 2002

posted posted 09-28-2002 02:56

Slime thanks for taking the time to look at that for me. After spending countless cycles on the web searching I just replaced the divs within my container div with spans (I probably should have done that from the start) and it worked. I still haven't discovered why the divs behaved that way. I'll save that stress for another day....

« BackwardsOnwards »

Show Forum Drop Down Menu