Hi Nik!
We had the same problem but we solved it by using floating divs and CSS. Maybe you can have a look at http://www.sfeerpunt.nl/sitemanager.asp?pid=4&cid=290&tid=14&page=1 (warning: not yet an Umbraco site! :) )

Good luck!
Martijn Beumers

How about just doing DIV's, and then float them left or right?

That's how I usually do it, except with LI's.

/SoerenS

Hi Soeren,

That is what I have right now and it works fairly well. But, one of bigger issues is sorting. For example, if I sort alphabetically, I wind up with two alphabetically sorted lists that are not continuous. This happens because I have two loops, like so:

[code]

[/code]

So what about doing this (this is sorting the list on the left side and continues on the right side):

[code]

[/code]

Now make the columns float left.

Then you should have a fairly good sorted list.

If you want it so that the first item on the left side is "a" and then first item on the right side is item "b" then just say so and I will put it together for you as well.

Regards,

eh give me sec I got something mixed - just fixing it now.

Aahh, I see. That makes total sense. I didn't think of ending and starting the columns in the same loop. Awesome! I would like to see the horizontal version as well if you have time.

Thanks so much!

-- Nik

Hey Nik,

[code]
]>

version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt" xmlns:umbraco.library="urn:umbraco.library" exclude-result-prefixes="msxml
umbraco.library">

[/code]

This will give you like

a b
c d
e f
g h etc....

Scott

Of course the thing you cannot do is what I just tried to do with the closing div and opening div because xsl is structured strictly so it would not let us do that so I am just working on the other one.

And I am taking the level one page names in reference because then it should work right away on your page.

Scott, good point, I guess the parsing would toss an error there. Thanks for all the help. This is great!

This is the other way :)

[code]
]>

version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt" xmlns:umbraco.library="urn:umbraco.library" exclude-result-prefixes="msxml
umbraco.library">

[/code]

Scott

Wow, that looks complex. Can you explain the subtraction of the position() var? I can sort of see what is going on there, but what is the root of the logic?

Thanks again Scott!
Nik

Can I just jump in here. Are you just testing whether the node position is odd or even? The more elegant way would be:

[code]


[/code]

EDIT

D'oh! I just saw that's what you tried to do in your first post Nik. Just ignore me, I'll go back to sleep...

[quote=nwahlberg]Wow, that looks complex. Can you explain the subtraction of the position() var? I can sort of see what is going on there, but what is the root of the logic?

Thanks again Scott!
Nik[/quote]

Hey Nik,

Yeah the subtraction is needed because imagine that you have 13 items then if you try to multiply the position by 2 then you will get, say for position 7 * 2 = 14 which is more than the total count of nodes so that number 7 will jump to the right side and not stay on the left side.

So you would get a list like this.
1 7
2 8
3 9
4 10
5 11
6 12
- 13

It is not very like that you want that so if you subtract 0.5 from 7 and multiply it by 2 then you would have 7-0.5= 6.5 * 2 = 13 and as we check whether the position is less than or equal to the total number of nodes then post number 7 will stay on the left side.

However this same calculation would not work with the second column here you can do two things.
1. test="(position()-0.51)2 >= count($currentPage/ancestor-or-self::node [@level=1]/node)"
2. test="(position()-0.50)2 > count($currentPage/ancestor-or-self::node [@level=1]/node)"

- First example just says subtract 0.51 so that would be 7-0.51= 6.49 * 2 = 12.98 and as it is NOT greater than or equal to total nodes then it will NOT show number 7 here because the calculation will be 12.98 and the total number is 13.

- Second example says the same as the first column that position 7 - 0.5 = 6.5 * 2 = 13 and as it is NOT greater than the total number of nodes it will also NOT show number 7 here because as the calculation gives 13 and the total number is 13 and it should be more than the total number well there you have it then :)

So list would be like this

1 8
2 9
3 10
4 11
5 12
6 13
7

Oh and of course having in mind that it could also have been 14 then it would be 7-0.5 = 6.5 * 2 = 13 and that would be less than 14 so that would show on left side and 8-0.51 = 7.49 * 2 = 14.98 which is more than total so that would show on left side.

Lastly of course if you have only 1 item then 1-0.5 = 0.5 * 2 = 1 which is equal to 1 which is the total number of nodes so it will show on the left side and 1-0.51 = 0.49 * 2 = 0.98 which is less than 1 which is the total number of nodes so this gives you no result on the right side.

And if you have 2 then 2-0.5 = 1.5 * 2 = 3 which is then showing up on the right side as it is more than the total number of items.

If you did not totally understand I will happily reelaborate on my explanation.

Thanks.

I have skimmed this thread so feel free to shoot me down on this one, but it would not be simple to float each div left, as long as your container div that holds these items has the width of the two items, it will automatically push the next item down onto a new row?

Are you overcomplicating things, when this could be done with CSS?

Like I said I may be missing something though !

Hey warren

You are totally right - this is the first example which just float all left.

But if you want to have to columns and they are sorted first in the left column and then in the right column you have to change a little bit in the code as it can neither be floated left or right to accomplish it.

My first thought was CSS but when positioned absolute it will just take all the items and put them on the same spot, and if you want to do it relatively then you would have to make some other calculations for positioning the items correct.

I am not saying that there are not easier ways to do it - if you want to give it a try I would like to have that solution as well as CSS.

But for my knowledge this should not be straight forward.

If anyone have suggestions on how to optimize the script in this thread please come forward.

Thanks.

OK but if you want to sort content into two columns vertically.

For example

1 6
2 7
3 8
4 9
5 10

Then this would be tricky, firstly when listing out the items in the first column. You would need to know what number of items the first column would go upto before it starts listign out items in the second column.

But goign back to Nik's original problem of listing content horizontally, my CSS sugestion should solve his problem.

1 2
3 4
5 6
7

I think you are overcomplicating the issue to try and order all items in first column first, as the same result could be achieved if the end user rearranged and sorted the list in umbraco to achieve the same thing.

My motto is to keep things simple where possible, but yet again if I have missed the point let me know.

Warren

Ah I see - you didn't read it entirely then :) No worries look here and take the two posts seperately.

My first example does that - if floats left. (Posted: 13. januar 2009 16:35:45)
1 2
3 4
5 6
7 8
9 10
11 12
13 etc... (floated left)

My second example does the other thing. (Posted: 13. januar 2009 17:22:32)
1 8
2 9
3 10
4 11
5 12
6 13
7

Thanks.

Any one abouve is having idea about multi Row stuff?

What i want to do is following.

<LI>

•  ITEM 1
•  ITEM 2

</LI>

<LI>

•  ITEM 3
•  ITEM 4

</LI>

 

<LI>

•  ITEM 5
•  ITEM 6

</LI>

 

etc.

 

Please let me know if any one have idea about this.

is working on a reply...