Broad Question

[evanburen]

I'm looking for possible ways of doing this with javascript so this
question is pretty broad but I have a string like this coming from a
database.

strDivOrder = "Div3,Div5,Div1,Div2"

The string could contain values from Div1 to Div16 in any order. I
want to arrange 16 div sections on a page based on which values are in
strDivOrder. In this example, Div3 would be displayed first on the
page, Div5 would be second etc.

For example,

<div id="Div1">
'This should be position 3 on the page
</div>

<div id="Div2">
'This should be position 4 on the page
</div>

<div id="Div3">
'This should be position 1 on the page
</div>

<div id="Div4">
'This should not be displayed at all
</div>

<div id="Div5">
'This should be position 2 on the page
</div>

<div id="Div6">
'This should not be displayed at all
</div>

<div id="Div7">
'This should not be displayed at all
</div>

 

[Ivo van Sandick]

I'm looking for possible ways of doing this with javascript so this
question is pretty broad but I have a string like this coming from a
database.

strDivOrder = "Div3,Div5,Div1,Div2"

The string could contain values from Div1 to Div16 in any order. I
want to arrange 16 div sections on a page based on which values are in
strDivOrder. In this example, Div3 would be displayed first on the
page, Div5 would be second etc.

First choice to make is, should the actual DOMnodes be re arranged in the
order dictated by the string, or is it enough to show them as such on the
screen? If the latter, it should be sufficient to make them all 'position'
'absolute', and then set each 'top' to a multiple of the element's id index
in the string, plus any initial offset. Any div not occuring in the sring is
set to 'display' 'none' et presto.

//let's assume all div's start with 'display' 'none'
var a = strDivOrder.split( ',' ), i = a.length, o, s;
while(i--) {
if( (o=document.getElementById( a )) ) {
s = o.style;
s.display = 'block';
s.postion = 'absolute';
s.top = i * 30 + 'px'; // assume they are 28 high or so
}
}

untested.
hth
ivo
http://www.ariel.shakespearians.com/

 

[evanburen]

Very nice, thank. Bit I would actually want the div areas displayed on
the page in the same order as in the strDivOrder string

 

[evanburen]

Very nice, thanks. But I actually need the div nodes displayed in the
same order as specified in strDivOrder.

 

[RobG]

Very nice, thanks.

What is?

But I actually need the div nodes displayed in the
same order as specified in strDivOrder.

Always handy to have a go yourself first.

The various methods for inserting nodes like appendChild or insertBefore
if given an argument of an existing node will move it (that is, remove
it from the document tree and insert it where you specify).

<URL:http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727>


Trivial example:

<script type="text/javascript">
function doOrder(id, idList)
{
var idArray = idList.split(',');
var box = document.getElementById(id);
for (var i=0, len=idArray.length; i<len; ++i){
box.appendChild(document.getElementById(idArray))
}
}
</script>

<input type="button" value="Order 4 2 3 1"
onclick="doOrder('container', 'div-04,div-02,div-03,div-01');">
<input type="button" value="Order 1 4 2 3"
onclick="doOrder('container', 'div-01,div-04,div-02,div-03');">
<input type="button" value="Order 1 2 3 4"
onclick="doOrder('container', 'div-01,div-02,div-03,div-04');">
<div id="container">
<div id="div-01">div 01</div>
<div id="div-02">div 02</div>
<div id="div-03">div 03</div>
<div id="div-04">div 04</div>
</div>

 

[Dr John Stockton]

JRS: In article <[email protected]>,
dated Tue, 7 Feb 2006 11:29:31 remote, seen in

I'm looking for possible ways of doing this with javascript so this
question is pretty broad but I have a string like this coming from a
database.

strDivOrder = "Div3,Div5,Div1,Div2"

The string could contain values from Div1 to Div16 in any order. I
want to arrange 16 div sections on a page based on which values are in
strDivOrder. In this example, Div3 would be displayed first on the
page, Div5 would be second etc.

Unless it is classwork, I don't see any real need to do that.

Create divisions D01 to D16 in that order.

Create an object of the form {Div1:"D3", Div2:"D4", ...}; maintain this
object to represent the intended arrangement.

When accessing Div2, for example, use lookup in the Object to determine
that D4 must be used.

Details may need adjustment.


Alternatively, 1 + strDivOrder.indexOf("Div1")/5 will give the
number of the div to be used as Div1, if all the names are the same
length.

In general, when creating names containing digits representing numbers,
it is often wise to pad all numbers to a given length with leading
zeroes.