insertBefore question 1

[Sleidia]

Hi

I'm trying to play around with insertBefore() but I don't understand how to enhance my code below in order to have the div moved either above or underneath. The only thing that I'm able to do is move the div at the very bottom

Changing el[0] to el[1] or el[-1] doesn't change anything

function elem_move ( this_id ) {
   
var el = document.getElementById( this_id );
el.parentNode.insertBefore( el, el[0] );

}

Thanks for the help!

 

[tsuji]

[1] this_id as element's id should be unique. el itself would be either null or the reference to the element. el[0] is a problematic notion.

[2] If you want to familiarize the functionality, you can do this which will be well-behaved at all time.
[tt]
function elem_move ( this_id ) {
var el = document.getElementById( this_id );
if (el) {
var cel=el.parentNode.getElementsByTagName(el.tagName);
el.parentNode.insertBefore( el,cel[0] );
}
}[/tt]

 

[Sleidia]

Thanks Tsuji

The problem is that your code makes the div move at the very top of all the stacked divs.

How do I make the div move only one level, either up or down?

 

[tsuji]

If you restrict the move with respect to same tag name, such as div as demo above, you can generalize it a bit like this.
[tt]
function elem_movestep(this_id,nstep) {
//nstep=1 move down 1, nstep=-1 move up 1
var el = document.getElementById( this_id );
var idx;
if (el) {
var cel=el.parentNode.getElementsByTagName(el.tagName);
for (var i=0;i<cel.length;i++) {
if (el==cel) {
idx=i;
break;
}
}
if (idx==null) {
//alert("element not found");
} else {
if ((idx+nstep)>-1 && (idx+nstep)<cel.length) {
var nstep_eff=(nstep<0)?nstep:nstep+1;
el.parentNode.insertBefore(el,cel[idx+nstep_eff]);
} else {
//alert("move steps out of range")
}
}
}
}
[/tt]
There are sure many varying details on how things happen, you have to modify it to fit the need. The details depend on the concrete page design as well that cannot be dealt with here abstractly.

 

[tsuji]

Amendment
Just an after-thought on the stepping forward part, ie and ff may or may not raise runtime error when move to the place of the last position. This version of it may result in better cross-browser behaviour.
[tt]
function elem_movestep(this_id,nstep) {
//nstep=1 move down 1, nstep=-1 move up 1
var el = document.getElementById( this_id );
var idx;
if (el) {
var cel=el.parentNode.getElementsByTagName(el.tagName);
for (var i=0;i<cel.length;i++) {
if (el==cel) {
idx=i;
break;
}
}
if (idx==null) {
//alert("element not found");
} else {
if ((idx+nstep)>-1 && (idx+nstep)<cel.length) {
[red]//[/red]var nstep_eff=(nstep<0)?nstep:nstep+1;
[red]//[/red]el.parentNode.insertBefore(el,cel[idx+nstep_eff]);
[blue]el.parentNode.insertBefore(el, cel[idx+nstep]);
if (nstep>0) {
el.parentNode.insertBefore(cel[idx+nstep],el);
}[/blue]
} else {
//alert("move steps out of range")
}
}
}
}
[/tt]

 

[Sleidia]

$Thanks++ Suji
You saved my life again!