Simulating columns?

C

Ciaran

Hi,
I have a very long dynamically generated bulleted list and I'd like to
make it display in columns rather than down the left and side of the
page. I know columns aren't available till CSS 3 but I was wondering
if there's some current cross browser trick or hack that might work
for me?

Cheers
Ciarán
 
B

Bone Ur

Well bust mah britches and call me cheeky, on Sat, 03 Nov 2007 12:17:43 GMT
Ciaran scribed:
Hi,
I have a very long dynamically generated bulleted list and I'd like to
make it display in columns rather than down the left and side of the
page. I know columns aren't available till CSS 3 but I was wondering
if there's some current cross browser trick or hack that might work
for me?

I'd like my money to be in large gold coins rather than paper, and more
numerously extant. Got any tricks for that?
 
D

dorayme

Ciaran said:
Hi,
I have a very long dynamically generated bulleted list and I'd like to
make it display in columns rather than down the left and side of the
page. I know columns aren't available till CSS 3 but I was wondering
if there's some current cross browser trick or hack that might work
for me?

Cheers
Ciarán


If you are asking whether you can make stuff from the bottom of
one col wrap to the to the top of the next col on the right,
forget about it, there is more support for a hen tooth supply
shop.

How long is the list likely to be at its longest? What is the
practical reality here?
 
A

Adrienne Boswell

Hi,
I have a very long dynamically generated bulleted list and I'd like to
make it display in columns rather than down the left and side of the
page. I know columns aren't available till CSS 3 but I was wondering
if there's some current cross browser trick or hack that might work
for me?

Cheers
Ciarán

Server side - get the total items and divide by two. Then loop through and
when you reach that amount, end the list and start another. Float the ul
element.
 
D

dorayme

Adrienne Boswell said:
Server side - get the total items and divide by two. Then loop through and
when you reach that amount, end the list and start another. Float the ul
element.

When you reach what amount?
 
A

Adrienne Boswell

Gazing into my crystal ball I observed dorayme
When you reach what amount?

For example, say there are 20 items in a table. Run the query, get the
recordset, and the count of items in the recordset. Put the recordset
into an array. Close the record set.

total_items = 20
breaknow = total_items/2

loop though the array until you reach breaknow then end the list and
start another. If the total is not an even number, then the last list
will have one extra item.
 
D

dorayme

Adrienne Boswell said:
Gazing into my crystal ball I observed dorayme


For example, say there are 20 items in a table. Run the query, get the
recordset, and the count of items in the recordset. Put the recordset
into an array. Close the record set.

total_items = 20
breaknow = total_items/2

loop though the array until you reach breaknow then end the list and
start another. If the total is not an even number, then the last list
will have one extra item.

Suppose there 400 items. Are you proposing a script that is alive
to the browsers window size or just to split lists into groups of
10?
 
A

Adrienne Boswell

Gazing into my crystal ball I observed dorayme
Suppose there 400 items. Are you proposing a script that is alive
to the browsers window size or just to split lists into groups of
10?

Personally, I would never put 400 items on a single page (even looping
through an array, and certainly not an open recordset), that's what
paging and good database design are about. The above is only an example
to show what _could_ be done with a dynamically generated list. If you
wanted, you could change the divisor based on the total records, eg. <20
=1, >20 and <60 = 2, >60 and <81 = 3, etc.
 
D

dorayme

Adrienne Boswell said:
Gazing into my crystal ball I observed dorayme

Personally, I would never put 400 items on a single page (even looping
through an array, and certainly not an open recordset), that's what
paging and good database design are about.

I have a web page of all the postcodes in Australia. The html
page has more than 17000 lines. I find it very convenient on one
page! For one thing, one does not even need a menu. Searching the
page is dead simple (command F and type first letters of town), I
love it for its artlessness <g>. Yes, an internal menu that was
fixed might also be nice to get to the different states but
anyway... I mention not as a pure aside. If you accept that
sometimes it is convenient to have a lot of stuff on a page,
there is the question of a fluid design that will get as much of
it as will fit on the screen and be convenient to read.

Correct me if I am wrong, your suggestion is to grab the items in
the list and divide them up into fixed-beforehand numbers of
items per ul. And float the ul's. Indeed, this would be fluid and
convenient if the lists were roughly the same length (the number
of items in a list cannot guarantee this, and I don't think
server side is good at semantics. I suppose there could be a
check on list size length built in and so on).

I was interested in this, Adrienne, because I did (but by hand) a
slightly similar thing for a page a while back which was broken
into blocks that floated and was not too bad in using up the
available space, there would be "wrapping" according to view port
width. I carefully arranged the floats based on length so they
would not snag in an ugly way when wrapped (by having the lists
go in size order, smallest first.
 
J

Jonathan N. Little

dorayme said:
When you reach what amount?

I think dorayme is right here, server-side would have no idea what
available size with respect to the browser. I think it would require
some nasty JavaScript to calculate the available space and reposition
the contents. And of course would also have to hook the onresize to do
the process all over again if the user resizes the browser... yuck!
 
B

Bone Ur

Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 02:53:32
GMT Jonathan N. Little scribed:
I think dorayme is right here, server-side would have no idea what
available size with respect to the browser. I think it would require
some nasty JavaScript to calculate the available space and reposition
the contents. And of course would also have to hook the onresize to do
the process all over again if the user resizes the browser... yuck!

Not necessarily. One could use string-length of (record/row), converting
the max to an em number with a reasonable amount of leeway/slop, then float
the tables/containers themselves. The number of containers would be to
taste, -sensible, of course, and their max-width would need to be a
suitable fraction of typical screenwidth. This might break with super-
large font-sizes, but most things do, anyway.
 
J

Jonathan N. Little

Bone said:
Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 02:53:32
GMT Jonathan N. Little scribed:


Not necessarily. One could use string-length of (record/row), converting
the max to an em number with a reasonable amount of leeway/slop, then float
the tables/containers themselves. The number of containers would be to
taste, -sensible, of course, and their max-width would need to be a
suitable fraction of typical screenwidth. This might break with super-
large font-sizes, but most things do, anyway.

But you cannot get the browser viewport via server-side. This is a
client-side job. Also you need to know the height, not the width inorder
to "wrap" to the next column as the OP wishes...more fun...
 
A

Adrienne Boswell

Gazing into my crystal ball I observed dorayme
I have a web page of all the postcodes in Australia. The html
page has more than 17000 lines. I find it very convenient on one
page! For one thing, one does not even need a menu. Searching the
page is dead simple (command F and type first letters of town), I
love it for its artlessness <g>. Yes, an internal menu that was
fixed might also be nice to get to the different states but
anyway... I mention not as a pure aside. If you accept that
sometimes it is convenient to have a lot of stuff on a page,
there is the question of a fluid design that will get as much of
it as will fit on the screen and be convenient to read.

I agree that Ctrl-F or Command F is very simple, but I wonder how many
people really know to use that, or if they would think to do that. I
do, and I love Opera's find in page widget (I use it for Google's cache
all the time).

For example:
SELECT vendor_name, address, city_name, state_abbr, zipcode, phone, fax,
email, product_name, description, category, classification
FROM vendors v, categories c, classicifications cl, products p
WHERE v.id = p.vendor_id
AND p.category_id = c.id
AND p.classification_id = cl.id
AND city_name = 'Los Angeles'
ORDER BY product_name

A query like this could result in thousands of records, a very large
record set. Of course, I put it into an array and close the record set
right away. Still, that's a lot a looping. If you have to loop through
an open recordset, it's even worse.
Correct me if I am wrong, your suggestion is to grab the items in
the list and divide them up into fixed-beforehand numbers of
items per ul. And float the ul's. Indeed, this would be fluid and
convenient if the lists were roughly the same length (the number
of items in a list cannot guarantee this, and I don't think
server side is good at semantics. I suppose there could be a
check on list size length built in and so on).

Yes, because when putting something like this into an array, you can
find out the number of items in the array. I would prefer to do that
than open one recordset to get a count, and another to get the records.
I was interested in this, Adrienne, because I did (but by hand) a
slightly similar thing for a page a while back which was broken
into blocks that floated and was not too bad in using up the
available space, there would be "wrapping" according to view port
width. I carefully arranged the floats based on length so they
would not snag in an ugly way when wrapped (by having the lists
go in size order, smallest first.

Much easier to do it server side. Find out the total, and divide
accordingly. I do most of my developing in ASP, and I'm tired tonight,
otherwise, I'd give you a little sample.
 
A

Adrienne Boswell

But you cannot get the browser viewport via server-side. This is a
client-side job. Also you need to know the height, not the width
inorder to "wrap" to the next column as the OP wishes...more fun...

Getting the height is simple, for example, let's say you have a maximum
of 30 items in your record set. I do most of my development in ASP, so
here it is in ASP.

set rs = createobject("ADODB.Recordset")
rs.Open sql, oconn

if not rs.EOF then
rsarr = rs.getrows()
end if
rs.Close
set rs = nothing 'destroy the recordset
connection.close
set connection = nothing 'destroy the connection to the db


breakrow = ubound(rsarr,2)/2

for i = 0 to breakrow
%>
<li><%=rsarr(0,i)%></li>
<%
next
%>
</ul>
<ul>
<% for i = breakrow+1 to ubound(rsarr,2)%>
<li><%=rsarr(0,i)%></li>
<%
next
%>
</ul>
 
J

Jonathan N. Little

Adrienne said:
Getting the height is simple, for example, let's say you have a maximum
of 30 items in your record set. I do most of my development in ASP, so
here it is in ASP.

set rs = createobject("ADODB.Recordset")
rs.Open sql, oconn

if not rs.EOF then
rsarr = rs.getrows()
end if
rs.Close
set rs = nothing 'destroy the recordset
connection.close
set connection = nothing 'destroy the connection to the db


breakrow = ubound(rsarr,2)/2

for i = 0 to breakrow
%>
<li><%=rsarr(0,i)%></li>
<%
next
%>
</ul>
<ul>
<% for i = breakrow+1 to ubound(rsarr,2)%>
<li><%=rsarr(0,i)%></li>
<%
next
%>
</ul>

Not sure where in there you get the height of the available space in
order to break the recordset into columns....

And if the user resizes his browser window after the page renders?
 
C

Ciaran

Hi all, thanks for the replies on this. The way I've done it in the
past is to group the elements into smaller categorised lists and float
them left. As Dorayme mentioned earlier, I would arrange the lists
shortest to longest to avoid ugly wrapping problems. The problem is,
this technique only works when the order of the lists is not
important.

Another method I've used is Adrienne's solution of getting the total
items and divide them up based on the space available. The problem is,
it's messy to code and doesn't really cater for various screen
resolutions.

In my current case, I'd like to keep the lists in the original order
where possible. I know there's no quick solution but I do this sort of
stuff so often, I would be great to find any answer to the problem!

I may as well give you the url I'm working on - It's a bit of a mess
at the moment as I have the lists floated left and the containers they
are in are shrinking to default height.

http://www.scouttalk.ie/0pages/libraryindex.php
Cheers
Ciarán
 
B

Bone Ur

Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 03:48:34
GMT Jonathan N. Little scribed:
But you cannot get the browser viewport via server-side. This is a
client-side job. Also you need to know the height, not the width
inorder to "wrap" to the next column as the OP wishes...more fun...

Hehe, I had to go back and re-read the original post because I forgot the
stated goal.

The OP doesn't _really_ want columns at all; he wants floating divs of
equal width which "columnize" in an aligned manner filling more of the
horizontal area of the page. At least that's what I get from the
message, and doing it is possible with j/s (except maybe for ie.)
Knowing the viewport size beforehand isn't necessary though the floats
will have to be widthed (in ems) beforehand with care.

The technique has been addressed before on the newsgroup. As I said,
though, this is what I glean from the first post. Maybe I missed
something in the interim.
 
J

Jonathan N. Little

Bone said:
Hehe, I had to go back and re-read the original post because I forgot the
stated goal.

The OP doesn't _really_ want columns at all; he wants floating divs of
equal width which "columnize" in an aligned manner filling more of the
horizontal area of the page. At least that's what I get from the
message, and doing it is possible with j/s (except maybe for ie.)
Knowing the viewport size beforehand isn't necessary though the floats
will have to be widthed (in ems) beforehand with care.

The technique has been addressed before on the newsgroup. As I said,
though, this is what I glean from the first post. Maybe I missed
something in the interim.

You might be right. Hard to say now. Sometimes the OP's "root" questions
is hard to decipher.

If it is just floating blocks, then work out a value for the width in
ems of the UL to accommodate the longest LI entry, if you do not want
line wrapping, and float with margins to taste! Easy...no scripting at
all required.
 
B

Bone Ur

Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 17:32:29
GMT Jonathan N. Little scribed:
You might be right. Hard to say now. Sometimes the OP's "root"
questions is hard to decipher.

If it is just floating blocks, then work out a value for the width in
ems of the UL to accommodate the longest LI entry, if you do not want
line wrapping, and float with margins to taste! Easy...no scripting at
all required.

Arghh!! Yeah, I meant "...it is possible withOUT j/s..."

Floating blocks would probably suffices (again, according to the text of
the orig. post.)
 
D

dorayme

Ciaran said:
Hi all, thanks for the replies on this. The way I've done it in the
past is to group the elements into smaller categorised lists and float
them left. As Dorayme mentioned earlier, I would arrange the lists
shortest to longest to avoid ugly wrapping problems. The problem is,
this technique only works when the order of the lists is not
important.

Another method I've used is Adrienne's solution of getting the total
items and divide them up based on the space available. The problem is,
it's messy to code and doesn't really cater for various screen
resolutions.

In my current case, I'd like to keep the lists in the original order
where possible. I know there's no quick solution but I do this sort of
stuff so often, I would be great to find any answer to the problem!

I may as well give you the url I'm working on - It's a bit of a mess
at the moment as I have the lists floated left and the containers they
are in are shrinking to default height.

http://www.scouttalk.ie/0pages/libraryindex.php
Cheers
Ciarán

You will have read all the suggestions, you will appreciate the
messing about you could go to to get 'close to' your original
goal. But frankly, consider seriously not bothering and saving
yourself a lot of work and a lot of problems. Just have your
lists in one columns that needs to be 'linked into' or 'scrolled
through' or 'keyboard paged downed to'. In another column, you
can have other useful things, *especially* a menu that will be
visible when the page opens to link to the various lists you have
below under the headings: Song books, Ghost, Games etc.

Instead of battering away at a fixed idea of a layout and trying
to solve all the problems with that, question the idea itself and
think of things on the whole. In this case, consider seriously
the above suggestion and avoid yourself the headaches. I believe
your viewers would be advantaged on the whole too.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top